diff --git a/ui/src/HttpUtil.elm b/ui/src/HttpUtil.elm index 3c32d34..bd089eb 100644 --- a/ui/src/HttpUtil.elm +++ b/ui/src/HttpUtil.elm @@ -81,12 +81,12 @@ errorFlash error = } Http.NetworkError -> - { title = "HTTP Network error" + { title = "HTTP network error" , table = [] } Http.BadStatus res -> - { title = "Bad HTTP status" + { title = "HTTP response error" , table = [ ( "Response Code", String.fromInt res ) ] } diff --git a/ui/src/Main.elm b/ui/src/Main.elm index 377752c..2dd4444 100644 --- a/ui/src/Main.elm +++ b/ui/src/Main.elm @@ -307,7 +307,7 @@ view model = framePage : ActivePage -> (msg -> Msg) - -> { title : String, modal : Maybe (Html msg), content : Html msg } + -> { title : String, modal : Maybe (Html msg), content : List (Html msg) } -> Document Msg framePage page toMsg { title, modal, content } = Document title @@ -315,7 +315,7 @@ view model = model.session page (Maybe.map (Html.map toMsg) modal) - (Html.map toMsg content) + (List.map (Html.map toMsg) content) ] in case model.page of diff --git a/ui/src/Page/Home.elm b/ui/src/Page/Home.elm index 34375a2..6059476 100644 --- a/ui/src/Page/Home.elm +++ b/ui/src/Page/Home.elm @@ -45,16 +45,15 @@ update session msg model = -- VIEW -- -view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : Html Msg } +view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : List (Html Msg) } view session model = { title = "Inbucket" , modal = Nothing , content = - div [ class "page" ] - [ Html.node "rendered-html" - [ class "greeting" - , property "content" (Encode.string model.greeting) - ] - [] + [ Html.node "rendered-html" + [ class "greeting" + , property "content" (Encode.string model.greeting) ] + [] + ] } diff --git a/ui/src/Page/Mailbox.elm b/ui/src/Page/Mailbox.elm index 3bdf0b8..f5a8e05 100644 --- a/ui/src/Page/Mailbox.elm +++ b/ui/src/Page/Mailbox.elm @@ -444,12 +444,12 @@ updateOpenMessage session model id = -- VIEW -view : Session -> Model -> { title : String, modal : Maybe (Html Msg), content : Html Msg } +view : Session -> Model -> { title : String, modal : Maybe (Html Msg), content : List (Html Msg) } view session model = { title = model.mailboxName ++ " - Inbucket" , modal = viewModal model.promptPurge , content = - div [ class "page mailbox" ] + [ div [ class "mailbox" ] [ aside [ class "message-list-controls" ] [ input [ type_ "search" @@ -480,6 +480,7 @@ view session model = text "" ] ] + ] } diff --git a/ui/src/Page/Monitor.elm b/ui/src/Page/Monitor.elm index 3a3b96d..83aaeef 100644 --- a/ui/src/Page/Monitor.elm +++ b/ui/src/Page/Monitor.elm @@ -88,35 +88,34 @@ update session msg model = -- VIEW -view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : Html Msg } +view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : List (Html Msg) } view session model = { title = "Inbucket Monitor" , modal = Nothing , content = - div [ class "page" ] - [ h1 [] [ text "Monitor" ] - , p [] - [ text "Messages will be listed here shortly after delivery. " - , em [] - [ text - (if model.connected then - "Connected." + [ h1 [] [ text "Monitor" ] + , p [] + [ text "Messages will be listed here shortly after delivery. " + , em [] + [ text + (if model.connected then + "Connected." - else - "Disconnected!" - ) - ] - ] - , table [ class "monitor" ] - [ thead [] - [ th [] [ text "Date" ] - , th [ class "desktop" ] [ text "From" ] - , th [] [ text "Mailbox" ] - , th [] [ text "Subject" ] - ] - , tbody [] (List.map (viewMessage session.zone) model.messages) + else + "Disconnected!" + ) ] ] + , table [ class "monitor" ] + [ thead [] + [ th [] [ text "Date" ] + , th [ class "desktop" ] [ text "From" ] + , th [] [ text "Mailbox" ] + , th [] [ text "Subject" ] + ] + , tbody [] (List.map (viewMessage session.zone) model.messages) + ] + ] } diff --git a/ui/src/Page/Status.elm b/ui/src/Page/Status.elm index e48564a..f737138 100644 --- a/ui/src/Page/Status.elm +++ b/ui/src/Page/Status.elm @@ -225,15 +225,14 @@ updateRemoteTotal metric value history = -- VIEW -- -view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : Html Msg } +view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : List (Html Msg) } view session model = { title = "Inbucket Status" , modal = Nothing , content = - div [ class "page" ] - [ h1 [] [ text "Status" ] - , div [] (configPanel model.config :: metricPanels model) - ] + [ h1 [] [ text "Status" ] + , div [] (configPanel model.config :: metricPanels model) + ] } diff --git a/ui/src/Views/Page.elm b/ui/src/Views/Page.elm index bd788c1..4035e38 100644 --- a/ui/src/Views/Page.elm +++ b/ui/src/Views/Page.elm @@ -37,7 +37,7 @@ type alias FrameControls msg = } -frame : FrameControls msg -> Session -> ActivePage -> Maybe (Html msg) -> Html msg -> Html msg +frame : FrameControls msg -> Session -> ActivePage -> Maybe (Html msg) -> List (Html msg) -> Html msg frame controls session page modal content = div [ class "app" ] [ header [] @@ -59,11 +59,10 @@ frame controls session page modal content = ] ] ] - , errorFlash controls session.flash ] , div [ class "navbar-bg" ] [ text "" ] , frameModal modal - , content + , div [ class "page" ] ([ errorFlash controls session.flash ] ++ content) , footer [] [ div [ class "footer" ] [ externalLink "https://www.inbucket.org" "Inbucket" diff --git a/ui/src/main.css b/ui/src/main.css index 6a7634e..638a374 100644 --- a/ui/src/main.css +++ b/ui/src/main.css @@ -115,7 +115,9 @@ header { .page { grid-area: page; - min-height: 0; /* Allows scrolling in nested flex/grids. */ + /* Explicit minimums required for sizing/scrolling in nested flex+grids. */ + min-height: 0; + min-width: 0; } footer { @@ -159,7 +161,6 @@ h1 { } .flash-table { - max-width: 90vw; overflow: auto; } @@ -310,7 +311,6 @@ li.navbar-active span, .mailbox { display: grid; - grid-area: page; grid-gap: 1px 20px; grid: "ctrl mesg" auto