Business/AccountHub
2
0
Fork 2
Code Issues 3 Pull Requests Releases 3 Wiki Activity

Improve app dock/bar

Browse Source
This commit is contained in:
Skylar Ittner 2018-07-23 21:11:20 -06:00
parent a41b6a689e
commit 92162bd1dc
2 changed files with 48 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
pages/home.php
View File

@ -6,13 +6,12 @@
*/ */
?> ?>
<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 <?php
foreach (EXTERNAL_APPS as $a) { foreach (EXTERNAL_APPS as $a) {
?> ?>
<div class="app-dock-item"> <div class="app-dock-item m-2">
<p> <p class="mb-0">
<a href="<?php echo $a['url']; ?>"> <a href="<?php echo $a['url']; ?>">
<img class="img-responsive app-icon" src="<?php <img class="img-responsive app-icon" src="<?php
if (strpos($a['icon'], "http") !== 0) { if (strpos($a['icon'], "http") !== 0) {
@ -21,14 +20,16 @@
echo $a['icon']; echo $a['icon'];
} }
?>"/> ?>"/>
<span><?php echo $a['title']; ?></span> <span class="d-block text-center"><?php echo $a['title']; ?></span>
</a> </a>
</p> </p>
</div> </div>
<?php <?php
} }
?> ?>
<div class="row mt-4"> </div>
<div class="mobile-app-hide row mt-4">
<?php <?php
foreach (EXTERNAL_APPS as $a) { foreach (EXTERNAL_APPS as $a) {
if (!isset($a['card'])) { if (!isset($a['card'])) {
@ -59,6 +60,4 @@
<?php <?php
} }
?> ?>
</div>
</div>
</div> </div>

39
static/css/dock.css
View File

@ -2,35 +2,15 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * 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 { .app-icon {
border: 1px solid grey; border: 1px solid grey;
border-radius: 20%; border-radius: 20%;
} }
.app-dock-item { .app-dock-item {
padding: 0px 5px 2px 5px;
min-width: 100px; min-width: 100px;
} }
.app-dock-item p {
margin-bottom: 0px;
}
.app-dock-item p a { .app-dock-item p a {
font-size: 95%; font-size: 95%;
color: #555; color: #555;
@ -45,22 +25,3 @@
display: block; display: block;
margin: 0 auto; 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;
}
}