Browse Source

Improve app dock CSS handling of many items (yay fluxbox, screw IE)

tags/v1.0
Skylar Ittner 2 years ago
parent
commit
36a5a194c5
2 changed files with 27 additions and 28 deletions
  1. 22
    20
      home.php
  2. 5
    8
      static/css/app.css

+ 22
- 20
home.php View File

@@ -91,27 +91,29 @@ if (!is_empty($_GET['page'])) {
</div>
</nav>

<div class="app-dock">
<?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>
<div class="app-dock-container">
<div class="app-dock">
<?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>

<?php

+ 5
- 8
static/css/app.css View File

@@ -45,6 +45,10 @@
min-height: 250px;
}

.app-dock-container {
display: flex;
}

.app-dock {
margin: 0 auto 10px auto;
display: flex;
@@ -59,6 +63,7 @@

.app-dock-item {
padding: 0px 5px 2px 5px;
min-width: 100px;
}

.app-dock-item p {
@@ -90,10 +95,6 @@
.row.widget-box > .col-sm-6:nth-child(2n+3) {
clear: both;
}
.app-dock {
max-width: 50%;
}
}

/* Medium Devices, Desktops */
@@ -101,8 +102,4 @@
.row.widget-box > .col-md-4:nth-child(3n+4) {
clear: both;
}
.app-dock {
max-width: 50%;
}
}

Loading…
Cancel
Save