diff --git a/src/App.vue b/src/App.vue index 764d3d9..d438fd8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -50,11 +50,12 @@ .navigation-icons-gutter { position: fixed; - height: 100vh; + height: calc(100vh - var(--header-size)); margin: 0; top: var(--header-size); width: var(--header-size); background-color: var(--background-color-secondary); + overflow-y: scroll; } .content { @@ -62,7 +63,6 @@ grid-column: 2 / 3; width: calc(100% - var(--header-size)); grid-row: 2; - z-index: 5; @include mobile { grid-column: 1 / 3; diff --git a/src/components/settings/StorageSectionBrowser.vue b/src/components/settings/StorageSectionBrowser.vue index 77f057d..9fe21c4 100644 --- a/src/components/settings/StorageSectionBrowser.vue +++ b/src/components/settings/StorageSectionBrowser.vue @@ -29,19 +29,20 @@ }} {{ section.totalSize }} - - - +
+ + + + +
import { ref } from "vue"; import IconClose from "@/icons/IconClose.vue"; + import IconExpandVertical from "@/icons/IconExpandVertical.vue"; + import IconShrinkVertical from "@/icons/IconShrinkVertical.vue"; interface StorageItem { key: string; @@ -210,15 +213,14 @@ color: var(--text-color-50); font-family: monospace; } + &__chevron { + position: absolute; width: 20px; height: 20px; - stroke: var(--text-color-70); - transition: transform 0.2s ease; - &--expanded { - transform: rotate(180deg); - } + fill: var(--text-color-70); } + &__content { border-top: 1px solid var(--background-40); } @@ -362,4 +364,22 @@ } } } + + .chevron-container { + width: 20px; + height: 20px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + } + + // Simple crossfade transition + .fade-enter-active, + .fade-leave-active { + transition: opacity 0.3s; + } + .fade-enter, .fade-leave-to { + opacity: 0; + } diff --git a/src/components/torrent/TorrentSearchResults.vue b/src/components/torrent/TorrentSearchResults.vue index 33c73b6..481addc 100644 --- a/src/components/torrent/TorrentSearchResults.vue +++ b/src/components/torrent/TorrentSearchResults.vue @@ -129,6 +129,7 @@ font-size: 20px; color: var(--text-color); text-align: center; + padding-bottom: 1rem; margin: 0; .query { diff --git a/src/components/torrent/TorrentTable.vue b/src/components/torrent/TorrentTable.vue index 2ef0d26..ef730a4 100644 --- a/src/components/torrent/TorrentTable.vue +++ b/src/components/torrent/TorrentTable.vue @@ -259,7 +259,7 @@ padding: 0.5rem 0.6rem; cursor: default; word-break: break-word; - border-left: 1px solid var(--highlight-secondary, var(--highlight-color)); + border-left: 1px solid var(--highlight-color); @include mobile { width: 100%; @@ -301,7 +301,7 @@ tr td:last-of-type { vertical-align: middle; cursor: pointer; - border-right: 1px solid var(--highlight-secondary, var(--highlight-color)); + border-right: 1px solid var(--highlight-color); max-width: 60px; text-align: center; @@ -328,26 +328,19 @@ color: var(--text-color); td { - border-left: 1px solid - var(--highlight-secondary, var(--highlight-color)); + border-left: 1px solid var(--highlight-color); fill: var(--text-color); } } tr:nth-child(odd) { - background-color: var(--highlight-secondary, var(--background-color)); - color: var(--highlight-bg, var(--text-color)); - - td { - fill: var(--highlight-bg, var(--text-color)) !important; - } + background: rgba(0, 0, 0, 0.15); } // last element rounded corner border tr:last-of-type { td { - border-bottom: 1px solid - var(--highlight-secondary, var(--highlight-color)); - border-left: 1px solid var(--highlight-bg, var(--text-color)); + border-bottom: 1px solid var(--highlight-color); + border-left: 1px solid var(--highlight-color); } td:first-of-type { diff --git a/src/components/torrent/TruncatedTorrentResults.vue b/src/components/torrent/TruncatedTorrentResults.vue index e9ad598..9204862 100644 --- a/src/components/torrent/TruncatedTorrentResults.vue +++ b/src/components/torrent/TruncatedTorrentResults.vue @@ -69,7 +69,7 @@ cursor: pointer; background: linear-gradient( to top, - var(--background-color) 20%, + var(--highlight-bg, var(--background-color)) 20%, var(--background-0) 100% ); } diff --git a/src/components/ui/CommandPalette.vue b/src/components/ui/CommandPalette.vue index a6f150d..41f27d2 100644 --- a/src/components/ui/CommandPalette.vue +++ b/src/components/ui/CommandPalette.vue @@ -15,6 +15,8 @@ @keydown.enter.prevent="navigateToSelected" @keydown.esc.prevent="close" @keydown="handleInputKeydown" + @keydown.ctrl.j.prevent="selectNext" + @keydown.ctrl.k.prevent="selectPrevious" /> div:not(:first-child) { + >div:not(:first-child) { margin-left: 1rem; } } .form { - > div, - > input, - > button { + + >div, + >input, + >button { margin-bottom: 1rem; &:last-child {