Skip to content

Commit

Permalink
[TASK] adjust news detail template (#283)
Browse files Browse the repository at this point in the history 
Move date, author and category above headline. Move list link to bottom. Add next/prev behaviour.
  • Loading branch information
@pixelmatseriks
Anna Färber authored and pixelmatseriks committed Sep 29, 2017
1 parent 84ab333 commit 5883dc7
Show file tree
Hide file tree
Showing 6 changed files with 235 additions and 48 deletions.
15 changes: 15 additions & 0 deletions Resources/Private/Extensions/News/Partials/Category/Items.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!-- categories -->
<span class="news-list-category" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
<f:for each="{categories}" as="category" iteration="iterator">
<f:if condition="{category.shortcut}">
<f:then>
<f:link.page pageUid="{category.shortcut}">
{category.title}<f:if condition="{iterator.total} > 1 && !{iterator.isLast}">,</f:if>
</f:link.page>
</f:then>
<f:else>
{category.title}<f:if condition="{iterator.total} > 1 && !{iterator.isLast}">,</f:if>
</f:else>
</f:if>
</f:for>
</span>
116 changes: 71 additions & 45 deletions Resources/Private/Extensions/News/Templates/News/Detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ <h3 itemprop="headline">{newsItem.title}</h3>
<div class="news-article-footer">
<p>
<!-- date -->
<span class="news-list-date">
<span class="news-list-date">
<time datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
<f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
<meta itemprop="datePublished" content="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}" />
Expand All @@ -47,7 +47,7 @@ <h3 itemprop="headline">{newsItem.title}</h3>

<f:if condition="{newsItem.tags}">
<!-- Tags -->
<span class="news-list-tags" itemprop="keywords">
<span class="news-list-tags" itemprop="keywords">
<f:for each="{newsItem.tags}" as="tag">
{tag.title}
</f:for>
Expand All @@ -56,7 +56,7 @@ <h3 itemprop="headline">{newsItem.title}</h3>

<f:if condition="{newsItem.author}">
<!-- author -->
<span class="news-list-author" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">
<span class="news-list-author" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">
<f:translate key="author_simple" /> <span itemprop="name">{newsItem.author}</span>
</span>
</f:if>
Expand All @@ -82,41 +82,6 @@ <h3 itemprop="headline">{newsItem.title}</h3>
<f:format.html>{newsItem.bodytext}</f:format.html>
</div>

<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.showSocialShareButtons}">
<f:comment>
Care about the privacy of your readers?
Checkout https://typo3.org/extensions/repository/view/rx_shariff
and it will be used automatically!
</f:comment>
<n:extensionLoaded extensionKey="rx_shariff">
<f:then>
<f:render partial="Detail/Shariff" />
</f:then>
<f:else>
<div class="facebook">
<div class="like">
<n:social.facebook.like />
</div>
<div class="share">
<n:social.facebook.share />
</div>
<div class="twitter">
<n:social.twitter>Twitter</n:social.twitter>
</div>
</div>
</f:else>
</n:extensionLoaded>
</f:if>

<f:if condition="{settings.detail.disqusShortname}">
<div id="disqus_thread"></div>
<n:social.disqus newsItem="{newsItem}"
Expand All @@ -125,11 +90,13 @@ <h3 itemprop="headline">{newsItem.title}</h3>
</f:if>

<!-- related things -->
<div class="clearfix"></div>
<div class="news-related-wrap">
<div class="row">

<f:if condition="{newsItem.allRelatedSorted}">
<!-- Related news records -->
<div class="news-related news-related-news">
<div class="news-related news-related-news col-sm-4">
<h4>
<f:translate key="related-news" />
</h4>
Expand All @@ -141,15 +108,14 @@ <h4>
{related.title}
</n:link>
</li>

</f:for>
</ul>
</div>
</f:if>

<f:if condition="{newsItem.relatedFiles}">
<!-- FAL related files -->
<div class="news-related news-related-files">
<div class="news-related news-related-files col-sm-4">
<h4>
<f:translate key="related-files" />
</h4>
Expand All @@ -172,7 +138,7 @@ <h4>

<f:if condition="{newsItem.relatedLinks}">
<!-- Related links -->
<div class="news-related news-related-links">
<div class="news-related news-related-links col-sm-4">
<h4>
<f:translate key="related-links" />
</h4>
Expand All @@ -186,11 +152,71 @@ <h4>
</ul>
</div>
</f:if>
</div>
</div>
</f:then>
<f:else>

</f:else>
<f:if condition="{settings.detail.showSocialShareButtons}">
<f:comment>
Care about the privacy of your readers?
Checkout https://typo3.org/extensions/repository/view/rx_shariff
and it will be used automatically!
</f:comment>
<n:extensionLoaded extensionKey="rx_shariff">
<f:then>
<f:render partial="Detail/Shariff" />
</f:then>
<f:else>
<div class="facebook">
<div class="like">
<n:social.facebook.like />
</div>
<div class="share">
<n:social.facebook.share />
</div>
<div class="twitter">
<n:social.twitter>Twitter</n:social.twitter>
</div>
</div>
</f:else>
</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"/>
</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"/>
</n:link>
</li>
</f:if>
</ul>
</f:if>
</div>
</n:simplePrevNext>
</f:if>
</f:then>
<f:else> </f:else>
</f:if>
</f:section>

Expand Down
2 changes: 2 additions & 0 deletions Resources/Private/Extensions/News/TypoScript/setup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,5 @@ plugin.tx_news.settings.list.media.dummyImage = typo3conf/ext/theme_t3kit/Resour
#If extension rx_shariff is loaded, define services here
#twitter,facebook,googleplus,linkedin,xing,pinterest,whatsapp,mail,addthis,tumblr,flattr,diaspora,reddit,stumbleupon,threema,info
plugin.tx_news.settings.detail.shariffServices = facebook,twitter,whatsapp

plugin.tx_news.settings.detail.showPrevNext = 1
54 changes: 53 additions & 1 deletion Resources/Public/css/main.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

48 changes: 47 additions & 1 deletion Resources/Public/less/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3962,6 +3962,10 @@
}

/* single view */
.news-single__headline {
margin-top: 0;
}

.news-single .footer {
margin-bottom: 20px;
margin-top: 5px;
Expand All @@ -3980,6 +3984,48 @@
margin-bottom: 4px;
}

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

.next,
.previous {
> a:after {
.icons();

content: "\e91c";
top: 2px;
position: relative;
}
}
}

.pagination {
margin-top: 0;
}

.news-article-footer {
margin-top: 0;
}

.shariff {
margin-bottom: 20px;
}
}

.news-backlink-wrap {
float: left;
margin-bottom: 20px;

> a:before {
.icons();

content: "\e91a";
top: 2px;
position: relative;
}
}

@media (max-width: 580px) {
.news-single .article .news-img-wrap {
float: none;
Expand Down Expand Up @@ -4015,7 +4061,7 @@

.news-related ul {
list-style: none;
padding-left: 20px;
padding-left: 0;
}

.news-related ul li a {
Expand Down
Loading

0 comments on commit 5883dc7

Please sign in to comment.