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

Reviewed-on: 
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
src/snek

View File

@ -5,6 +5,10 @@
box-sizing: border-box;
}
html {
height: 100%;
}
.gallery {
padding: 50px;
height: auto;
@ -25,33 +29,36 @@ body {
background-color: #000000;
color: #e6e6e6;
line-height: 1.5;
display: flex;
flex-direction: column;
height: 100vh;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"header header"
"sidebar chat-area";
min-width: 100%;
height: 100%;
}
main {
display: flex;
flex: 1;
overflow: hidden;
grid-area: chat-area;
}
header {
background-color: #000000;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
grid-area: header;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo {
color: #fff;
color: #fff;
font-weight: bold;
font-size: 1.2em;
font-size: 1.2em;
color: #fff;
}
@ -81,13 +88,13 @@ a {
}
h1 {
font-size: 2em;
color: #f05a28;
font-size: 2em;
color: #f05a28;
}
h2 {
font-size: 1.4em;
color: #f05a28;
font-size: 1.4em;
color: #f05a28;
}
@ -112,10 +119,10 @@ h2 {
}
footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.message-list {
@ -135,6 +142,11 @@ footer {
background: #000000;
}
.chat-messages {
display: flex;
flex-direction: column;
}
.container {
flex: 1;
padding: 10px;
@ -151,9 +163,11 @@ footer {
}
}
.chat-messages picture img {
cursor: pointer;
.chat-messages picture img {
cursor: pointer;
}
.chat-messages::-webkit-scrollbar {
display: none;
}
@ -348,6 +362,7 @@ a {
padding-right: 20px;
padding-top: 10px;
overflow-y: auto;
grid-area: sidebar;
}
.sidebar h2 {
@ -376,65 +391,68 @@ a {
}
@keyframes glow {
0% {
box-shadow: 0 0 5px #3498db;
}
50% {
box-shadow: 0 0 20px #3498db, 0 0 30px #3498db;
}
100% {
box-shadow: 0 0 5px #3498db;
}
0% {
box-shadow: 0 0 5px #3498db;
}
50% {
box-shadow: 0 0 20px #3498db, 0 0 30px #3498db;
}
100% {
box-shadow: 0 0 5px #3498db;
}
}
.glow {
animation: glow 1s;
animation: glow 1s;
}
@media only screen and (max-width: 768px) {
header{
top: 0;
left: 0;
text-overflow: ellipsis;
width:100%;
display: flex;
flex-direction: column;
.logo {
display:block;
flex: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
h2 {
font-size: 14px;
}
text-align: center;
}
nav {
text-align: right;
flex: 1;
display: block;
width: 100%;
}
}
/*
body {
justify-content: flex-start;
header {
top: 0;
left: 0;
text-overflow: ellipsis;
width: 100%;
display: flex;
flex-direction: column;
.logo {
display: block;
flex: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
h2 {
font-size: 14px;
}
text-align: center;
}
header{
position: sticky;
display: block;
.logo {
display:block;
}
nav {
text-align: right;
flex: 1;
display: block;
width: 100%;
}
.chat-input {
position:sticky;
}*/
}
/*
body {
justify-content: flex-start;
}
header{
position: sticky;
display: block;
.logo {
display:block;
}
}
.chat-input {
position:sticky;
}*/
}
dialog {
@ -494,13 +512,23 @@ dialog .dialog-button {
@keyframes dialogFadeIn {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes dialogScaleIn {
from { transform: scale(0.95) translate(-50%, -50%); opacity: 0; }
to { transform: scale(1) translate(-50%, -50%); opacity: 1; }
from {
transform: scale(0.95) translate(-50%, -50%);
opacity: 0;
}
to {
transform: scale(1) translate(-50%, -50%);
opacity: 1;
}
}
dialog .dialog-button.primary {
@ -513,12 +541,12 @@ dialog .dialog-button.primary:hover {
}
dialog .dialog-button.secondary {
background-color: #f0a328;
background-color: #f0a328;
color: #eee;
}
dialog .dialog-button.secondary:hover {
background-color: #f0b84c;
background-color: #f0b84c;
}

View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<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" />
<title>Snek</title>
<style>{{highlight_styles}}</style>
@ -50,10 +50,11 @@
</nav>
</header>
<main style="max-height: 100vh;overflow-y: none">
{% block sidebar %}
{% include "sidebar_channels.html" %}
{% endblock %}
<main>
{% block main %}
<chat-window class="chat-area"></chat-window>

View File

@ -21,7 +21,7 @@
<script src="/html-frame.js" type="module"></script>
<script src="/generic-form.js?rid={{ rid }}" type="module"></script>
<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 %}
{% endblock %}
</head>