updated styling

frontend/public/themes/dark.css

@@ -28,6 +28,13 @@ header {
   background: var(--surfacePrimary);
 }
 
+@supports (backdrop-filter: none) {
+  header {
+    background: transparent;
+    backdrop-filter: blur(16px) invert(0.1);
+  }
+}
+
 #search #input {
   background: var(--surfaceSecondary);
   border-color: var(--surfacePrimary);
@@ -185,6 +192,9 @@ table th {
 #editor-container .bar {
   background: var(--surfacePrimary);
 }
+nav {
+  background: var(--surfaceSecondary) !important;
+}
 
 @media (max-width: 736px) {
   #file-selection {
@@ -193,9 +203,6 @@ table th {
   #file-selection span {
     color: var(--textPrimary) !important;
   }
-  nav {
-    background: var(--surfaceSecondary) !important;
-  }
   #dropdown {
     background: var(--surfaceSecondary) !important;
   }

frontend/src/components/Sidebar.vue

@@ -1,6 +1,35 @@
 <template>
   <nav :class="{ active }">
     <template v-if="isLogged">
+      <!--
+        i want this here eventually
+        <action
+          v-if="headerButtons.download"
+          icon="file_download"
+          :label="$t('buttons.download')"
+          @action="download"
+          :counter="selectedCount"
+        />
+        <action
+          v-if="headerButtons.upload"
+          icon="file_upload"
+          id="upload-button"
+          :label="$t('buttons.upload')"
+          @action="upload"
+        />
+        <action
+          v-if="headerButtons.shell"
+          icon="code"
+          :label="$t('buttons.shell')"
+          @action="$store.commit('toggleShell')"
+        />
+        <action
+          :icon="viewIcon"
+          :label="$t('buttons.switchView')"
+          @action="switchView"
+        />
+      -->
+
       <button
         class="action"
         @click="toRoot"

frontend/src/components/header/HeaderBar.vue

@@ -1,12 +1,10 @@
 <template>
   <header>
-    <img v-if="showLogo !== undefined" :src="logoURL" />
     <action
-      v-if="showMenu !== undefined"
       class="menu-button"
       icon="menu"
       :label="$t('buttons.toggleSidebar')"
-      @action="openSidebar()"
+      @action="toggleSidebar()"
     />
 
     <slot />
@@ -15,25 +13,11 @@
       <slot name="actions" />
     </div>
 
-    <action
-      v-if="this.$slots.actions"
-      id="more"
-      icon="more_vert"
-      :label="$t('buttons.more')"
-      @action="$store.commit('showHover', 'more')"
-    />
-
-    <div
-      class="overlay"
-      v-show="this.$store.state.show == 'more'"
-      @click="$store.commit('closeHovers')"
-    />
   </header>
 </template>
 
 <script>
 import { logoURL } from "@/utils/constants";
-
 import Action from "@/components/header/Action";
 
 export default {
@@ -48,8 +32,12 @@ export default {
     };
   },
   methods: {
-    openSidebar() {
+    toggleSidebar() {
+      if ( this.$store.state.show == "sidebar" ) {
+        this.$store.commit("closeHovers");
+      } else {
         this.$store.commit("showHover", "sidebar");
+      }
     },
   },
 };

frontend/src/components/prompts/Prompts.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <component ref="currentComponent" :is="currentComponent"></component>
-    <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
   </div>
 </template>
 
@@ -104,11 +103,6 @@ export default {
 
       return (matched && this.show) || null;
     },
