Improve app dock/bar

pages/home.php

@@ -6,59 +6,58 @@
  */
 ?>
 
-<div class="app-dock-container mobile-app-hide">
+<div class="mobile-app-hide d-flex justify-content-center flex-wrap">
-    <div class="app-dock">
+    <?php
+    foreach (EXTERNAL_APPS as $a) {
+        ?>
+        <div class="app-dock-item m-2">
+            <p class="mb-0">
+                <a href="<?php echo $a['url']; ?>">
+                    <img class="img-responsive app-icon" src="<?php
+                    if (strpos($a['icon'], "http") !== 0) {
+                        echo $a['url'] . $a['icon'];
+                    } else {
+                        echo $a['icon'];
+                    }
+                    ?>"/>
+                    <span class="d-block text-center"><?php echo $a['title']; ?></span>
+                </a>
+            </p>
+        </div>
         <?php
-        foreach (EXTERNAL_APPS as $a) {
+    }
-            ?>
+    ?>
-            <div class="app-dock-item">
+</div>
-                <p>
+
-                    <a href="<?php echo $a['url']; ?>">
+<div class="mobile-app-hide row mt-4">
-                        <img class="img-responsive app-icon" src="<?php
+    <?php
-                        if (strpos($a['icon'], "http") !== 0) {
+    foreach (EXTERNAL_APPS as $a) {
-                            echo $a['url'] . $a['icon'];
+        if (!isset($a['card'])) {
-                        } else {
+            continue;
-                            echo $a['icon'];
-                        }
-                        ?>"/>
-                        <span><?php echo $a['title']; ?></span>
-                    </a>
-                </p>
-            </div>
-            <?php
         }
         ?>
-        <div class="row mt-4">
+        <div class="col-12 col-sm-6 col-md-4 mb-4">
-            <?php
+            <div class="card bg-<?php echo $a['card']['color']; ?> h-100">
-            foreach (EXTERNAL_APPS as $a) {
+                <div class="card-body align-middle">
-                if (!isset($a['card'])) {
+                    <a href="<?php echo $a['url']; ?>" class="row align-items-center h-100 text-<?php echo (empty($a['card']['text']) ? "light" : $a['card']['text']) ?>">
-                    continue;
+                        <div class="col-4 col-sm-4">
-                }
+                            <img class="img-fluid" src="<?php
-                ?>
+                            if (strpos($a['icon'], "http") !== 0) {
-                <div class="col-12 col-sm-6 col-md-4 mb-4">
+                                echo $a['url'] . $a['icon'];
-                    <div class="card bg-<?php echo $a['card']['color']; ?> h-100">
+                            } else {
-                        <div class="card-body align-middle">
+                                echo $a['icon'];
-                            <a href="<?php echo $a['url']; ?>" class="row align-items-center h-100 text-<?php echo (empty($a['card']['text']) ? "light" : $a['card']['text']) ?>">
+                            }
-                                <div class="col-4 col-sm-4">
+                            ?>"/>
-                                    <img class="img-fluid" src="<?php
-                                    if (strpos($a['icon'], "http") !== 0) {
-                                        echo $a['url'] . $a['icon'];
-                                    } else {
-                                        echo $a['icon'];
-                                    }
-                                    ?>"/>
-                                </div>
-                                <div class="col-12 col-sm-8">
-                                    <span class="h5 font-weight-normal"><?php echo $a['title']; ?></span><br />
-                                    <?php $Strings->get($a['card']['string']); ?>
-                                </div>
-                            </a>
                         </div>
-                    </div>
+                        <div class="col-12 col-sm-8">
+                            <span class="h5 font-weight-normal"><?php echo $a['title']; ?></span><br />
+                            <?php $Strings->get($a['card']['string']); ?>
+                        </div>
+                    </a>
                 </div>
-                <?php
+            </div>
-            }
-            ?>
         </div>
-    </div>
+        <?php
+    }
+    ?>
 </div>

static/css/dock.css

@@ -2,35 +2,15 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-.apppanel {
-    min-height: 250px;
-}
-
-.app-dock-container {
-    display: flex;
-}
-
-.app-dock {
-    margin: 0 auto 10px auto;
-    display: flex;
-    justify-content: space-around;
-    flex-wrap: wrap;
-}
-
 .app-icon {
     border: 1px solid grey;
     border-radius: 20%;
 }
 
 .app-dock-item {
-    padding: 0px 5px 2px 5px;
     min-width: 100px;
 }
 
-.app-dock-item p {
-    margin-bottom: 0px;
-}
-
 .app-dock-item p a {
     font-size: 95%;
     color: #555;
@@ -44,23 +24,4 @@
     width: 50px;
     display: block;
     margin: 0 auto;
-}
-
-.app-dock-item p a span {
-    display: block;
-    text-align: center;
-}
-
-/* Small Devices, Tablets */
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .row.widget-box > .col-sm-6:nth-child(2n+3) {
-        clear: both;
-    }
-}
-
-/* Medium Devices, Desktops */
-@media only screen and (min-width: 992px) {
-    .row.widget-box > .col-md-4:nth-child(3n+4) {
-        clear: both;
-    }
 }