Compare commits

base: retoor:8d2e0381a75b2b1930c7858592d304883908803d
Branches Tags
retoor:main
retoor:feat/make-database-async
..
compare: retoor:f67d7b35f160ae9877f8d973d5102ab93295eb45
Branches Tags
retoor:main
retoor:feat/make-database-async

No commits in common. "8d2e0381a75b2b1930c7858592d304883908803d" and "f67d7b35f160ae9877f8d973d5102ab93295eb45" have entirely different histories.
8d2e0381a7 ... f67d7b35f1

3 changed files with 78 additions and 107 deletions
Show Stats Expand all files Collapse all files

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

@ -5,10 +5,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
html {
height: 100%;
}
.gallery { .gallery {
padding: 50px; padding: 50px;
height: auto; height: auto;
@ -29,36 +25,33 @@ body {
background-color: #000000; background-color: #000000;
color: #e6e6e6; color: #e6e6e6;
line-height: 1.5; line-height: 1.5;
display: grid; display: flex;
grid-template-columns: auto 1fr; flex-direction: column;
grid-template-rows: auto 1fr; height: 100vh;
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;
grid-area: header; padding-top: 10px;
padding: 10px 20px; padding-left: 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;
} }
@ -88,13 +81,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;
} }
@ -119,10 +112,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 {
@ -142,11 +135,6 @@ footer {
background: #000000; background: #000000;
} }
.chat-messages {
display: flex;
flex-direction: column;
}
.container { .container {
flex: 1; flex: 1;
padding: 10px; padding: 10px;
@ -163,11 +151,9 @@ 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;
} }
@ -362,7 +348,6 @@ 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 {
@ -391,68 +376,65 @@ 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 {
.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 {
font-size: 14px;
h2 { }
font-size: 14px; text-align: center;
} }
nav {
text-align: center; text-align: right;
flex: 1;
display: block;
width: 100%;
}
}
/*
body {
justify-content: flex-start;
} }
header{
nav { position: sticky;
text-align: right; display: block;
flex: 1; .logo {
display: block; 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 { dialog {
@ -512,23 +494,13 @@ dialog .dialog-button {
@keyframes dialogFadeIn { @keyframes dialogFadeIn {
from { from { opacity: 0; }
opacity: 0; to { opacity: 1; }
}
to {
opacity: 1;
}
} }
@keyframes dialogScaleIn { @keyframes dialogScaleIn {
from { from { transform: scale(0.95) translate(-50%, -50%); opacity: 0; }
transform: scale(0.95) translate(-50%, -50%); to { transform: scale(1) translate(-50%, -50%); opacity: 1; }
opacity: 0;
}
to {
transform: scale(1) translate(-50%, -50%);
opacity: 1;
}
} }
dialog .dialog-button.primary { dialog .dialog-button.primary {
@ -541,12 +513,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, interactive-widget=resizes-content"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<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,11 +50,10 @@
</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 async defer src="https://umami.molodetz.nl/script.js" data-website-id="d127c3e4-dc70-4041-a1c8-bcc32c2492ea"></script> <script 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>