List channel as button group

garbas · garbas · commit ba335063e8f7 · 2020-06-12T12:45:18.000+02:00
also fixes problem showing result when query is empty string fixes #92
diff --git a/src/Main.elm b/src/Main.elm
@@ -114,7 +114,7 @@ submitQuery :
 submitQuery old ( new, cmd ) =
     let
         triggerSearch _ newModel msg makeRequest =
-            if newModel.query /= Nothing then
+            if newModel.query /= Nothing && newModel.query /= Just "" then
                 ( new
                 , Cmd.batch
                     [ cmd
diff --git a/src/Search.elm b/src/Search.elm
@@ -36,7 +36,8 @@ import Html
         )
 import Html.Attributes
     exposing
-        ( class
+        ( attribute
+        , class
         , classList
         , href
         , type_
@@ -163,16 +164,25 @@ update path navKey msg model =
         ChannelChange channel ->
             ( { model
                 | channel = channel
-                , result = RemoteData.Loading
+                , result =
+                    if model.query == Nothing || model.query == Just "" then
+                        RemoteData.NotAsked
+
+                    else
+                        RemoteData.Loading
               }
-            , createUrl
-                path
-                channel
-                model.query
-                model.show
-                0
-                model.size
-                |> Browser.Navigation.pushUrl navKey
+            , if model.query == Nothing || model.query == Just "" then
+                Cmd.none
+
+              else
+                createUrl
+                    path
+                    channel
+                    model.query
+                    model.show
+                    0
+                    model.size
+                    |> Browser.Navigation.pushUrl navKey
             )
 
         QueryInput query ->
@@ -321,37 +331,45 @@ view path title model viewSuccess outMsg =
         [ h1 [ class "page-header" ] [ text title ]
         , div [ class "search-input" ]
             [ form [ onSubmit (outMsg QuerySubmit) ]
-                [ div [ class "input-append" ]
-                    [ input
-                        [ type_ "text"
-                        , onInput (\x -> outMsg (QueryInput x))
-                        , value <| Maybe.withDefault "" model.query
-                        ]
-                        []
-                    , div [ class "btn-group" ]
-                        [ button [ class "btn" ] [ text "Search" ]
-                        ]
-                    ]
-                , span []
+                [ p
+                    []
                     [ strong []
-                        [ text " in " ]
-                    , select
-                        [ onInput (\x -> outMsg (ChannelChange x)) ]
+                        [ text "Channel: " ]
+                    , div
+                        [ class "btn-group"
+                        , attribute "data-toggle" "buttons-radio"
+                        ]
                         (List.filterMap
                             (\channel_id ->
                                 channelDetailsFromId channel_id
                                     |> Maybe.map
                                         (\channel ->
-                                            option
-                                                [ value channel.id
+                                            button
+                                                [ type_ "button"
+                                                , classList
+                                                    [ ( "btn", True )
+                                                    , ( "active", channel.id == model.channel )
+                                                    ]
+                                                , onClick <| outMsg (ChannelChange channel.id)
                                                 ]
                                                 [ text channel.title ]
                                         )
                             )
                             channels
                         )
-                    , strong []
-                        [ text " channel." ]
+                    ]
+                , p
+                    [ class "input-append"
+                    ]
+                    [ input
+                        [ type_ "text"
+                        , onInput (\x -> outMsg (QueryInput x))
+                        , value <| Maybe.withDefault "" model.query
+                        ]
+                        []
+                    , div [ class "btn-group" ]
+                        [ button [ class "btn" ] [ text "Search" ]
+                        ]
                     ]
                 ]
             ]
diff --git a/src/index.scss b/src/index.scss
@@ -35,14 +35,18 @@ header .navbar.navbar-static-top {
     .input-append input {
       font-size: 24px;
       height: 40px;
-      width: 10em;
+      width: auto;
+      max-width: 15em;
     }
     .input-append button {
       font-size: 24px;
       height: 50px;
+      min-width: 4em;
     }
-    select {
-      width: 100px;
+    form > p > strong {
+      vertical-align: middle;
+      font-size: 1.2em;
+      margin-left: 0.2em;
     }
   }
   .search-result {

Original file line number	Diff line number	Diff line change
`@@ -35,14 +35,18 @@ header .navbar.navbar-static-top {`
`35`	`35`	`.input-append input {`
`36`	`36`	`font-size: 24px;`
`37`	`37`	`height: 40px;`
`38`		`- width: 10em;`
	`38`	`+ width: auto;`
	`39`	`+ max-width: 15em;`
`39`	`40`	`}`
`40`	`41`	`.input-append button {`
`41`	`42`	`font-size: 24px;`
`42`	`43`	`height: 50px;`
	`44`	`+ min-width: 4em;`
`43`	`45`	`}`
`44`		`- select {`
`45`		`- width: 100px;`
	`46`	`+ form > p > strong {`
	`47`	`+ vertical-align: middle;`
	`48`	`+ font-size: 1.2em;`
	`49`	`+ margin-left: 0.2em;`
`46`	`50`	`}`
`47`	`51`	`}`
`48`	`52`	`.search-result {`