From 6992416c5a4a05a1dc74897db81f3a1c6dbf8939 Mon Sep 17 00:00:00 2001
From: Rok Garbas <rok@garbas.si>
Date: Fri, 12 Jun 2020 12:57:47 +0200
Subject: [PATCH] List channel as button group (#98)

also fixes problem showing result when query is empty string

fixes #92
---
 src/Main.elm   |  2 +-
 src/Search.elm | 82 ++++++++++++++++++++++++++++++--------------------
 src/index.scss | 10 ++++--
 3 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/src/Main.elm b/src/Main.elm
index 16a73cc..ef84da1 100644
--- 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
index bac830c..22e28c9 100644
--- 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,7 +331,36 @@ view path title model viewSuccess outMsg =
         [ h1 [ class "page-header" ] [ text title ]
         , div [ class "search-input" ]
             [ form [ onSubmit (outMsg QuerySubmit) ]
-                [ div [ class "input-append" ]
+                [ p
+                    []
+                    [ strong []
+                        [ text "Channel: " ]
+                    , div
+                        [ class "btn-group"
+                        , attribute "data-toggle" "buttons-radio"
+                        ]
+                        (List.filterMap
+                            (\channel_id ->
+                                channelDetailsFromId channel_id
+                                    |> Maybe.map
+                                        (\channel ->
+                                            button
+                                                [ type_ "button"
+                                                , classList
+                                                    [ ( "btn", True )
+                                                    , ( "active", channel.id == model.channel )
+                                                    ]
+                                                , onClick <| outMsg (ChannelChange channel.id)
+                                                ]
+                                                [ text channel.title ]
+                                        )
+                            )
+                            channels
+                        )
+                    ]
+                , p
+                    [ class "input-append"
+                    ]
                     [ input
                         [ type_ "text"
                         , onInput (\x -> outMsg (QueryInput x))
@@ -332,27 +371,6 @@ view path title model viewSuccess outMsg =
                         [ button [ class "btn" ] [ text "Search" ]
                         ]
                     ]
-                , span []
-                    [ strong []
-                        [ text " in " ]
-                    , select
-                        [ onInput (\x -> outMsg (ChannelChange x)) ]
-                        (List.filterMap
-                            (\channel_id ->
-                                channelDetailsFromId channel_id
-                                    |> Maybe.map
-                                        (\channel ->
-                                            option
-                                                [ value channel.id
-                                                ]
-                                                [ text channel.title ]
-                                        )
-                            )
-                            channels
-                        )
-                    , strong []
-                        [ text " channel." ]
-                    ]
                 ]
             ]
         , case model.result of
diff --git a/src/index.scss b/src/index.scss
index f1db26a..617a6a3 100644
--- 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 {