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

updated styling

This commit is contained in:
Graham Steffaniak 2023-07-30 13:19:03 -05:00
parent cbb39d8abe
commit 87515d9cf9
13 changed files with 6725 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@ -5,8 +5,9 @@ rice-box.go
.idea/ .idea/
/filebrowser /filebrowser
/filebrowser.exe /filebrowser.exe
/dist /frontend/dist
/src/backend/vendor /backend/vendor
.DS_Store .DS_Store
node_modules node_modules

1
backend/frontend/dist Symbolic link
View File

@ -0,0 +1 @@
../../frontend/dist

4
backend/frontend/dist/.gitignore vendored
View File

@ -1,4 +0,0 @@
# Ignore everything in this directory
*
# Except this file
!.gitignore

6408
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
frontend/package.json
View File

@ -9,8 +9,6 @@
"watch": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitignore' -exec rm -r {} + && vue-cli-service build --watch --no-clean" "watch": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitignore' -exec rm -r {} + && vue-cli-service build --watch --no-clean"
}, },
"dependencies": { "dependencies": {
"normalize.css": "^8.0.1",
"file-loader": "^6.2.0",
"ace-builds": "^1.4.7", "ace-builds": "^1.4.7",
"clipboard": "^2.0.4", "clipboard": "^2.0.4",
"css-vars-ponyfill": "^2.4.3", "css-vars-ponyfill": "^2.4.3",

2
frontend/public/themes/dark.css
View File

@ -196,7 +196,7 @@ nav {
background: var(--surfaceSecondary) !important; background: var(--surfaceSecondary) !important;
} }
@media (max-width: 736px) { @media (max-width: 800px) {
#file-selection { #file-selection {
background: var(--surfaceSecondary) !important; background: var(--surfaceSecondary) !important;
} }

94
frontend/src/components/ButtonGroup.vue Normal file
View File

@ -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>

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

@ -1,36 +1,39 @@
<template> <template>
<div id="search" @click="open" v-bind:class="{ active, ongoing }"> <div id="search" @click="open" v-bind:class="{ active, ongoing }">
<div id="input"> <div id="input">
<button v-if="active" class="action" @click="close" :aria-label="$t('buttons.close')" :title="$t('buttons.close')"> <button
<i class="material-icons">arrow_back</i> v-if="active"
class="action"
@click="close"
:aria-label="$t('buttons.close')"
:title="$t('buttons.close')"
>
<i class="material-icons">close</i>
</button> </button>
<i v-else class="material-icons">search</i> <i v-else class="material-icons">search</i>
<input type="text" @keyup.exact="keyup" @input="submit" ref="input" :autofocus="active" v-model.trim="value" <input
:aria-label="$t('search.search')" :placeholder="$t('search.search')" /> 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>
<div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
<div id="result" ref="result">
<div id="result-list"> <div id="result-list">
<br> <div class="button" style="width: 100%">
<br> Search Context: {{ getContext(this.$route.path) }}
<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>
</div>
</template>
</template>
<ul v-show="results.length > 0"> <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=""> <router-link to="#" event="">
<i v-if="s.dir" class="material-icons folder-icons"> folder </i> <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.audio" class="material-icons audio-icons"> volume_up </i>
@ -44,12 +47,83 @@
</router-link> </router-link>
</li> </li>
</ul> </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> </div>
</div> </div>
</template> </template>
<script> <script>
import ButtonGroup from "./ButtonGroup.vue";
import { mapState, mapGetters, mapMutations } from "vuex"; import { mapState, mapGetters, mapMutations } from "vuex";
import { search } from "@/api"; import { search } from "@/api";
@ -66,10 +140,28 @@ var boxes = {
}; };
export default { export default {
components: {
ButtonGroup,
},
name: "search", name: "search",
data: function () { data: function () {
return { 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: "", value: "",
width: window.innerWidth,
active: false, active: false,
ongoing: false, ongoing: false,
results: [], results: [],
@ -120,42 +212,42 @@ export default {
? this.$t("search.typeToSearch") ? this.$t("search.typeToSearch")
: this.$t("search.pressToSearch"); : this.$t("search.pressToSearch");
}, },
isMobile() {
return this.width <= 800;
},
}, },
mounted() { mounted() {
this.$refs.result.addEventListener("scroll", (event) => { window.addEventListener("resize", this.handleResize);
if ( this.handleResize(); // Call this once to set the initial width
event.target.offsetHeight + event.target.scrollTop >=
event.target.scrollHeight - 100
) {
this.resultsCount += 50;
}
});
}, },
methods: { methods: {
handleResize() {
this.width = window.innerWidth;
},
async navigateTo(url) { async navigateTo(url) {
this.closeHovers(); this.closeHovers();
await this.$nextTick(); await this.$nextTick();
setTimeout(() => this.$router.push(url), 0); setTimeout(() => this.$router.push(url), 0);
}, },
getContext(url) { getContext(url) {
url = url.slice(1) url = url.slice(1);
let path = "./" + url.substring(url.indexOf('/') + 1); let path = "./" + url.substring(url.indexOf("/") + 1);
return path.replace(/\/+$/, '') + "/" return path.replace(/\/+$/, "") + "/";
}, },
basePath(str) { basePath(str) {
if (!str.includes("/")) { if (!str.includes("/")) {
return "" return "";
} }
let parts = str.replace(/\/$/, '').split("/") let parts = str.replace(/\/$/, "").split("/");
parts.pop() parts.pop();
return parts.join("/") + "/" return parts.join("/") + "/";
}, },
baseName(str) { baseName(str) {
let parts = str.split("/") let parts = str.split("/");
if (str.endsWith("/")) { if (str.endsWith("/")) {
return parts[parts.length - 2] + "/" return parts[parts.length - 2] + "/";
} else { } else {
return parts[parts.length - 1] return parts[parts.length - 1];
} }
}, },
...mapMutations(["showHover", "closeHovers", "setReload"]), ...mapMutations(["showHover", "closeHovers", "setReload"]),
@ -174,8 +266,22 @@ export default {
this.results.length === 0; this.results.length === 0;
}, },
init(string) { init(string) {
this.value = `${string} `; if (string == null || string == ""){
return false
}
this.value = `${string} ${this.value}`;
if (this.isMobile){
this.$refs.input.focus(); 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() { reset() {
this.ongoing = false; this.ongoing = false;
@ -184,7 +290,7 @@ export default {
}, },
async submit(event) { async submit(event) {
event.preventDefault(); 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) { if (this.value === "" || words.length > 0) {
return; return;
} }

2
frontend/src/css/_share.css
View File

@ -5,7 +5,7 @@
align-items: flex-start; align-items: flex-start;
} }
@media (max-width: 736px) { @media (max-width: 800px) {
.share { .share {
display: block; display: block;
} }

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

@ -1,3 +1,4 @@
/* Basic Styles */
body { body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
padding-top: 4em; padding-top: 4em;
@ -11,12 +12,6 @@ body.rtl {
* { * {
box-sizing: border-box; box-sizing: border-box;
}
*,
*:hover,
*:active,
*:focus {
outline: 0; outline: 0;
} }
@ -28,25 +23,36 @@ img {
max-width: 100%; max-width: 100%;
} }
audio, audio, video {
video {
width: 100%; width: 100%;
} }
.mobile-only { .hidden {
display: none !important; display: none !important;
} }
.break-word {
word-break: break-all;
}
/* Container */
.container { .container {
width: 95%; width: 95%;
max-width: 960px; max-width: 960px;
margin: 1em auto 0; margin: 1em auto 0;
} }
/* Mobile Specific Styles */
.mobile-only {
display: none !important;
}
/* Icons */
i.spin { i.spin {
animation: 1s spin linear infinite; animation: 1s spin linear infinite;
} }
/* App Styles */
#app { #app {
transition: 0.2s ease padding; transition: 0.2s ease padding;
} }
@ -55,18 +61,37 @@ i.spin {
padding-bottom: 4em; padding-bottom: 4em;
} }
/* Navigation Styles */
nav { nav {
width: 16em; width: 16em;
position: fixed; position: fixed;
top: 4em; 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 { body.rtl nav {
left: unset;
right: -17em;
}
nav.active {
left: 0;
}
body.rtl nav.active {
left: unset; left: unset;
right: 0; right: 0;
} }
nav > div {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
nav .action { nav .action {
width: 100%; width: 100%;
display: block; display: block;
@ -77,41 +102,17 @@ nav .action {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; 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 { body.rtl .action {
direction: rtl; direction: rtl;
text-align: right; text-align: right;
} }
nav > div {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
nav .action > * { nav .action > * {
vertical-align: middle; vertical-align: middle;
} }
/* Main Content */
main { main {
margin: 1em; margin: 1em;
} }
@ -119,15 +120,12 @@ main {
.breadcrumbs { .breadcrumbs {
height: 3em; height: 3em;
border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.breadcrumbs span,
.breadcrumbs {
display: flex; display: flex;
align-items: center; align-items: center;
color: #6f6f6f; color: #6f6f6f;
} }
.breadcrumbs span,
.breadcrumbs a { .breadcrumbs a {
color: inherit; color: inherit;
transition: 0.1s ease-in; transition: 0.1s ease-in;
@ -146,12 +144,14 @@ body.rtl .breadcrumbs a {
padding: 0.2em; padding: 0.2em;
} }
/* Files */
.files { .files {
position: absolute; position: absolute;
bottom: 30px; bottom: 30px;
width: 100%; width: 100%;
} }
/* Progress Bar */
.progress { .progress {
position: fixed; position: fixed;
top: 0; top: 0;
@ -168,10 +168,30 @@ body.rtl .breadcrumbs a {
transition: 0.2s ease width; transition: 0.2s ease width;
} }
.break-word { /* Animations */
word-break: break-all; @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 { #file-selection {
position: fixed; position: fixed;
bottom: 1em; bottom: 1em;
@ -185,16 +205,19 @@ body.rtl .breadcrumbs a {
max-width: 25em; max-width: 25em;
z-index: 1; z-index: 1;
} }
#file-selection .action { #file-selection .action {
border-radius: 50%; border-radius: 50%;
width: auto; width: auto;
} }
#file-selection > span { #file-selection > span {
display: inline-block; display: inline-block;
margin-left: 1em; margin-left: 1em;
color: #6f6f6f; color: #6f6f6f;
margin-right: auto; margin-right: auto;
} }
#file-selection .action span { #file-selection .action span {
display: none; display: none;
} }

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

@ -1,25 +1,27 @@
/* Header */
header { header {
z-index: 1000; 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; position: fixed;
justify-content: space-between;
top: 0; top: 0;
left: 0; left: 0;
height: 4em;
width: 100%; width: 100%;
padding: 0; height: 4em;
display: flex; display: flex;
padding: 0.5em;
align-items: center; align-items: center;
justify-content: space-between;
background-color: white; 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) { @supports (backdrop-filter: none) {
header { header {
background-color: transparent; background-color: transparent;
backdrop-filter: blur(16px) invert(0.1); backdrop-filter: blur(16px) invert(0.1);
} }
} }
header>* { header>* {
flex: 0 0 auto; flex: 0 0 auto;
} }
@ -56,10 +58,7 @@ header>div div {
position: relative; position: relative;
} }
#more { /* Search */
display: none;
}
#search { #search {
position: absolute; position: absolute;
height: 3em; height: 3em;
@ -69,16 +68,6 @@ header>div div {
transform: translate(-50%, 0%); transform: translate(-50%, 0%);
} }
#search.active {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 100%;
height: 100%;
z-index: 9999;
}
#search #input { #search #input {
background-color: rgba(100, 100, 100, 0.2); background-color: rgba(100, 100, 100, 0.2);
display: flex; display: flex;
@ -90,23 +79,6 @@ header>div div {
z-index: 2; 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 { #search input {
width: 100%; width: 100%;
border: 0; border: 0;
@ -117,21 +89,38 @@ header>div div {
#result-list { #result-list {
width: 60em; width: 60em;
max-width: 100%; max-width: 100%;
padding-top: 3em;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; 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 { .text-container {
white-space: nowrap; /* Prevents the text from wrapping */ white-space: nowrap;
overflow: hidden; /* Hides the content that exceeds the div size */ overflow: hidden;
text-overflow: ellipsis; /* Adds "..." when the text overflows */ text-overflow: ellipsis;
width: 100%; /* Ensures the content takes the full width available */ width: 100%;
text-align: left; text-align: left;
direction: rtl; direction: rtl;
} }
#search #result { #search #result {
padding-top: 1em;
overflow: hidden; overflow: hidden;
background: white; background: white;
display: flex; display: flex;
@ -139,19 +128,12 @@ header>div div {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: left; text-align: left;
padding: 0;
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;
} }
@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 { body.rtl #search #result {
direction: ltr; direction: ltr;
} }
@ -165,16 +147,12 @@ body.rtl #search #result {
text-align: right; text-align: right;
} }
/*** RTL - Keep search result LTR because it has paths (in english) ***/ /* Search Results */
body.rtl #search #result ul>* { body.rtl #search #result ul>* {
direction: ltr; direction: ltr;
text-align: left; text-align: left;
} }
#search.active #result {
height: 100vh
}
#search ul { #search ul {
margin-top: 1em; margin-top: 1em;
padding: 0; padding: 0;
@ -197,38 +175,28 @@ body.rtl #search #result ul>* {
display: block; display: block;
} }
/* Icon Colors */
.folder-icons { .folder-icons {
color: var(--icon-blue); color: var(--icon-blue);
} }
.video-icons { .video-icons {
color: lightskyblue; color: lightskyblue;
} }
.image-icons { .image-icons {
color: lightcoral; color: lightcoral;
} }
.archive-icons { .archive-icons {
color: tan; color: tan;
} }
.audio-icons { .audio-icons {
color: plum; color: plum;
} }
#search.active #result>p>i { /* Search Input Placeholder */
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::-webkit-input-placeholder { #search::-webkit-input-placeholder {
color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .5);
} }
@ -247,11 +215,12 @@ body.rtl #search #result ul>* {
color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .5);
} }
/* Search Boxes */
#search .boxes { #search .boxes {
border: 1px solid rgba(0, 0, 0, 0.075); border: 1px solid rgba(0, 0, 0, 0.075);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background: #fff; background: #fff;
margin: 1em 0; margin: 1em;
} }
#search .boxes h3 { #search .boxes h3 {
@ -269,9 +238,11 @@ body.rtl #search .boxes h3 {
#search .boxes>div { #search .boxes>div {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 1em;
margin-right: auto;
margin-left: auto;
max-width: 30em;
justify-content: space-between; justify-content: space-between;
margin-right: -1em;
margin-bottom: -1em;
} }
#search .boxes>div>div { #search .boxes>div>div {

