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 {