Improve breadcrumb style

Usbac · Jan 2, 2025 · 5f23824 · 5f23824
1 parent 36d3a96
commit 5f23824
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 45 deletions.
diff --git a/app/views/admin/partials/images_dialog.html b/app/views/admin/partials/images_dialog.html
@@ -6,17 +6,6 @@ <h2><?= $this->t('image_picker') ?></h2>
         </span>
     </div>
     <div class="header">
-        <div class="media-paths">
-            <?= $this->include('icons/folder.svg') ?>
-            <?php $folders = explode('/', trim($path, '/')) ?>
-            <?php foreach ($folders as $i => $folder): ?>
-                <?php $folder_path = implode('/', array_slice($folders, 0, $i + 1)) ?>
-                <?php if (\Aurora\App\Media::isValidPath(\Aurora\Core\Helper::getPath($folder_path))): ?>
-                    <a href="#" class="pointer" onclick="ImageDialog.setImagePage(<?= e(js($folder_path)) ?>)"><?= e($folder) ?></a>
-                    <span>/</span>
-                <?php endif ?>
-            <?php endforeach ?>
-        </div>
         <div id="image-dialog-file-form">
             <button type="button" class="light" onclick="ImageDialog.close(); ImageDialog.clearImage();"><?= $this->t('remove_image') ?></button>
             <button type="button" id="image-dialog-file-button" onclick="get('#image-input-file').click()" <?php if (!\Aurora\App\Permission::can('edit_media')): ?> disabled <?php endif ?>><?= $this->include('icons/upload_file.svg') ?></button>
@@ -75,3 +64,16 @@ <h2><?= $this->t('image_picker') ?></h2>
         <span class="empty"><?= $this->t('no_items') ?></span>
     <?php endif ?>
 </div>
+<div class="media-paths-container">
+    <div class="media-paths">
+        <?= $this->include('icons/folder.svg') ?>
+        <?php $folders = explode('/', trim($path, '/')) ?>
+        <?php foreach ($folders as $i => $folder): ?>
+            <?php $folder_path = implode('/', array_slice($folders, 0, $i + 1)) ?>
+            <?php if (\Aurora\App\Media::isValidPath(\Aurora\Core\Helper::getPath($folder_path))): ?>
+                <a href="#" class="pointer" onclick="ImageDialog.setImagePage(<?= e(js($folder_path)) ?>)"><?= e($folder) ?></a>
+                <span>/</span>
+            <?php endif ?>
+        <?php endforeach ?>
+    </div>
+</div>
diff --git a/app/views/admin/partials/media_header.html b/app/views/admin/partials/media_header.html
@@ -3,22 +3,8 @@
     <?= $this->include('admin/partials/menu_btn.html') ?>
     <div>
         <h2><?= $this->t('media') ?></h2>
-        <div>
-            <div class="media-paths">
-                <?php $paths = explode('/', trim($path, '/')) ?>
-                <?php foreach ($paths as $i => $folder): ?>
-                    <?php $folder_path = implode('/', array_slice($paths, 0, $i + 1)) ?>
-                    <?php if (\Aurora\App\Media::isValidPath(\Aurora\Core\Helper::getPath($folder_path))): ?>
-                        <a href="/admin/media?path=<?= e($folder_path) ?>" class="pointer"><?= $i == 1 ? $this->include('icons/home.svg') : e($folder) ?></a>
-                        <span>/</span>
-                    <?php endif ?>
-                <?php endforeach ?>
-            </div>
-            <div>
-                <span id="total-items">&nbsp;</span>
-                <span id="selected-items"></span>
-            </div>
-        </div>
+        <span id="total-items">&nbsp;</span>
+        <span id="selected-items"></span>
     </div>
 </div>
 <div class="media-options">
@@ -30,6 +16,17 @@ <h2><?= $this->t('media') ?></h2>
     </div>
 </div>
 
