From 3162654d1d1939929d9fef2a35f0f17c23489a7a Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Fri, 10 Nov 2023 22:05:03 +0530
Subject: [PATCH] (refactor): hidden scrollbar of search window (feat):
 implemented basic search results items design

---
 htdocs/assets/_floatingbar.php | 20 ++++++++++++++++--
 htdocs/assets/style.css        | 38 ++++++++++++++++++++++++++++++++++
 src/input.css                  | 13 +++++++++++-
 3 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/htdocs/assets/_floatingbar.php b/htdocs/assets/_floatingbar.php
index db8ceb7..9a5d19f 100644
--- a/htdocs/assets/_floatingbar.php
+++ b/htdocs/assets/_floatingbar.php
@@ -1,6 +1,6 @@
 <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-y-scroll hidden">
-    <div class="defresultpages w-full flex flex-col justify-start px-2 mt-1">
+<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 no-scrollbar hidden">
+    <div class="defresults 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" onclick="location.href='<?php echo $basePath ?>'">
             <span class="flex items-center">
@@ -68,6 +68,22 @@
             </span>
         </div>
     </div>
+    <div class="searchresults w-full flex flex-col justify-start px-2 mt-1">
+        <p class="text-xs text-accent_three mt-3 mb-2 mx-1">SEARCH RESULTS</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" onclick="location.href='<?php echo $basePath ?>'">
+            <span class="flex items-center">
+                <span class="mx-1 px-[0.65rem] py-1 rounded border-[1px] border-accent_secondary_transparent">P</span>
+                <span class="flex flex-col">
+                    <h6 class="mx-1">ProURL</h6>
+                    <p class="mx-1 text-xs text-accent_three">All in one link shortener and management tool webapp</p>
+                </span>
+            </span>
+            <span class="flex items-center mr-1">
+                <span class="px-[1rem] py-[0.05rem] mx-1 text-xs bg-accent_four text-bg_secondary rounded-full group-hover:hidden">#project</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/style.css b/htdocs/assets/style.css
index d5c59b4..d29acf7 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -1160,6 +1160,10 @@ video {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
+.bg-\[rgba\(54\2c _255\2c _135\2c _0\.55\)\] {
+  background-color: rgba(54, 255, 135, 0.55);
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -1266,6 +1270,31 @@ video {
   padding-bottom: 0.30rem;
 }
 
+.px-\[1rem\] {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-\[0\.05rem\] {
+  padding-top: 0.05rem;
+  padding-bottom: 0.05rem;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.px-\[0\.70rem\] {
+  padding-left: 0.70rem;
+  padding-right: 0.70rem;
+}
+
+.px-\[0\.65rem\] {
+  padding-left: 0.65rem;
+  padding-right: 0.65rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1475,6 +1504,15 @@ video {
   transition-duration: 500ms;
 }
 
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
 .last\:mb-3:last-child {
   margin-bottom: 0.75rem;
 }
diff --git a/src/input.css b/src/input.css
index bd6213e..2c02fbd 100644
--- a/src/input.css
+++ b/src/input.css
@@ -1,3 +1,14 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+@layer utilities {
+    .no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+
+    .no-scrollbar {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+}
\ No newline at end of file