From c85e94f0a95aaf4e82ad76e75c7351fc9056afb1 Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Wed, 8 Nov 2023 22:58:25 +0530
Subject: [PATCH] (feat): added quick shotcuts on search window (refactor):
 made search window scrollable

---
 htdocs/assets/_floatingbar.php |  23 +++-
 htdocs/assets/style.css        | 221 ++++++++++-----------------------
 2 files changed, 85 insertions(+), 159 deletions(-)

diff --git a/htdocs/assets/_floatingbar.php b/htdocs/assets/_floatingbar.php
index 63f503c..a56067c 100644
--- a/htdocs/assets/_floatingbar.php
+++ b/htdocs/assets/_floatingbar.php
@@ -1,5 +1,5 @@
 <div id="floatingwindowwrapper" class="floatingwindowwrapper fixed top-0 left-0 w-screen h-screen z-30 bg-[rgba(0,_0,_0,_0.4)] hidden"></div>
-<div id="searchwindow" class="searchwindow w-[90vw] md:w-[44vw] mx-auto h-[60vh] fixed inset-x-0 top-[30vh] z-40 flex-col items-center bg-bg_secondary rounded-xl overflow-hidden hidden">
+<div id="searchwindow" class="searchwindow w-[90vw] md:w-[44vw] mx-auto h-[60vh] fixed inset-x-0 top-[30vh] z-40 flex-col items-center bg-bg_secondary rounded-xl overflow-y-scroll hidden">
     <div class="defresultpages w-full flex flex-col justify-start px-2 mt-1">
         <p class="text-xs text-accent_three mt-3 mb-2 mx-1">PAGE SHOTCUTS</p>
         <div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg">
@@ -46,6 +46,27 @@
                 <i class="fa-solid fa-chevron-right text-accent_three mx-2 hidden group-hover:block"></i>
             </span>
         </div>
+        <p class="text-xs text-accent_three mt-3 mb-2 mx-1">QUICK SHOTCUTS</p>
+        <div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg">
+            <span class="flex items-center">
+                <lord-icon class="mx-1" src="https://cdn.lordicon.com/xtnsvhie.json" target=".resultitem" trigger="hover" colors="primary:#38BDF8" style="width:25px"></lord-icon>
+                <p class="mx-1">Send Email</p>
+            </span>
+            <span class="flex items-center mr-1">
+                <span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">E</span>
+                <i class="fa-solid fa-chevron-right text-accent_three mx-2 hidden group-hover:block"></i>
+            </span>
+        </div>
+        <div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg">
+            <span class="flex items-center">
+                <lord-icon class="mx-1" src="https://cdn.lordicon.com/lzgmgrnn.json" target=".resultitem" trigger="hover" colors="primary:#38BDF8" style="width:25px"></lord-icon>
+                <p class="mx-1">Source Code</p>
+            </span>
+            <span class="flex items-center mr-1">
+                <span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">S</span>
+                <i class="fa-solid fa-chevron-right text-accent_three mx-2 hidden group-hover:block"></i>
+            </span>
+        </div>
     </div>
 </div>
 <div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index 0a07370..566683d 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -603,18 +603,14 @@ video {
   top: 20.5rem;
 }
 
-.top-\[4\.7rem\] {
-  top: 4.7rem;
-}
-
-.top-\[20vh\] {
-  top: 20vh;
-}
-
 .top-\[30vh\] {
   top: 30vh;
 }
 
