Add dark mode support for typesense dialog

ServiceStack · Jul 4, 2023 · 6e0a4ae · 6e0a4ae
1 parent c383ea1
commit 6e0a4ae
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 16 deletions.
diff --git a/MyApp/Pages/Shared/DocsPage.cshtml b/MyApp/Pages/Shared/DocsPage.cshtml
@@ -96,7 +96,7 @@
             </div>
         </div>
         <div id="doc" class="mx-auto flex">
-            <div class="mt-8 mx-auto prose lg:prose-lg" style="width:var(--content-width)">
+            <div class="mt-8 mx-auto prose lg:prose-lg">
 
                 @if (!Model.HideTitle)
                 {

diff --git a/MyApp/Pages/Shared/Header.cshtml b/MyApp/Pages/Shared/Header.cshtml
@@ -11,14 +11,11 @@
         <div class="flex flex-grow flex-shrink flex-nowrap justify-end items-center">
             <nav class="relative flex flex-grow leading-6 font-semibold text-slate-700 dark:text-slate-200">
                 <ul class="flex flex-wrap items-center justify-end w-full m-0 pb-2 sm:pb-0">
-                    <li class="relative flex flex-wrap items-end xl:mr-4">
-                        <div data-component="Typesense"></div>
-                    </li>
                     @{
                         void RenderNavLink(string href, string childContent, string? cls = null)
                         {
                             <li class="@Html.ClassNames("relative flex flex-wrap just-fu-start m-0", cls)">
-                                <a href="@href" class="@Html.ClassNames("p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400", Html.MatchesPath(href) ? "text-blue-700 dark:text-blue-300" : "")">
+                                <a href="@href" class="@Html.ClassNames("py-4 px-2 lg:px-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400", Html.MatchesPath(href) ? "text-blue-700 dark:text-blue-300" : "")">
                                     @Html.Raw(childContent)
                                 </a>
                             </li>
@@ -33,7 +30,8 @@
                         RenderNavLink("/locode/", "Locode", "hidden lg:block");
                         RenderNavLink("/grpc/", "gRPC", "hidden lg:block");
                     }
-                    <li class="relative flex flex-wrap just-fu-start m-0">
+                    <li class="relative flex flex-wrap just-fu-start m-0 items-center">
+                        <div data-component="Typesense"></div>
                         <div data-component="DarkModeToggle" class="ml-2 w-10"></div>
                     </li>
                 </ul>

diff --git a/MyApp/tailwind.input.css b/MyApp/tailwind.input.css
@@ -114,20 +114,15 @@ select{
     width: 100vw;
     z-index: 200;
     flex-direction: column;
-    background: rgba(0,0,0,.25);
     padding: 12vh;
     transition: width 0.1s ease-out 0s, opacity 0.5s ease 0.2s;
 }
 .search-dialog .dialog {
     margin: 0 auto;
-    width: 100%;
     max-width: 47.375rem;
-    display: flex;
-    flex-direction: column;
     min-height: 0;
     border-radius: 1rem;
     box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
-    background: #fff;
 }
 .search-dialog.open {
     display: flex;
@@ -157,7 +152,6 @@ select{
     flex: none;
     font-size: 0;
     border-radius: .375rem;
-    background-color: #f9fafb;
     border: 1px solid #d1d5db;
     padding: .125rem .375rem;
 }
@@ -179,6 +173,9 @@ select{
 .group-item a {
     text-decoration: none;
 }
+.dark mark {
+    background-color: rgb(30 58 138);
+}
 @media (min-width: 720px) {
     .nav {
         display: none;

diff --git a/MyApp/wwwroot/mjs/components/Typesense.mjs b/MyApp/wwwroot/mjs/components/Typesense.mjs
@@ -3,7 +3,7 @@ import { ref, nextTick, onMounted } from 'vue'
 const TypesenseDialog = {
     template:`<div class="search-dialog hidden flex bg-black bg-opacity-25 items-center" :class="{ open }" 
        @click="$emit('hide')">
-    <div class="dialog absolute" style="max-height:70vh;" @click.stop="">
+    <div class="dialog absolute w-full flex flex-col bg-white dark:bg-gray-800" style="max-height:70vh;" @click.stop="">
       <div class="p-2 flex flex-col" style="max-height: 70vh;">
         <div class="flex">
           <label class="pt-4 mt-0.5 pl-2" for="docsearch-input">
@@ -19,7 +19,7 @@ const TypesenseDialog = {
           <div v-for="g in results.groups" :key="g.group" class="group-result mb-2">
             <h3 class="m-0 text-lg text-gray-600" v-html="g.group"></h3>
             <div v-for="result in g.items" :key="result.id" :aria-selected="result.id == selectedIndex"
-                 class="group-item rounded-lg bg-gray-50 mb-1 p-2 flex" @mouseover="onHover(result.id)" @click="go(result.url)">              
+                 class="group-item rounded-lg bg-gray-50 dark:bg-gray-900 mb-1 p-2 flex" @mouseover="onHover(result.id)" @click="go(result.url)">              
               <div class="min-w-min mr-2 flex items-center">
                 <svg v-if="result.type=='doc'" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                 <svg v-else-if="result.type=='content'" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
@@ -199,8 +199,8 @@ export default {
     },
     template:`<div>
         <TypesenseDialog :open="openSearch" @hide="hideSearch" />
-        <button class="flex rounded-full p-0 bg-gray-100 border-2 border-solid border-gray-100 text-gray-400 cursor-pointer
-                       hover:border-green-400 hover:bg-white hover:text-gray-600" @click="showSearch">
+        <button class="flex rounded-full p-0 bg-gray-100 dark:bg-gray-800 border-2 border-solid border-gray-100 dark:border-gray-700 text-gray-400 cursor-pointer
+                       hover:border-green-400 dark:hover:border-green-400 hover:bg-white hover:text-gray-600" @click="showSearch">
           <svg class="w-7 h-7 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16l2.879-2.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
           </svg>