+<div class="media-paths">
+    <?php $paths = explode('/', trim($path, '/')) ?>
+    <?php foreach ($paths as $i => $folder): ?>
+        <?php $folder_path = implode('/', array_slice($paths, 0, $i + 1)) ?>
+        <?php if (\Aurora\App\Media::isValidPath(\Aurora\Core\Helper::getPath($folder_path))): ?>
+            <a href="/admin/media?path=<?= e($folder_path) ?>" class="pointer"><?= $i == 1 ? $this->include('icons/home.svg') : e($folder) ?></a>
+            <span>/</span>
+        <?php endif ?>
+    <?php endforeach ?>
+</div>
+
 <div id="edit-dialog" class="dialog">
     <div>
         <div class="top">

diff --git a/public/assets/css/admin/main.css b/public/assets/css/admin/main.css
@@ -88,6 +88,10 @@ img {
     user-select: none;
 }
 
+svg {
+    flex-shrink: 0;
+}
+
 .warning {
     display: flex;
     justify-content: center;
@@ -341,23 +345,24 @@ dialog::backdrop {
     align-items: center;
 }
 
-.image-dialog .media-paths {
-    max-width: 100%;
-    flex-wrap: wrap;
-    position: relative;
-    top: initial;
+.media-paths-container {
+    --margin: 15px;
+    display: flex;
+    position: sticky;
+    left: var(--margin);
+    bottom: var(--margin);
+    overflow: hidden;
+    width: calc(100% - (var(--margin) * 2));
 }
 
-.image-dialog .media-paths > a {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: normal;
+.image-dialog .media-paths {
+    position: relative;
+    max-width: fit-content;
+    bottom: 0;
 }
 
-.image-dialog .media-paths > span,
-.image-dialog .media-paths > a {
-    font-size: var(--font-size-bg);
+.image-dialog .listing {
+    min-height: 100%;
 }
 
 .image-dialog .listing-row:not(.header):hover {
@@ -882,6 +887,7 @@ textarea.code {
     align-items: center;
     justify-content: space-between;
     align-items: flex-start;
+    position: relative;
     width: 100%;
 }
 
@@ -1063,6 +1069,10 @@ textarea.code {
     min-height: initial;
 }
 
+.listing-container {
+    margin-bottom: 40px;
+}
+
 .listing {
     display: flex;
     flex-direction: column;
@@ -1379,25 +1389,39 @@ textarea.code {
 .media-paths {
     display: flex;
     align-items: center;
-    overflow: auto;
-    max-width: 80vw;
+    position: fixed;
+    bottom: 14px;
+    background: var(--fourth-color);
+    border: 1px var(--border-color) solid;
+    border-radius: 6px;
+    box-sizing: border-box;
+    max-width: calc(100vw - var(--nav-width) - (var(--content-spacing) * 2));
+    z-index: calc(var(--nav-z-index) - 2);
+    scrollbar-width: none;
+    padding: 4px 8px;
     gap: 4px;
+    overflow: auto;
 }
 
 .media-paths > a {
     display: flex;
     justify-content: center;
     align-items: center;
-    min-width: 26px;
     min-height: 18px;
     color: var(--main-color);
     text-decoration: none;
-    background: var(--fourth-color);
     padding: 4px 8px;
-    border: 1px var(--border-color) solid;
     border-radius: 6px;
 }
 
+.media-paths > * {
+    font-size: var(--font-size-bg);
+}
+
+.media-paths > a:hover {
+    background-color: var(--third-color);
+}
+
 .media-paths > a svg {
     fill: var(--main-color);
 }
@@ -1501,6 +1525,10 @@ textarea.code {
     .grid.grid-two-columns {
         grid-template-columns: minmax(0, 1fr);
     }
+
+    .media-paths {
+        max-width: calc(100vw - (var(--content-spacing) * 2));
+    }
 }
 
 @media screen and (max-width: 800px) {