+.top-\[4\.7rem\] {
+  top: 4.7rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -627,6 +623,10 @@ video {
   z-index: 30;
 }
 
+.z-40 {
+  z-index: 40;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -639,12 +639,9 @@ video {
   z-index: 50;
 }
 
-.z-40 {
-  z-index: 40;
-}
-
-.m-2 {
-  margin: 0.5rem;
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
 }
 
 .mx-2 {
@@ -667,6 +664,11 @@ video {
   margin-right: 1.5rem;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -692,16 +694,6 @@ video {
   margin-bottom: 0.30rem;
 }
 
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.mx-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -714,6 +706,10 @@ video {
   margin-bottom: 3rem;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
 .mb-20 {
   margin-bottom: 5rem;
 }
@@ -854,14 +850,6 @@ video {
   margin-top: 30vh;
 }
 
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
-.mt-4 {
-  margin-top: 1rem;
-}
-
 .flex {
   display: flex;
 }
@@ -902,6 +890,10 @@ video {
   height: 50px;
 }
 
+.h-\[60vh\] {
+  height: 60vh;
+}
+
 .h-\[70px\] {
   height: 70px;
 }
@@ -914,26 +906,6 @@ video {
   height: 100vh;
 }
 
-.h-\[60vh\] {
-  height: 60vh;
-}
-
-.min-h-\[40vh\] {
-  min-height: 40vh;
-}
-
-.min-h-\[60vh\] {
-  min-height: 60vh;
-}
-
-.min-h-\[50vh\] {
-  min-height: 50vh;
-}
-
-.min-h-\[30vh\] {
-  min-height: 30vh;
-}
-
 .w-0 {
   width: 0px;
 }
@@ -986,6 +958,10 @@ video {
   width: 90px;
 }
 
+.w-\[90vw\] {
+  width: 90vw;
+}
+
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -999,42 +975,6 @@ video {
   width: 100vw;
 }
 
-.w-\[50vw\] {
-  width: 50vw;
-}
-
-.w-\[40vw\] {
-  width: 40vw;
-}
-
-.w-\[45vw\] {
-  width: 45vw;
-}
-
-.w-\[43vw\] {
-  width: 43vw;
-}
-
-.w-\[44vw\] {
-  width: 44vw;
-}
-
-.w-\[20vw\] {
-  width: 20vw;
-}
-
-.w-\[15px\] {
-  width: 15px;
-}
-
-.w-\[25px\] {
-  width: 25px;
-}
-
-.w-\[90vw\] {
-  width: 90vw;
-}
-
 .rotate-\[15deg\] {
   --tw-rotate: 15deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1102,10 +1042,22 @@ video {
   overflow: hidden;
 }
 
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-2xl {
   border-radius: 1rem;
 }
@@ -1126,10 +1078,6 @@ video {
   border-radius: 0.75rem;
 }
 
-.rounded {
-  border-radius: 0.25rem;
-}
-
 .border-\[1px\] {
   border-width: 1px;
 }
@@ -1196,6 +1144,11 @@ video {
   background-color: rgba(0, 0, 0, 0.4);
 }
 
+.bg-accent_four {
+  --tw-bg-opacity: 1;
+  background-color: rgb(172 203 222 / var(--tw-bg-opacity));
+}
+
 .bg-accent_primary {
   --tw-bg-opacity: 1;
   background-color: rgb(56 189 248 / var(--tw-bg-opacity));
@@ -1211,21 +1164,6 @@ video {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
-.bg-bg_third {
-  --tw-bg-opacity: 1;
-  background-color: rgb(38 51 74 / var(--tw-bg-opacity));
-}
-
-.bg-accent_three {
-  --tw-bg-opacity: 1;
-  background-color: rgb(217 217 217 / var(--tw-bg-opacity));
-}
-
-.bg-accent_four {
-  --tw-bg-opacity: 1;
-  background-color: rgb(172 203 222 / var(--tw-bg-opacity));
-}
-
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -1242,6 +1180,10 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .p-10 {
   padding: 2.5rem;
 }
@@ -1258,10 +1200,6 @@ video {
   padding: 0.30rem;
 }
 
-.p-1 {
-  padding: 0.25rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1292,6 +1230,11 @@ video {
   padding-right: 1.75rem;
 }
 
+.px-\[0\.40rem\] {
+  padding-left: 0.40rem;
+  padding-right: 0.40rem;
+}
+
 .px-\[0\.80rem\] {
   padding-left: 0.80rem;
   padding-right: 0.80rem;
@@ -1312,6 +1255,11 @@ video {
   padding-bottom: 1.25rem;
 }
 
+.py-\[0\.10rem\] {
+  padding-top: 0.10rem;
+  padding-bottom: 0.10rem;
+}
+
 .py-\[0\.15rem\] {
   padding-top: 0.15rem;
   padding-bottom: 0.15rem;
@@ -1322,41 +1270,6 @@ video {
   padding-bottom: 0.30rem;
 }
 
-.px-\[0\.20rem\] {
-  padding-left: 0.20rem;
-  padding-right: 0.20rem;
-}
-
-.py-\[0\.10rem\] {
-  padding-top: 0.10rem;
-  padding-bottom: 0.10rem;
-}
-
-.px-\[0\.25rem\] {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-.px-\[0\.30rem\] {
-  padding-left: 0.30rem;
-  padding-right: 0.30rem;
-}
-
-.px-\[0\.40rem\] {
-  padding-left: 0.40rem;
-  padding-right: 0.40rem;
-}
-
-.py-\[0\.40rem\] {
-  padding-top: 0.40rem;
-  padding-bottom: 0.40rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -1417,10 +1330,6 @@ video {
   font-weight: 700;
 }
 
-.font-thin {
-  font-weight: 100;
-}
-
 .text-accent_four {
   --tw-text-opacity: 1;
   color: rgb(172 203 222 / var(--tw-text-opacity));
@@ -1558,6 +1467,10 @@ video {
   transition-duration: 100ms;
 }
 
+.duration-200 {
+  transition-duration: 200ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
@@ -1566,10 +1479,6 @@ video {
   transition-duration: 500ms;
 }
 
-.duration-200 {
-  transition-duration: 200ms;
-}
-
 .last\:mb-3:last-child {
   margin-bottom: 0.75rem;
 }
@@ -1836,10 +1745,6 @@ video {
     width: 350px;
   }
 
-  .lg\:w-\[44vw\] {
-    width: 44vw;
-  }
-
   .lg\:rotate-0 {
     --tw-rotate: 0deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));