Pro-Idler/AccountHub
1
0
Fork 0
forked from Business/AccountHub
Code Issues Pull Requests Projects Releases 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="app-dock">
<div class="mobile-app-hide d-flex justify-content-center flex-wrap">
<?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">
<p>
<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><?php echo $a['title']; ?></span>
</a>
</p>
</div>
<?php
}
?>
</div>
<div class="mobile-app-hide row mt-4">
<?php
foreach (EXTERNAL_APPS as $a) {
if (!isset($a['card'])) {
continue;
}
?>
<div class="row mt-4">
<?php
foreach (EXTERNAL_APPS as $a) {
if (!isset($a['card'])) {
continue;
}
?>
<div class="col-12 col-sm-6 col-md-4 mb-4">
<div class="card bg-<?php echo $a['card']['color']; ?> h-100">
<div class="card-body align-middle">
<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 class="col-12 col-sm-6 col-md-4 mb-4">
<div class="card bg-<?php echo $a['card']['color']; ?> h-100">
<div class="card-body align-middle">
<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>
<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>

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
* 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;
}
}