Clear menu on mobile (#94)

* it works

only one annoyiung thing, you have to click hrefs twice in the dropdown to go to link

* Fixed double clicking + menu pop up + import issue

Dont have to double click a tags to go to link but focusing/unfocusing

completely changed how menu appears and dissapears

had to include entire library in searchbar component to avoid using import statement

* Edited CBTF workflow, Page titles, Search feature

Edited CBTF workflow to stash before pulling new changes before committing, otherwise it cant upload. Before it was not stashing and telling me it wasnt happy

Made it so the title updates to whatever course page you are on, i.e. "Solids Reference", "Dynamics Reference", etc.

Edited search feature to make it non-case sensitive in both ways:
- can query in uppercase/lowercase
- results return regardless of upper/lowercase

* made searchbar bigger on mobile, trying to make a dismiss btn

* Changes to displayed snippets

* clear menu on mobile

src/components/Searchbar.astro

@@ -1,5 +1,4 @@
 ---
-import Fuse from 'fuse.js'
 import search_contents from "../search.json"
 ---
 <style>
@@ -26,10 +25,20 @@ import search_contents from "../search.json"
         display: block;
     }
 
+    i#clear {
+        position: absolute;
+        right: 0px;
+        margin-top: auto;
+        margin-bottom: auto;
+        cursor: pointer;
+        color: #888;
+    }
+
 </style>
 
 <div id="search-menu" class="position-relative w-100 sticky">
-    <input type="text" class="form-control w-100 input-group input-group-lg " type="search" placeholder="Search for keyword" id="searchbox" autocomplete="off" />
+    <i class="bi bi-x" id="clear" onclick="searchbox.blur();"></i>
+    <input type="text" class="form-control w-100" placeholder="Search for keyword" id="searchbox" autocomplete="off" />
     <ul id="searchresults" class="position-absolute z-3 w-100 p-0">
 
     </ul>
@@ -2063,9 +2072,6 @@ import search_contents from "../search.json"
 
     const fuse = new Fuse(search_contents, options, index)
 
-
-
-
     let query;
     let results;
 
@@ -2098,12 +2104,23 @@ import search_contents from "../search.json"
             let slice = text.slice(s_i, f_i);
             let highlit = slice.replace(text_to_highlight, `<span class="highlighter">${text_to_highlight}</span>`)
 
+            let display_text;
 
+            if (s_i == 0){
+              display_text = `${highlit}...`;
+            }else if (f_i == text.length){
+              display_text = `...${highlit}`;
+            }else{
+              display_text = `...${highlit}...`;
+            }
+
+            console.log(display_text)
+
             searchresults.innerHTML += `<a href="${e['item']['link']}" class="text-black text-decoration-none">
                     <li class="px-2 py-1 border-bottom" >
 
                         <p class="mb-0 fw-bold">${e['item']['title']}:</p>
-                            ...${highlit}...
+                        ${display_text}
 
                     </li>
                 </a>
@@ -2132,4 +2149,33 @@ import search_contents from "../search.json"
             search_and_display();
         }
     )
+
+    function resize_searchbar(){
+      if (document.querySelector('body').clientWidth <= 768){
+        searchbox.classList.add('form-control-lg')
+      }else{
+        searchbox.classList.remove('form-control-lg')
+      }
+    }
+
+    resize_searchbar();
+
+    const clear_icon = document.querySelector("#clear");
+
+    function resize_icon(){
+      clear_icon.style = `font-size: ${searchbox.clientHeight}px; top: -${searchbox.clientHeight/4+2}px;`;
+      console.log(`${searchbox.clientHeight}px`)
+    }
+
+    resize_icon();
+
+    clear_
+
+    window.addEventListener(
+        "resize", 
+        function(){
+          resize_searchbar();
+          resize_icon();
+        }
+    )
 </script>

src/layouts/Layout.astro

@@ -25,9 +25,11 @@ const pagename = cleaned[1]
 		<title>{title}</title>
 
 		<link href="/bootstrap.min.css" rel="stylesheet">
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
 
 
 		<script src="/bootstrap.min.js" is:inline></script>
+
 
 		<script id="MathJax-script" src="/mathjax/tex-chtml.js" is:inline></script>