Merge branch 'dev'

bin/css/products.css

@@ -217,6 +217,36 @@
     margin-bottom: 40px;
 }
 
+.quiqqer-category-content__hidden{
+    position: relative;
+}
+
+.quiqqer-category-content-inner {
+    overflow: hidden;
+    position: relative;
+}
+
+.quiqqer-category-content-inner-body {
+    overflow: auto;
+}
+
+.quiqqer-category-content-inner-body__bg {
+    position: absolute;
+    width: 100%;
+    height: 50px;
+    background: linear-gradient(0, #fff 10%, transparent);
+    left: 0;
+    bottom: 0;
+}
+
+.quiqqer-category-content-button {
+    text-align: center;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    bottom: -2rem;
+}
+
 /** Categories
  ============================================== */
 /* categories: gallery */
@@ -555,13 +585,9 @@
 }
 
 .cologne-products-productGallery-products-product-title {
-    font-size: 1.2rem;
     margin: 1em 0;
     max-width: 100%;
-    overflow: hidden;
     text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
 }
 
 .cologne-products-productGallery-products-product-price {

bin/javascript/init.js

@@ -10,6 +10,10 @@ window.addEvent('domready', function () {
 
         initMobileMenu();
 
+        if (document.body.hasClass('type-quiqqer-products-types-category')) {
+            initExpandCategoryContent();
+        }
+
         /**
          * toTop button
          */
@@ -540,6 +544,82 @@ window.addEvent('domready', function () {
             });
         }
 
+        /**
+         * Show content of category site after click on button
+         */
+        function initExpandCategoryContent () {
+            var ButtonContainer = document.getElement('.quiqqer-category-content-button'),
+                Wrapper         = document.getElement('.quiqqer-category-content-inner'),
+                Body            = document.getElement('.quiqqer-category-content-inner-body'),
+                Bg              = document.getElement('.quiqqer-category-content-inner-body__bg');
+
+            if (!ButtonContainer || !Wrapper || !Body) {
+                return;
+            }
+
+            var Button     = ButtonContainer.getElement('button'),
+                realHeight = Body.getSize().y;
+
+            if (!Button) {
+                return;
+            }
+
+
+            if (Wrapper.getSize().y >= realHeight) {
+                // content is small, no button needed
+                Wrapper.setStyle('max-height', null);
+                Button.destroy();
+
+                if (Bg) {
+                    Bg.destroy();
+                }
+
+                return;
+            }
+
+            (function () {
+                Button.setStyle('display', null);
+
+                moofx(Button).animate({
+                    opacity: 1
+                }, {
+                    duration: 200
+                });
+            }).delay(500);
+
+            Button.addEvent('click', function (event) {
+                event.stop();
+
+                moofx(Wrapper).animate({
+                    maxHeight: realHeight
+                }, {
+                    callback: function () {
+                        moofx(ButtonContainer).animate({
+                            opacity: 0
+                        }, {
+                            duration: 200,
+                            callback: function () {
+                                ButtonContainer.destroy();
+                            }
+                        });
+
+                        if (Bg) {
+                            moofx(Bg).animate({
+                                opacity: 0
+                            }, {
+                                duration: 200,
+                                callback: function () {
+                                    Bg.destroy();
+                                }
+                            });
+                        }
+
+                        Wrapper.setStyle('maxHeight', null);
+                    }
+                });
+            });
+        }
+
         // end region functions
 
     });

locale.xml

@@ -361,6 +361,22 @@
             <de><![CDATA[Nach der Produktbeschreibung anzeigen]]></de>
             <en><![CDATA[Show after product description]]></en>
         </locale>
