Make details dismissable on mobile

www/src/App.elm

@@ -305,6 +305,9 @@ colors =
         blue =
             E.rgb255 100 100 255
 
+        slate =
+            E.rgb255 150 150 200
+
         lighterGrey =
             E.rgb255 60 60 60
 
@@ -336,6 +339,7 @@ colors =
             E.rgb255 47 79 79
     in
     { primary = blue
+    , secondary = slate
     , background = lightGrey
     , navBar = darkerGrey
     , sidebar = lighterGrey
@@ -375,7 +379,7 @@ searchBar model =
         , E.width E.fill
         , Background.color colors.navBar
         ]
-        [ E.row [ E.spacing 10 ]
+        [ E.row [ E.spacing 10, E.width E.fill ]
             [ Input.text
                 [ onEnter Search
                 , Background.color colors.background
@@ -555,23 +559,23 @@ viewCardBrowser model =
 
         details =
             if isMobile model.device then
-                E.column
-                    [ E.spacing 10
-                    , E.padding 10
-                    , E.height <| E.fillPortion 1
-                    , E.width E.fill
-                    , Background.color colors.sidebar
-                    , E.scrollbarY
-                    ]
-                <|
-                    case model.activeCard of
-                        Just card ->
+                case model.activeCard of
+                    Just card ->
+                        E.column
+                            [ E.spacing 10
+                            , E.padding 10
+                            , E.height <| E.fillPortion 1
+                            , E.width E.fill
+                            , Background.color colors.sidebar
+                            , E.scrollbarY
+                            ]
+                        <|
                             E.paragraph [ Font.heavy, Font.size 24, Font.center ] [ E.text card.name ]
                                 :: List.map (\text -> E.paragraph [ Font.size 16 ] [ E.text text ])
                                     (String.lines card.oracleText)
 
-                        _ ->
-                            [ E.none ]
+                    Nothing ->
+                        E.none
 
             else
                 E.el
@@ -587,6 +591,22 @@ viewCardBrowser model =
                             E.none
                     )
 
+        closedetails =
+            case model.activeCard of
+                Just _ ->
+                    Input.button
+                        [ E.height (E.px 30)
+                        , E.width E.fill
+                        , Background.color colors.secondary
+                        , Border.rounded 5
+                        , Font.color colors.text
+                        , Font.center
+                        ]
+                        { label = E.text "Close", onPress = Just ClearCardDetails }
+
+                Nothing ->
+                    E.none
+
         navButton text maybeUrl =
             case maybeUrl of
                 Just url ->
@@ -655,7 +675,7 @@ viewCardBrowser model =
                     , Font.color colors.text
                     , E.scrollbarY
                     ]
-                    [ details, cards cardPage ]
+                    [ details, closedetails, cards cardPage ]
 
             else
                 E.row