Enhance mobile responsiveness by updating viewport settings and restructuring layout #47

Merged
retoor merged 1 commits from :bugfix/page-resize-on-mobile into main 2025-05-27 00:27:34 +02:00
Conversation 0 Commits 1 Files Changed 3 +107 -78
3 changed files with 107 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,10 @@
box-sizing: border-box;
}
html {
height: 100%;
}
.gallery {
padding: 50px;
height: auto;
@ -25,24 +29,27 @@ 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;
@ -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::-webkit-scrollbar {
display: none;
}
@ -348,6 +362,7 @@ a {
padding-right: 20px;
padding-top: 10px;
overflow-y: auto;
grid-area: sidebar;
}
.sidebar h2 {
@ -392,27 +407,30 @@ a {
}
@media only screen and (max-width: 768px) {
header{
header {
top: 0;
left: 0;
text-overflow: ellipsis;
width:100%;
width: 100%;
display: flex;
flex-direction: column;
.logo {
display:block;
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;
@ -421,7 +439,7 @@ a {
}
}
/*
/*
body {
justify-content: flex-start;
}
@ -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 {

5
src/snek/templates/app.html
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>

2
src/snek/templates/base.html
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>