updated header location

frontend/src/App.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
+  <router-view></router-view>
-    <router-view></router-view>
-  </div>
 </template>
 
 <script>

frontend/src/components/Search.vue

@@ -138,9 +138,11 @@
               <div class="sizeInputWrapper">
                 <p>Smaller Than:</p>
                 <input
+                
                   class="sizeInput"
                   v-model="smallerThan"
-                  type="text"
+                  type="number"
+                  min="0"
                   placeholder="number"
                 />
                 <p>MB</p>
@@ -150,7 +152,7 @@
                 <input
                   class="sizeInput"
                   v-model="largerThan"
-                  type="text"
+                  type="number"
                   placeholder="number"
                 />
                 <p>MB</p>
@@ -202,9 +204,13 @@
   border-color: gray;
   width: 30em;
   padding-top: 0em;
-  border-bottom-right-radius: 1em;
+  border-color: #a7a7a7;
-  border-width: 2px;
+  border-width: 1px;
-  border-bottom-left-radius: 1em;
+  border-style: solid;
+  border-radius: 1em;
+  border-top: none;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
   background-color: white;
   max-height: 80vh;
   left: 50%;
@@ -213,7 +219,12 @@
   -webkit-box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
 }
-
+#search.active #result-desktop ul li a {
+  display: flex;
+  align-items: center;
+  padding: .3em 0;
+  margin-right: .3em;
+}
 #result-list.active {
   width: 65em !important;
   max-width: 85vw !important;
@@ -244,10 +255,15 @@
   display: flex;
   height: 100%;
   padding: 0em 0.75em;
-  border-radius: 0.3em;
+  border-style: solid;
+  border-color: #ccc;
+  border-radius: 1em;
+  border-style: solid;
+  border-color: #a7a7a7;
+  border-width: 1px;
   transition: 1s ease all;
   align-items: center;
-  z-index: 2;
+  z-index: 3;
 }
 
 #search input {
@@ -293,7 +309,7 @@
   color: rgba(0, 0, 0, 0.6);
   height: 0;
   transition: 2s ease height, 2s ease padding;
-  z-index: 1;
+  z-index: 3;
 }
 
 body.rtl #search #result {
@@ -337,8 +353,9 @@ body.rtl #search #result ul > * {
   display: block;
 }
 #search.active #input {
-  border-top-left-radius: 1em;
+  border-bottom-left-radius: 0px;
-  border-top-right-radius: 1em;
+  border-bottom-right-radius: 0px;
+  border-bottom-style: none;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
 }
@@ -432,20 +449,23 @@ body.rtl #search .boxes h3 {
   width: 5em;
   border-radius: 1em;
   padding: 1em;
