From ee0c319efd8a80240bdd9586b198df3a833db4eb Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Tue, 7 Nov 2023 22:47:12 +0530
Subject: [PATCH] (refactor): improved search window responsiveness (feat):
 added page shotcuts in search

---
 htdocs/assets/_floatingbar.php |  50 +++++++++++++-
 htdocs/assets/_integrate.php   |   3 +-
 htdocs/assets/extra-style.css  |  20 +++++-
 htdocs/assets/style.css        | 117 +++++++++++++++++++++++++++++++++
 4 files changed, 185 insertions(+), 5 deletions(-)

diff --git a/htdocs/assets/_floatingbar.php b/htdocs/assets/_floatingbar.php
index ecb2bb2..63f503c 100644
--- a/htdocs/assets/_floatingbar.php
+++ b/htdocs/assets/_floatingbar.php
@@ -1,6 +1,52 @@
 <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-[44vw] mx-auto min-h-[60vh] fixed inset-x-0 top-[30vh] z-40 justify-center items-center bg-bg_secondary rounded-xl 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-hidden 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">
+            <span class="flex items-center">
+                <lord-icon class="mx-1" src="https://cdn.lordicon.com/cnpvyndp.json" target=".resultitem" trigger="hover" colors="primary:#38BDF8" style="width:25px"></lord-icon>
+                <p class="mx-1">Home</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">Q</span>
+                <span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">H</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/utpmnzxz.json" target=".resultitem" trigger="hover" colors="primary:#38BDF8" style="width:25px"></lord-icon>
+                <p class="mx-1">Projects</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">Q</span>
+                <span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">P</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/lyrrgrsl.json" target=".resultitem" trigger="hover" colors="primary:#38BDF8" style="width:25px"></lord-icon>
+                <p class="mx-1">Blog</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">Q</span>
+                <span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">B</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/kthelypq.json" target=".resultitem" trigger="hover" colors="primary:#38BDF8" style="width:25px"></lord-icon>
+                <p class="mx-1">Contact</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">Q</span>
+                <span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">C</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">
     <div id="searchbar" class="searchbar bg-bg_secondary rounded-full p-[0.30rem] flex items-center cursor-pointer mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_extratransparent transition transform duration-300">
diff --git a/htdocs/assets/_integrate.php b/htdocs/assets/_integrate.php
index 6a86198..78d23cd 100644
--- a/htdocs/assets/_integrate.php
+++ b/htdocs/assets/_integrate.php
@@ -4,4 +4,5 @@
 <link rel="stylesheet" href="assets/style.css">
 <link rel="stylesheet" href="assets/extra-style.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
\ No newline at end of file
+<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
+<script src="https://cdn.lordicon.com/lordicon-1.2.0.js"></script>
\ No newline at end of file
diff --git a/htdocs/assets/extra-style.css b/htdocs/assets/extra-style.css
index 76d6174..ed80843 100644
--- a/htdocs/assets/extra-style.css
+++ b/htdocs/assets/extra-style.css
@@ -186,12 +186,28 @@ background: #38BDF8;
 @keyframes searchWindowShow {
     from {
         width: 25vw;
-        min-height: 30vh;
+        height: 30vh;
         opacity: 0;
     }
     to {
         width: 44vw;
-        min-height: 60vh;
+        height: 60vh;
         opacity: 1;
     }
+}
+
+@media only screen and (max-width: 768px) {
+
+    @keyframes searchWindowShow {
+        from {
+            width: 25vw;
+            height: 30vh;
+            opacity: 0;
+        }
+        to {
+            width: 90vw;
+            height: 60vh;
+            opacity: 1;
+        }
+    }
 }
\ No newline at end of file
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index 8e6d453..0a07370 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -643,6 +643,10 @@ video {
   z-index: 40;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -693,6 +697,11 @@ video {
   margin-right: auto;
 }
 
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -845,6 +854,14 @@ video {
   margin-top: 30vh;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
 .flex {
   display: flex;
 }
@@ -897,6 +914,10 @@ video {
   height: 100vh;
 }
 
+.h-\[60vh\] {
+  height: 60vh;
+}
+
 .min-h-\[40vh\] {
   min-height: 40vh;
 }
@@ -1002,6 +1023,18 @@ video {
   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));
@@ -1093,6 +1126,10 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .border-\[1px\] {
   border-width: 1px;
 }
@@ -1179,6 +1216,16 @@ video {
   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));
 }
@@ -1211,6 +1258,10 @@ video {
   padding: 0.30rem;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1271,6 +1322,41 @@ 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;
 }
@@ -1331,6 +1417,10 @@ 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));
@@ -1356,6 +1446,11 @@ video {
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
 
+.text-bg_secondary {
+  --tw-text-opacity: 1;
+  color: rgb(30 41 59 / var(--tw-text-opacity));
+}
+
 .caret-accent_primary {
   caret-color: #38BDF8;
 }
@@ -1471,6 +1566,10 @@ video {
   transition-duration: 500ms;
 }
 
+.duration-200 {
+  transition-duration: 200ms;
+}
+
 .last\:mb-3:last-child {
   margin-bottom: 0.75rem;
 }
@@ -1540,14 +1639,28 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.group:hover .group-hover\:block {
+  display: block;
+}
+
 .group:hover .group-hover\:flex {
   display: flex;
 }
 
+.group:hover .group-hover\:hidden {
+  display: none;
+}
+
 .group:hover .group-hover\:w-full {
   width: 100%;
 }
 
+@media (min-width: 768px) {
+  .md\:w-\[44vw\] {
+    width: 44vw;
+  }
+}
+
 @media (min-width: 1024px) {
   .lg\:bottom-\[-6rem\] {
     bottom: -6rem;
@@ -1723,6 +1836,10 @@ 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));