Website redesign

website/elm/Search.elm

@@ -1,11 +1,9 @@
 port module Search exposing (..)
 
-import Browser exposing (Document)
-import Browser.Navigation exposing (Key)
+import Browser
 import Html as H exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (onClick, onInput, onSubmit)
-import Json.Decode as D
 import Markdown
 
 
@@ -45,14 +43,21 @@ type alias SearchEntry =
     }
 
 
+type SearchState
+    = Initial
+    | Found (List SearchEntry)
+
+
 type alias Model =
     { searchInput : String
-    , results : List SearchEntry
+    , results : SearchState
+    , searchVisible : Bool
     }
 
 
 type Msg
     = SetSearch String
+    | ToggleBar
     | SubmitSearch
     | GetSearchResults (List SearchEntry)
 
@@ -64,7 +69,8 @@ type Msg
 init : Flags -> ( Model, Cmd Msg )
 init flags =
     ( { searchInput = ""
-      , results = []
+      , results = Initial
+      , searchVisible = False
       }
     , Cmd.none
     )
@@ -77,6 +83,11 @@ init flags =
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
+        ToggleBar ->
+            ( { model | searchVisible = not model.searchVisible }
+            , Cmd.none
+            )
+
         SetSearch str ->
             ( { model | searchInput = str }
             , Cmd.none
@@ -86,7 +97,7 @@ update msg model =
             ( model, doSearch model.searchInput )
 
         GetSearchResults list ->
-            ( { model | results = List.take 8 list }, Cmd.none )
+            ( { model | results = Found <| List.take 20 list }, Cmd.none )
 
 
 subscriptions : Model -> Sub Msg
@@ -100,56 +111,67 @@ subscriptions _ =
 
 view : Model -> Html Msg
 view model =
-    H.form
-        [ class "form"
-        , onSubmit SubmitSearch
+    div
+        [ class " inline-flex px-4 items-center hover:bg-amber-600 hover:bg-opacity-10  dark:hover:bg-stone-800"
         ]
-        [ div [ class "dropdown field is-active is-fullwidth has-addons" ]
-            [ div [ class "control is-fullwidth" ]
+        [ a
+            [ href "#"
+            , class "h-full w-full inline-flex items-center"
+            , onClick ToggleBar
+            ]
+            [ i [ class "fa fa-search" ] []
+            ]
+        , div
+            [ class "absolute px-2 mx-2 right-0 max-w-screen-md rounded top-12 w-full border-l border-r border-b bg-white h-12 dark:bg-stone-800 dark:border-stone-700"
+            , classList [ ( "hidden", not model.searchVisible ) ]
+            ]
+            [ H.form [ onSubmit SubmitSearch ]
                 [ input
-                    [ class "input"
-                    , type_ "text"
-                    , placeholder "Search docs…"
-                    , onInput SetSearch
+                    [ type_ "text"
                     , value model.searchInput
+                    , autofocus True
+                    , placeholder "Search …"
+                    , class "w-full block h-8 border-0 border-b border-stone-400 mt-2 focus:ring-0 focus:border-indigo-500 dark:bg-stone-800 dark:focus:border-cyan-400"
+                    , onInput SetSearch
                     ]
                     []
                 ]
-            , div [ class "control" ]
-                [ button
-                    [ class "button is-primary"
-                    , href "#"
-                    , onClick SubmitSearch
-                    ]
-                    [ img [ src "/icons/search-white-20.svg" ] []
-                    ]
-                ]
             , viewResults model.results
             ]
         ]
 
 
-viewResults : List SearchEntry -> Html Msg
-viewResults entries =
-    div
-        [ classList
-            [ ( "dropdown-menu", True )
-            , ( "is-hidden", entries == [] )
-            ]
-        ]
-        [ div [ class "dropdown-content" ]
-            (List.intersperse
-                (div [ class "dropdown-divider" ] [])
-                (List.map viewResult entries)
-            )
-        ]
+viewResults : SearchState -> Html Msg
+viewResults state =
+    case state of
+        Initial ->
+            span [ class "hidden" ] []
+
+        Found [] ->
+            div
+                [ class "bg-white dark:bg-stone-800 mt-2 w-full"
+                ]
+                [ div [ class "flex flex-row items-center h-14 justify-center text-xl" ]
+                    [ i [ class "fa fa-meh font-thin mr-2" ]
+                        []
+                    , text "No results."
+                    ]
+                ]
+
+        Found entries ->
+            div
+                [ class "bg-white dark:bg-stone-800 mt-2 w-screen sm:w-full h-screen-12 md:h-fit md:max-h-96 overflow-auto shadow-lg border-l border-r border-b dark:border-stone-700"
+                ]
+                [ div [ class "px-2 pt-2 pb-1 flex flex-col divide-y dark:divide-stone-700 " ]
+                    (List.map viewResult entries)
+                ]
 
 
 viewResult : SearchEntry -> Html Msg
 viewResult result =
-    div [ class "dropdown-item" ]
+    div [ class "py-2 content" ]
         [ a
-            [ class "is-size-5"
+            [ class "text-lg font-semibold"
             , href result.ref
             ]
             [ text result.doc.title
@@ -158,6 +180,16 @@ viewResult result =
         ]
 
 
+textInput : String
+textInput =
+    " placeholder-gray-400 w-full dark:text-slate-200 dark:bg-slate-800 dark:border-slate-500 border-gray-400 rounded " ++ formFocusRing
+
+
+formFocusRing : String
+formFocusRing =
+    " focus:ring focus:ring-black focus:ring-opacity-50 focus:ring-offset-0 dark:focus:ring-slate-400 "
+
+
 
 --- Ports