fix style combobox transparent background

colealbon · Jul 8, 2024 · 336eb1b · 336eb1b
1 parent cd5d50d
commit 336eb1b
Show file tree

Hide file tree

Showing 5 changed files with 193 additions and 44 deletions.
diff --git a/src/PostDisplay.tsx b/src/PostDisplay.tsx
@@ -7,16 +7,19 @@ const PostDisplay = (props: {
   postSummary: string;
   postId: string;
 }) => {
+  const truncateLongWords = (text: String) => {
+    return text.split(" ").map(word => word.slice(0, 30)).join(' ')
+  }
   return(
     <div>
       <h2>
         <a target="cafe" rel="noreferrer noopener" href={props.postId}>{
-          props.postTitle
+          truncateLongWords(props.postTitle)
         }</a>
       </h2>
-      <div class='block text-xl'>
-        {props.postSummary}
-      </div>
+      <article class='text-xl pr-4'>
+        {truncateLongWords(props.postSummary)}
+      </article>
   </div>
   )
 }

diff --git a/src/RSSFeeds.tsx b/src/RSSFeeds.tsx
@@ -168,7 +168,7 @@ const RSSFeeds = (props: {
         onOpenChange={onOpenChange}
         placeholder="click label to remove..."
         itemComponent={props => (
-          <Combobox.Item item={props.item} class='combobox__item w-200px'>
+          <Combobox.Item item={props.item} class='combobox__item w-200px bg-inherit'>
             <Combobox.ItemLabel>{props.item.rawValue}</Combobox.ItemLabel>
             <Combobox.ItemIndicator class="combobox__item-indicator">
               <CheckIcon />

diff --git a/src/components/Combobox.tsx b/src/components/Combobox.tsx
@@ -77,23 +77,21 @@ export const Combobox: Component<ComboboxProps> = (props) => {
         </Item>
       )}
     >
-      <Control class="combobox__control" aria-label={local.ariaLabel}>
-      <div>
-								<For each={props.value}>
-									{option => (
-										<span onPointerDown={e => e.stopPropagation()}>
-											{option}
-											<button onClick={() => props.remove(option)}>
-												X
-											</button>
-										</span>
-									)}
-								</For>
-								<Input />
-							</div>
+      <Control class="combobox__control bg-inherit border-none" aria-label={local.ariaLabel}>
+        <div>
+          <For each={props.value}>
+            {option => (
+              <span onPointerDown={e => e.stopPropagation()}>
+                {option}
+                <button onClick={() => props.remove(option)} class='bg-inherit'>
+                  X
+                </button>
+              </span>
+            )}
+          </For>
+          <Input />
+        </div>
         <Input class="combobox__input" />
-
-
         <Trigger class="combobox__trigger">
           <Icon class="combobox__icon">
             <TiArrowUnsorted />

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -33,13 +33,13 @@ export const NavBar: Component<NavBarProps> = (props) => {
                 props.setSelectedTrainLabel('nostr')
               }}
             >
-              RSS&nbsp;Posts
+              Posts
             </NavLink>
           </Collapsible.Trigger>
           <For each={props.checkedTrainLabels()}>
             {
               (trainLabel) => (
-                <div class="ml-4">
+                <div class="ml-2">
                   <NavLink
                     testid={`rssposts-${trainLabel.id}-link`}
                     href={`/rssposts/${trainLabel.id}`}
@@ -51,21 +51,22 @@ export const NavBar: Component<NavBarProps> = (props) => {
               )
             }
           </For>
-          <div>
-            <Collapsible.Trigger as='a' >
-              <NavLink 
-                testid='nostrposts-link'
-                href='/nostrposts'
-                onClick={() => {
-                  props.setSelectedTrainLabel('nostr')
-                }}
-              >
-                Nostr&nbsp;Global
-              </NavLink>
-            </Collapsible.Trigger>
+          <div class="ml-2">
+            <NavLink 
+              testid='nostrposts-link'
+              href='/nostrposts'
+              onClick={() => {
+                props.setSelectedTrainLabel('nostr')
+              }}
+            >
+              Nostr&nbsp;Global
+            </NavLink>
           </div>
           <div>
-          <Collapsible.Trigger as='a' >
+            Settings
+          </div>
+          <div class="ml-2">
+            <Collapsible.Trigger as='a' >
               <NavLink
                 testid='rssfeeds-link'
                 href='/rssfeeds'
@@ -75,56 +76,56 @@ export const NavBar: Component<NavBarProps> = (props) => {
               </NavLink>
             </Collapsible.Trigger>
           </div>
-          <div>
+          <div class="ml-2">
             <Collapsible.Trigger as='a' >
               <NavLink testid='alby-link' href='/alby' onClick={() => handleClickNavLink()}>
                 Profile
               </NavLink>
             </Collapsible.Trigger>
           </div>
-          <div>
+          <div class="ml-2">
             <Collapsible.Trigger as='a' >
               <NavLink testid='cors-link' href='/cors'onClick={() => handleClickNavLink()}>
                 Cors&nbsp;Proxies
               </NavLink>
             </Collapsible.Trigger>
           </div>
-          <div>
+          <div class="ml-2">
             <Collapsible.Trigger as='a' >
               <NavLink testid='contact-link' href='/contact' onClick={() => handleClickNavLink()}>
                 Contact
               </NavLink>
             </Collapsible.Trigger>
           </div>
-          <div>
+          <div class="ml-2">
             <Collapsible.Trigger as='a' >
               <NavLink testid='subscriptions-link' href='/subscriptions' onClick={() => handleClickNavLink()}>
                 Subscriptions
               </NavLink>
             </Collapsible.Trigger>
           </div>
-          <div>
+          <div class="ml-2">
             <Collapsible.Trigger as='a' >
               <NavLink testid='nostrrelays-link' href='/nostrrelays' onClick={() => handleClickNavLink()}>
                 Nostr&nbsp;Relays
               </NavLink>
               </Collapsible.Trigger>
           </div>
-          <div>
+          <div class="ml-2">
             <Collapsible.Trigger as='a' >
               <NavLink testid='nostrkeys-link' href='/nostrkeys' onClick={() => handleClickNavLink()}>
                 Nostr&nbsp;Keys
               </NavLink>
             </Collapsible.Trigger>
           </div>
-          <div>
+          <div class="ml-2">
             <Collapsible.Trigger as='a' >
               <NavLink testid='classifiers-link' href='/classifiers' onClick={() => handleClickNavLink()}>
                 Classifiers
               </NavLink>
             </Collapsible.Trigger>
           </div>
-          <div>
+          <div class="ml-2">
             <Collapsible.Trigger as='a' >
               <NavLink testid='trainlabels-link' href='/trainlabels' onClick={() => handleClickNavLink()}>
                 Train&nbsp;Labels

diff --git a/src/style.css b/src/style.css
@@ -399,4 +399,151 @@ a {
 
 button {
   background-color: inherit;
+}
+.combobox__control {
+  display: inline-flex;
+  justify-content: space-between;
+  width: 400px;
+  border-radius: 6px;
+  font-size: 16px;
+  line-height: 0;
+  outline: none;
+  background-color: white;
+  border: 0px solid hsl(240 6% 90%);
+  color: hsl(240 4% 16%);
+  transition: border-color 250ms, color 250ms;
+}
+.combobox__control[data-invalid] {
+  border-color: hsl(0 72% 51%);
+  color: hsl(0 72% 51%);
+}
+.combobox__control_multi {
+  width: 100%;
+  min-width: 200px;
+  max-width: 300px;
+}
+.combobox__input {
+  appearance: none;
+  display: inline-flex;
+  min-width: 0;
+  min-height: 40px;
+  padding-left: 16px;
+  font-size: 16px;
+  background: transparent;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+  outline: none;
+}
+.combobox__input::placeholder {
+  color: hsl(240 4% 46%);
+}
+.combobox__trigger {
+  appearance: none;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: auto;
+  outline: none;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+  padding: 0 10px;
+  background-color: hsl(240 5% 96%);
+  border-left: 1px solid hsl(240 6% 90%);
+  color: hsl(240 4% 16%);
+  font-size: 16px;
+  line-height: 0;
+  transition: 250ms background-color;
+}
+.combobox__icon {
+  height: 20px;
+  width: 20px;
+  flex: 0 0 20px;
+}
+.combobox__description {
+  margin-top: 8px;
+  color: hsl(240 5% 26%);
+  font-size: 12px;
+  user-select: none;
+}
+.combobox__error-message {
+  margin-top: 8px;
+  color: hsl(0 72% 51%);
+  font-size: 12px;
+  user-select: none;
+}
+.combobox__content {
+  background-color: white;
+  border-radius: 6px;
+  border: 1px solid hsl(240 6% 90%);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  transform-origin: var(--kb-combobox-content-transform-origin);
+  animation: contentHide 250ms ease-in forwards;
+}
+.combobox__content[data-expanded] {
+  animation: contentShow 250ms ease-out;
+}
+.combobox__listbox {
+  overflow-y: auto;
+  max-height: 360px;
+  padding: 8px;
+}
+.combobox__listbox:focus {
+  outline: none;
+}
+.combobox__item {
+  font-size: 16px;
+  line-height: 1;
+  color: hsl(240 4% 16%);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 8px;
+  position: relative;
+  user-select: none;
+  outline: none;
+}
+.combobox__item[data-disabled] {
+  color: hsl(240 5% 65%);
+  opacity: 0.5;
+  pointer-events: none;
+}
+.combobox__item[data-highlighted] {
+  outline: none;
+  background-color: hsl(200 98% 39%);
+  color: white;
+}
+.combobox__section {
+  padding: 8px 0 0 8px;
+  font-size: 14px;
+  line-height: 32px;
+  color: hsl(240 4% 46%);
+}
+.combobox__item-indicator {
+  height: 20px;
+  width: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes contentHide {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+      opacity: 0;
+    transform: translateY(-8px);
+  }
 }