Compare commits

base: retoor:aedfe9aa947dcd2262c825af5a4d977eb298ccb5
Branches Tags
retoor:main
retoor:feat/make-database-async
..
compare: retoor:8e195a49e3e914a4b241e95378bd9a07611715a8
Branches Tags
retoor:main
retoor:feat/make-database-async

No commits in common. "aedfe9aa947dcd2262c825af5a4d977eb298ccb5" and "8e195a49e3e914a4b241e95378bd9a07611715a8" have entirely different histories.
aedfe9aa94 ... 8e195a49e3

6 changed files with 64 additions and 149 deletions
Show Stats Expand all files Collapse all files

18
src/snek/static/back-form.css
View File

@ -1,18 +0,0 @@
.back-form {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
fancy-button {
grid-column: 1 / 1;
grid-row: 1 / 1;
z-index: 1;
margin-left: 30px;
margin-top: 30px;
}
generic-form {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
}

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

@ -111,21 +111,18 @@ a {
height: 200px; height: 200px;
background: #1a1a1a; background: #1a1a1a;
} }
.container { .container {
flex: 1; flex: 1;
padding: 10px; padding: 10px;
ul { ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
a { a {
font-size: 20px; font-size: 20px;
color: #f05a28; color: #f05a28;
} }
} }
@ -164,38 +161,34 @@ a {
color: #f05a28; color: #f05a28;
margin-bottom: 3px; margin-bottom: 3px;
} }
* { * {
word-break: break-word; word-break: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
hyphens: auto; hyphens: auto;
} }
.highlight pre { .highlight pre {
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
hyphens: auto; hyphens: auto;
} }
.chat-messages .message .message-content .text, .threads .thread .message-content .text { .chat-messages .message .message-content .text, .threads .thread .message-content .text {
margin-bottom: 5px; margin-bottom: 5px;
color: #e6e6e6; color: #e6e6e6;
word-break: break-word; word-break: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
hyphens: auto; hyphens: auto;
} }
.message-content { .message-content {
max-width: 100%; max-width: 100%;
} }
.message-content { .message-content {
img, video, iframe, div { img, video, iframe, div {
max-width: 90%; max-width: 100%;
border-radius: 20px; }
}
} }
.chat-messages .message .message-content .time, .threads .thread .message-content .time { .chat-messages .message .message-content .time, .threads .thread .message-content .time {
@ -261,7 +254,7 @@ input[type="text"], .chat-input textarea {
} }
.message.switch-user { .message.switch-user {
.text img, iframe, video { .text img,iframe, video {
max-width: 90%; max-width: 90%;
border-radius: 20px; border-radius: 20px;
} }
@ -276,15 +269,15 @@ input[type="text"], .chat-input textarea {
} }
} }
.message:has(+ .message.switch-user), .message:last-child { .message:has(+ .message.switch-user), .message:last-child{
.time { .time {
display: block; display: block;
} }
} }
/* The entire scrollbar */ /* The entire scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display:none;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@ -307,9 +300,8 @@ input[type="text"], .chat-input textarea {
} }
a { a {
text-decoration: none text-decoration:none
} }
.sidebar { .sidebar {
width: 250px; width: 250px;
background-color: #121212; background-color: #121212;

58
src/snek/static/generic-form.js
View File

@ -62,7 +62,7 @@ class GenericField extends HTMLElement {
constructor() { constructor() {
super(); super();
this.attachShadow({mode: 'open'}); this.attachShadow({ mode: 'open' });
this.container = document.createElement('div'); this.container = document.createElement('div');
this.styleElement = document.createElement('style'); this.styleElement = document.createElement('style');
this.styleElement.innerHTML = ` this.styleElement.innerHTML = `
@ -75,26 +75,14 @@ class GenericField extends HTMLElement {
} }
input { input {
width: 90%; width: 90%;
padding: 10px; padding: 10px;
margin: 10px 0; margin: 10px 0;
border: 1px solid #333; border: 1px solid #333;
border-radius: 5px; border-radius: 5px;
background-color: #1a1a1a; background-color: #1a1a1a;
color: #e6e6e6; color: #e6e6e6;
font-size: 1em; font-size: 1em;
&:focus {
outline: 2px solid #f05a28 !important;
}
&::placeholder {
transition: opacity 0.3s;
}
&:focus::placeholder {
opacity: 0.4;
}
} }
button { button {
@ -177,26 +165,18 @@ class GenericField extends HTMLElement {
const me = this; const me = this;
this.inputElement.addEventListener("keyup", (e) => { this.inputElement.addEventListener("keyup", (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
const event = new CustomEvent("change", {detail: me, bubbles: true});
me.dispatchEvent(event);
me.dispatchEvent(new Event("submit")); me.dispatchEvent(new Event("submit"));
} else if (me.field.value !== e.target.value) { } else if (me.field.value !== e.target.value) {
const event = new CustomEvent("change", {detail: me, bubbles: true}); const event = new CustomEvent("change", { detail: me, bubbles: true });
me.dispatchEvent(event); me.dispatchEvent(event);
} }
}); });
this.inputElement.addEventListener("click", (e) => { this.inputElement.addEventListener("click", (e) => {
const event = new CustomEvent("click", {detail: me, bubbles: true}); const event = new CustomEvent("click", { detail: me, bubbles: true });
me.dispatchEvent(event); me.dispatchEvent(event);
}); });
this.inputElement.addEventListener("blur", (e) => {
const event = new CustomEvent("change", {detail: me, bubbles: true});
me.dispatchEvent(event);
}, true);
this.container.appendChild(this.inputElement); this.container.appendChild(this.inputElement);
} }
@ -246,7 +226,7 @@ class GenericForm extends HTMLElement {
constructor() { constructor() {
super(); super();
this.attachShadow({mode: 'open'}); this.attachShadow({ mode: 'open' });
this.styleElement = document.createElement("style"); this.styleElement = document.createElement("style");
this.styleElement.innerHTML = ` this.styleElement.innerHTML = `
@ -327,16 +307,6 @@ class GenericForm extends HTMLElement {
} }
} }
}); });
fieldElement.addEventListener("submit", async (e) => {
const isValid = await this.validate();
if (isValid) {
const saveResult = await this.submit();
if (saveResult.redirect_url) {
window.location.pathname = saveResult.redirect_url;
}
}
})
}); });
} catch (error) { } catch (error) {
@ -352,7 +322,7 @@ class GenericForm extends HTMLElement {
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({"action": "validate", "form": this.form}) body: JSON.stringify({ "action": "validate", "form": this.form })
}); });
const form = await response.json(); const form = await response.json();
@ -383,7 +353,7 @@ class GenericForm extends HTMLElement {
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({"action": "submit", "form": this.form}) body: JSON.stringify({ "action": "submit", "form": this.form })
}); });
return await response.json(); return await response.json();
} }

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

@ -1,36 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<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">
<meta name="theme-color" content="#000000"> <title>{% block title %}{% endblock %}</title>
<meta name="application-name" content="Snek chat by Molodetz"> <script src="/app.js"></script>
<meta name="description" content="Snek chat by Molodetz"> <script src="/message-list.js"></script>
<meta name="author" content="Molodetz"> <style>{{ highlight_styles }}</style>
<meta name="keywords" content="snek, chat, molodetz"> <link rel="stylesheet" href="/style.css">
<meta name="color-scheme" content="dark"> <script src="/fancy-button.js"></script>
<title>{% block title %}Snek chat by Molodetz{% endblock %}</title>
<script src="/app.js"></script>
<script src="/message-list.js"></script>
<style>{{ highlight_styles }}</style>
<link rel="stylesheet" href="/style.css">
<script src="/fancy-button.js"></script>
<script src="/html-frame.js"></script> <script src="/html-frame.js"></script>
<script src="/generic-form.js"></script> <script src="/generic-form.js"></script>
<link rel="stylesheet" href="/html-frame.css"> <link rel="stylesheet" href="/html-frame.css"></script>
{% block head %}
{% endblock %}
</head> </head>
<body> <body>
<header> <header>
{% block header %} {% block header %}
{% endblock %} {% endblock %}
</header> </header>
<main> <main>
{% block main %} {% block main %}
{% endblock %} {% endblock %}
</main> </main>

15
src/snek/templates/login.html
View File

@ -1,16 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}
Login - Snek chat by Molodetz
{% endblock %}
{% block head %}
<link rel="stylesheet" href="/back-form.css">
{% endblock %}
{% block main %} {% block main %}
<div class="back-form"> <fancy-button url="/back" text="Back" size="auto"></fancy-button>
<fancy-button url="/back" text="Back" size="auto"></fancy-button> <generic-form class="center" url="/login.json"></generic-form>
<generic-form class="center" url="/login.json"></generic-form>
</div>
{% endblock %} {% endblock %}

14
src/snek/templates/register.html
View File

@ -1,17 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}
Register - Snek chat by Molodetz
{% endblock %}
{% block head %}
<link rel="stylesheet" href="/back-form.css">
{% endblock %}
{% block main %} {% block main %}
<div class="back-form"> <fancy-button url="/back" text="Back" size="auto"></fancy-button>
<fancy-button url="/back" text="Back" size="auto"></fancy-button>
<generic-form class="center" url="/register.json"></generic-form> <generic-form class="center" url="/register.json"></generic-form>
</div>
{% endblock %} {% endblock %}