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: #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

172
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,33 +29,36 @@ 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;
} }
header .logo { header .logo {
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
font-size: 1.2em; font-size: 1.2em;
color: #fff; color: #fff;
} }
@ -81,13 +88,13 @@ a {
} }
h1 { h1 {
font-size: 2em; font-size: 2em;
color: #f05a28; color: #f05a28;
} }
h2 { h2 {
font-size: 1.4em; font-size: 1.4em;
color: #f05a28; color: #f05a28;
} }
@ -112,10 +119,10 @@ h2 {
} }
footer { footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px 20px; padding: 10px 20px;
} }
.message-list { .message-list {
@ -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 {
@ -376,65 +391,68 @@ a {
} }
@keyframes glow { @keyframes glow {
0% { 0% {
box-shadow: 0 0 5px #3498db; box-shadow: 0 0 5px #3498db;
} }
50% { 50% {
box-shadow: 0 0 20px #3498db, 0 0 30px #3498db; box-shadow: 0 0 20px #3498db, 0 0 30px #3498db;
} }
100% { 100% {
box-shadow: 0 0 5px #3498db; box-shadow: 0 0 5px #3498db;
} }
} }
.glow { .glow {
animation: glow 1s; animation: glow 1s;
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
header{ header {
top: 0; top: 0;
left: 0; left: 0;
text-overflow: ellipsis; text-overflow: ellipsis;
width:100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.logo {
display:block; .logo {
flex: 1; display: block;
text-overflow: ellipsis; flex: 1;
white-space: nowrap; text-overflow: ellipsis;
overflow: hidden; white-space: nowrap;
h2 { overflow: hidden;
font-size: 14px;
} h2 {
text-align: center; font-size: 14px;
} }
nav {
text-align: right; text-align: center;
flex: 1;
display: block;
width: 100%;
}
} }
/* nav {
body { text-align: right;
justify-content: flex-start; flex: 1;
display: block;
width: 100%;
} }
header{ }
position: sticky;
display: block; /*
.logo { body {
display:block; justify-content: flex-start;
} }
} header{
.chat-input { position: sticky;
position:sticky; display: block;
}*/ .logo {
display:block;
}
}
.chat-input {
position:sticky;
}*/
} }
dialog { dialog {
@ -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 {
@ -513,12 +541,12 @@ dialog .dialog-button.primary:hover {
} }
dialog .dialog-button.secondary { dialog .dialog-button.secondary {
background-color: #f0a328; background-color: #f0a328;
color: #eee; color: #eee;
} }
dialog .dialog-button.secondary:hover { dialog .dialog-button.secondary:hover {
background-color: #f0b84c; background-color: #f0b84c;
} }

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>