feat: Mobiles Ansicht

fix: Keine leere DIVs wenn Eigenschaft nicht vorhanden (Titel, Icon, usw).
fix: Abstände, wenn nicht alle Eigenschaften vorhanden.

bin/Controls/CountUpBasicEntry.js

@@ -48,7 +48,7 @@ define('package/quiqqer/presentation-bricks/bin/Controls/CountUpBasicEntry', [
          * event : on import
          */
         $onImport: function () {
-            this.$counter = this.$Elm.getElement('.countUpBasic-entry-number-counter');
+            this.$counter = this.$Elm.getElement('.countUpBasic-entry-header-number-counter');
 
             this.start = this.$counter.get('html').toInt();
             this.end = this.$counter.getAttribute('data-qui-count').toInt();
@@ -63,11 +63,17 @@ define('package/quiqqer/presentation-bricks/bin/Controls/CountUpBasicEntry', [
                 this.$prepareCount();
             }
 
-            QUI.addEvent('scroll', this.$scroll);
+            var self = this;
+
+            QUI.addEvents({
+                scroll: function () {
+                    QUIFunctionUtils.debounce(self.$scroll, 20);
+                }
+            })
         },
 
         $scroll: function () {
-            console.log(1);
+//            console.log(1);
             if (this.scrollFinisch) {
                 QUI.removeEvent('scroll', this.$scroll);
                 return;

src/QUI/PresentationBricks/Controls/CountUpBasic.Simple.css

@@ -3,7 +3,7 @@
 }
 
 .countUpBasic-entry {
-    padding: 10px;
+    padding: 0 20px;
     flex-grow: 1;
     flex-basis: 0;
     text-align: center;
@@ -14,20 +14,20 @@
     border-right: none;
 }
 
-.countUpBasic-entry-row:nth-child(2) {
+.countUpBasic-entry-header div:nth-child(2) {
     margin: 20px 0;
 }
 
-.countUpBasic-entry-icon {
+.countUpBasic-entry-header-icon {
     /*margin-bottom: 2em;*/
 }
 
-.countUpBasic-entry-icon .fa {
+.countUpBasic-entry-header-icon .fa {
     font-size: 36px;
     /*padding: 20px 0 30px;*/
 }
 
-.countUpBasic-entry-number {
+.countUpBasic-entry-header-number {
     font-size: 60px;
     line-height: 100%;
     color: #666;
@@ -38,8 +38,37 @@
 .countUpBasic-entry-title {
     font-size: 24px;
     color: #999;
+    margin: 20px 0;
+    padding-bottom: 0;
+}
+
+.countUpBasic-entry-content {
+    margin-top: 20px;
 }
 
 @media (max-width: 767px) {
+    .countUpBasic-wrapper {
+        display: block;
+    }
+
+    .countUpBasic-entry {
+        border-right: none;
+        margin-bottom: 40px;
+        padding-bottom: 40px;
+        position: relative;
+    }
+
+    .countUpBasic-entry:after {
+        content: '';
+        position: absolute;
+        width: 100px;
+        height: 2px;
+        background: #ddd;
+        left: calc(50% - 50px);
+        bottom: 0;
+    }
 
+    .countUpBasic-entry:last-child:after {
+        display: none;
+    }
 }
\ No newline at end of file

src/QUI/PresentationBricks/Controls/CountUpBasic.Simple.html

@@ -6,38 +6,49 @@
     <div class="countUpBasic-entry"
          data-qui="package/quiqqer/presentation-bricks/bin/Controls/CountUpBasicEntry">
 
+        <div class="countUpBasic-entry-header">
         {if $iconTop}
-        <div class="countUpBasic-entry-row countUpBasic-entry-icon">
-            <span class="fa {$entry.icon} color-main"></span>
-        </div>
+            {if $entry.icon}
+            <div class="countUpBasic-entry-header-icon">
+                <span class="fa {$entry.icon} color-main"></span>
+            </div>
+            {/if}
 
-        <div class="countUpBasic-entry-row countUpBasic-entry-number">
-            <span class="countUpBasic-entry-number-prefix">{$entry.counterValuePrefix}</span>
-            <span class="countUpBasic-entry-number-counter" data-qui-count="{$entry.counterValue}">
-                0
-            </span>
-            <span class="countUpBasic-entry-number-suffix">{$entry.counterValueSuffix}</span>
-        </div>
-        {else}
-        <div class="countUpBasic-entry-row countUpBasic-entry-number">
-            <span class="countUpBasic-entry-number-prefix">{$entry.counterValuePrefix}</span>
-            <span class="countUpBasic-entry-number-counter" data-qui-count="{$entry.counterValue}">
-                0
-            </span>
-            <span class="countUpBasic-entry-number-suffix">{$entry.counterValueSuffix}</span>
-        </div>
+            <div class="countUpBasic-entry-header-number">
+                <span class="countUpBasic-entry-header-number-prefix">{$entry.counterValuePrefix}</span>
+                <span class="countUpBasic-entry-header-number-counter" data-qui-count="{$entry.counterValue}">
+                    0
+                </span>
+                <span class="countUpBasic-entry-header-number-suffix">{$entry.counterValueSuffix}</span>
+            </div>
+            {else}
+            <div class="countUpBasic-entry-header-number">
+                <span class="countUpBasic-entry-header-number-prefix">{$entry.counterValuePrefix}</span>
+                <span class="countUpBasic-entry-header-number-counter" data-qui-count="{$entry.counterValue}">
+                    0
+                </span>
+                <span class="countUpBasic-entry-header-number-suffix">{$entry.counterValueSuffix}</span>
+            </div>
 
-        <div class="countUpBasic-entry-row countUpBasic-entry-icon">
-            <span class="fa {$entry.icon} color-main"></span>
-        </div>
+            {if $entry.icon}
+            <div class="countUpBasic-entry-header-icon">
+                <span class="fa {$entry.icon} color-main"></span>
+            </div>
+            {/if}
         {/if}
+        </div>
 
-        <h2 class="countUpBasic-entry-row countUpBasic-entry-title">
+        {if $entry.title}
+        <h2 class="countUpBasic-entry-title">
             {$entry.title}
         </h2>
-        <div class="countUpBasic-entry-row countUpBasic-entry-content">
+        {/if}
+
+        {if $entry.content}
+        <div class="countUpBasic-entry-content">
             {$entry.content}
         </div>
+        {/if}
     </div>
 
     {/foreach}