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

97
pages/home.php
View File

@ -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 <?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> <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>
<?php </div>
}
?>
</div> </div>
</div> <?php
}
?>
</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;
@ -44,23 +24,4 @@
width: 50px; width: 50px;
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;
}
} }