Merge pull request 'Enhance mobile responsiveness by updating viewport settings and restructuring layout' (#47) from BordedDev/snek:bugfix/page-resize-on-mobile into main

Browse Source 
Reviewed-on: retoor/snek#47
Reviewed-by: retoor <retoor@noreply@molodetz.nl>
This commit is contained in:
retoor 2025-05-27 00:27:33 +02:00
commit 8d2e0381a7
3 changed files with 107 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/snek/static/base.css
View File

@ -5,6 +5,10 @@
box-sizing: border-box; box-sizing: border-box;
} }
html {
height: 100%;
}
.gallery { .gallery {
padding: 50px; padding: 50px;
height: auto; height: auto;
@ -25,24 +29,27 @@ body {
background-color: #000000; background-color: #000000;
color: #e6e6e6; color: #e6e6e6;
line-height: 1.5; line-height: 1.5;
display: flex; display: grid;
flex-direction: column; grid-template-columns: auto 1fr;
height: 100vh; grid-template-rows: auto 1fr;
grid-template-areas:
"header header"
"sidebar chat-area";
min-width: 100%; min-width: 100%;
height: 100%;
} }
main { main {
display: flex; display: flex;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
grid-area: chat-area;
} }
header { header {
background-color: #000000; background-color: #000000;
padding-top: 10px; grid-area: header;
padding-left: 20px; padding: 10px 20px;
padding-right: 20px;
padding-bottom: 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -135,6 +142,11 @@ footer {
background: #000000; background: #000000;
} }
.chat-messages {
display: flex;
flex-direction: column;
}
.container { .container {
flex: 1; flex: 1;
padding: 10px; padding: 10px;
@ -151,9 +163,11 @@ footer {
} }
} }
.chat-messages picture img { .chat-messages picture img {
cursor: pointer; cursor: pointer;
} }
.chat-messages::-webkit-scrollbar { .chat-messages::-webkit-scrollbar {
display: none; display: none;
} }
@ -348,6 +362,7 @@ a {
padding-right: 20px; padding-right: 20px;
padding-top: 10px; padding-top: 10px;
overflow-y: auto; overflow-y: auto;
grid-area: sidebar;
} }
.sidebar h2 { .sidebar h2 {
@ -392,7 +407,6 @@ a {
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
header { header {
@ -402,17 +416,21 @@ a {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.logo { .logo {
display: block; display: block;
flex: 1; flex: 1;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
h2 { h2 {
font-size: 14px; font-size: 14px;
} }
text-align: center; text-align: center;
} }
nav { nav {
text-align: right; text-align: right;
flex: 1; flex: 1;
@ -494,13 +512,23 @@ dialog .dialog-button {
@keyframes dialogFadeIn { @keyframes dialogFadeIn {
from { opacity: 0; } from {
to { opacity: 1; } opacity: 0;
}
to {
opacity: 1;
}
} }
@keyframes dialogScaleIn { @keyframes dialogScaleIn {
from { transform: scale(0.95) translate(-50%, -50%); opacity: 0; } from {
to { transform: scale(1) translate(-50%, -50%); opacity: 1; } transform: scale(0.95) translate(-50%, -50%);
opacity: 0;
}
to {
transform: scale(1) translate(-50%, -50%);
opacity: 1;
}
} }
dialog .dialog-button.primary { dialog .dialog-button.primary {

5
src/snek/templates/app.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<title>Snek</title> <title>Snek</title>
<style>{{highlight_styles}}</style> <style>{{highlight_styles}}</style>
@ -50,10 +50,11 @@
</nav> </nav>
</header> </header>
<main style="max-height: 100vh;overflow-y: none">
{% block sidebar %} {% block sidebar %}
{% include "sidebar_channels.html" %} {% include "sidebar_channels.html" %}
{% endblock %} {% endblock %}
<main>
{% block main %} {% block main %}
<chat-window class="chat-area"></chat-window> <chat-window class="chat-area"></chat-window>

2
src/snek/templates/base.html
View File

@ -21,7 +21,7 @@
<script src="/html-frame.js" type="module"></script> <script src="/html-frame.js" type="module"></script>
<script src="/generic-form.js?rid={{ rid }}" type="module"></script> <script src="/generic-form.js?rid={{ rid }}" type="module"></script>
<link rel="stylesheet" href="/html-frame.css"> <link rel="stylesheet" href="/html-frame.css">
<script defer src="https://umami.molodetz.nl/script.js" data-website-id="d127c3e4-dc70-4041-a1c8-bcc32c2492ea"></script> <script async defer src="https://umami.molodetz.nl/script.js" data-website-id="d127c3e4-dc70-4041-a1c8-bcc32c2492ea"></script>
{% block head %} {% block head %}
{% endblock %} {% endblock %}
</head> </head>