updated css

frontend/src/components/Sidebar.vue

@@ -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
+        <button @click="$store.commit('showHover', 'newDir')" class="action" :aria-label="$t('sidebar.newFolder')"
-          @click="$store.commit('showHover', 'newDir')"
+          :title="$t('sidebar.newFolder')">
-          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')"
-        <button
+          :title="$t('sidebar.newFile')">
-          @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
+        <button class="action" @click="toSettings" :aria-label="$t('sidebar.settings')" :title="$t('sidebar.settings')">
-          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
+        <button v-if="canLogout" @click="logout" class="action" id="logout" :aria-label="$t('sidebar.logout')"
-          v-if="canLogout"
+          :title="$t('sidebar.logout')">
-          @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
+      <router-link class="action" to="/login" :aria-label="$t('sidebar.login')" :title="$t('sidebar.login')">
-        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')"
-      <router-link
+        :title="$t('sidebar.signup')">
-        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
-    <div
+      ">
-      class="credits"
+      <progress-bar :val="usage.usedPercentage" size="medium"></progress-bar>
-      v-if="
+      <span style="text-align:center">{{ usage.usedPercentage }}%</span>
-        $router.currentRoute.path.includes('/files/') && !disableUsedPercentage
+      <span>{{ usage.used }} of {{ usage.total }} used</span>
-      "
+      <br>
-      style="width: 90%; margin: 2em 2.5em 3em 2.5em"
+      <span v-if="disableExternal">File Browser</span>
-    >
+      <span v-else>
-      <progress-bar :val="usage.usedPercentage" size="small"></progress-bar>
+        <a rel="noopener noreferrer" target="_blank" href="https://github.com/gtsteffaniak/filebrowser">
-      <br />
+          File Browser
-      {{ usage.used }} of {{ usage.total }} used
+        </a>
-    </div>
-
-    <p class="credits">
-      <span>
-        <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>
+      <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 }),
+            used: prettyBytes(usage.used / 1024, { binary: true }),
-            total: prettyBytes(usage.total/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() {

frontend/src/css/base.css

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

frontend/src/css/header.css

@@ -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 {
+#search.ongoing #renew {
-  display: block;
-}
-
-#search #result-desktop #renew {
-  width: 100%;
-  text-align: center;
-  display: none;
-  margin: 1em;
-  max-width: none;
-}
-
-#search.ongoing #result-desktop #renew {
   display: block;
 }
 

frontend/src/css/styles.css

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