Add CSS listbox size parameters

jquery · Nov 23, 2023 · de37f4b · de37f4b
1 parent c322b3b
commit de37f4b
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 31 deletions.
diff --git a/demo/demo-theme.css b/demo/demo-theme.css
@@ -17,19 +17,19 @@ header > * {
   align-self: center;
 }
 
-header h2 {
-  order: 1;
-}
-
 .demo-logo {
   background-image: url(../assets/logo-text-dark.svg);
 }
 
 header .tsmb-form {
+  width: 30em;
+  margin-left: auto;
   --tsmb-color-base-background: #691c69;
   --tsmb-color-base30: var(--tsmb-color-primary90);
   --tsmb-color-base50: #c090c0;
   --tsmb-color-base90: #c090c0;
+  --tsmb-size-listbox-right: 0;
+  --tsmb-size-listbox-width: calc(min(50rem, 80vw));
 }
 header .tsmb-form:not(:focus-within)::before {
   filter: invert();

diff --git a/demo/demo.css b/demo/demo.css
@@ -24,7 +24,7 @@ a:focus {
 header,
 main,
 .demo-stylecontrol {
-  padding: 1rem calc((100% - 65rem) / 2) 0 1rem;
+  padding: 1rem;
 }
 
 .demo-logo {

diff --git a/demo/index.html b/demo/index.html
@@ -19,7 +19,7 @@
 		</form>
 	</header>
 	<header>
-	    <span class="demo-logo"></span>
+	    <span class="demo-logo demo-logo-img"></span>
 
 		<h2>data-group=true</h2>
 		<form role="search" class="tsmb-form" data-origin="https://typesense.jquery.com" data-collection="jquery_com" data-key="Zh8mMgohXECel9wjPwqT7lekLSG3OCgz" data-foot="true" data-group="true" action="https://duckduckgo.com">

diff --git a/typesense-minibar.css b/typesense-minibar.css
@@ -7,6 +7,10 @@
   --tsmb-size-sm: 0.8rem;
   --tsmb-size-half: calc(var(--tsmb-size-sm)/2);
   --tsmb-size-input: calc(var(--tsmb-size-base) * 1.2);
+  /* Set to 0 to make the listbox expand to the left */
+  --tsmb-size-listbox-right: auto;
+  --tsmb-size-listbox-width: calc(min(30rem, 60vw));
+  --tsmb-size-listbox-max-height: 70vh;
 
   --tsmb-color-base-background: #fff;
   --tsmb-color-base30: #333;
@@ -51,9 +55,11 @@
 .tsmb-form:focus-within {
   color: var(--tsmb-color-focus30);
 }
+
 .tsmb-form:focus-within input[type=search] {
   background: var(--tsmb-color-focus-background);
 }
+
 .tsmb-form:focus-within input[type=search]::placeholder {
   color: var(--tsmb-color-focus50);
 }
@@ -100,6 +106,10 @@
   display: block !important;
 }
 
+.tsmb-form--slash::after {
+  display: none;
+}
+
 .tsmb-form--slash:not(.tsmb-form--open):not(:focus-within)::after {
   content: '/';
   display: inline-block;
@@ -122,13 +132,16 @@
 .tsmb-form [role=listbox] {
   position: absolute;
   z-index: 10;
-
+  right: var(--tsmb-size-listbox-right);
   background: var(--tsmb-color-focus-background);
   color: var(--tsmb-color-focus30);
-  width: 100%;
-  max-height: 70vh;
+  margin-top: var(--tsmb-size-half);
+  min-width: 100%;
+  width: var(--tsmb-size-listbox-width);
+  max-height: var(--tsmb-size-listbox-max-height);
   overflow: auto;
   border: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
+  border-radius: var(--tsmb-size-radius);
   box-shadow: 0 var(--tsmb-size-sm) 20px rgba(0,0,0,0.12);
 }
 
@@ -143,9 +156,11 @@
   text-decoration: none;
   border-left: var(--tsmb-size-highlight) solid transparent;
 }
+
 .tsmb-form:not([data-group=true]) [role=option]:not(:first-child) a {
   border-top: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
 }
+
 .tsmb-form[data-group=true] [role=option] a {
   margin: 0 var(--tsmb-size-base);
   padding: var(--tsmb-size-sm);
@@ -199,33 +214,13 @@
   box-shadow: 0 0 10px rgba(0,0,0,0.12);
   text-decoration: none;
 }
+
 .tsmb-foot::before {
   content: 'Search by';
   color: var(--tsmb-color-focus50);
 }
+
 .tsmb-foot::after {
   content: ' Typesense';
   color: #0300b0;
 }
-
-@media (max-width: 480px) {
-  .tsmb-form {
-    width: 100%;
-  }
-
-  .tsmb-form input[type=search] {
-    border-radius: 0;
-  }
-}
-
-@media (min-width: 768px) {
-  .tsmb-form [role=listbox] {
-    border-radius: var(--tsmb-size-radius);
-    min-width: 500px;
-    margin-top: var(--tsmb-size-half);
-  }
-
-  .tsmb-form--slash::after {
-    display: none;
-  }
-}