updated search

frontend/src/components/Search.vue

@@ -54,10 +54,10 @@
       </div>
     </div>
     <div v-if="!isMobile && active" id="result-desktop" ref="result">
-      <div id="result-list">
-        <div class="button fluid">
+      <div class="searchContext">
           Search Context: {{ getContext(this.$route.path) }}
         </div>
+      <div id="result-list">
         <template>
           <p v-show="isEmpty && isRunning" id="renew">
             <i class="material-icons spin">autorenew</i>
@@ -120,6 +120,13 @@
 .main-input {
   width: 100%
 }
+.searchContext {
+  width: 100%;
+  padding: .5em 1em;
+  background: var(--blue);
+  color: white;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
 
 .mobile-boxes {
   cursor: pointer;
@@ -320,14 +327,14 @@ export default {
       return path.replace(/\/+$/, "") + "/";
     },
     basePath(str) {
-      if (!str.includes("/")) {
-        return "";
+      let parts = str.split("/");
+      if (parts.length <= 2) {
+        return "/";
       }
-      let parts = str.replace(/(\/$|^\/)/, "").split("/"); //remove first and last slash
       parts.pop();
-      parts = parts.join("/") + "/"
+      parts = parts.join("/") + "/";
       if (str.endsWith("/")){
-        parts = "/" + parts // weird rtl bug
+        parts = "/" + parts
       }
       return parts;
     },
@@ -338,7 +345,6 @@ export default {
     ...mapMutations(["showHover", "closeHovers", "setReload"]),
     open() {
       this.showHover("search");
-      this.showBoxes = true;
     },
     close(event) {
       event.stopPropagation();

frontend/src/css/base.css

@@ -177,11 +177,11 @@ body.rtl .breadcrumbs a {
   }
 }
 
-#search.active #result-desktop ul li a {
-  display: flex;
-  align-items: center;
-  padding: .3em 0;
-  margin-right: .3em;
+#search.active #input  {
+  border-top-left-radius: 1em;
+  border-top-right-radius: 1em;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
 }
 
 #result-desktop {

frontend/src/css/header.css

@@ -61,12 +61,8 @@ header>div div {
 
 /* Search */
 #search {
-  position: absolute;
+  min-width: 40em;
   height: 3em;
-  width: 50%;
-  max-width: 50em;
-  left: 50%;
-  transform: translate(-50%, 0%);
 }
 
 #search #input {
@@ -75,7 +71,7 @@ header>div div {
   height: 100%;
   padding: 0em 0.75em;
   border-radius: 0.3em;
-  transition: .1s ease all;
+  transition: 1s ease all;
   align-items: center;
   z-index: 2;
 }
@@ -108,17 +104,18 @@ scrollbar-width: none;  /* Firefox */
 }
 @media (min-width: 800px) {
   #result-list {
-    padding-top: 0;
-    border-radius: .5em;
+    padding-top: 2em;
+    border-bottom-right-radius: 1em;
     border-width: 2px;
-    border-style: solid;
+    border-bottom-left-radius: 1em;
     background-color: white;
-    margin-top: 1em;
     max-height: 80vh;
     left: 50%;
     max-width: 90vw;
+    -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
-    box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3)
+    -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);
   }
 }
 
@@ -142,7 +139,7 @@ scrollbar-width: none;  /* Firefox */
   text-align: left;
   color: rgba(0, 0, 0, 0.6);
   height: 0;
-  transition: .2s ease height, .2s ease padding;
+  transition: 2s ease height, 2s ease padding;
   z-index: 1;
 }