Skip to content
Snippets Groups Projects
Commit 3ff36ccc authored by Michael Kessler's avatar Michael Kessler
Browse files

Merge branch 'feature_latestNewsSlider' into 'master'

Feature latest news slider

See merge request !30
parents ef40d8a5 7571d830
No related branches found
No related tags found
1 merge request!30Feature latest news slider
......@@ -110,5 +110,71 @@
</el>
</ROOT>
</main>
<design>
<ROOT>
<TCEforms>
<sheetTitle>LLL:EXT:sg_news/Resources/Private/Language/locallang_db.xlf:plugin.flexForm.design</sheetTitle>
</TCEforms>
<type>array</type>
<el>
<settings.layout>
<TCEforms>
<label>LLL:EXT:sg_news/Resources/Private/Language/locallang_db.xlf:plugin.flexForm.layout</label>
<description>LLL:EXT:sg_news/Resources/Private/Language/locallang_db.xlf:plugin.flexForm.layout.description</description>
<onChange>reload</onChange>
<config>
<type>select</type>
<renderType>selectSingle</renderType>
<items>
<numIndex index="0">
<numIndex index="0">LLL:EXT:sg_news/Resources/Private/Language/locallang_db.xlf:plugin.flexForm.layout.1</numIndex>
<numIndex index="1">layout-1</numIndex>
</numIndex>
<numIndex index="1">
<numIndex index="0">LLL:EXT:sg_news/Resources/Private/Language/locallang_db.xlf:plugin.flexForm.layout.2</numIndex>
<numIndex index="1">layout-2</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</settings.layout>
<settings.columns>
<TCEforms>
<displayCond>FIELD:settings.layout:=:layout-2</displayCond>
<label>LLL:EXT:sg_news/Resources/Private/Language/locallang_db.xlf:plugin.flexForm.layout.columns</label>
<description>LLL:EXT:sg_news/Resources/Private/Language/locallang_db.xlf:plugin.flexForm.layout.columns.description</description>
<config>
<type>input</type>
<size>1</size>
<placeholder>1</placeholder>
<default>1</default>
<eval>trim,int</eval>
<mode>userOverridePlaceholder</mode>
<range>
<lower>1</lower>
<upper>3</upper>
</range>
</config>
</TCEforms>
</settings.columns>
<settings.navigation>
<TCEforms>
<label>LLL:EXT:sg_news/Resources/Private/Language/locallang_db.xlf:plugin.flexForm.layout.navigation</label>
<config>
<type>check</type>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0"></numIndex>
<numIndex index="1"></numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</settings.navigation>
</el>
</ROOT>
</design>
</sheets>
</T3DataStructure>
......@@ -97,6 +97,10 @@
<source><![CDATA[Descending]]></source>
<target><![CDATA[Absteigend]]></target>
</trans-unit>
<trans-unit id="plugin.flexForm.design" approved="yes">
<source><![CDATA[Design]]></source>
<target><![CDATA[Design]]></target>
</trans-unit>
<trans-unit id="plugin.flexForm.endtime" approved="yes">
<source><![CDATA[Only show news published before]]></source>
<target><![CDATA[Zeige nur News veröffentlicht vor]]></target>
......@@ -105,6 +109,34 @@
<source><![CDATA[News which are excluded from the list]]></source>
<target><![CDATA[News, welche nicht in der Liste dargestellt werden]]></target>
</trans-unit>
<trans-unit id="plugin.flexForm.layout" approved="yes">
<source><![CDATA[Layout]]></source>
<target><![CDATA[Layout]]></target>
</trans-unit>
<trans-unit id="plugin.flexForm.layout.1" approved="yes">
<source><![CDATA[Layout 1]]></source>
<target><![CDATA[Layout 1]]></target>
</trans-unit>
<trans-unit id="plugin.flexForm.layout.2" approved="yes">
<source><![CDATA[Layout 2]]></source>
<target><![CDATA[Layout 2]]></target>
</trans-unit>
<trans-unit id="plugin.flexForm.layout.columns" approved="yes">
<source><![CDATA[Columns]]></source>
<target><![CDATA[Spalten]]></target>
</trans-unit>
<trans-unit id="plugin.flexForm.layout.columns.description" approved="yes">
<source><![CDATA[The number of columns. (1-3)]]></source>
<target><![CDATA[Die Anzahl an Spalten. (1-3)]]></target>
</trans-unit>
<trans-unit id="plugin.flexForm.layout.description" approved="yes">
<source><![CDATA[Layouts have to be implemented to be effective.]]></source>
<target><![CDATA[Layouts müssen implementiert sein um Auswirkungen am Design zu sehen.]]></target>
</trans-unit>
<trans-unit id="plugin.flexForm.layout.navigation" approved="yes">
<source><![CDATA[Navigation dots]]></source>
<target><![CDATA[Navigationspunkte]]></target>
</trans-unit>
<trans-unit id="plugin.flexForm.newsAuthor" approved="yes">
<source><![CDATA[News Author]]></source>
<target><![CDATA[News Autor]]></target>
......
......@@ -75,12 +75,36 @@
<trans-unit id="plugin.flexForm.desc">
<source><![CDATA[Descending]]></source>
</trans-unit>
<trans-unit id="plugin.flexForm.design">
<source><![CDATA[Design]]></source>
</trans-unit>
<trans-unit id="plugin.flexForm.endtime">
<source><![CDATA[Only show news published before]]></source>
</trans-unit>
<trans-unit id="plugin.flexForm.excludedNews">
<source><![CDATA[News which are excluded from the list]]></source>
</trans-unit>
<trans-unit id="plugin.flexForm.layout">
<source><![CDATA[Layout]]></source>
</trans-unit>
<trans-unit id="plugin.flexForm.layout.1">
<source><![CDATA[Layout 1]]></source>
</trans-unit>
<trans-unit id="plugin.flexForm.layout.2">
<source><![CDATA[Layout 2]]></source>
</trans-unit>
<trans-unit id="plugin.flexForm.layout.columns">
<source><![CDATA[Columns]]></source>
</trans-unit>
<trans-unit id="plugin.flexForm.layout.columns.description">
<source><![CDATA[The number of columns. (1-3)]]></source>
</trans-unit>
<trans-unit id="plugin.flexForm.layout.description">
<source><![CDATA[Layouts have to be implemented to be effective.]]></source>
</trans-unit>
<trans-unit id="plugin.flexForm.layout.navigation">
<source><![CDATA[Navigation dots]]></source>
</trans-unit>
<trans-unit id="plugin.flexForm.newsAuthor">
<source><![CDATA[News Author]]></source>
</trans-unit>
......
<f:link.page pageUid="{newsMetaData.news.uid}">
<div class="sg-slide-news-content">
<div class="tx-sgnews-teaser-title">
{headerTag -> f:format.raw()}
{newsMetaData.news.subtitleWithFallbackToTitle}
{closingHeaderTag -> f:format.raw()}
<div class="tx-sgnews-teaser-meta">
<f:alias map="{authorCount: '{newsMetaData.news.newsAuthor -> f:count()}'}">
<f:if condition="{authorCount}">
<span class="author">
<f:for each="{newsMetaData.news.newsAuthor}" as="newsAuthor" iteration="iterator">
<f:alias map="{divider: '{f:if(condition: \'{iterator.cycle} < {authorCount}\', then: \',\')}'}">
<f:if condition="{newsAuthor.name}">
{newsAuthor.name}{divider}
</f:if>
</f:alias>
</f:for>
</span>
</f:if>
</f:alias>
<span class="date">
<f:format.date
format="{f:translate(key:'frontend.dateformat')}">{newsMetaData.news.lastUpdated}</f:format.date>
</span>
<span class="category">
{newsMetaData.category.subtitleWithFallbackToTitle}
</span>
<f:if condition="{newsMetaData.news.tags}">
<span class="tags">
<f:for each="{newsMetaData.news.tags}" as="tag" iteration="it">
{tag.title}<f:if condition="{it.isLast}"><f:else>, </f:else></f:if>
</f:for>
</span>
</f:if>
</div>
</div>
<div class="tx-sgnews-teaser-description">
<f:format.html>{newsMetaData.news.description}</f:format.html>
</div>
</div>
</f:link.page>
<f:layout name="Default" />
<f:section name="main">
<div id="carousel-latest-news" class="sg-slide-element sg-slide-not-initialized sg-slide-medium" data-interval="0">
<f:switch expression="{settings.layout}">
<f:case value="layout-2">
<f:render section="layout-content" arguments="{_all}" />
</f:case>
<f:defaultCase>
<f:render section="layout-default" arguments="{_all}" />
</f:defaultCase>
</f:switch>
</f:section>
<f:section name="layout-content">
<div id="carousel-latest-news" class="sg-slide-element sg-slide-not-initialized sg-slide-{settings.layout}"
data-interval="0" data-current-columns="1"
data-columns="{f:if(condition: '{newsMetaData -> f:count()} > {settings.columns}}', then: '{settings.columns}', else: '{newsMetaData -> f:count()}')}">
<div class="sg-slide-track">
<div class="sg-slide-container">
<f:for each="{newsMetaData}" as="newsMetaDataEntry" iteration="iterator">
<div class="sg-slide {f:if(condition: '{iterator.isFirst}', then: 'active')}">
<f:render partial="TeaserContentOverview" arguments="{
newsMetaData: newsMetaDataEntry,
headerTag: '<h3 class=\"text-left\">',
closingHeaderTag: '</h3>',
showCategory: 0
}" />
</div>
</f:for>
</div>
</div>
<f:if condition="{settings.navigation}">
<ul class="sg-slide-dots">
<f:for each="{newsMetaData}" as="data_item" iteration="iterator">
<li class="sg-slide-dots__indicator"><a class="sg-slide-dots__trigger"></a></li>
</f:for>
</ul>
</f:if>
<div class="sg-slide-prev">
<i class="fa fa-angle-left fa-5x" aria-hidden="true"><span class="sr-only">Previous</span></i>
</div>
<div class="sg-slide-next">
<i class="fa fa-angle-right fa-5x" aria-hidden="true"><span class="sr-only">Next</span></i>
</div>
</div>
</f:section>
<f:section name="layout-default">
<div id="carousel-latest-news" class="sg-slide-element sg-slide-not-initialized sg-slide-medium" data-interval="0" data-columns="1">
<div class="sg-slide-track">
<div class="sg-slide-container">
<f:for each="{newsMetaData}" as="newsMetaDataEntry" iteration="iterator">
......@@ -11,12 +57,20 @@
headerTag: '<h3 class=\"text-center\">',
closingHeaderTag: '</h3>',
showCategory: 1
}" />
}" />
</div>
</f:for>
</div>
</div>
<f:if condition="{settings.navigation}">
<ul class="sg-slide-dots">
<f:for each="{newsMetaData}" as="data_item" iteration="iterator">
<li class="sg-slide-dots__indicator"><a class="sg-slide-dots__trigger"></a></li>
</f:for>
</ul>
</f:if>
<f:if condition="{newsMetaData -> f:count()} > 1">
<div class="sg-slide-prev">
<i class="fa fa-angle-left fa-5x" aria-hidden="true"><span class="sr-only">Previous</span></i>
......
$sg-news-headline-underline-width: 35px;
$sg-news-chevron-color: var(--component-color-primary-background, $black-base);
.sg-slide-layout-2 {
.sg-slide-track,
.sg-slide-container {
background: transparent;
}
.main-content & {
.sg-slide-next,
.sg-slide-prev {
width: 40px;
background: transparent;
display: flex;
}
.sg-slide-next {
right: -5px;
.fa-angle-right {
@include inline-svg($icon-chevron, $sg-news-chevron-color);
}
}
.sg-slide-prev {
left: -5px;
.fa-angle-left {
@include inline-svg($icon-chevron, $sg-news-chevron-color);
}
}
}
.sg-slide-dots {
display: none;
position: relative;
bottom: -10px;
width: auto !important; // stylelint-disable-line
@media (min-width: $screen-sm) {
display: block;
}
}
&[data-current-columns="3"] {
.sg-slide-dots__indicator {
&:not(:nth-child(3n+1)) {
display: none;
}
}
.sg-slide:not(:nth-child(3n+1)) {
border-left: 1px solid $sg-news-border-color;
}
}
&[data-current-columns="2"] {
.sg-slide-dots__indicator {
&:not(:nth-child(2n+1)) {
display: none;
}
}
.sg-slide:not(:nth-child(2n+1)) {
border-left: 1px solid $sg-news-border-color;
}
}
a {
&:hover,
&:focus {
text-decoration: none;
}
}
.sg-slide-news-content {
margin-bottom: 16px;
padding: 0 50px
}
.tx-sgnews-teaser-description {
text-align: justify;
}
.tx-sgnews-teaser-title {
margin-bottom: 10px !important; //stylelint-disable-line
&::after {
display: block;
content: '';
width: $sg-news-headline-underline-width;
height: #{$sg-news-headline-underline-width / 6};
background: $sg-news-foreground-color;
}
}
.tx-sgnews-teaser-meta {
color: var(--component-color-foreground);
// stylelint-disable declaration-no-important
font-size: 1em !important;
text-align: left !important;
// stylelint-enable
margin: -10px 0 5px;
display: flex;
flex-wrap: wrap;
.date::before {
@include inline-svg($icon-regular-calendar-alt, $black-base);
width: 9px;
height: 10px;
margin: 0;
}
.author::before {
@include inline-svg($icon-solid-user, $black-base);
width: 9px;
height: 10px;
margin: 0;
}
.category::before {
@include inline-svg($icon-solid-tag, $black-base);
content: '';
display: inline-block;
width: 9px;
height: 10px;
margin: 0;
}
.tags::before {
@include inline-svg($icon-solid-tags, $black-base);
content: '';
display: inline-block;
width: 9px;
height: 10px;
margin: 0;
}
> span:not(:last-child) {
margin-right: 15px;
}
}
}
@import "layout-content";
// sg_news SingleView pages have two intro-sections,
// so we need to remove the duplicate white space created by the first one
.intro-section + .main-content .tx-sgnews {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment