updated styling
This commit is contained in:
Graham Steffaniak
parent
cbb39d8abe
commit
87515d9cf9
|
|
@ -5,8 +5,9 @@ rice-box.go
|
|||
.idea/
|
||||
/filebrowser
|
||||
/filebrowser.exe
|
||||
/dist
|
||||
/src/backend/vendor
|
||||
/frontend/dist
|
||||
/backend/vendor
|
||||
|
||||
|
||||
.DS_Store
|
||||
node_modules
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../frontend/dist
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
# Ignore everything in this directory
|
||||
*
|
||||
# Except this file
|
||||
!.gitignore
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -9,8 +9,6 @@
|
|||
"watch": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitignore' -exec rm -r {} + && vue-cli-service build --watch --no-clean"
|
||||
},
|
||||
"dependencies": {
|
||||
"normalize.css": "^8.0.1",
|
||||
"file-loader": "^6.2.0",
|
||||
"ace-builds": "^1.4.7",
|
||||
"clipboard": "^2.0.4",
|
||||
"css-vars-ponyfill": "^2.4.3",
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ nav {
|
|||
background: var(--surfaceSecondary) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 736px) {
|
||||
@media (max-width: 800px) {
|
||||
#file-selection {
|
||||
background: var(--surfaceSecondary) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<div class="button-group">
|
||||
<button
|
||||
v-for="(btn, index) in buttons"
|
||||
:key="index"
|
||||
:class="{ active: activeButton === index }"
|
||||
@click="setActiveButton(index)"
|
||||
>
|
||||
{{ btn.label }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
buttons: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
initialActive: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeButton: this.initialActive,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setActiveButton(index) {
|
||||
// If the clicked button is already active, de-select it
|
||||
if (this.activeButton === index) {
|
||||
this.activeButton = null;
|
||||
this.$emit("remove-button-clicked", this.buttons[index].value);
|
||||
} else {
|
||||
// Emit remove-button-clicked for all other indexes
|
||||
this.buttons.forEach((button, idx) => {
|
||||
if (idx !== index) {
|
||||
this.$emit("remove-button-clicked", button.value);
|
||||
}
|
||||
});
|
||||
|
||||
this.activeButton = index;
|
||||
this.$emit("button-clicked", this.buttons[index].value);
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
initialActive: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
this.activeButton = newVal;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button-group {
|
||||
display: flex;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
height: 3em;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
background-color: #f5f5f5;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
/* Add borders */
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* Remove the border from the last button */
|
||||
.button-group > button:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
button.active {
|
||||
background-color: var(--blue);
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,36 +1,39 @@
|
|||
<template>
|
||||
<div id="search" @click="open" v-bind:class="{ active, ongoing }">
|
||||
<div id="input">
|
||||
<button v-if="active" class="action" @click="close" :aria-label="$t('buttons.close')" :title="$t('buttons.close')">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
<button
|
||||
v-if="active"
|
||||
class="action"
|
||||
@click="close"
|
||||
:aria-label="$t('buttons.close')"
|
||||
:title="$t('buttons.close')"
|
||||
>
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<i v-else class="material-icons">search</i>
|
||||
<input type="text" @keyup.exact="keyup" @input="submit" ref="input" :autofocus="active" v-model.trim="value"
|
||||
:aria-label="$t('search.search')" :placeholder="$t('search.search')" />
|
||||
<input
|
||||
type="text"
|
||||
@keyup.exact="keyup"
|
||||
@input="submit"
|
||||
ref="input"
|
||||
:autofocus="active"
|
||||
v-model.trim="value"
|
||||
:aria-label="$t('search.search')"
|
||||
:placeholder="$t('search.search')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="result" ref="result">
|
||||
<div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
|
||||
<div id="result-list">
|
||||
<br>
|
||||
<br>
|
||||
<div class="button" style="width:100%">Search Context: {{ getContext(this.$route.path) }}</div>
|
||||
<template v-if="isEmpty">
|
||||
<p>{{ text }}</p>
|
||||
<template v-if="value.length === 0">
|
||||
<div class="boxes">
|
||||
<h3>{{ $t("search.types") }}</h3>
|
||||
<div>
|
||||
<div tabindex="0" v-for="(v, k) in boxes" :key="k" role="button" @click="init('type:' + k)"
|
||||
:aria-label="(v.label)">
|
||||
<i class="material-icons">{{ v.icon }}</i>
|
||||
<p>{{ v.label }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<div class="button" style="width: 100%">
|
||||
Search Context: {{ getContext(this.$route.path) }}
|
||||
</div>
|
||||
<ul v-show="results.length > 0">
|
||||
<li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
|
||||
<li
|
||||
v-for="(s, k) in results"
|
||||
:key="k"
|
||||
@click.stop.prevent="navigateTo(s.url)"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<router-link to="#" event="">
|
||||
<i v-if="s.dir" class="material-icons folder-icons"> folder </i>
|
||||
<i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
|
||||
|
|
@ -44,12 +47,83 @@
|
|||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<template v-if="isEmpty">
|
||||
<p>{{ text }}</p>
|
||||
<template v-if="value.length === 0">
|
||||
<div class="boxes">
|
||||
<h3>{{ $t("search.types") }}</h3>
|
||||
<div>
|
||||
<div
|
||||
tabindex="0"
|
||||
v-for="(v, k) in boxes"
|
||||
:key="k"
|
||||
role="button"
|
||||
@click="init('type:' + k)"
|
||||
:aria-label="v.label"
|
||||
>
|
||||
<i class="material-icons">{{ v.icon }}</i>
|
||||
<p>{{ v.label }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isMobile && active" id="result-desktop" ref="result">
|
||||
<div id="result-list">
|
||||
<div class="button" style="width: 100%">
|
||||
Search Context: {{ getContext(this.$route.path) }}
|
||||
</div>
|
||||
<ul v-show="results.length > 0">
|
||||
<li
|
||||
v-for="(s, k) in results"
|
||||
:key="k"
|
||||
@click.stop.prevent="navigateTo(s.url)"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<router-link to="#" event="">
|
||||
<i v-if="s.dir" class="material-icons folder-icons"> folder </i>
|
||||
<i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
|
||||
<i v-else-if="s.image" class="material-icons image-icons"> photo </i>
|
||||
<i v-else-if="s.video" class="material-icons video-icons"> movie </i>
|
||||
<i v-else-if="s.archive" class="material-icons archive-icons"> archive </i>
|
||||
<i v-else class="material-icons file-icons"> insert_drive_file </i>
|
||||
<span class="text-container">
|
||||
{{ basePath(s.path) }}<b>{{ baseName(s.path) }}</b>
|
||||
</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<template >
|
||||
<p v-show="isEmpty" >{{ text }}</p>
|
||||
<template >
|
||||
<div v-show="results.length == 0" class="boxes">
|
||||
<ButtonGroup
|
||||
:buttons="folderSelect"
|
||||
@button-clicked="init"
|
||||
@remove-button-clicked="removeInit"
|
||||
/>
|
||||
<ButtonGroup
|
||||
:buttons="typeSelect"
|
||||
@button-clicked="init"
|
||||
@remove-button-clicked="removeInit"
|
||||
/>
|
||||
<ButtonGroup
|
||||
:buttons="sizeSelect"
|
||||
@button-clicked="init"
|
||||
@remove-button-clicked="removeInit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ButtonGroup from "./ButtonGroup.vue";
|
||||
import { mapState, mapGetters, mapMutations } from "vuex";
|
||||
import { search } from "@/api";
|
||||
|
||||
|
|
@ -66,10 +140,28 @@ var boxes = {
|
|||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ButtonGroup,
|
||||
},
|
||||
name: "search",
|
||||
data: function () {
|
||||
return {
|
||||
folderSelect: [
|
||||
{ label: "Only Folders", value: "type:folder" },
|
||||
{ label: "Only Files", value: "type:file" },
|
||||
],
|
||||
typeSelect: [
|
||||
{ label: "Archives", value: "type:archive" },
|
||||
{ label: "Audio Files", value: "type:audio" },
|
||||
{ label: "Videos", value: "type:video" },
|
||||
{ label: "Documents", value: "type:docs" },
|
||||
],
|
||||
sizeSelect: [
|
||||
{ label: "Smaller than 100MB", value: "type:smaller=100" },
|
||||
{ label: "Larger than 100MB", value: "type:larger=100" },
|
||||
],
|
||||
value: "",
|
||||
width: window.innerWidth,
|
||||
active: false,
|
||||
ongoing: false,
|
||||
results: [],
|
||||
|
|
@ -120,42 +212,42 @@ export default {
|
|||
? this.$t("search.typeToSearch")
|
||||
: this.$t("search.pressToSearch");
|
||||
},
|
||||
isMobile() {
|
||||
return this.width <= 800;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.result.addEventListener("scroll", (event) => {
|
||||
if (
|
||||
event.target.offsetHeight + event.target.scrollTop >=
|
||||
event.target.scrollHeight - 100
|
||||
) {
|
||||
this.resultsCount += 50;
|
||||
}
|
||||
});
|
||||
window.addEventListener("resize", this.handleResize);
|
||||
this.handleResize(); // Call this once to set the initial width
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.width = window.innerWidth;
|
||||
},
|
||||
async navigateTo(url) {
|
||||
this.closeHovers();
|
||||
await this.$nextTick();
|
||||
setTimeout(() => this.$router.push(url), 0);
|
||||
},
|
||||
getContext(url) {
|
||||
url = url.slice(1)
|
||||
let path = "./" + url.substring(url.indexOf('/') + 1);
|
||||
return path.replace(/\/+$/, '') + "/"
|
||||
url = url.slice(1);
|
||||
let path = "./" + url.substring(url.indexOf("/") + 1);
|
||||
return path.replace(/\/+$/, "") + "/";
|
||||
},
|
||||
basePath(str) {
|
||||
if (!str.includes("/")){
|
||||
return ""
|
||||
if (!str.includes("/")) {
|
||||
return "";
|
||||
}
|
||||
let parts = str.replace(/\/$/, '').split("/")
|
||||
parts.pop()
|
||||
return parts.join("/") + "/"
|
||||
let parts = str.replace(/\/$/, "").split("/");
|
||||
parts.pop();
|
||||
return parts.join("/") + "/";
|
||||
},
|
||||
baseName(str) {
|
||||
let parts = str.split("/")
|
||||
let parts = str.split("/");
|
||||
if (str.endsWith("/")) {
|
||||
return parts[parts.length - 2] + "/"
|
||||
return parts[parts.length - 2] + "/";
|
||||
} else {
|
||||
return parts[parts.length - 1]
|
||||
return parts[parts.length - 1];
|
||||
}
|
||||
},
|
||||
...mapMutations(["showHover", "closeHovers", "setReload"]),
|
||||
|
|
@ -174,8 +266,22 @@ export default {
|
|||
this.results.length === 0;
|
||||
},
|
||||
init(string) {
|
||||
this.value = `${string} `;
|
||||
this.$refs.input.focus();
|
||||
if (string == null || string == ""){
|
||||
return false
|
||||
}
|
||||
this.value = `${string} ${this.value}`;
|
||||
if (this.isMobile){
|
||||
this.$refs.input.focus();
|
||||
}
|
||||
},
|
||||
removeInit(string) {
|
||||
if (string == null || string == ""){
|
||||
return false
|
||||
}
|
||||
this.value = this.value.replace(string, "");
|
||||
if (this.isMobile){
|
||||
this.$refs.input.focus();
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.ongoing = false;
|
||||
|
|
@ -184,7 +290,7 @@ export default {
|
|||
},
|
||||
async submit(event) {
|
||||
event.preventDefault();
|
||||
const words = this.value.split(" ").filter(word => word.length < 3);
|
||||
const words = this.value.split(" ").filter((word) => word.length < 3);
|
||||
if (this.value === "" || words.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@media (max-width: 736px) {
|
||||
@media (max-width: 800px) {
|
||||
.share {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* Basic Styles */
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
padding-top: 4em;
|
||||
|
|
@ -11,12 +12,6 @@ body.rtl {
|
|||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*:hover,
|
||||
*:active,
|
||||
*:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
|
@ -28,25 +23,36 @@ img {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
audio,
|
||||
video {
|
||||
audio, video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.break-word {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
.container {
|
||||
width: 95%;
|
||||
max-width: 960px;
|
||||
margin: 1em auto 0;
|
||||
}
|
||||
|
||||
/* Mobile Specific Styles */
|
||||
.mobile-only {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
i.spin {
|
||||
animation: 1s spin linear infinite;
|
||||
}
|
||||
|
||||
/* App Styles */
|
||||
#app {
|
||||
transition: 0.2s ease padding;
|
||||
}
|
||||
|
|
@ -55,18 +61,37 @@ i.spin {
|
|||
padding-bottom: 4em;
|
||||
}
|
||||
|
||||
/* Navigation Styles */
|
||||
nav {
|
||||
width: 16em;
|
||||
position: fixed;
|
||||
top: 4em;
|
||||
left: 0;
|
||||
left: -17em;
|
||||
z-index: 99999;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
transition: .1s ease left;
|
||||
}
|
||||
|
||||
body.rtl nav {
|
||||
left: unset;
|
||||
right: -17em;
|
||||
}
|
||||
|
||||
nav.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body.rtl nav.active {
|
||||
left: unset;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
nav > div {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
nav .action {
|
||||
width: 100%;
|
||||
display: block;
|
||||
|
|
@ -77,41 +102,17 @@ nav .action {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
nav {
|
||||
z-index: 99999;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
width: 16em;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
transition: .1s ease left;
|
||||
left: -17em;
|
||||
}
|
||||
|
||||
body.rtl nav {
|
||||
left: unset;
|
||||
right: -17em;
|
||||
}
|
||||
nav.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body.rtl nav.active {
|
||||
left: unset;
|
||||
right: 0;
|
||||
}
|
||||
body.rtl .action {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav > div {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
nav .action > * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
main {
|
||||
margin: 1em;
|
||||
}
|
||||
|
|
@ -119,15 +120,12 @@ main {
|
|||
.breadcrumbs {
|
||||
height: 3em;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.breadcrumbs span,
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #6f6f6f;
|
||||
}
|
||||
|
||||
.breadcrumbs span,
|
||||
.breadcrumbs a {
|
||||
color: inherit;
|
||||
transition: 0.1s ease-in;
|
||||
|
|
@ -146,12 +144,14 @@ body.rtl .breadcrumbs a {
|
|||
padding: 0.2em;
|
||||
}
|
||||
|
||||
/* Files */
|
||||
.files {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
.progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -168,10 +168,30 @@ body.rtl .breadcrumbs a {
|
|||
transition: 0.2s ease width;
|
||||
}
|
||||
|
||||
.break-word {
|
||||
word-break: break-all;
|
||||
/* Animations */
|
||||
@keyframes flyInFromTop {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#search.active #result-desktop ul li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .3em 0;
|
||||
margin-right: .3em;
|
||||
}
|
||||
|
||||
#result-desktop {
|
||||
animation: flyInFromTop 0.5s forwards;
|
||||
}
|
||||
|
||||
/* File Selection */
|
||||
#file-selection {
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
|
|
@ -185,16 +205,19 @@ body.rtl .breadcrumbs a {
|
|||
max-width: 25em;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#file-selection .action {
|
||||
border-radius: 50%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#file-selection > span {
|
||||
display: inline-block;
|
||||
margin-left: 1em;
|
||||
color: #6f6f6f;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#file-selection .action span {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,28 @@
|
|||
/* Header */
|
||||
header {
|
||||
z-index: 1000;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
position: fixed;
|
||||
justify-content: space-between;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4em;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
height: 4em;
|
||||
display: flex;
|
||||
padding: 0.5em;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: white;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: none) {
|
||||
header {
|
||||
background-color: transparent;
|
||||
backdrop-filter: blur(16px) invert(0.1);
|
||||
}
|
||||
}
|
||||
header > * {
|
||||
|
||||
header>* {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -56,27 +58,14 @@ header>div div {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
#search {
|
||||
position: absolute;
|
||||
height: 3em;
|
||||
width: 50%;
|
||||
max-width: 50em;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0%);
|
||||
}
|
||||
|
||||
#search.active {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
transform: translate(-50%, 0%);
|
||||
}
|
||||
|
||||
#search #input {
|
||||
|
|
@ -90,23 +79,6 @@ header>div div {
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
#search.active #input {
|
||||
border-bottom: 3px solid rgba(0, 0, 0, 0.075);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(6px);
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
#search.active>div {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
#search #input>.action,
|
||||
#search #input>i {
|
||||
margin-right: 0.3em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#search input {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
|
|
@ -117,21 +89,38 @@ header>div div {
|
|||
#result-list {
|
||||
width: 60em;
|
||||
max-width: 100%;
|
||||
padding-top: 3em;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-color: gray;
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
#result-list {
|
||||
padding-top: 0;
|
||||
border-radius: .5em;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
background-color: white;
|
||||
margin-top: 1em;
|
||||
max-height: 80vh;
|
||||
left: 50%;
|
||||
max-width: 90vw;
|
||||
transform: translateX(-50%);
|
||||
box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
}
|
||||
|
||||
.text-container {
|
||||
white-space: nowrap; /* Prevents the text from wrapping */
|
||||
overflow: hidden; /* Hides the content that exceeds the div size */
|
||||
text-overflow: ellipsis; /* Adds "..." when the text overflows */
|
||||
width: 100%; /* Ensures the content takes the full width available */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
#search #result {
|
||||
padding-top: 1em;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
display: flex;
|
||||
|
|
@ -139,19 +128,12 @@ header>div div {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
height: 0;
|
||||
transition: .2s ease height, .2s ease padding;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
#search #result {
|
||||
background: linear-gradient(to right, white 15%,lightgray 25%,lightgray 75%,white 85%);
|
||||
}
|
||||
}
|
||||
|
||||
body.rtl #search #result {
|
||||
direction: ltr;
|
||||
}
|
||||
|
|
@ -165,16 +147,12 @@ body.rtl #search #result {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
/*** RTL - Keep search result LTR because it has paths (in english) ***/
|
||||
/* Search Results */
|
||||
body.rtl #search #result ul>* {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#search.active #result {
|
||||
height: 100vh
|
||||
}
|
||||
|
||||
#search ul {
|
||||
margin-top: 1em;
|
||||
padding: 0;
|
||||
|
|
@ -197,38 +175,28 @@ body.rtl #search #result ul>* {
|
|||
display: block;
|
||||
}
|
||||
|
||||
/* Icon Colors */
|
||||
.folder-icons {
|
||||
color: var(--icon-blue);
|
||||
}
|
||||
|
||||
.video-icons {
|
||||
color: lightskyblue;
|
||||
}
|
||||
|
||||
.image-icons {
|
||||
color: lightcoral;
|
||||
}
|
||||
|
||||
.archive-icons {
|
||||
color: tan;
|
||||
}
|
||||
|
||||
.audio-icons {
|
||||
color: plum;
|
||||
}
|
||||
|
||||
#search.active #result>p>i {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
display: table;
|
||||
}
|
||||
|
||||
#search.active #result ul li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .3em 0;
|
||||
}
|
||||
|
||||
#search.active #result ul li a i {
|
||||
margin-right: .3em;
|
||||
}
|
||||
|
||||
/* Search Input Placeholder */
|
||||
#search::-webkit-input-placeholder {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
|
@ -247,11 +215,12 @@ body.rtl #search #result ul>* {
|
|||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
/* Search Boxes */
|
||||
#search .boxes {
|
||||
border: 1px solid rgba(0, 0, 0, 0.075);
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
margin: 1em 0;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
#search .boxes h3 {
|
||||
|
|
@ -269,9 +238,11 @@ body.rtl #search .boxes h3 {
|
|||
#search .boxes>div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 1em;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 30em;
|
||||
justify-content: space-between;
|
||||
margin-right: -1em;
|
||||
margin-bottom: -1em;
|
||||
}
|
||||
|
||||
#search .boxes>div>div {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,24 @@
|
|||
@media (max-width: 1024px) {
|
||||
|
||||
/* Mobile Only fix div hidden by bottom navigation bar of mobile browser when using height: 100vh */
|
||||
#previewer .preview {
|
||||
height: calc(100% - 4em) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 736px) {
|
||||
@media (max-width: 800px) {
|
||||
body {
|
||||
padding-bottom: 5em;
|
||||
}
|
||||
|
||||
#listing.list .item .size {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#listing.list .item .name {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
#more {
|
||||
display: inherit
|
||||
}
|
||||
|
|
@ -28,6 +32,7 @@
|
|||
header img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#listing {
|
||||
margin-bottom: 5em;
|
||||
}
|
||||
|
|
@ -43,19 +48,76 @@
|
|||
body.rtl #nav .wrapper {
|
||||
margin-right: unset;
|
||||
}
|
||||
|
||||
body.rtl .dashboard .row {
|
||||
margin-right: unset;
|
||||
}
|
||||
|
||||
#search.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#search.active {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#search.active #input {
|
||||
border-bottom: 3px solid rgba(0, 0, 0, 0.075);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(6px);
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
#search.active>div {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
#search.active #result {
|
||||
height: 100vh
|
||||
}
|
||||
|
||||
#search.active #result>p>i {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
display: table;
|
||||
}
|
||||
|
||||
#search.active #result ul li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .3em 0;
|
||||
margin-right: .3em;
|
||||
}
|
||||
|
||||
#search #input>.action,
|
||||
#search #input>i {
|
||||
margin-right: 0.3em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#result-list {
|
||||
padding-top: 3em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 450px) {
|
||||
#listing.list .item .modified {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#listing.list .item .name {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/* Mobile Specific Styles */
|
||||
.mobile-only {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -49,6 +49,7 @@
|
|||
:label="$t('buttons.delete')"
|
||||
show="delete"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-if="loading">
|
||||
|
|
|
|||
Loading…
Reference in New Issue