diff options
| -rw-r--r-- | app/view/templates/media.php | 56 | ||||
| -rw-r--r-- | assets/css/home.css | 25 |
2 files changed, 34 insertions, 47 deletions
diff --git a/app/view/templates/media.php b/app/view/templates/media.php index 7b2fbc1..0d5847e 100644 --- a/app/view/templates/media.php +++ b/app/view/templates/media.php @@ -12,7 +12,9 @@ <main class="media"> -<div id="tree"> +<nav> + <div class="block"> + <h2>Explorer</h2> @@ -49,36 +51,37 @@ treecount($dirlist, 'media', 0, 'media', $dir, $opt); </table> -<h2>filter</h2> - -<form action="" method="get"> - <ul> - <li><input type="checkbox" name="type[]" id="image" value="image" <?= in_array('image', $opt['type']) ? 'checked' : '' ?>><label for="image">image</label></li> - <li><input type="checkbox" name="type[]" id="sound" value="sound" <?= in_array('sound', $opt['type']) ? 'checked' : '' ?>><label for="sound">sound</label></li> - <li><input type="checkbox" name="type[]" id="video" value="video" <?= in_array('video', $opt['type']) ? 'checked' : '' ?>><label for="video">video</label></li> - <li><input type="checkbox" name="type[]" id="other" value="other" <?= in_array('other', $opt['type']) ? 'checked' : '' ?>><label for="other">other</label></li> - </ul> - <select name="" id=""> - <option value="id" <?= $opt['sortby'] === 'id' ? 'selected' : '' ?>>id</option> - <option value="type" <?= $opt['sortby'] === 'type' ? 'selected' : '' ?>>type</option> - <option value="size" <?= $opt['sortby'] === 'size' ? 'selected' : '' ?>>size</option> - </select> - </br> - <input type="radio" name="order" id="asc" value="1" <?= $opt['order'] == 1 ? 'checked' : '' ?>><label for="asc">ascending</label> - </br> - <input type="radio" name="order" id="desc" value="-1" <?= $opt['order'] == -1 ? 'checked' : '' ?>><label for="desc">descending</label> - </br> - <input type="hidden" name="path" value="<?= $dir ?>"> - <input type="submit" value="filter"> - </form> + <h2>filter</h2> -</div> + <form action="" method="get"> + <ul> + <li><input type="checkbox" name="type[]" id="image" value="image" <?= in_array('image', $opt['type']) ? 'checked' : '' ?>><label for="image">image</label></li> + <li><input type="checkbox" name="type[]" id="sound" value="sound" <?= in_array('sound', $opt['type']) ? 'checked' : '' ?>><label for="sound">sound</label></li> + <li><input type="checkbox" name="type[]" id="video" value="video" <?= in_array('video', $opt['type']) ? 'checked' : '' ?>><label for="video">video</label></li> + <li><input type="checkbox" name="type[]" id="other" value="other" <?= in_array('other', $opt['type']) ? 'checked' : '' ?>><label for="other">other</label></li> + </ul> + <select name="" id=""> + <option value="id" <?= $opt['sortby'] === 'id' ? 'selected' : '' ?>>id</option> + <option value="type" <?= $opt['sortby'] === 'type' ? 'selected' : '' ?>>type</option> + <option value="size" <?= $opt['sortby'] === 'size' ? 'selected' : '' ?>>size</option> + </select> + </br> + <input type="radio" name="order" id="asc" value="1" <?= $opt['order'] == 1 ? 'checked' : '' ?>><label for="asc">ascending</label> + </br> + <input type="radio" name="order" id="desc" value="-1" <?= $opt['order'] == -1 ? 'checked' : '' ?>><label for="desc">descending</label> + </br> + <input type="hidden" name="path" value="<?= $dir ?>"> + <input type="submit" value="filter"> + </form> + </div> +</nav> -<div id="explorer"> +<section> + <div class="block"> <h2><?= $dir ?></h2> @@ -105,7 +108,7 @@ foreach ($medialist as $media) { <td><input type="checkbox" name="id[]" value="<?= $media->getfulldir() ?>" form="mediaedit" id="media_<?= $media->id() ?>"></td> <td><label for="media_<?= $media->id() ?>"><?= $media->id() ?></label></td> <td><?= $media->extension() ?></td> - <td><a href="<?= $media->getfullpath() ?>" target="_blank"><?= $media->type() == 'image' ? '<span class="thumbnail">image 👁<img src="' . $media->getfullpath() . '"></span>' : '⧉ ' . $media->type() ?></a></td> + <td><a href="<?= $media->getfullpath() ?>" target="_blank"><?= $media->type() == 'image' ? '<span class="thumbnail">image 👁<img src="' . $media->getfullpath() . '"></span>' : $media->type() . '⧉' ?></a></td> <td><?= $media->size('hr') ?></td> <td><?= $media->width() ?></td> <td><?= $media->height() ?></td> @@ -123,6 +126,7 @@ foreach ($medialist as $media) { </table> </div> +</section> </main> </body> diff --git a/assets/css/home.css b/assets/css/home.css index 89076ef..a51fbb7 100644 --- a/assets/css/home.css +++ b/assets/css/home.css @@ -18,7 +18,7 @@ div#options, article#main { -main.home { +main { display: flex; height: 100%; /* width: 100%; */ @@ -143,7 +143,7 @@ h1, h2 { -main.media div, main.home div#options, main.info nav, main article { +main.info nav, main article { border: solid 1px dimgrey; margin: 1%; background-color: lightgrey; @@ -238,10 +238,6 @@ main.font table#fontlist { max-width: 500px; } -main.media table#medialist { - width: 100%; - max-width: 960px; -} #topbar a.actualpage { text-decoration: underline; @@ -258,13 +254,6 @@ a:hover img.icon { } - - -main.media table#faviconlist { - width: 100%; - max-width: 640px; -} - main.info ul i { color: grey; } @@ -355,13 +344,7 @@ main.media table#medialist .thumbnail:hover img { } -main.media form { - margin: 0.5%; -} -main.media div#tree, main.media div#explorer { - display: inline-grid; -} main.media code { color: #9cbfe8; @@ -465,13 +448,13 @@ main.timeline li.event { -section.pages { +main section { display: flex; flex-direction: column; max-width: calc(100% - 160px); } -.home nav { +main nav { display: flex; flex-direction: column; height: 100%; |