Skip to content

Commit

Permalink
[FEATURE] make news detail page navigation display next and prev news…
Browse files Browse the repository at this point in the history 
… item title & date (#390)
  • Loading branch information
@aennafae @dmh
aennafae authored and dmh committed May 10, 2018
1 parent 086f56c commit c6c3b24
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 40 deletions.
61 changes: 38 additions & 23 deletions Resources/Private/Extensions/News/Templates/News/Detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,40 +189,55 @@ <h2>
</n:extensionLoaded>
</f:if>

<f:if condition="{settings.backPid}">
<!-- Link Back -->
<div class="news-backlink-wrap">
<f:link.page pageUid="{settings.backPid}">
<f:translate key="back-link" />
</f:link.page>
</div>
</f:if>

<f:if condition="{settings.detail.showPrevNext}">
<f:comment>Show next and previous news item</f:comment>
<n:simplePrevNext pidList="{newsItem.pid}" news="{newsItem}" as="paginated" sortField="datetime">
<div class="page-navigation">
<f:if condition="{paginated}">
<ul class="prev-next">
<f:if condition="{paginated.prev}">
<li class="previous">
<n:link newsItem="{paginated.prev}" settings="{settings}">
<f:translate key="paginate_previous"/>
<f:if condition="{paginated.prev}">
<div class="page-navigation__prev">
<div class="page-navigation__link-wrp js__dotdotdot">
<n:link newsItem="{paginated.prev}" settings="{settings}" class="page-navigation__link">
{paginated.prev.title}
</n:link>
</li>
</f:if>
<f:if condition="{paginated.next}">
<li class="next">
<n:link newsItem="{paginated.next}" settings="{settings}">
<f:translate key="paginate_next"/>
</div>
<span class="page-navigation__date">
<time datetime="{f:format.date(date:paginated.prev.datetime, format:'Y-m-d')}">
<f:format.date format="{f:translate(key:'dateFormat')}">{paginated.prev.datetime}</f:format.date>
<meta itemprop="datePublished" content="{f:format.date(date:paginated.prev.datetime, format:'Y-m-d')}"/>
</time>
</span>
</div>
</f:if>
<f:if condition="{paginated.next}">
<div class="page-navigation__next">
<div class="page-navigation__link-wrp js__dotdotdot">
<n:link newsItem="{paginated.next}" settings="{settings}" class="page-navigation__link">
{paginated.next.title}
</n:link>
</li>
</f:if>
</ul>
</div>
<span class="page-navigation__date">
<time datetime="{f:format.date(date:paginated.next.datetime, format:'Y-m-d')}">
<f:format.date format="{f:translate(key:'dateFormat')}">{paginated.next.datetime}</f:format.date>
<meta itemprop="datePublished" content="{f:format.date(date:paginated.next.datetime, format:'Y-m-d')}"/>
</time>
</span>
</div>
</f:if>
</f:if>
</div>
</n:simplePrevNext>
</f:if>

<f:if condition="{settings.backPid}">
<!-- Link Back -->
<div class="news-backlink-wrap">
<f:link.page pageUid="{settings.backPid}">
<f:translate key="back-link" />
</f:link.page>
</div>
</f:if>
</f:then>
</f:then>
<f:else> </f:else>
</f:if>
Expand Down
11 changes: 11 additions & 0 deletions felayout_t3kit/dev/js/main/general.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,17 @@
})
})
})

// Apply dotdotdot.js jquery function on elements with ".js__dotdotdot" class.
var $dotdotdot = $('.js__dotdotdot')

if ($dotdotdot.length) {
$dotdotdot.each(function () {
$(this).dotdotdot({
watch: 'window'
})
})
}
})(jQuery)

// ^^^^^^^^^^ general.js ^^^^^^^^^^^
27 changes: 27 additions & 0 deletions felayout_t3kit/dev/styles/main/mixins.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,3 +58,30 @@
border-color: darken(@border, 10%);
}
}

// =====================================================================
// Add link arrow with circle on pseudo elements before or after =======
// =====================================================================
.link-arrow--circle(@color: @main-link-color; @position: left) {
&:before,
&:after {
color: @color;
display: inline-block;

.icons();
}

& when (@position = left) {
&:before {
content: "\e91a";
margin-right: 3px;
}
}

& when (@position = right) {
&:after {
content: "\e91c";
margin-left: 3px;
}
}
}
69 changes: 52 additions & 17 deletions felayout_t3kit/dev/styles/main/plugins/news/news.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,22 +177,60 @@

.news-single {
.page-navigation {
margin-top: 0;
margin-bottom: 25px;

// clearfix for .page-navigation
&:before,
&:after {
content: " ";
display: table;
clear: both;
}

.next,
.previous {
> a:after {
.icons();
&__prev,
&__next {
width: 50%;
float: left;
position: relative;

content: "\e91c";
&:before,
&:after {
position: absolute;
top: 2px;
position: relative;
}
}
}

.pagination {
margin-top: 0;
&__next {
text-align: right;
padding: 0 25px 0 15px;

.link-arrow--circle(@position: right);

&:after {
right: 0;
}
}

&__prev {
padding: 0 15px 0 25px;

.link-arrow--circle();

&:before {
left: 0;
}
}

// Set max-height to crop words with dotdotdot.js after two lines
&__link-wrp {
max-height: 45px;
}

&__date {
display: block;
font-size: @font-size-small;
margin-top: 5px;
}
}

.news-article-footer {
Expand All @@ -208,13 +246,7 @@
float: left;
margin-bottom: 20px;

> a:before {
.icons();

content: "\e91a";
top: 2px;
position: relative;
}
.link-arrow--circle();
}

@media (max-width: 580px) {
Expand Down Expand Up @@ -253,6 +285,7 @@
.news-related ul {
list-style: none;
padding-left: 0;
display: inline-block;
}

.news-related ul li a {
Expand Down Expand Up @@ -475,10 +508,12 @@
background: #ddd;
padding: 4px 10px;
}

// news small fixes
.news-single .facebook > .twitter {
padding-top: 6px;
}

// fix social links on news-single page
.news-single .article > .facebook {
overflow: hidden;
Expand Down

0 comments on commit c6c3b24

Please sign in to comment.