From 1486772312716400600351f5c9708d989a3cfe07 Mon Sep 17 00:00:00 2001 From: Kaki In <91763754+Kaki-In@users.noreply.github.com> Date: Tue, 26 Jul 2022 16:42:51 +0200 Subject: [PATCH 1/3] Made the body scrolling --- src/platform/web/ui/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ui/css/main.css b/src/platform/web/ui/css/main.css index 94752e4e94..feea308912 100644 --- a/src/platform/web/ui/css/main.css +++ b/src/platform/web/ui/css/main.css @@ -32,7 +32,7 @@ body.hydrogen { /* make sure to disable rubber-banding and pull to refresh in a PWA if we'd end up having a scrollbar */ overscroll-behavior: none; /* disable rubberband scrolling on document in IE11 */ - overflow: hidden; + overflow: auto; } .hydrogen { From 61cee7fcc77b8dad09831834f6b89ee09a56660b Mon Sep 17 00:00:00 2001 From: Kaki In <91763754+Kaki-In@users.noreply.github.com> Date: Wed, 27 Jul 2022 12:12:08 +0200 Subject: [PATCH 2/3] Making only the sessions list scrollling. --- src/platform/web/ui/css/main.css | 4 ++- .../web/ui/css/themes/element/theme.css | 34 +++++++++++++++++++ 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/src/platform/web/ui/css/main.css b/src/platform/web/ui/css/main.css index feea308912..bb4dc80ebc 100644 --- a/src/platform/web/ui/css/main.css +++ b/src/platform/web/ui/css/main.css @@ -32,7 +32,9 @@ body.hydrogen { /* make sure to disable rubber-banding and pull to refresh in a PWA if we'd end up having a scrollbar */ overscroll-behavior: none; /* disable rubberband scrolling on document in IE11 */ - overflow: auto; + overflow: hidden; + height: 100%; + width: 100%; } .hydrogen { diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index 632d5bc5a8..d99c8fd48f 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -251,6 +251,40 @@ a.button-action { .PreSessionScreen { padding: 30px; + max-height: calc(100% - 30px); /* removing padding */ + display: flex; + flex-direction: column; +} + +@media screen and (min-width: 600px) { + .PreSessionScreen { + max-height: calc(100% - 30px - 80px); /* removing padding and margin */ + } +} + +.PreSessionScreen > * { + flex: 1 1 auto; +} + +.PreSessionScreen > div.logo { + flex: 1 0 auto; +} + +.SessionPickerView { + display: flex; + flex-direction: column; + overflow: clip; +} + +.SessionPickerView > * { + flex: 1 0 auto; + display: block; + position: relative; +} + +.SessionPickerView ul { + flex: 1 1 auto; + overflow: auto; } .PreSessionScreen h1 { From 530daef38ff80659904a2c431b633e5b3b94ae1d Mon Sep 17 00:00:00 2001 From: Kaki In <91763754+Kaki-In@users.noreply.github.com> Date: Wed, 27 Jul 2022 13:15:31 +0200 Subject: [PATCH 3/3] Made the PreSessionScreen scrolling when the LoginView is shown. --- .../web/ui/css/themes/element/theme.css | 5 ++ src/platform/web/ui/login/LoginView.js | 56 ++++++++++--------- 2 files changed, 34 insertions(+), 27 deletions(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index d99c8fd48f..be9850ccca 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -253,6 +253,7 @@ a.button-action { padding: 30px; max-height: calc(100% - 30px); /* removing padding */ display: flex; + overflow: auto; flex-direction: column; } @@ -263,6 +264,10 @@ a.button-action { } .PreSessionScreen > * { + flex: 1 0 auto; +} + +.PreSessionScreen > div { flex: 1 1 auto; } diff --git a/src/platform/web/ui/login/LoginView.js b/src/platform/web/ui/login/LoginView.js index 8800262582..ddb4e39d90 100644 --- a/src/platform/web/ui/login/LoginView.js +++ b/src/platform/web/ui/login/LoginView.js @@ -32,33 +32,35 @@ export class LoginView extends TemplateView { disabled }), t.div({className: "logo"}), - t.h1([vm.i18n`Sign In`]), - t.mapView(vm => vm.completeSSOLoginViewModel, vm => vm ? new CompleteSSOView(vm) : null), - t.if(vm => vm.showHomeserver, (t, vm) => t.div({ className: "LoginView_sso form-row text" }, - [ - t.label({for: "homeserver"}, vm.i18n`Homeserver`), - t.input({ - id: "homeserver", - type: "text", - placeholder: vm.i18n`Your matrix homeserver`, - value: vm.homeserver, - disabled, - onInput: event => vm.setHomeserver(event.target.value), - onChange: () => vm.queryHomeserver(), - }), - t.p({className: { - LoginView_forwardInfo: true, - hidden: vm => !vm.resolvedHomeserver - }}, vm => vm.i18n`You will connect to ${vm.resolvedHomeserver}.`), - t.if(vm => vm.errorMessage, (t, vm) => t.p({className: "error"}, vm.i18n(vm.errorMessage))), - ] - )), - t.if(vm => vm.isFetchingLoginOptions, t => t.div({className: "LoginView_query-spinner"}, [spinner(t), t.p("Fetching available login options...")])), - t.mapView(vm => vm.passwordLoginViewModel, vm => vm ? new PasswordLoginView(vm): null), - t.if(vm => vm.passwordLoginViewModel && vm.startSSOLoginViewModel, t => t.p({className: "LoginView_separator"}, vm.i18n`or`)), - t.mapView(vm => vm.startSSOLoginViewModel, vm => vm ? new StartSSOLoginView(vm) : null), - t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadStatusView(loadViewModel) : null), - // use t.mapView rather than t.if to create a new view when the view model changes too + t.div({className: "SessionLoginView"}, [ + t.h1([vm.i18n`Sign In`]), + t.mapView(vm => vm.completeSSOLoginViewModel, vm => vm ? new CompleteSSOView(vm) : null), + t.if(vm => vm.showHomeserver, (t, vm) => t.div({ className: "LoginView_sso form-row text" }, + [ + t.label({for: "homeserver"}, vm.i18n`Homeserver`), + t.input({ + id: "homeserver", + type: "text", + placeholder: vm.i18n`Your matrix homeserver`, + value: vm.homeserver, + disabled, + onInput: event => vm.setHomeserver(event.target.value), + onChange: () => vm.queryHomeserver(), + }), + t.p({className: { + LoginView_forwardInfo: true, + hidden: vm => !vm.resolvedHomeserver + }}, vm => vm.i18n`You will connect to ${vm.resolvedHomeserver}.`), + t.if(vm => vm.errorMessage, (t, vm) => t.p({className: "error"}, vm.i18n(vm.errorMessage))), + ] + )), + t.if(vm => vm.isFetchingLoginOptions, t => t.div({className: "LoginView_query-spinner"}, [spinner(t), t.p("Fetching available login options...")])), + t.mapView(vm => vm.passwordLoginViewModel, vm => vm ? new PasswordLoginView(vm): null), + t.if(vm => vm.passwordLoginViewModel && vm.startSSOLoginViewModel, t => t.p({className: "LoginView_separator"}, vm.i18n`or`)), + t.mapView(vm => vm.startSSOLoginViewModel, vm => vm ? new StartSSOLoginView(vm) : null), + t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadStatusView(loadViewModel) : null), + // use t.mapView rather than t.if to create a new view when the view model changes too + ]), t.p(hydrogenGithubLink(t)) ]); }