Compare commits
No commits in common. "aedfe9aa947dcd2262c825af5a4d977eb298ccb5" and "8e195a49e3e914a4b241e95378bd9a07611715a8" have entirely different histories.
aedfe9aa94
...
8e195a49e3
@ -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;
|
||||
}
|
||||
}
|
||||
@ -111,21 +111,18 @@ a {
|
||||
height: 200px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 20px;
|
||||
color: #f05a28;
|
||||
}
|
||||
font-size: 20px;
|
||||
color: #f05a28;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -164,38 +161,34 @@ a {
|
||||
color: #f05a28;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
* {
|
||||
word-break: break-word;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
.chat-messages .message .message-content .text, .threads .thread .message-content .text {
|
||||
margin-bottom: 5px;
|
||||
color: #e6e6e6;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
|
||||
img, video, iframe, div {
|
||||
max-width: 90%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
img, video, iframe, div {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-messages .message .message-content .time, .threads .thread .message-content .time {
|
||||
@ -261,7 +254,7 @@ input[type="text"], .chat-input textarea {
|
||||
}
|
||||
|
||||
.message.switch-user {
|
||||
.text img, iframe, video {
|
||||
.text img,iframe, video {
|
||||
max-width: 90%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
@ -276,15 +269,15 @@ input[type="text"], .chat-input textarea {
|
||||
}
|
||||
}
|
||||
|
||||
.message:has(+ .message.switch-user), .message:last-child {
|
||||
.time {
|
||||
display: block;
|
||||
}
|
||||
.message:has(+ .message.switch-user), .message:last-child{
|
||||
.time {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* The entire scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
display:none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@ -307,9 +300,8 @@ input[type="text"], .chat-input textarea {
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none
|
||||
text-decoration:none
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background-color: #121212;
|
||||
|
||||
@ -62,7 +62,7 @@ class GenericField extends HTMLElement {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({mode: 'open'});
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.container = document.createElement('div');
|
||||
this.styleElement = document.createElement('style');
|
||||
this.styleElement.innerHTML = `
|
||||
@ -75,26 +75,14 @@ class GenericField extends HTMLElement {
|
||||
}
|
||||
|
||||
input {
|
||||
width: 90%;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #333;
|
||||
border-radius: 5px;
|
||||
background-color: #1a1a1a;
|
||||
color: #e6e6e6;
|
||||
font-size: 1em;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid #f05a28 !important;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
&:focus::placeholder {
|
||||
opacity: 0.4;
|
||||
}
|
||||
width: 90%;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #333;
|
||||
border-radius: 5px;
|
||||
background-color: #1a1a1a;
|
||||
color: #e6e6e6;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
button {
|
||||
@ -177,26 +165,18 @@ class GenericField extends HTMLElement {
|
||||
const me = this;
|
||||
this.inputElement.addEventListener("keyup", (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
const event = new CustomEvent("change", {detail: me, bubbles: true});
|
||||
me.dispatchEvent(event);
|
||||
|
||||
me.dispatchEvent(new Event("submit"));
|
||||
} 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);
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
this.inputElement.addEventListener("blur", (e) => {
|
||||
const event = new CustomEvent("change", {detail: me, bubbles: true});
|
||||
me.dispatchEvent(event);
|
||||
}, true);
|
||||
|
||||
this.container.appendChild(this.inputElement);
|
||||
}
|
||||
|
||||
@ -246,7 +226,7 @@ class GenericForm extends HTMLElement {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({mode: 'open'});
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.styleElement = document.createElement("style");
|
||||
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) {
|
||||
@ -352,7 +322,7 @@ class GenericForm extends HTMLElement {
|
||||
headers: {
|
||||
'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();
|
||||
@ -383,7 +353,7 @@ class GenericForm extends HTMLElement {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({"action": "submit", "form": this.form})
|
||||
body: JSON.stringify({ "action": "submit", "form": this.form })
|
||||
});
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
@ -1,36 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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="/message-list.js"></script>
|
||||
<style>{{ highlight_styles }}</style>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<script src="/fancy-button.js"></script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}{% 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="/generic-form.js"></script>
|
||||
<link rel="stylesheet" href="/html-frame.css">
|
||||
<link rel="stylesheet" href="/html-frame.css"></script>
|
||||
|
||||
{% block head %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
{% block header %}
|
||||
{% endblock %}
|
||||
<header>
|
||||
{% block header %}
|
||||
{% endblock %}
|
||||
|
||||
</header>
|
||||
<main>
|
||||
</header>
|
||||
<main>
|
||||
{% block main %}
|
||||
{% endblock %}
|
||||
</main>
|
||||
|
||||
@ -1,16 +1,7 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}
|
||||
Login - Snek chat by Molodetz
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/back-form.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="back-form">
|
||||
<fancy-button url="/back" text="Back" size="auto"></fancy-button>
|
||||
<generic-form class="center" url="/login.json"></generic-form>
|
||||
</div>
|
||||
<fancy-button url="/back" text="Back" size="auto"></fancy-button>
|
||||
<generic-form class="center" url="/login.json"></generic-form>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@ -1,17 +1,7 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}
|
||||
Register - Snek chat by Molodetz
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/back-form.css">
|
||||
{% endblock %}
|
||||
|
||||
{% 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>
|
||||
</div>
|
||||
<generic-form class="center" url="/register.json"></generic-form>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue
Block a user