From a4df4c435df640dd6b5905bbff802d3995694b33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Valois?= Date: Wed, 21 Aug 2024 17:18:35 -0700 Subject: [PATCH] Support safe area insets in portrait and landscape. --- client/css/style.css | 30 ++++++++++++++++++++++++++++-- client/index.html.tpl | 2 +- client/themes/default.css | 6 ++++++ 3 files changed, 35 insertions(+), 3 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 0285ef5a..b4bc2f93 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -50,6 +50,7 @@ html { box-sizing: border-box; -webkit-tap-highlight-color: transparent; /* remove tap highlight on touch devices */ + padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); } *, @@ -107,6 +108,13 @@ body { overflow: hidden; /* iOS Safari requires overflow rather than overflow-y */ } +@media screen and (orientation: portrait) { + /* Allow the main chat interface to merge into the background. */ + body { + background: white; + } +} + body.force-no-select * { user-select: none !important; } @@ -672,7 +680,7 @@ p { display: none; flex-direction: column; width: 220px; - max-height: 100%; + max-height: 100vh; will-change: transform; color: #b7c5d1; /* same as .channel-list-item color */ } @@ -2211,6 +2219,18 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ position: relative; } +@media screen and (orientation: landscape) { + /* Pad the form with safe area insets. */ + #form { + padding-bottom: env(safe-area-inset-bottom) + } + + /* When the form becomes focused, remove the safe area insets padding. A bit of a hack, but seems to work. */ + #form:focus-within { + padding-bottom: 6px; /* Reset to the default padding */ + } +} + #user-visible-error { font-size: 14px; line-height: 1.5; @@ -2274,6 +2294,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ opacity: 0.5; } +#mentions-popup-container { + margin-top: env(safe-area-inset-top); +} + #mentions-popup-container, #context-menu-container { position: absolute; @@ -2638,7 +2662,8 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ #sidebar { display: flex; background: var(--body-bg-color); - height: 100%; + height: 100vh; + padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); position: absolute; left: -220px; z-index: 10; @@ -2937,3 +2962,4 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ justify-content: center; align-items: center; } + diff --git a/client/index.html.tpl b/client/index.html.tpl index 7275a84f..6639a98f 100644 --- a/client/index.html.tpl +++ b/client/index.html.tpl @@ -3,7 +3,7 @@ - + diff --git a/client/themes/default.css b/client/themes/default.css index fc473250..e8c8488a 100644 --- a/client/themes/default.css +++ b/client/themes/default.css @@ -15,6 +15,12 @@ box-shadow: 0 0 25px rgb(0 0 0 / 50%); } +@media screen and (orientation: portrait) { + .window { + box-shadow: 0 0 0; + } +} + @media (max-width: 768px) { #loading .window { margin: 0;