Skip to content

Commit ef418c5

Browse files
author
Anna Färber
committed
[FEATURE] make news detail page navigation display next and prev news item title & date
1 parent 468043f commit ef418c5

File tree

4 files changed

+128
-40
lines changed

4 files changed

+128
-40
lines changed

‎Resources/Private/Extensions/News/Templates/News/Detail.html‎

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -189,40 +189,55 @@ <h2>
189189
</n:extensionLoaded>
190190
</f:if>
191191

192-
<f:if condition="{settings.backPid}">
193-
<!-- Link Back -->
194-
<div class="news-backlink-wrap">
195-
<f:link.page pageUid="{settings.backPid}">
196-
<f:translate key="back-link" />
197-
</f:link.page>
198-
</div>
199-
</f:if>
200-
201192
<f:if condition="{settings.detail.showPrevNext}">
202193
<f:comment>Show next and previous news item</f:comment>
203194
<n:simplePrevNext pidList="{newsItem.pid}" news="{newsItem}" as="paginated" sortField="datetime">
204195
<div class="page-navigation">
205196
<f:if condition="{paginated}">
206-
<ul class="prev-next">
207-
<f:if condition="{paginated.prev}">
208-
<li class="previous">
209-
<n:link newsItem="{paginated.prev}" settings="{settings}">
210-
<f:translate key="paginate_previous"/>
197+
<f:if condition="{paginated.prev}">
198+
<div class="page-navigation__prev">
199+
<div class="page-navigation__link-wrp js__dotdotdot">
200+
<n:link newsItem="{paginated.prev}" settings="{settings}" class="page-navigation__link">
201+
{paginated.prev.title}
211202
</n:link>
212-
</li>
213-
</f:if>
214-
<f:if condition="{paginated.next}">
215-
<li class="next">
216-
<n:link newsItem="{paginated.next}" settings="{settings}">
217-
<f:translate key="paginate_next"/>
203+
</div>
204+
<span class="page-navigation__date">
205+
<time datetime="{f:format.date(date:paginated.prev.datetime, format:'Y-m-d')}">
206+
<f:format.date format="{f:translate(key:'dateFormat')}">{paginated.prev.datetime}</f:format.date>
207+
<meta itemprop="datePublished" content="{f:format.date(date:paginated.prev.datetime, format:'Y-m-d')}"/>
208+
</time>
209+
</span>
210+
</div>
211+
</f:if>
212+
<f:if condition="{paginated.next}">
213+
<div class="page-navigation__next">
214+
<div class="page-navigation__link-wrp js__dotdotdot">
215+
<n:link newsItem="{paginated.next}" settings="{settings}" class="page-navigation__link">
216+
{paginated.next.title}
218217
</n:link>
219-
</li>
220-
</f:if>
221-
</ul>
218+
</div>
219+
<span class="page-navigation__date">
220+
<time datetime="{f:format.date(date:paginated.next.datetime, format:'Y-m-d')}">
221+
<f:format.date format="{f:translate(key:'dateFormat')}">{paginated.next.datetime}</f:format.date>
222+
<meta itemprop="datePublished" content="{f:format.date(date:paginated.next.datetime, format:'Y-m-d')}"/>
223+
</time>
224+
</span>
225+
</div>
226+
</f:if>
222227
</f:if>
223228
</div>
224229
</n:simplePrevNext>
225230
</f:if>
231+
232+
<f:if condition="{settings.backPid}">
233+
<!-- Link Back -->
234+
<div class="news-backlink-wrap">
235+
<f:link.page pageUid="{settings.backPid}">
236+
<f:translate key="back-link" />
237+
</f:link.page>
238+
</div>
239+
</f:if>
240+
</f:then>
226241
</f:then>
227242
<f:else> </f:else>
228243
</f:if>

‎felayout_t3kit/dev/js/main/general.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,17 @@
1818
})
1919
})
2020
})
21+
22+
// Apply dotdotdot.js jquery function on elements with ".js__dotdotdot" class.
23+
var $dotdotdot = $('.js__dotdotdot')
24+
25+
if ($dotdotdot.length) {
26+
$dotdotdot.each(function () {
27+
$(this).dotdotdot({
28+
watch: 'window'
29+
})
30+
})
31+
}
2132
})(jQuery)
2233

2334
// ^^^^^^^^^^ general.js ^^^^^^^^^^^

‎felayout_t3kit/dev/styles/main/mixins.less‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,3 +58,30 @@
5858
border-color: darken(@border, 10%);
5959
}
6060
}
61+
62+
// =====================================================================
63+
// Add link arrow with circle on pseudo elements before or after =======
64+
// =====================================================================
65+
.link-arrow--circle(@color: @main-link-color; @position: left) {
66+
&:before,
67+
&:after {
68+
color: @color;
69+
display: inline-block;
70+
71+
.icons();
72+
}
73+
74+
& when (@position = left) {
75+
&:before {
76+
content: "\e91a";
77+
margin-right: 3px;
78+
}
79+
}
80+
81+
& when (@position = right) {
82+
&:after {
83+
content: "\e91c";
84+
margin-left: 3px;
85+
}
86+
}
87+
}

‎felayout_t3kit/dev/styles/main/plugins/news/news.less‎

Lines changed: 52 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -177,22 +177,60 @@
177177

178178
.news-single {
179179
.page-navigation {
180-
margin-top: 0;
180+
margin-bottom: 25px;
181+
182+
// clearfix for .page-navigation
183+
&:before,
184+
&:after {
185+
content: " ";
186+
display: table;
187+
clear: both;
188+
}
181189

182-
.next,
183-
.previous {
184-
> a:after {
185-
.icons();
190+
&__prev,
191+
&__next {
192+
width: 50%;
193+
float: left;
194+
position: relative;
186195

187-
content: "\e91c";
196+
&:before,
197+
&:after {
198+
position: absolute;
188199
top: 2px;
189-
position: relative;
190200
}
191201
}
192-
}
193202

194-
.pagination {
195-
margin-top: 0;
203+
&__next {
204+
text-align: right;
205+
padding: 0 25px 0 15px;
206+
207+
.link-arrow--circle(@position: right);
208+
209+
&:after {
210+
right: 0;
211+
}
212+
}
213+
214+
&__prev {
215+
padding: 0 15px 0 25px;
216+
217+
.link-arrow--circle();
218+
219+
&:before {
220+
left: 0;
221+
}
222+
}
223+
224+
// Set max-height to crop words with dotdotdot.js after two lines
225+
&__link-wrp {
226+
max-height: 45px;
227+
}
228+
229+
&__date {
230+
display: block;
231+
font-size: @font-size-small;
232+
margin-top: 5px;
233+
}
196234
}
197235

198236
.news-article-footer {
@@ -208,13 +246,7 @@
208246
float: left;
209247
margin-bottom: 20px;
210248

211-
> a:before {
212-
.icons();
213-
214-
content: "\e91a";
215-
top: 2px;
216-
position: relative;
217-
}
249+
.link-arrow--circle();
218250
}
219251

220252
@media (max-width: 580px) {
@@ -253,6 +285,7 @@
253285
.news-related ul {
254286
list-style: none;
255287
padding-left: 0;
288+
display: inline-block;
256289
}
257290

258291
.news-related ul li a {
@@ -475,10 +508,12 @@
475508
background: #ddd;
476509
padding: 4px 10px;
477510
}
511+
478512
// news small fixes
479513
.news-single .facebook > .twitter {
480514
padding-top: 6px;
481515
}
516+
482517
// fix social links on news-single page
483518
.news-single .article > .facebook {
484519
overflow: hidden;

0 commit comments

Comments
 (0)