64
frontend/src/css/mobile.css
View File

@ -1,20 +1,24 @@
@media (max-width: 1024px) { @media (max-width: 1024px) {
/* Mobile Only fix div hidden by bottom navigation bar of mobile browser when using height: 100vh */ /* Mobile Only fix div hidden by bottom navigation bar of mobile browser when using height: 100vh */
#previewer .preview { #previewer .preview {
height: calc(100% - 4em) !important; height: calc(100% - 4em) !important;
} }
} }
@media (max-width: 736px) { @media (max-width: 800px) {
body { body {
padding-bottom: 5em; padding-bottom: 5em;
} }
#listing.list .item .size { #listing.list .item .size {
display: none; display: none;
} }
#listing.list .item .name { #listing.list .item .name {
width: 60%; width: 60%;
} }
#more { #more {
display: inherit display: inherit
} }
@ -28,6 +32,7 @@
header img { header img {
display: none; display: none;
} }
#listing { #listing {
margin-bottom: 5em; margin-bottom: 5em;
} }
@ -43,19 +48,76 @@
body.rtl #nav .wrapper { body.rtl #nav .wrapper {
margin-right: unset; margin-right: unset;
} }
body.rtl .dashboard .row { body.rtl .dashboard .row {
margin-right: unset; margin-right: unset;
} }
#search.active { #search.active {
display: block; 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) { @media (max-width: 450px) {
#listing.list .item .modified { #listing.list .item .modified {
display: none; display: none;
} }
#listing.list .item .name { #listing.list .item .name {
width: 100%; width: 100%;
} }
} }
/* Mobile Specific Styles */
.mobile-only {
display: none !important;
}

1
frontend/src/views/files/Listing.vue
View File

@ -49,6 +49,7 @@
:label="$t('buttons.delete')" :label="$t('buttons.delete')"
show="delete" show="delete"
/> />
</template>
</div> </div>
<div v-if="loading"> <div v-if="loading">