Add a scroll view so that messages can be scrolled without input.

This commit is contained in:
Danila Fedorin 2018-12-10 15:27:18 -08:00
parent 56a2212410
commit d855467f14
2 changed files with 17 additions and 3 deletions

View File

@ -108,7 +108,7 @@ joinedRoomView m roomId jr =
] ]
eventWrapperView : Model -> List (Html Msg) -> Html Msg eventWrapperView : Model -> List (Html Msg) -> Html Msg
eventWrapperView m = table [ class "events-wrapper" ] eventWrapperView m es = div [ class "events-wrapper" ] [ table [ class "events-table" ] es ]
eventView : Model -> RoomEvent -> Maybe (Html Msg) eventView : Model -> RoomEvent -> Maybe (Html Msg)
eventView m re = eventView m re =

View File

@ -9,6 +9,10 @@ $inactive-input-color: darken($active-input-color, 3%);
$active-input-border-color: $primary-color; $active-input-border-color: $primary-color;
$inactive-input-border-color: darken($inactive-input-color, 10%); $inactive-input-border-color: darken($inactive-input-color, 10%);
html, body {
height: 100vh;
}
body { body {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
margin: 0px; margin: 0px;
@ -81,9 +85,11 @@ div.login-wrapper {
*/ */
div.base-wrapper { div.base-wrapper {
display: flex; display: flex;
height: 100%;
div { div {
margin: 3px; padding: 3px;
box-sizing: border-box;
} }
h2 { h2 {
@ -109,6 +115,9 @@ div.rooms-wrapper {
*/ */
div.room-wrapper { div.room-wrapper {
flex-grow: 1; flex-grow: 1;
display: flex;
height: 100%;
flex-direction: column;
} }
/* /*
@ -128,7 +137,12 @@ div.message-wrapper {
} }
} }
table.events-wrapper { div.events-wrapper {
overflow-y: scroll;
flex-grow: 1;
}
table.events-table {
td { td {
padding-left: 5px; padding-left: 5px;
vertical-align: top; vertical-align: top;