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

updated css

This commit is contained in:
Graham Steffaniak 2023-07-31 18:48:51 -05:00
parent f39e561af7
commit ef09213b90
4 changed files with 39 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/components/Sidebar.vue
View File

@ -1,117 +1,65 @@
<template>
<nav :class="{ active }">
<template v-if="isLogged">
<button
class="action"
@click="toRoot"
:aria-label="$t('sidebar.myFiles')"
:title="$t('sidebar.myFiles')"
>
<button class="action" @click="toRoot" :aria-label="$t('sidebar.myFiles')" :title="$t('sidebar.myFiles')">
<i class="material-icons">folder</i>
<span>{{ $t("sidebar.myFiles") }}</span>
</button>
<div v-if="user.perm.create">
<button
@click="$store.commit('showHover', 'newDir')"
class="action"
:aria-label="$t('sidebar.newFolder')"
:title="$t('sidebar.newFolder')"
>
<button @click="$store.commit('showHover', 'newDir')" class="action" :aria-label="$t('sidebar.newFolder')"
:title="$t('sidebar.newFolder')">
<i class="material-icons">create_new_folder</i>
<span>{{ $t("sidebar.newFolder") }}</span>
</button>
<button
@click="$store.commit('showHover', 'newFile')"
class="action"
:aria-label="$t('sidebar.newFile')"
:title="$t('sidebar.newFile')"
>
<button @click="$store.commit('showHover', 'newFile')" class="action" :aria-label="$t('sidebar.newFile')"
:title="$t('sidebar.newFile')">
<i class="material-icons">note_add</i>
<span>{{ $t("sidebar.newFile") }}</span>
</button>
</div>
<div>
<button
class="action"
@click="toSettings"
:aria-label="$t('sidebar.settings')"
:title="$t('sidebar.settings')"
>
<button class="action" @click="toSettings" :aria-label="$t('sidebar.settings')" :title="$t('sidebar.settings')">
<i class="material-icons">settings_applications</i>
<span>{{ $t("sidebar.settings") }}</span>
</button>
<button
v-if="canLogout"
@click="logout"
class="action"
id="logout"
:aria-label="$t('sidebar.logout')"
:title="$t('sidebar.logout')"
>
<button v-if="canLogout" @click="logout" class="action" id="logout" :aria-label="$t('sidebar.logout')"
:title="$t('sidebar.logout')">
<i class="material-icons">exit_to_app</i>
<span>{{ $t("sidebar.logout") }}</span>
</button>
</div>
</template>
<template v-else>
<router-link
class="action"
to="/login"
:aria-label="$t('sidebar.login')"
:title="$t('sidebar.login')"
>
<router-link class="action" to="/login" :aria-label="$t('sidebar.login')" :title="$t('sidebar.login')">
<i class="material-icons">exit_to_app</i>
<span>{{ $t("sidebar.login") }}</span>
</router-link>
<router-link
v-if="signup"
class="action"
to="/login"
:aria-label="$t('sidebar.signup')"
:title="$t('sidebar.signup')"
>
<router-link v-if="signup" class="action" to="/login" :aria-label="$t('sidebar.signup')"
:title="$t('sidebar.signup')">
<i class="material-icons">person_add</i>
<span>{{ $t("sidebar.signup") }}</span>
</router-link>
</template>
<div
class="credits"
v-if="
$router.currentRoute.path.includes('/files/') && !disableUsedPercentage
"
style="width: 90%; margin: 2em 2.5em 3em 2.5em"
>
<progress-bar :val="usage.usedPercentage" size="small"></progress-bar>
<br />
{{ usage.used }} of {{ usage.total }} used
</div>
<p class="credits">
<span>
<div class="credits" v-if="$router.currentRoute.path.includes('/files/') && !disableUsedPercentage
">
<progress-bar :val="usage.usedPercentage" size="medium"></progress-bar>
<span style="text-align:center">{{ usage.usedPercentage }}%</span>
<span>{{ usage.used }} of {{ usage.total }} used</span>
<br>
<span v-if="disableExternal">File Browser</span>
<a
v-else
rel="noopener noreferrer"
target="_blank"
href="https://github.com/gtsteffaniak/filebrowser"
>File Browser</a
>
<span> {{ version }}</span>
<span v-else>
<a rel="noopener noreferrer" target="_blank" href="https://github.com/gtsteffaniak/filebrowser">
File Browser
</a>
</span>
<span>{{ version }}</span>
<span>
<a @click="help">{{ $t("sidebar.help") }}</a>
</span>
</p>
</div>
</nav>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import * as auth from "@/utils/auth";
@ -157,8 +105,8 @@ export default {
try {
let usage = await api.usage(path);
usageStats = {
used: prettyBytes(usage.used/1024, { binary: true }),
total: prettyBytes(usage.total/1024, { binary: true }),
used: prettyBytes(usage.used / 1024, { binary: true }),
total: prettyBytes(usage.total / 1024, { binary: true }),
usedPercentage: Math.round((usage.used / usage.total) * 100),
};
} catch (error) {
@ -174,11 +122,11 @@ export default {
},
methods: {
toRoot() {
this.$router.push({ path: "/files/" }, () => {});
this.$router.push({ path: "/files/" }, () => { });
this.$store.commit("closeHovers");
},
toSettings() {
this.$router.push({ path: "/settings" }, () => {});
this.$router.push({ path: "/settings" }, () => { });
this.$store.commit("closeHovers");
},
help() {

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

@ -58,11 +58,12 @@ over
/* Navigation Styles */
nav {
width: 16em;
width: 18em;
position: fixed;
top: 4em;
left: -17em;
z-index: 99999;
top: 0;
padding-top: 4em;
left: -19em;
z-index: 10000;
background: #fff;
height: 100%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

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

@ -167,7 +167,7 @@ body.rtl #search #result ul>* {
margin: .5em;
}
#search #result #renew {
#search #renew {
width: 100%;
text-align: center;
display: none;
@ -175,19 +175,7 @@ body.rtl #search #result ul>* {
max-width: none;
}
#search.ongoing #result #renew {
display: block;
}
#search #result-desktop #renew {
width: 100%;
text-align: center;
display: none;
margin: 1em;
max-width: none;
}
#search.ongoing #result-desktop #renew {
#search.ongoing #renew {
display: block;
}

7
frontend/src/css/styles.css
View File

@ -335,14 +335,15 @@ body.rtl .breadcrumbs .chevron {
* * * * * * * * * * * * * * * */
.credits {
font-size: 0.6em;
margin: 3em 2.5em;
font-size: 1em;
color: #a5a5a5;
padding: 1em;
}
.credits > span {
display: block;
margin: .3em 0;
margin-top: .5em;
margin-left: 0;
}
.credits a,