Skip to content
Code-Schnipsel Gruppen Projekte
Commit 7a05a7b6 erstellt von Michael Danielczok's avatar Michael Danielczok
Dateien durchsuchen

feat: Secoond children slider template added.

Übergeordneter 0360a78d
No related branches found
No related tags found
Keine zugehörigen Merge Requests gefunden
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bin/Controls/Children/Slider.js
+ 11
− 2
Zeige Datei @ 7a05a7b6
......@@ -76,7 +76,13 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
this.getElm().removeClass('quiqqer-bricks-children-slider-mobile');
}
this.$scrollLength = (size.x / 1.2).round();
var Entry = SliderContainer.getElement('.quiqqer-bricks-children-slider-child'),
scrollLen = (size.x / 1.2).round();
if (Entry) {
scrollLen = Entry.getSize().x;
}
this.$scrollLength = scrollLen;
this.$scrollMax = this.$Inner.getScrollSize().x - size.x;
this.$icons.setStyle('line-height', size.y);
this.$onScroll();
......@@ -123,7 +129,10 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
'.quiqqer-bricks-children-slider-container-inner'
);
this.$SlideFX = new Fx.Scroll(this.$Inner);
this.$SlideFX = new Fx.Scroll(this.$Inner, {
duration: 200
});
this.$icons = Elm.getElements('article a .quiqqer-icon');
var scrollSpy = QUIFunctionUtils.debounce(this.$onScroll, 200);
......
bricks.xml
+ 4
− 4
Zeige Datei @ 7a05a7b6
......@@ -129,20 +129,20 @@
</setting>
<setting name="template" type="select">
<locale group="quiqqer/bricks" var="brick.control.setting.template"/>
<locale group="quiqqer/bricks" var="brick.control.slider.template"/>
<option value="onlyImage" selected="selected">
<locale group="quiqqer/bricks"
var="brick.control.setting.template.onlyImages"/>
var="brick.control.slider.template.onlyImages"/>
</option>
<option value="imageAndText" selected="selected">
<locale group="quiqqer/bricks"
var="brick.control.setting.template.imageAndText"/>
var="brick.control.slider.template.imageAndText"/>
</option>
</setting>
<setting name="slideHeight" type="number" min="1">
<locale group="quiqqer/bricks" var="brick.control.setting.slideHeight"/>
<locale group="quiqqer/bricks" var="brick.control.slider.template.slideHeight"/>
</setting>
<setting name="limit" type="number" min="1">
......
locale.xml
+ 14
− 6
Zeige Datei @ 7a05a7b6
......@@ -330,22 +330,30 @@
<de><![CDATA[Seiten hinzufügen]]></de>
<en><![CDATA[Add pages]]></en>
</locale>
<locale name="brick.control.setting.template">
<locale name="brick.control.slider.template">
<de><![CDATA[Slider Vorlage (template)]]></de>
<en><![CDATA[Slider template]]></en>
</locale>
<locale name="brick.control.setting.template.onlyImages">
<locale name="brick.control.slider.template.onlyImages">
<de><![CDATA[Nur Bild (standard)]]></de>
<en><![CDATA[Only image (default)]]></en>
</locale>
<locale name="brick.control.setting.template.imageAndText">
<locale name="brick.control.slider.template.imageAndText">
<de><![CDATA[Bild, Titel und Beschreibung]]></de>
<en><![CDATA[Image, title and description]]></en>
</locale>
<locale name="brick.control.setting.slideHeight">
<locale name="brick.control.slider.template.slideHeight">
<de><![CDATA[Slider Höhe]]></de>
<en><![CDATA[Slider height]]></en>
</locale>
<locale name="brick.control.slider.button" html="true">
<de><![CDATA[Weiter <span class="fa fa-angle-right"></span>]]></de>
<en><![CDATA[More <span class="fa fa-angle-right"></span>]]></en>
</locale>
<locale name="brick.control.slider.more">
<de><![CDATA[Mehr]]></de>
<en><![CDATA[More]]></en>
</locale>
<locale name="brick.control.setting.limit">
<de><![CDATA[Limit]]></de>
<en><![CDATA[Limit]]></en>
......@@ -400,8 +408,8 @@
</locale>
<locale name="brick.control.slider.title">
<de><![CDATA[Bausteine: Seiten-Präsentation]]></de>
<en><![CDATA[Bricks: Site-Presentation]]></en>
<de><![CDATA[Bausteine: Seiten-Präsentation (Carousel)]]></de>
<en><![CDATA[Bricks: Site-Presentation (Carousel)]]></en>
</locale>
<locale name="brick.control.promosliderWallpaper.title">
<de><![CDATA[Bausteine: Promoslider Wallpaper]]></de>
......
src/QUI/Bricks/Controls/Children/Slider.ImageAndText.css 0 → 100644
+ 199
− 0
Zeige Datei @ 7a05a7b6
.quiqqer-bricks-children-slider {
float: none;
position: relative;
width: 100%;
}
.quiqqer-bricks-children-slider-container-wrapper {
position: relative;
}
.quiqqer-bricks-children-slider-container {
float: left;
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
.quiqqer-bricks-children-slider-container-inner {
float: left;
left: 0;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: hidden;
position: absolute;
top: 0;
width: 100%;
}
.quiqqer-bricks-children-slider-container-slide {
display: flex;
margin: 0 !important;
padding: 0 !important;
position: relative;
}
.quiqqer-bricks-children-slider-child {
display: inline-block;
float: none;
height: calc(100% - 2px);
padding: 0;
width: 25%;
flex-shrink: 0;
}
@media screen and (max-width: 1000px) {
.quiqqer-bricks-children-slider-child {
width: 33.3333%;
}
}
@media screen and (max-width: 767px) {
.quiqqer-bricks-children-slider-child {
width: 50%;
}
}
@media screen and (max-width: 500px) {
.quiqqer-bricks-children-slider-child {
width: 300px;
}
}
.quiqqer-bricks-children-slider-child-display {
border: 1px solid #dfe4e4;
display: flex;
flex-direction: column;
height: 100%;
margin-left: 10px;
overflow: hidden;
padding: 0;
}
.quiqqer-bricks-children-slider-child:first-child .quiqqer-bricks-children-slider-child-display {
margin-left: 0;
}
/* image */
.quiqqer-bricks-children-slider-child-image {
flex-shrink: 0;
/*height: 40%;*/
max-height: 40%;
overflow: hidden;
}
.quiqqer-bricks-children-slider-child-image a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.quiqqer-bricks-children-slider-child-image img {
max-height: initial;
max-width: initial;
height: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
width: auto;
width: auto;
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
.quiqqer-bricks-children-slider-child-image img:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* content */
.quiqqer-bricks-children-slider-child-content {
background: #fff;
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 0;
padding: 1rem;
}
.quiqqer-bricks-children-slider-child-content-short {
overflow: hidden;
margin-bottom: 1rem;
}
.quiqqer-bricks-children-slider-child-display-moreLink {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: inherit;
transition: 0.2s all;
}
.quiqqer-bricks-children-slider-child-display-moreLink:hover {
background: #f5f5f5;
}
.quiqqer-bricks-children-slider-child-content a {
margin-top: auto;
}
.quiqqer-bricks-children-slider-child-display-moreLink .fa {
font-size: 80px;
padding: 0 1em;
}
.quiqqer-bricks-children-slider-prev,
.quiqqer-bricks-children-slider-next {
color: #f1f1f1;
cursor: pointer;
font-size: 50px;
height: 100%;
position: absolute;
text-align: center;
top: 0;
visibility: visible;
width: 50px;
z-index: 1;
}
.quiqqer-bricks-children-slider-next {
right: -50px;
}
.quiqqer-bricks-children-slider-prev {
left: -50px;
}
.quiqqer-bricks-children-slider-mobile .quiqqer-bricks-children-slider-next {
background: #fff;
border: 1px solid #f1f1f1;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
right: 20px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.quiqqer-bricks-children-slider-mobile .quiqqer-bricks-children-slider-prev {
background: #fff;
border: 1px solid #f1f1f1;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
left: 20px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.quiqqer-bricks-children-slider-mobile .quiqqer-bricks-children-slider-prev:hover,
.quiqqer-bricks-children-slider-mobile .quiqqer-bricks-children-slider-next:hover {
background: rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
src/QUI/Bricks/Controls/Children/Slider.ImageAndText.html 0 → 100644
+ 67
− 0
Zeige Datei @ 7a05a7b6
{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
<header class="control-header">
<h1>{$this->getAttribute('frontendTitle')}</h1>
</header>
{/if}
{if $this->getAttribute('content') != ""}
<div class="control-content">
{$this->getAttribute('content')}
</div>
{/if}
<div class="quiqqer-bricks-children-slider-container-wrapper"
style="height: {$this->getAttribute('slideHeight')}px;">
<div class="quiqqer-bricks-children-slider-container">
<div class="quiqqer-bricks-children-slider-container-inner">
<ul class="quiqqer-bricks-children-slider-container-slide quiqqer-bricks-children-slider-container-slide__imageAndText"
style="height: {$this->getAttribute('slideHeight')}px;"
>
{strip}
{foreach from=$children item=Child}
<li class="quiqqer-bricks-children-slider-child">
<article class="quiqqer-bricks-children-slider-child-display">
<div class="quiqqer-bricks-children-slider-child-image">
<a href="{url site=$Child}" title="{$Child->getAttribute('title')|escape:'html'}">
{image src=$Child->getAttribute('image_site') title="{$Child->getAttribute('title')|escape:'html'}" width=600}
</a>
</div>
<div class="quiqqer-bricks-children-slider-child-content">
<h4 class="quiqqer-bricks-children-slider-child-content-title">
<a href="{url site=$Child}" title="{$Child->getAttribute('title')|escape:'html'}">
{$Child->getAttribute('title')}
</a>
</h4>
{if $Child->getAttribute('short')}
<div class="quiqqer-bricks-children-slider-child-content-short">
{$Child->getAttribute('short')}
</div>
{/if}
<a href="{url site=$Child}" title="{$Child->getAttribute('title')|escape:'html'}">
{locale group='quiqqer/bricks' var='brick.control.slider.button'}
</a>
</div>
</article>
</li>
{/foreach}
{/strip}
{if $MoreLink}
<li class="quiqqer-bricks-children-slider-child">
<article class="quiqqer-bricks-children-slider-child-display">
<a href="{url site=$MoreLink}" title="{$MoreLink->getAttribute('title')|escape:'html'}"
class="quiqqer-bricks-children-slider-child-display-moreLink">
<span class="fa fa-angle-right"></span>
<span class="quiqqer-bricks-children-slider-moreLink-text">
{locale group='quiqqer/bricks' var='brick.control.slider.more'}
</span>
</a>
</article>
</li>
{/if}
</ul>
</div>
</div>
</div>
src/QUI/Bricks/Controls/Children/Slider.php
+ 5
− 5
Zeige Datei @ 7a05a7b6
......@@ -52,10 +52,6 @@ public function getBody()
$this->setAttribute('slideHeight', $this->getAttribute('height'));
}
if (!$this->getAttribute('slideHeight')) {
$this->setAttribute('slideHeight', 200);
}
if ($this->getAttribute('moreLink')) {
try {
$MoreLink = QUI\Projects\Site\Utils::getSiteByLink($this->getAttribute('moreLink'));
......@@ -76,11 +72,15 @@ public function getBody()
$css = dirname(__FILE__).'/Slider.ImageAndText.css';
if (!$this->getAttribute('slideHeight')) {
$this->setAttribute('slideHeight', 500);
$this->setAttribute('slideHeight', 600);
}
break;
}
if (!$this->getAttribute('slideHeight')) {
$this->setAttribute('slideHeight', 200);
}
$Engine->assign([
'this' => $this,
'children' => $this->getChildren(),
......
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab