From d7ccdd3304f96cf2edaf401421fa50003f7107ce Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 28 Oct 2020 16:56:20 +0100 Subject: [PATCH] switch main layout from flexbox to grid so we can overlay a lightbox --- src/platform/web/ui/css/layout.css | 63 ++++++++++++++++------ src/platform/web/ui/session/SessionView.js | 28 +++++----- 2 files changed, 61 insertions(+), 30 deletions(-) diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css index 2ee584b0..1a32167b 100644 --- a/src/platform/web/ui/css/layout.css +++ b/src/platform/web/ui/css/layout.css @@ -19,6 +19,11 @@ html { height: 100%; } +/* unknown element in IE11 that defaults to inline */ +main { + display: block; +} + @media screen and (min-width: 600px) { .PreSessionScreen { width: 600px; @@ -34,46 +39,60 @@ html { } .SessionView { - display: flex; - flex-direction: column; /* this takes into account whether or not the url bar is hidden on mobile (have tested Firefox Android and Safari on iOS), see https://developers.google.com/web/updates/2016/12/url-bar-resizing */ position: fixed; height: 100%; -} - -.SessionView > .main { - flex: 1; - display: flex; + width: 100%; + display: grid; + grid-template: + "status status" auto + "left middle" 1fr / + 300px 1fr; min-height: 0; min-width: 0; - width: 100vw; } /* hide back button in middle section by default */ .middle .close-middle { display: none; } /* mobile layout */ @media screen and (max-width: 800px) { + .SessionView:not(.middle-shown) { + grid-template: + "status" auto + "left" 1fr / + 1fr; + } + + .SessionView.middle-shown { + grid-template: + "status" auto + "middle" 1fr / + 1fr; + } + + .SessionView:not(.middle-shown) .room-placeholder { display: none; } + .SessionView.middle-shown .LeftPanel { display: none; } + /* show back button */ .middle .close-middle { display: block !important; } /* hide grid button */ .LeftPanel .grid { display: none !important; } - div.middle, div.room-placeholder { display: none; } - div.LeftPanel {flex-grow: 1;} - div.middle-shown div.middle { display: flex; } - div.middle-shown div.LeftPanel { display: none; } - div.right-shown div.TimelinePanel { display: none; } } .LeftPanel { - flex: 0 0 300px; + grid-area: left; min-width: 0; } .room-placeholder, .middle { - flex: 1 0 0; min-width: 0; + grid-area: middle; + /* when room view is inside of a grid, + grid-area middle won't be found, + so set width manually */ + width: 100%; } .RoomView { @@ -81,6 +100,20 @@ html { display: flex; } +.SessionStatusView { + grid-area: status; +} + +.lightbox { + /* cover left and middle panel, not status view + use numeric positions because named grid areas + are not present in mobile layout */ + grid-area: 2 / 1 / 3 / 3; + background-color: rgba(0,0,0,0.5); + /* this should not be necessary, but chrome seems to have a bug when there are scrollbars in other grid items, + it seems to put the scroll areas on top of the other grid items unless they have a z-index */ + z-index: 1; +} .TimelinePanel { flex: 3; diff --git a/src/platform/web/ui/session/SessionView.js b/src/platform/web/ui/session/SessionView.js index fbd3eb23..cc16b8d8 100644 --- a/src/platform/web/ui/session/SessionView.js +++ b/src/platform/web/ui/session/SessionView.js @@ -32,21 +32,19 @@ export class SessionView extends TemplateView { }, }, [ t.view(new SessionStatusView(vm.sessionStatusViewModel)), - t.div({className: "main"}, [ - t.view(new LeftPanelView(vm.leftPanelViewModel)), - t.mapView(vm => vm.activeSection, activeSection => { - switch (activeSection) { - case "roomgrid": - return new RoomGridView(vm.roomGridViewModel); - case "placeholder": - return new StaticView(t => t.div({className: "room-placeholder"}, t.h2(vm.i18n`Choose a room on the left side.`))); - case "settings": - return new SettingsView(vm.settingsViewModel); - default: //room id - return new RoomView(vm.currentRoomViewModel); - } - }) - ]) + t.view(new LeftPanelView(vm.leftPanelViewModel)), + t.mapView(vm => vm.activeSection, activeSection => { + switch (activeSection) { + case "roomgrid": + return new RoomGridView(vm.roomGridViewModel); + case "placeholder": + return new StaticView(t => t.div({className: "room-placeholder"}, t.h2(vm.i18n`Choose a room on the left side.`))); + case "settings": + return new SettingsView(vm.settingsViewModel); + default: //room id + return new RoomView(vm.currentRoomViewModel); + } + }), ]); } }