Issue umputun#31: Replace separate UI with the embedded HTMX based

- unified the select element for all browsers
oneils · Sep 15, 2023 · f43711e · f43711e
1 parent ce9be2a
commit f43711e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/backend/ui/html/pages/home.tmpl.html b/backend/ui/html/pages/home.tmpl.html
@@ -78,11 +78,13 @@
                         {{with .Form.FieldErrors.expUnit}}
                         <label class='error' style="display: none"></label>
                         {{end}}
+                        <div class="select-container">
                         <select name="expUnit">
                             <option value="m" {{if eq .Form.ExpUnit "s"}}selected{{end}}>minutes</option>
                             <option value="h" {{if eq .Form.ExpUnit "h"}}selected{{end}}>hours</option>
                             <option value="d" {{if eq .Form.ExpUnit "d"}}selected{{end}}>days</option>
                         </select>
+                        </div>
                     </div>
                     <div class="exp-errors">
                         {{with .Form.FieldErrors.exp}}

diff --git a/backend/ui/static/css/main.css b/backend/ui/static/css/main.css
@@ -75,6 +75,24 @@ select {
     padding: 5px 20px 5px 20px;
     min-width: 90px;
     border-radius: 8px;
+
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+.select-container {position:relative; display: inline;}
+.select-container:after {content:""; width:0; height:0; position:absolute; pointer-events: none;}
+.select-container:after {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    top: .3em;
+    right: .75em;
+    border-top: 8px solid #FFF;
+    opacity: 0.5;
+}
+select::-ms-expand {
+    display: none;
 }
 
 .wrapper {