Mirrors/go-inbucket
1
0
Fork 0
mirror of https://github.com/jhillyerd/inbucket.git synced 2025-12-17 17:47:03 +00:00
Code Issues Releases Wiki Activity

ui: Make message & list scroll within viewport

Browse Source
This commit is contained in:
James Hillyerd
2018-11-25 21:19:28 -08:00
parent 6a95dfe5c6
commit 7a16f64ff0
2 changed files with 42 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
ui/src/Page/Mailbox.elm
View File

@@ -475,7 +475,17 @@ view session model =
{ title = model.mailboxName ++ " - Inbucket" { title = model.mailboxName ++ " - Inbucket"
, content = , content =
div [ class "page mailbox" ] div [ class "page mailbox" ]
[ viewMessageList session model [ aside [ class "message-list-controls" ]
[ input
[ type_ "search"
, placeholder "search"
, onInput OnSearchInput
, value model.searchInput
]
[]
, button [ onClick PurgeMailbox ] [ text "Purge" ]
]
, viewMessageList session model
, main_ , main_
[ class "message" ] [ class "message" ]
[ case model.state of [ case model.state of
@@ -500,29 +510,16 @@ view session model =
viewMessageList : Session -> Model -> Html Msg viewMessageList : Session -> Model -> Html Msg
viewMessageList session model = viewMessageList session model =
aside [ class "message-list" ] aside [ class "message-list" ] <|
[ div [] case model.state of
[ input
[ type_ "search"
, placeholder "search"
, onInput OnSearchInput
, value model.searchInput
]
[]
, button [ onClick PurgeMailbox ] [ text "Purge" ]
]
, case model.state of
LoadingList _ -> LoadingList _ ->
div [] [] []
ShowingList list _ -> ShowingList list _ ->
div [] list
(list
|> filterMessageList |> filterMessageList
|> List.reverse |> List.reverse
|> List.map (messageChip model list.selected) |> List.map (messageChip model list.selected)
)
]
messageChip : Model -> Maybe MessageID -> MessageHeader -> Html Msg messageChip : Model -> Maybe MessageID -> MessageHeader -> Html Msg

40
ui/src/main.css
View File

@@ -115,6 +115,7 @@ header {
.page { .page {
grid-area: page; grid-area: page;
min-height: 0; /* Allows scrolling in nested flex/grids. */
} }
footer { footer {
@@ -284,28 +285,34 @@ li.navbar-active span,
.mailbox { .mailbox {
display: grid; display: grid;
grid-area: page; grid-area: page;
grid-gap: 20px; grid-gap: 1px 20px;
grid-template-areas: grid:
"list mesg"; "ctrl mesg" auto
grid-template-columns: "list mesg" 1fr / minmax(200px, 300px) minmax(650px, 1000px);
minmax(200px, 300px)
minmax(650px, 1000px);
grid-template-rows: 1fr;
} }
@media (max-width: 999px) { .message-list-controls {
.mailbox { grid-area: ctrl;
grid-template-areas:
"list"
"mesg";
grid-template-columns: none;
grid-template-rows: none;
justify-self: center;
}
} }
.message-list { .message-list {
grid-area: list; grid-area: list;
overflow-y: scroll;
}
@media (max-width: 999px) {
.mailbox {
grid:
"ctrl" auto
"list" auto
"mesg" auto / 1fr;
justify-self: center;
width: 100%;
}
.message-list {
overflow-y: visible;
}
} }
.message-list-entry { .message-list-entry {
@@ -343,6 +350,7 @@ li.navbar-active span,
.message { .message {
grid-area: mesg; grid-area: mesg;
overflow: auto;
} }
.message-header { .message-header {