ui overhaul #1

eimfach · Aug 25, 2020 · 7be238c · 7be238c
1 parent 0e1b4b0
commit 7be238c
Show file tree

Hide file tree

Showing 4 changed files with 221 additions and 187 deletions.
diff --git a/_posts/2019-09-05-project-atlantic.markdown b/_posts/2019-09-05-project-atlantic.markdown
@@ -60,7 +60,9 @@ date: '2018-08-29 10:26'
 
 8. UI/UX Improvments
 
-- [ ] Merge File Select and Tagging Section
+- [x] Merge File Select and Tagging Section
+- [ ] Instant Search for Batch Tagging
+- [ ] Move 'Manage Tags' and 'Tagged Records' Sections into Tagging Section accessible via NavBar Icon
 
 9. Integrate `elm-program-test`
 

diff --git a/src/elm/Input.elm b/src/elm/Input.elm
@@ -1,23 +1,24 @@
 module Input exposing (viewAutocomplete, viewDefault, viewRadio, viewRadioGroup, viewWithButton)
 
 import Button
-import Html exposing (Attribute, Html, datalist, div, input, label, option, text)
-import Html.Attributes exposing (class, id, list, name, style, type_, value)
+import Html exposing (Attribute, Html, datalist, div, input, label, option, span, text)
+import Html.Attributes exposing (attribute, class, id, list, name, style, type_, value)
 import Html.Events exposing (onClick)
 import Set exposing (Set)
 
 
 view : List (Html msg) -> Html msg
 view childs =
-    div [ class "uk-form-controls" ]
+    div [ class "uk-inline uk-width-expand" ]
         childs
 
 
-viewDefault : String -> List (Attribute msg) -> Html msg
-viewDefault val inputAttr =
+viewDefault : String -> String -> List (Attribute msg) -> Html msg
+viewDefault icon val inputAttr =
     view
-        [ input
-            ([ class "uk-input", type_ "text", value val ]
+        [ span [ class "uk-form-icon", attribute "uk-icon" "icon: search" ] []
+        , input
+            ([ class "uk-input ", type_ "text", value val ]
                 ++ inputAttr
             )
             []
@@ -66,17 +67,19 @@ viewRadioGroup groupName msg radioLabels =
     List.map (viewRadio msg groupName) radioLabels
 
 
-viewAutocomplete : String -> String -> String -> List (Html.Attribute msg) -> Set String -> Html msg
-viewAutocomplete labelText val idVal inputAttr options =
-    div [ class "uk-form-horizontal" ]
-        [ div [ class "uk-margin" ]
-            [ label [ class "uk-form-label" ] [ text labelText ]
-            , viewDefault val
+viewAutocomplete : String -> String -> String -> String -> List (Html.Attribute msg) -> Set String -> Html msg
+viewAutocomplete labelText icon val idVal inputAttr options =
+    div [ class "uk-form-horizontal uk-margin uk-grid" ]
+        [ div [ class "uk-width-2-6 uk-width-1-6@m" ] [ label [ class "uk-form-label" ] [ text labelText ] ]
+        , div [ class "uk-width-4-6 uk-width-5-6@m" ]
+            [ viewDefault
+                icon
+                val
                 (inputAttr
                     ++ [ list idVal ]
                 )
-            , viewDataList idVal options
             ]
+        , viewDataList idVal options
         ]