diff --git a/modules/webapp/src/main/elm/Comp/ItemCardList.elm b/modules/webapp/src/main/elm/Comp/ItemCardList.elm index c82eb2da..1f6f4b32 100644 --- a/modules/webapp/src/main/elm/Comp/ItemCardList.elm +++ b/modules/webapp/src/main/elm/Comp/ItemCardList.elm @@ -79,16 +79,13 @@ view model = viewGroup : ItemLightGroup -> Html Msg viewGroup group = - div [] <| - List.concat - [ [ div [ class "ui horizontal divider" ] - [ text group.name - ] - ] - , [ div [ class "ui one column grid" ] - (List.map viewItem group.items) - ] + div [ class "item-group" ] + [ div [ class "ui horizontal divider" ] + [ text group.name ] + , div [ class "ui one column grid" ] + (List.map viewItem group.items) + ] viewItem : ItemLight -> Html Msg diff --git a/modules/webapp/src/main/elm/Page/Home/Data.elm b/modules/webapp/src/main/elm/Page/Home/Data.elm index 50a1269e..2ca78dbb 100644 --- a/modules/webapp/src/main/elm/Page/Home/Data.elm +++ b/modules/webapp/src/main/elm/Page/Home/Data.elm @@ -17,6 +17,7 @@ type alias Model = , itemListModel : Comp.ItemCardList.Model , searchInProgress : Bool , viewMode : ViewMode + , menuCollapsed : Bool } @@ -26,6 +27,7 @@ emptyModel = , itemListModel = Comp.ItemCardList.init , searchInProgress = False , viewMode = Listing + , menuCollapsed = False } @@ -36,6 +38,7 @@ type Msg | ItemCardListMsg Comp.ItemCardList.Msg | ItemSearchResp (Result Http.Error ItemLightList) | DoSearch + | ToggleSearchMenu type ViewMode diff --git a/modules/webapp/src/main/elm/Page/Home/Update.elm b/modules/webapp/src/main/elm/Page/Home/Update.elm index ab71dc25..b3e1e327 100644 --- a/modules/webapp/src/main/elm/Page/Home/Update.elm +++ b/modules/webapp/src/main/elm/Page/Home/Update.elm @@ -68,6 +68,11 @@ update key flags msg model = DoSearch -> doSearch flags model + ToggleSearchMenu -> + ( { model | menuCollapsed = not model.menuCollapsed } + , Cmd.none + ) + doSearch : Flags -> Model -> ( Model, Cmd Msg ) doSearch flags model = diff --git a/modules/webapp/src/main/elm/Page/Home/View.elm b/modules/webapp/src/main/elm/Page/Home/View.elm index 38da8c5a..f2a804e0 100644 --- a/modules/webapp/src/main/elm/Page/Home/View.elm +++ b/modules/webapp/src/main/elm/Page/Home/View.elm @@ -12,21 +12,33 @@ import Page.Home.Data exposing (..) view : Model -> Html Msg view model = div [ class "home-page ui padded grid" ] - [ div [ class "four wide column" ] - [ div [ class "ui top attached ablue-comp menu" ] - [ h4 [ class "header item" ] - [ text "Search" + [ div + [ classList + [ ( "sixteen wide mobile six wide tablet four wide computer column", True ) + , ( "invisible hidden", model.menuCollapsed ) + ] + ] + [ div + [ class "ui top attached ablue-comp menu" + ] + [ a + [ class "item" + , href "#" + , onClick ToggleSearchMenu + ] + [ i [ class "ui angle down icon" ] [] + , text "Search" ] , div [ class "right floated menu" ] [ a - [ class "item" + [ class "icon item" , onClick ResetSearch , href "#" ] [ i [ class "undo icon" ] [] ] , a - [ class "item" + [ class "icon item" , onClick DoSearch , href "" ] @@ -38,8 +50,28 @@ view model = [ Html.map SearchMenuMsg (Comp.SearchMenu.view model.searchMenuModel) ] ] - , div [ class "twelve wide column" ] - [ case model.viewMode of + , div + [ classList + [ ( "sixteen wide mobile ten wide tablet twelve wide computer column", not model.menuCollapsed ) + , ( "sixteen wide column", model.menuCollapsed ) + ] + ] + [ div + [ classList + [ ( "invisible hidden", not model.menuCollapsed ) + , ( "ui segment container", True ) + ] + ] + [ a + [ class "ui basic large circular label" + , onClick ToggleSearchMenu + , href "#" + ] + [ i [ class "search icon" ] [] + , text "Search Menu…" + ] + ] + , case model.viewMode of Listing -> if model.searchInProgress then resultPlaceholder