Mirrors/thelounge
2
0
Fork 0
mirror of https://github.com/thelounge/thelounge synced 2024-11-22 20:13:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

Support safe area insets in portrait and landscape.

Browse source
This commit is contained in:
René Valois 2024-08-21 17:18:35 -07:00
parent a61bc14456
commit a4df4c435d
3 changed files with 35 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
client/css/style.css
View file

@ -50,6 +50,7 @@
html { html {
box-sizing: border-box; box-sizing: border-box;
-webkit-tap-highlight-color: transparent; /* remove tap highlight on touch devices */ -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 */ 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 * { body.force-no-select * {
user-select: none !important; user-select: none !important;
} }
@ -672,7 +680,7 @@ p {
display: none; display: none;
flex-direction: column; flex-direction: column;
width: 220px; width: 220px;
max-height: 100%; max-height: 100vh;
will-change: transform; will-change: transform;
color: #b7c5d1; /* same as .channel-list-item color */ 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; 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 { #user-visible-error {
font-size: 14px; font-size: 14px;
line-height: 1.5; 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; opacity: 0.5;
} }
#mentions-popup-container {
margin-top: env(safe-area-inset-top);
}
#mentions-popup-container, #mentions-popup-container,
#context-menu-container { #context-menu-container {
position: absolute; position: absolute;
@ -2638,7 +2662,8 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#sidebar { #sidebar {
display: flex; display: flex;
background: var(--body-bg-color); 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; position: absolute;
left: -220px; left: -220px;
z-index: 10; z-index: 10;
@ -2937,3 +2962,4 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }

2
client/index.html.tpl
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="viewport" content="width=device-width, user-scalable=no, viewport-fit=cover">
<link rel="preload" as="script" href="js/loading-error-handlers.js?v=<%- cacheBust %>"> <link rel="preload" as="script" href="js/loading-error-handlers.js?v=<%- cacheBust %>">
<link rel="preload" as="script" href="js/bundle.vendor.js?v=<%- cacheBust %>"> <link rel="preload" as="script" href="js/bundle.vendor.js?v=<%- cacheBust %>">

6
client/themes/default.css
View file

@ -15,6 +15,12 @@
box-shadow: 0 0 25px rgb(0 0 0 / 50%); 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) { @media (max-width: 768px) {
#loading .window { #loading .window {
margin: 0; margin: 0;