Merge pull request 'Tweaks for login/registration and base + image roundness' (#25) from BordedDev/snek:main into main

Browse Source 
Reviewed-on: #25
Reviewed-by: retoor <retoor@noreply@molodetz.nl>
This commit is contained in:
retoor 2025-03-08 18:53:02 +00:00
commit aedfe9aa94
6 changed files with 150 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,18 @@
.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;
}
}

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

@ -111,14 +111,17 @@ 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;
@ -161,17 +164,20 @@ 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;
@ -187,7 +193,8 @@ hyphens: auto;
.message-content { .message-content {
img, video, iframe, div { img, video, iframe, div {
max-width: 100%; max-width: 90%;
border-radius: 20px;
} }
} }
@ -302,6 +309,7 @@ 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;

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

@ -83,6 +83,18 @@ class GenericField extends HTMLElement {
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 {
@ -165,6 +177,9 @@ 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});
@ -177,6 +192,11 @@ class GenericField extends HTMLElement {
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);
} }
@ -307,6 +327,16 @@ 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) {

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

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

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

@ -1,7 +1,16 @@
{% 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 %}

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

@ -1,7 +1,17 @@
{% 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 %}