chiu
/
filebrowser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

updated search

This commit is contained in:
Graham Steffaniak 2023-08-18 18:38:38 -05:00
parent f4c3643e6d
commit a1e3b6df96
3 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/Search.vue
View File

@ -54,10 +54,10 @@
</div> </div>
</div> </div>
<div v-if="!isMobile && active" id="result-desktop" ref="result"> <div v-if="!isMobile && active" id="result-desktop" ref="result">
<div id="result-list"> <div class="searchContext">
<div class="button fluid">
Search Context: {{ getContext(this.$route.path) }} Search Context: {{ getContext(this.$route.path) }}
</div> </div>
<div id="result-list">
<template> <template>
<p v-show="isEmpty && isRunning" id="renew"> <p v-show="isEmpty && isRunning" id="renew">
<i class="material-icons spin">autorenew</i> <i class="material-icons spin">autorenew</i>
@ -120,6 +120,13 @@
.main-input { .main-input {
width: 100% width: 100%
} }
.searchContext {
width: 100%;
padding: .5em 1em;
background: var(--blue);
color: white;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.mobile-boxes { .mobile-boxes {
cursor: pointer; cursor: pointer;
@ -320,14 +327,14 @@ export default {
return path.replace(/\/+$/, "") + "/"; return path.replace(/\/+$/, "") + "/";
}, },
basePath(str) { basePath(str) {
if (!str.includes("/")) { let parts = str.split("/");
return ""; if (parts.length <= 2) {
return "/";
} }
let parts = str.replace(/(\/$|^\/)/, "").split("/"); //remove first and last slash
parts.pop(); parts.pop();
parts = parts.join("/") + "/" parts = parts.join("/") + "/";
if (str.endsWith("/")) { if (str.endsWith("/")){
parts = "/" + parts // weird rtl bug parts = "/" + parts
} }
return parts; return parts;
}, },
@ -338,7 +345,6 @@ export default {
...mapMutations(["showHover", "closeHovers", "setReload"]), ...mapMutations(["showHover", "closeHovers", "setReload"]),
open() { open() {
this.showHover("search"); this.showHover("search");
this.showBoxes = true;
}, },
close(event) { close(event) {
event.stopPropagation(); event.stopPropagation();

10
frontend/src/css/base.css
View File

@ -177,11 +177,11 @@ body.rtl .breadcrumbs a {
} }
} }
#search.active #result-desktop ul li a { #search.active #input {
display: flex; border-top-left-radius: 1em;
align-items: center; border-top-right-radius: 1em;
padding: .3em 0; border-bottom-left-radius: 0px;
margin-right: .3em; border-bottom-right-radius: 0px;
} }
#result-desktop { #result-desktop {

21
frontend/src/css/header.css
View File

@ -61,12 +61,8 @@ header>div div {
/* Search */ /* Search */
#search { #search {
position: absolute; min-width: 40em;
height: 3em; height: 3em;
width: 50%;
max-width: 50em;
left: 50%;
transform: translate(-50%, 0%);
} }
#search #input { #search #input {
@ -75,7 +71,7 @@ header>div div {
height: 100%; height: 100%;
padding: 0em 0.75em; padding: 0em 0.75em;
border-radius: 0.3em; border-radius: 0.3em;
transition: .1s ease all; transition: 1s ease all;
align-items: center; align-items: center;
z-index: 2; z-index: 2;
} }
@ -108,17 +104,18 @@ scrollbar-width: none; /* Firefox */
} }
@media (min-width: 800px) { @media (min-width: 800px) {
#result-list { #result-list {
padding-top: 0; padding-top: 2em;
border-radius: .5em; border-bottom-right-radius: 1em;
border-width: 2px; border-width: 2px;
border-style: solid; border-bottom-left-radius: 1em;
background-color: white; background-color: white;
margin-top: 1em;
max-height: 80vh; max-height: 80vh;
left: 50%; left: 50%;
max-width: 90vw; max-width: 90vw;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3) -webkit-box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
} }
} }
@ -142,7 +139,7 @@ scrollbar-width: none; /* Firefox */
text-align: left; text-align: left;
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
height: 0; height: 0;
transition: .2s ease height, .2s ease padding; transition: 2s ease height, 2s ease padding;
z-index: 1; z-index: 1;
} }