Improve styles of media paths

Usbac · Nov 24, 2024 · 76534b2 · 76534b2
1 parent 599cfbb
commit 76534b2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/app/views/admin/partials/media_header.html b/app/views/admin/partials/media_header.html
@@ -5,12 +5,11 @@
         <h2><?= $this->t('media') ?></h2>
         <div>
             <div class="media-paths">
-                <?= $this->include('icons/folder.svg') ?>
                 <?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"><?= e($folder) ?></a>
+                        <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 ?>

diff --git a/public/assets/css/admin/main.css b/public/assets/css/admin/main.css
@@ -886,8 +886,7 @@ textarea.code {
     gap: 6px;
 }
 
-.page-title h2 + span,
-.media-paths > * {
+.page-title h2 + span {
     line-height: 1.8em;
 }
 
@@ -1372,24 +1371,33 @@ textarea.code {
     align-items: center;
     overflow: auto;
     max-width: 80vw;
-    gap: 6px;
-}
-
-.media-paths > svg {
-    margin-right: 4px;
+    gap: 4px;
 }
 
 .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 > a svg {
+    fill: var(--main-color);
 }
 
 .media-paths > a:last-of-type {
     font-weight: var(--font-bold);
 }
 
 .media-paths > span {
-    opacity: 0.3;
+    opacity: 0.6;
 }
 
 .media-paths > span:last-of-type {