-
+  backdrop-filter: invert(.1);
-  border: solid !important;
+  border: none !important;
 }
 
 .sizeInputWrapper {
   border-radius: 1em;
-  margin-left: 0.5em;
+    margin-left: 0.5em;
-  margin-right: 0.5em;
+    margin-right: 0.5em;
-  border-style: groove;
+    display: -ms-flexbox;
-  display: flex;
+    display: flex;
-  background-color: rgb(245, 245, 245);
+    background-color: rgb(245, 245, 245);
-  padding: 0.25em;
+    padding: 0.25em;
-  height: 3em;
+    height: 3em;
-  align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    border: 1px solid #ccc
 }
 
 .helpButton {
@@ -518,13 +538,14 @@ export default {
   watch: {
     active(active) {
       const resultList = document.getElementById("result-list");
-      if (active) {
+      if (!active) {
-        setTimeout(() => {
+        resultList.classList.remove("active");
-          resultList.classList.add("active");
+        return
-        }, 100);
-        return true;
       }
-      resultList.classList.remove("active");
+      setTimeout(() => {
+        resultList.classList.add("active");
+      }, 100);
+      
     },
     show(val, old) {
       this.active = val === "search";
@@ -683,10 +704,10 @@ export default {
       } catch (error) {
         this.$showError(error);
       }
-      if (this.results.length == 0 && this.ongoing == false) {
+      this.ongoing = false;
+      if (this.results.length == 0) {
         this.noneMessage = "No results found in indexed search.";
       }
-      this.ongoing = false;
     },
     toggleHelp() {
       this.showHelp = !this.showHelp;

frontend/src/css/base.css

@@ -4,8 +4,19 @@ body {
   padding-top: 4em;
   background-color: #fafafa;
   color: #333333;
+  overflow:auto;
+  overflow:initial;
+
+}
+body::-webkit-scrollbar {
+  z-index: 1000;
 }
 
+/* Hiding scrollbar for IE, Edge and Firefox */
+body {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
 body.rtl {
   direction: rtl;
 }
@@ -63,7 +74,7 @@ nav {
   top: 0;
   padding-top: 4em;
   left: -19em;
-  z-index: 10000;
+  z-index: 4;
   background: #fff;
   height: 100%;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
@@ -110,7 +121,13 @@ nav .action > * {
 
 /* Main Content */
 main {
-  margin: 1em;
+  position: fixed;
+  padding: 1em;
+  padding-top: 4em;
+  overflow: scroll;
+  top: 0;
+  height: 100vh;
+  width: 100%;
 }
 
 .breadcrumbs {

frontend/src/css/dashboard.css

@@ -302,7 +302,7 @@ body.rtl .card .card-title>*:first-child {
   left: 0;
   height: 100%;
   width: 100%;
-  z-index: 9999;
+  z-index: 3;
   animation: .3s show ease-in;
 }
 

frontend/src/css/header.css

@@ -1,8 +1,7 @@
 /* Header */
 header {
-  z-index: 1000;
+  z-index: 5;
   position: fixed;
-  z-index: 10000;
   top: 0;
   left: 0;
   width: 100%;

frontend/src/css/mobile.css

@@ -52,19 +52,16 @@
   body.rtl .dashboard .row {
     margin-right: unset;
   }
-
+  #search {
-  #search.active {
+    min-width: unset;
-    display: block;
   }
 
   #search.active {
+    display: block;
     position: fixed;
     top: 0;
-    right: 0;
+    left: 0;
     width: 100%;
-    max-width: 100%;
-    height: 100%;
-    z-index: 9999;
   }
 
   #search.active #input {
@@ -79,7 +76,8 @@
   }
 
   #search.active #result {
-    height: 100vh
+    height: 100vh;
+    padding-top: 0;
   }
 
   #search.active #result>p>i {
@@ -102,7 +100,12 @@
   }
 
   #result-list {
-    padding-top: 3em;
+    width:100%;
+    left: 0;
+    top: 4em;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    overflow: scroll;
     display: flex;
     flex-direction: column;
   }

frontend/src/views/Layout.vue

@@ -3,6 +3,12 @@
     <div v-if="progress" class="progress">
       <div v-bind:style="{ width: this.progress + '%' }"></div>
     </div>
+    <header-bar showMenu showLogo>
+      <search />
+      <template #actions>
+        <action icon="grid_view" :label="$t('buttons.switchView')" @action="switchView" />
+      </template>
+    </header-bar>
     <sidebar></sidebar>
     <main>
       <router-view></router-view>
@@ -20,10 +26,16 @@ import Prompts from "@/components/prompts/Prompts";
 import Shell from "@/components/Shell";
 import UploadFiles from "../components/prompts/UploadFiles";
 import { enableExec } from "@/utils/constants";
+import HeaderBar from "@/components/header/HeaderBar";
+import Search from "@/components/Search";
+import Action from "@/components/header/Action";
 
 export default {
   name: "layout",
   components: {
+    Action,
+    HeaderBar,
+    Search,
     Sidebar,
     Prompts,
     Shell,
@@ -42,5 +54,26 @@ export default {
         this.$store.commit("closeHovers");
     },
   },
+  methods: {
+    switchView: async function () {
+      this.$store.commit("closeHovers");
+      const modes = {
+        list: "mosaic",
+        mosaic: "mosaic gallery",
+        "mosaic gallery": "list",
+      };
+
+      const data = {
+        id: this.user.id,
+        viewMode: modes[this.user.viewMode] || "list",
+      };
+      //users.update(data, ["viewMode"]).catch(this.$showError);
+      this.$store.commit("updateUser", data);
+
+      //this.setItemWeight();
+      //this.fillWindow();
+    },
+  }
+
 };
 </script>

frontend/src/views/files/Listing.vue

@@ -1,14 +1,7 @@
 <template>
   <div>
-    <header-bar showMenu showLogo>
+    <div v-if="selectedCount > 0" id="file-selection">
-      <search />
+      <span >{{ selectedCount }} selected</span>
-      <template #actions>
-        <action :icon="viewIcon" :label="$t('buttons.switchView')" @action="switchView" />
-      </template>
-    </header-bar>
-
-    <div id="file-selection">
-      <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
       <template>
         <action
           v-if="headerButtons.select"
@@ -217,17 +210,13 @@ import * as upload from "@/utils/upload";
 import css from "@/utils/css";
 import throttle from "lodash.throttle";
 
-import HeaderBar from "@/components/header/HeaderBar";
 import Action from "@/components/header/Action";
-import Search from "@/components/Search";
 import Item from "@/components/files/ListingItem";
 
 export default {
   name: "listing",
   components: {
-    HeaderBar,
     Action,
-    Search,
     Item,
   },
   data: function () {
@@ -740,27 +729,7 @@ export default {
         },
       });
     },
-    switchView: async function () {
-      this.$store.commit("closeHovers");
-      const modes = {
-        list: "mosaic",
-        mosaic: "mosaic gallery",
-        "mosaic gallery": "list",
-      };
 
-      const data = {
-        id: this.user.id,
-        viewMode: modes[this.user.viewMode] || "list",
-      };
-
-      users.update(data, ["viewMode"]).catch(this.$showError);
-
-      // Await ensures correct value for setItemWeight()
-      await this.$store.commit("updateUser", data);
-
-      this.setItemWeight();
-      this.fillWindow();
-    },
     upload: function () {
       if (
         typeof window.DataTransferItem !== "undefined" &&