improve search css and code

querwurzel · Nov 13, 2023 · ed074d5 · ed074d5
1 parent 0b769b5
commit ed074d5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 25 deletions.
diff --git a/frontend/src/components/SearchPastes/SearchPastes.tsx b/frontend/src/components/SearchPastes/SearchPastes.tsx
@@ -1,13 +1,13 @@
-import {Component, JSX, Show} from 'solid-js';
+import {Component, JSX, Show, For} from 'solid-js';
 import {A} from '@solidjs/router';
 import {PasteSearchView} from '../../api/model/PasteSearchView';
 import {toDateTimeString} from '../../datetime/DateTimeUtil';
 import styles from "./searchPastes.module.css";
 
 type SearchPastesProps = {
-  term: String
+  term: string
   pastes: Array<PasteSearchView>
-  onSearchEnter: (term: String) => void
+  onSearchEnter: (term: string) => void
 }
 
 const SearchPastes: Component<SearchPastesProps> = ({term, pastes, onSearchEnter}): JSX.Element => {
@@ -35,7 +35,7 @@ const SearchPastes: Component<SearchPastesProps> = ({term, pastes, onSearchEnter
     <>
       <form autocomplete="off" class={styles.searchForm} onSubmit={submitOnClick}>
         <fieldset>
-          <input onKeyUp={submitOnEnter} value={term} type="search" required minlength="3" maxlength="25" placeholder="Search for pastes" autofocus />
+          <input ref={searchInput} onKeyUp={submitOnEnter} value={term} type="search" required minlength="3" maxlength="25" placeholder="Search for pastes" autofocus />
           <input type="submit" value="Search"/>
           <input type="reset" value="Reset"/>
         </fieldset>

diff --git a/frontend/src/components/SearchPastes/searchPastes.module.css b/frontend/src/components/SearchPastes/searchPastes.module.css
@@ -26,20 +26,12 @@
     cursor: pointer;
 }
 
-
-
-
 .searchResults {
-    margin-top: 0;
-    padding-top: 0;
-    border-left: 1px dotted #a5a5a5;
-}
-
-.searchResults ol {
-    list-style: none;
     margin: 0;
     padding: 0;
-
+    list-style: none;
+    border: 1px dotted #a5a5a5;
+    border-radius: 7px;
 }
 
 .searchResults .item {
@@ -48,14 +40,6 @@
     border-top: 1px dotted #a5a5a5;
 }
 
-.searchResults .item p {
-    display: inline-flex;
-    align-items: start;
-    gap: 3px;
+.searchResults .item:first-child {
+    border-top: none;
 }
-
-.searchResults .item p {
-    display: inline-flex;
-    align-items: start;
-    gap: 3px;
-}