Vasanko/cista-storage
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make Order keycaps 1 2 3 clickable to choose sort order by mouse.

Browse Source
This commit is contained in:
LeoVasanko
2026-08-13 04:26:42 +00:00
parent 29e816cb53
commit 226f96c477
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/HeaderMain.vue
+11 -3
View File
@@ -28,9 +28,9 @@
</template> </template>
<div v-if="!props.editorMode && showSortHints" class="sort-hints"> <div v-if="!props.editorMode && showSortHints" class="sort-hints">
<span class="sort-label">Order</span> <span class="sort-label">Order</span>
<span class="keycap">1</span> <button type="button" class="keycap" aria-label="Alphabetical order" @click="store.sort('name')">1</button>
<span class="keycap">2</span> <button type="button" class="keycap" aria-label="Newest first" @click="store.sort('modified')">2</button>
<span class="keycap">3</span> <button type="button" class="keycap" aria-label="Largest first" @click="store.sort('size')">3</button>
</div> </div>
<SvgButton <SvgButton
v-if="props.editorMode" v-if="props.editorMode"
@@ -314,6 +314,14 @@ onUnmounted(() => {
border-radius: 0.3em; border-radius: 0.3em;
padding: 0 0.45em; padding: 0 0.45em;
line-height: 1.4; line-height: 1.4;
cursor: pointer;
transition: all 0.2s ease;
}
.keycap:hover,
.keycap:focus {
background: #e6e6e6;
border-color: #aaa;
transform: scale(1.05);
} }
@media screen and (min-width: 800px) { @media screen and (min-width: 800px) {
.sort-hints { .sort-hints {