-    showOverlay: function () {
-      return (
-        this.show !== null && this.show !== "search" && this.show !== "more"
-      );
-    },
   },
   methods: {
     resetPrompts() {

frontend/src/css/base.css

@@ -77,7 +77,28 @@ 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;
@@ -92,9 +113,7 @@ nav .action > * {
 }
 
 main {
-  min-height: 1em;
+  margin: 1em;
-  margin: 0 1em 1em auto;
-  width: calc(100% - 19em);
 }
 
 .breadcrumbs {

frontend/src/css/dashboard.css

@@ -311,17 +311,6 @@ body.rtl .card .card-title>*:first-child {
   flex: 1;
 }
 
-.overlay {
-  background-color: rgba(0, 0, 0, 0.5);
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 9999;
-  animation: .1s show forwards;
-}
-
 
 /* * * * * * * * * * * * * * * *
  *        PROMPT - MOVE        *

frontend/src/css/header.css

@@ -3,17 +3,23 @@ header {
   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;
   display: flex;
-  padding: 0.5em 0.5em 0.5em 1em;
+  padding: 0.5em;
   align-items: center;
-  backdrop-filter: blur(6px);
+  background-color: white;
+}
+@supports (backdrop-filter: none) {
+  header {
+    background-color: transparent;
+    backdrop-filter: blur(16px) invert(0.1);
+  }
 }
-
 header > * {
   flex: 0 0 auto;
 }
@@ -27,11 +33,6 @@ header title {
   font-size: 1.2em;
 }
 
-header .overlay {
-  width: 0;
-  height: 0;
-}
-
 header a,
 header a:hover {
   color: inherit;
@@ -55,20 +56,17 @@ header>div div {
   position: relative;
 }
 
-header .search-button,
-header .menu-button {
-  display: none;
-}
-
 #more {
   display: none;
 }
 
 #search {
-  position: relative;
+  position: absolute;
-  height: 100%;
+  height: 3em;
-  width: 100%;
+  width: 50%;
-  max-width: 25em;
+  max-width: 50em;
+  left: 50%;
+  transform: translate(-50%,0%);
 }
 
 #search.active {

frontend/src/css/mobile.css

@@ -1,19 +1,10 @@
 @media (max-width: 1024px) {
-  nav {
-    width: 10em
-  }
   /* 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: 1024px) {
-  main {
-    width: calc(100% - 13em)
-  }
-}
-
 @media (max-width: 736px) {
   body {
     padding-bottom: 5em;
@@ -27,23 +18,6 @@
   #more {
     display: inherit
   }
-  header .overlay {
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-  #dropdown {
-    position: fixed;
-    top: 1em;
-    right: 1em;
-    display: block;
-    background-color: #fff;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-    transform: scale(0);
-    transition: .1s ease-in-out transform;
-    transform-origin: top right;
-    z-index: 99999;
-  }
 
   body.rtl #dropdown {
     right: unset;
@@ -51,25 +25,6 @@
     transform-origin: top left;
   }
 
-  #dropdown > div {
-    display: block;
-  }
-  #dropdown.active {
-    transform: scale(1);
-  }
-  #dropdown .action {
-    display: flex;
-    align-items: center;
-    border-radius: 0;
-    width: 100%;
-  }
-  #dropdown .action span:not(.counter) {
-    display: inline-block;
-    padding: .4em;
-  }
-  #dropdown .counter {
-    left: 2.25em;
-  }
   #file-selection {
     position: fixed;
     bottom: 1em;
@@ -96,34 +51,7 @@
   #file-selection .action span {
     display: none;
   }
-  nav {
-    top: 0;
-    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;
-  }
-
-  header .search-button,
-  header .menu-button {
-    display: inherit;
-  }
   header img {
     display: none;
   }
@@ -142,18 +70,9 @@
   body.rtl #nav .wrapper {
     margin-right: unset;
   }
-  
   body.rtl .dashboard .row {
     margin-right: unset;
   }
-
-  main {
-    margin: 0 1em;
-    width: calc(100% - 2em);
-  }
-  #search {
-    display: none;
-  }
   #search.active {
     display: block;
   }

frontend/src/views/files/Listing.vue

@@ -1,16 +1,9 @@
 <template>
   <div>
     <header-bar showMenu showLogo>
-      <search /> <title />
+      <search />
-      <action
-        class="search-button"
-        icon="search"
-        :label="$t('buttons.search')"
-        @action="openSearch()"
-      />
-
       <template #actions>
-        <template v-if="!isMobile">
+        <template >
           <action
             v-if="headerButtons.share"
             icon="share"
@@ -44,39 +37,23 @@
             :label="$t('buttons.delete')"
             show="delete"
           />
-        </template>
-
           <action
-          v-if="headerButtons.shell"
+            v-if="headerButtons.info"
-          icon="code"
+            icon="info"
-          :label="$t('buttons.shell')"
+            :label="$t('buttons.info')"
-          @action="$store.commit('toggleShell')"
+            show="info" />
+          <action
+            v-if="headerButtons.select"
+            icon="check_circle"
+            :label="$t('buttons.selectMultiple')"
+            @action="toggleMultipleSelection"
           />
+        </template>
         <action
           :icon="viewIcon"
           :label="$t('buttons.switchView')"
           @action="switchView"
         />
-        <action
-          v-if="headerButtons.download"
-          icon="file_download"
-          :label="$t('buttons.download')"
-          @action="download"
-          :counter="selectedCount"
-        />
-        <action
-          v-if="headerButtons.upload"
-          icon="file_upload"
-          id="upload-button"
-          :label="$t('buttons.upload')"
-          @action="upload"
-        />
-        <action icon="info" :label="$t('buttons.info')" show="info" />
-        <action
-          icon="check_circle"
-          :label="$t('buttons.selectMultiple')"
-          @action="toggleMultipleSelection"
-        />
       </template>
     </header-bar>
 
@@ -374,6 +351,8 @@ export default {
     },
     headerButtons() {
       return {
+        info: this.selectedCount > 0,
+        select: this.selectedCount > 0,
         upload: this.user.perm.create,
         download: this.user.perm.download,
         shell: this.user.perm.execute && enableExec,