DatseMultimediaSites
/
Sharkey
mirror of https://activitypub.software/TransFem-org/Sharkey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Style the searchbar

This commit is contained in:
Leah 2024-06-28 16:55:48 +02:00
parent 2ebdc36c7a
commit 1c0b1cab4f
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/frontend/src/components/MkDrive.vue
View File

@ -30,11 +30,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ph-caret-right ph-bold ph-lg"></i></span> <span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ph-caret-right ph-bold ph-lg"></i></span>
<span v-if="folder != null" :class="[$style.navPathItem, $style.navCurrent]">{{ folder.name }}</span> <span v-if="folder != null" :class="[$style.navPathItem, $style.navCurrent]">{{ folder.name }}</span>
</div> </div>
<MkInput :class="$style.navMenu" v-model="searchQuery" :large="true" :autofocus="true" type="search" placeholder="Search drive via alt text or file names" @enter="search"> <div :class="$style.navMenu">
<MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" placeholder="Search drive via alt text or file names" @enter="search">
<template #prefix><i class="ph-magnifying-glass ph-bold ph-lg"></i></template> <template #prefix><i class="ph-magnifying-glass ph-bold ph-lg"></i></template>
</MkInput> </MkInput>
<button class="_button" :class="$style.navMenu" @click="showMenu"><i class="ph-dots-three ph-bold ph-lg"></i></button> <button class="_button" @click="showMenu"><i class="ph-dots-three ph-bold ph-lg"></i></button>
</div>
</nav> </nav>
<div <div
ref="main" ref="main"
@ -160,9 +162,7 @@ const isDragSource = ref(false);
const fetching = ref(true); const fetching = ref(true);
async function search() { async function search() {
const query = searchQuery.value.toString().trim();
fetch(); fetch();
return;
} }
const ilFilesObserver = new IntersectionObserver( const ilFilesObserver = new IntersectionObserver(
@ -762,8 +762,12 @@ onBeforeUnmount(() => {
} }
.navMenu { .navMenu {
display: flex;
margin-left: auto; margin-left: auto;
padding: 0 12px; }
.navMenu > *:not(:last-child) {
padding-right: 12px;
} }
.main { .main {