ui: Add message back/close button for mobile

ui/src/Page/Mailbox.elm

@@ -136,6 +136,7 @@ type Msg
     = ListLoaded (Result HttpUtil.Error (List MessageHeader))
     | ClickMessage MessageID
     | OpenMessage MessageID
+    | CloseMessage
     | MessageLoaded (Result HttpUtil.Error Message)
     | MessageBody Body
     | OpenedTime Posix
@@ -166,6 +167,14 @@ update msg model =
         OpenMessage id ->
             updateOpenMessage model.session model id
 
+        CloseMessage ->
+            case model.state of
+                ShowingList list _ ->
+                    ( { model | state = ShowingList list NoMessage }, Cmd.none )
+
+                _ ->
+                    ( model, Cmd.none )
+
         DeleteMessage message ->
             updateDeleteMessage model.session model message
 
@@ -466,10 +475,19 @@ updateOpenMessage session model id =
 
 view : Model -> { title : String, modal : Maybe (Html Msg), content : List (Html Msg) }
 view model =
+    let
+        mode =
+            case model.state of
+                ShowingList _ (ShowingMessage _) ->
+                    "message-active"
+
+                _ ->
+                    "list-active"
+    in
     { title = model.mailboxName ++ " - Inbucket"
     , modal = viewModal model.promptPurge
     , content =
-        [ div [ class "mailbox" ]
+        [ div [ class ("mailbox " ++ mode) ]
             [ aside [ class "message-list-controls" ]
                 [ input
                     [ type_ "search"
@@ -574,7 +592,9 @@ viewMessage zone message bodyMode =
     in
     div []
         [ div [ class "button-bar" ]
-            [ button [ class "danger", onClick (DeleteMessage message) ] [ text "Delete" ]
+            [ button [ class "message-close light", onClick CloseMessage ]
+                [ i [ class "fas fa-arrow-left" ] [] ]
+            , button [ class "danger", onClick (DeleteMessage message) ] [ text "Delete" ]
             , a
                 [ href sourceUrl, target "_blank" ]
                 [ button [] [ text "Source" ] ]

ui/src/mailbox.css

@@ -10,21 +10,41 @@
 }
 
 .message-list-controls {
-  display: flex;
+  display: none;
   grid-area: ctrl;
 }
 
+.list-active .message-list-controls {
+  display: flex;
+}
+
 .message-list-controls input[type="search"] {
   flex: 1 1 auto;
   padding: 2px 4px;
 }
 
 .message-list {
+  display: none;
   grid-area: list;
 }
 
+.list-active .message-list {
+  display: block;
+}
+
 .message {
+  display: none;
   grid-area: mesg;
+  min-height: 0;
+  min-width: 0;
+}
+
+.message-active .message {
+  display: block;
+}
+
+.message-close {
+  margin-right: auto !important;
 }
 
 @media screen and (min-width: 1000px) {
@@ -37,12 +57,22 @@
   }
 
   .message-list {
+    display: block;
     overflow-y: scroll;
   }
 
+  .message-list-controls {
+    display: flex;
+  }
+
   .message {
+    display: block;
     overflow: auto;
   }
+
+  .message-close {
+    display: none !important;
+  }
 }
 
 .message-list-entry {
@@ -157,4 +187,3 @@ nav.tab-bar a.active:hover {
 .attachments {
   width: 100%;
 }
-

ui/src/main.css

@@ -213,22 +213,30 @@ h3 {
 
 /** BUTTONS */
 
+.button-bar {
+  display: flex;
+}
+
 .button-bar button {
   background-color: #337ab7;
   background-image: linear-gradient(to bottom, #337ab7 0, #265a88 100%);
   border: none;
   border-radius: 4px;
   color: #fff;
+  display: inline-block;
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
   height: 30px;
-  margin: 0 4px 0 0;
-  padding: 5px;
+  margin: 0;
+  padding: 5px 10px;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
-  width: 8em;
+}
+
+.button-bar *:not(:last-child) {
+  margin-right: 4px;
 }
 
 .button-bar button.danger {
@@ -236,6 +244,18 @@ h3 {
   background-image: linear-gradient(to bottom, #d9534f 0, #c12e2a 100%);
 }
 
+.button-bar button.light {
+  background-color: #eee;
+  background-image: linear-gradient(to bottom, #f0f0f0 0, #e0e0e0 100%);
+  color: #000;
+}
+
+@media screen and (min-width: 1000px) {
+  .button-bar button {
+    width: 8em;
+  }
+}
+
 /** STATUS */
 
 .metric-panel {