diff --git a/src/snek/app.py b/src/snek/app.py
index d043c0e..c6c2e2f 100644
--- a/src/snek/app.py
+++ b/src/snek/app.py
@@ -2,7 +2,7 @@ import asyncio
import logging
import pathlib
import time
-
+import uuid
from snek.view.threads import ThreadsView
logging.basicConfig(level=logging.DEBUG)
@@ -189,6 +189,8 @@ class Application(BaseApplication):
channels = []
if not context:
context = {}
+
+ context['rid'] = str(uuid.uuid4())
if request.session.get("uid"):
async for subscribed_channel in self.services.channel_member.find(
user_uid=request.session.get("uid"), deleted_at=None, is_banned=False
diff --git a/src/snek/static/base.css b/src/snek/static/base.css
index 7a4617d..049241d 100644
--- a/src/snek/static/base.css
+++ b/src/snek/static/base.css
@@ -42,6 +42,7 @@ header {
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
+ padding-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
@@ -79,6 +80,17 @@ a {
margin-bottom: 3px;
}
+h1 {
+ font-size: 2em;
+ color: #f05a28;
+}
+
+h2 {
+ font-size: 1.4em;
+ color: #f05a28;
+}
+
+
.chat-area {
flex: 1;
display: flex;
@@ -354,7 +366,31 @@ a {
color: #fff;
}
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
+
+ header{
+ position:fixed;
+ top: 0;
+ left: 0;
+ text-overflow: ellipsis;
+
+ *{
+ font-size: 12px !important;
+ }
+ .logo {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ h2 {
+ font-size: 12px;
+ }
+ }
+
+ }
+/*
+ body {
+ justify-content: flex-start;
+ }
header{
position: sticky;
display: block;
@@ -364,5 +400,5 @@ a {
}
.chat-input {
position:sticky;
- }
+ }*/
}
diff --git a/src/snek/static/generic-form.css b/src/snek/static/generic-form.css
index 7010193..025bfb3 100644
--- a/src/snek/static/generic-form.css
+++ b/src/snek/static/generic-form.css
@@ -34,11 +34,11 @@ generic-form {
text-align: center;
}
-
.generic-form-container h1 {
font-size: 2em;
color: #f05a28;
margin-bottom: 20px;
+
}
input {
diff --git a/src/snek/static/generic-form.js b/src/snek/static/generic-form.js
index be4b327..f2edacb 100644
--- a/src/snek/static/generic-form.js
+++ b/src/snek/static/generic-form.js
@@ -266,9 +266,9 @@ class GenericForm extends HTMLElement {
}
div {
+ min-width:350px;
border-radius: 10px;
padding: 30px;
- width: 400px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
text-align: center;
}
diff --git a/src/snek/static/style.css b/src/snek/static/style.css
index 6e81345..af04db4 100644
--- a/src/snek/static/style.css
+++ b/src/snek/static/style.css
@@ -56,3 +56,9 @@ div {
text-align: left;
}
+
+@media screen and (max-width: 500px) {
+ body {
+
+ justify-content: flex-start;
+ }
diff --git a/src/snek/templates/app.html b/src/snek/templates/app.html
index 1533153..6c3f137 100644
--- a/src/snek/templates/app.html
+++ b/src/snek/templates/app.html
@@ -21,11 +21,12 @@
<script defer src="https://umami.molodetz.nl/script.js" data-website-id="d127c3e4-dc70-4041-a1c8-bcc32c2492ea"></script>
</head>
<body>
+
+
+
<header>
- <div class="no-select logo" style="display:none">Snek</div>
-
- <div class="logo">{% block header_text %}{% endblock %}</div>
- <nav class="no-select">
+ <div class="logo no-select">{% block header_text %}{% endblock %}</div>
+ <nav class="no-select" style="float:right;overflow:hidden;scroll-behavior:smooth">
<a class="no-select" href="/web.html">🏠</a>
<a class="no-select" href="/search-user.html">🔍</a>
<a class="no-select" style="display:none" id="install-button" href="#">📥</a>
@@ -39,6 +40,7 @@
{% block sidebar %}
{% include "sidebar_channels.html" %}
{% endblock %}
+
{% block main %}
<chat-window class="chat-area"></chat-window>
{% endblock %}
diff --git a/src/snek/templates/base.html b/src/snek/templates/base.html
index d2f8de7..2d2620e 100644
--- a/src/snek/templates/base.html
+++ b/src/snek/templates/base.html
@@ -16,10 +16,10 @@
<script src="/app.js" type="module"></script>
<script src="/message-list.js" type="module"></script>
<style>{{ highlight_styles }}</style>
- <link rel="stylesheet" href="/style.css">
+ <link rel="stylesheet" href="/style.css?rid={{ rid }}">
<script src="/fancy-button.js" type="module"></script>
<script src="/html-frame.js" type="module"></script>
- <script src="/generic-form.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>
{% block head %}
diff --git a/src/snek/templates/sidebar_channels.html b/src/snek/templates/sidebar_channels.html
index 66371f1..bf3cab1 100644
--- a/src/snek/templates/sidebar_channels.html
+++ b/src/snek/templates/sidebar_channels.html
@@ -4,10 +4,12 @@
}
</style>
<aside class="sidebar" id="channelSidebar">
+ {#
<h2 class="no-select">Terminals</h2>
<ul>
<li><a class="no-select" href="/terminal.html">Ubuntu</a></li>
</ul>
+ #}
{% if channels %}
<h2 class="no-select">Channels</h2>
<ul>
diff --git a/src/snek/templates/web.html b/src/snek/templates/web.html
index 3c7bbf9..fa5e03e 100644
--- a/src/snek/templates/web.html
+++ b/src/snek/templates/web.html
@@ -1,9 +1,14 @@
{% extends "app.html" %}
-{% block header_text %}<h2>{{ name }}</h2>{% endblock %}
+{% block header_text %}<h2 style="color:#fff">{{ name }}</h2>{% endblock %}
{% block main %}
-<section class="chat-area" id="chat">
+
+
+
+
+
+<section class="chat-area">
<div class="chat-messages">
{% for message in messages %}
{% autoescape false %}
@@ -11,10 +16,10 @@
{% endautoescape %}
{% endfor %}
</div>
- <footer class="chat-input">
+ <div class="chat-input">
<textarea placeholder="Type a message..." rows="2"></textarea>
<upload-button channel="{{ channel.uid.value }}"></upload-button>
- </footer>
+ </div>
</section>
<script type="module">
@@ -137,6 +142,8 @@
lastMessage = messagesContainer.querySelector(".message:last-child");
if (doScrollDown) {
lastMessage?.scrollIntoView({ block: "end", inline: "nearest" });
+ const inputBox = document.querySelector(".chat-input");
+ inputBox.scrollIntoView({ block: "end", inline: "nearest" });
}
}