+        <locale name="settings.shop.hideCategoryContent">
+            <de><![CDATA[Seiteninhalt auf Produktkategorie zum Teil verstecken]]></de>
+            <en><![CDATA[Partially hide content on product category site]]></en>
+        </locale>
+        <locale name="settings.shop.hideCategoryContent.desc">
+            <de><![CDATA[Wenn aktiviert, der Inhalt bekommt eine festgesetzte Höhe. Der Rest des Inhalts wird vorerst nicht sichtbar, bis der Benutzer auf den Button "Mehr anzeigen" klickt.]]></de>
+            <en><![CDATA[When enabled, the content gets a fixed height. The rest of the content will not be visible for now, until the user clicks the "Show more" button.]]></en>
+        </locale>
+        <locale name="settings.shop.categoryContentHeight">
+            <de><![CDATA[Maximale Höhe des Inhalts (Kategorie Seite)]]></de>
+            <en><![CDATA[Max content heigt of category site]]></en>
+        </locale>
+        <locale name="frontend.categoryContent.showMoreButton">
+            <de><![CDATA[Mehr anzeigen]]></de>
+            <en><![CDATA[Show more]]></en>
+        </locale>
 
         <locale name="settings.shop.showEquipment">
             <de><![CDATA[Zubehör auf Produktseite]]></de>

quiqqer/products/types/category.html

@@ -137,9 +137,33 @@
             {/if}
 
             {if $Template->getAttribute('content-body') && $Site->getAttribute('content')}
-            <section class="content-body quiqqer-category-content">
-                {$Site->getAttribute('content')}
-            </section>
+                {*
+                Template setting: hide category content
+                *}
+                {if $Project->getConfig('templateCologne.settings.hideCategoryContent')}
+                    {assign var=contentHeight value=80}
+                    {if $Project->getConfig('templateCologne.settings.categoryContentHeight') > 0}
+                        {assign var=contentHeight value=$Project->getConfig('templateCologne.settings.categoryContentHeight')}
+                    {/if}
+                    <section class="content-body quiqqer-category-content quiqqer-category-content__hidden">
+                        <div class="quiqqer-category-content-inner" style="max-height: {$contentHeight}px;">
+                            <div class="quiqqer-category-content-inner-body">
+                                {$Site->getAttribute('content')}
+                                <div class="quiqqer-category-content-inner-body__bg"></div>
+                            </div>
+                        </div>
+                        <div class="quiqqer-category-content-button" >
+                            <button class="btn btn-link" style="display: none; opacity: 0;">
+                                {locale group='quiqqer/template-cologne' var='frontend.categoryContent.showMoreButton'}
+                                <span class="fa fa-angle-down"></span>
+                            </button>
+                        </div>
+                    </section>
+                {else}
+                    <section class="content-body quiqqer-category-content">
+                        {$Site->getAttribute('content')}
+                    </section>
+                {/if}
             {/if}
 
             {$ProductList->create()}

settings.xml

@@ -61,6 +61,13 @@
                         <type><![CDATA[string]]></type>
                         <defaultvalue>afterDesc</defaultvalue>
                     </conf>
+                    <conf name="hideCategoryContent">
+                        <type><![CDATA[bool]]></type>
+                    </conf>
+                    <conf name="categoryContentHeight">
+                        <type><![CDATA[number]]></type>
+                        <defaultvalue>80</defaultvalue>
+                    </conf>
 
                     <!-- header -->
                     <conf name="headerStartPage">
@@ -451,6 +458,27 @@
                                     />
                                 </option>
                             </select>
+
+                            <input conf="templateCologne.settings.hideCategoryContent" type="checkbox">
+                                <text>
+                                    <locale group="quiqqer/template-cologne"
+                                            var="settings.shop.hideCategoryContent"
+                                    />
+                                </text>
+                                <description>
+                                    <locale group="quiqqer/template-cologne"
+                                            var="settings.shop.hideCategoryContent.desc"
+                                    />
+                                </description>
+                            </input>
+
+                            <input conf="templateCologne.settings.categoryContentHeight" type="number" min="0" max="500">
+                                <text>
+                                    <locale group="quiqqer/template-cologne"
+                                            var="settings.shop.categoryContentHeight"
+                                    />
+                                </text>
+                            </input>
                         </settings>
 
                         <!-- header -->