From 350612fe4c863f56946d38e6d83910762a35da53 Mon Sep 17 00:00:00 2001 From: Fizitzfux <66255957+fizitzfux@users.noreply.github.com> Date: Sun, 26 May 2024 19:16:05 +0000 Subject: [PATCH 01/56] redo navigation --- config/texts.js.example | 7 +- www/extensions/root/index.html | 5 -- www/extensions/root/static/index.css | 113 +++++++++---------------- www/extensions/root/user.html | 2 + www/templates/extension.html | 4 +- www/templates/includes/extensions.html | 6 +- www/templates/includes/sidebar.html | 10 +++ www/templates/layout.html | 2 - 8 files changed, 57 insertions(+), 92 deletions(-) delete mode 100644 www/extensions/root/index.html create mode 100644 www/templates/includes/sidebar.html diff --git a/config/texts.js.example b/config/texts.js.example index 64ac400..80671d4 100644 --- a/config/texts.js.example +++ b/config/texts.js.example @@ -1,10 +1,5 @@ exports.index = `

Welcome to KeukNet!

-

- If you're new here we recommend reading the getting started guide immediately after registering.
- It can be found top-left next to the logo.
- Registering and logging in can be done at the top-right. -

For help or questions please contact @fizitzfux on Discord
or join our Discord server. @@ -12,4 +7,6 @@ exports.index = `

Please do be aware of the fact that this is still very much in development and a lot of stuff will be improved with time.

+ +Register / Login ` diff --git a/www/extensions/root/index.html b/www/extensions/root/index.html deleted file mode 100644 index 4431dfd..0000000 --- a/www/extensions/root/index.html +++ /dev/null @@ -1,5 +0,0 @@ -{% extends "layout.html" %} - -{% block body %} - {{index_text |safe}} -{% endblock %} diff --git a/www/extensions/root/static/index.css b/www/extensions/root/static/index.css index 0cad870..d049589 100644 --- a/www/extensions/root/static/index.css +++ b/www/extensions/root/static/index.css @@ -8,8 +8,6 @@ --header-spacing: 3px; --header-spacing-large: 6px; - --ext-height: 25px; - --margin-small: 5px; --margin-normal: 10px; --margin-normal-large: 15px; @@ -73,49 +71,6 @@ a:visited { cursor: default; } -header { - display: flex; - flex-wrap: wrap; - background-color: rgba(119, 136, 153, 0.9); - align-items: flex-start; - max-width: var(--max-width); - width: 100%; - margin: 0 auto; - border-bottom-left-radius: var(--margin-normal); - border-bottom-right-radius: var(--margin-normal); - overflow: hidden; -} -header > nav { - display: flex; - flex-wrap: wrap; -} -header > nav > * { - max-height: var(--header-height); -} -header > nav.left { - margin-right: auto; -} -header > nav.left > :first-child { - padding-left: var(--header-spacing-large); -} -header > nav.right > :last-child { - padding-right: var(--header-spacing-large); -} -header > nav > a { - all: initial; - cursor: pointer; - text-decoration: underline dotted rgba(0,0,0,0.4); - line-height: 25px; - padding: 0 var(--header-spacing); -} -header > nav > a:hover { - background-color: rgba(0,0,0,0.1); - text-decoration: underline dotted rgba(0,0,0,0.9); -} -header > nav > a:visited { - color: black; -} - .main { max-width: var(--max-width); width: 100%; @@ -126,60 +81,74 @@ header > nav > a:visited { border-radius: 10px; padding: 10px 10px 10px 10px; box-sizing: border-box; + display: flex; } -.extensions { - width: 100%; - display: flex; - flex-wrap: wrap; +.sidebar { + width: max-content; + max-width: 150px; } -.extensions > a { - background-color: gray; - padding: 5px 10px; + +.sidebar > * { + margin-right: 5px; +} + +.sidebar > hr { + border-color: rgba(0, 0, 0, 0.3); +} + +.sidebar .item { + display: flex; + background-color: darkgray; + padding: 5px 10px 3px; + margin-bottom: 3px; box-sizing: border-box; - height: var(--ext-height); font-size: 15px; box-shadow: inset 0 0 2px black; border-radius: var(--margin-small); - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; color: black; text-decoration: none; } -.extensions > a:hover { + +.sidebar .item * { + margin: auto; +} + +.sidebar .item:hover { background-color: darkgrey; color: black; text-decoration: none; } -.extensions .selected { +.sidebar .selected { background-color: var(--background-content) !important; - box-shadow: none; } - -.extensions .right { - margin-left: auto; +.sidebar .item > img { + width: 25px; + height: 25px; + position: relative; + top: -2px; + right: -5px; } -.extensions span { - position: relative; - top: -15px; +.sidebar > .extensions { + display: flex; + flex-wrap: wrap; + flex-flow: column; } -.extensions img { - width: calc(var(--ext-height) - 2px); - height: var(--ext-height); - position: relative; - top: -5px; - margin: 0 -5px; + +.sidebar > .extensions > * { + background-color: gray; } .content { - max-height: var(--max-window-height); + max-height: 100%; + height: min(var(--max-window-height), 90vh); max-width: var(--max-window-width); width: 100%; overflow-y: auto; overflow-x: hidden; background-color: var(--background-content); - border-bottom-left-radius: var(--margin-small); padding-left: var(--margin-normal); box-sizing: border-box; + border-radius: 5px; } diff --git a/www/extensions/root/user.html b/www/extensions/root/user.html index 3fb66e8..4022564 100644 --- a/www/extensions/root/user.html +++ b/www/extensions/root/user.html @@ -5,6 +5,8 @@

Hello {{user.name}}!


Edit + Logout + Get started

You registered at {{user.regdate}}

diff --git a/www/templates/extension.html b/www/templates/extension.html index 35b468b..a40d742 100644 --- a/www/templates/extension.html +++ b/www/templates/extension.html @@ -14,10 +14,8 @@ - {% include "includes/header.html" %} -
- {% include "includes/extensions.html" %} + {% include "includes/sidebar.html" %}
{% block body %} {% endblock %} diff --git a/www/templates/includes/extensions.html b/www/templates/includes/extensions.html index 0abe0ef..736f0aa 100644 --- a/www/templates/includes/extensions.html +++ b/www/templates/includes/extensions.html @@ -1,10 +1,6 @@
{% for _,ext in extensions %} - {{ext.title}} + {{ext.title}} {% endfor %} - - {{user.name}} - -
diff --git a/www/templates/includes/sidebar.html b/www/templates/includes/sidebar.html new file mode 100644 index 0000000..2c9324d --- /dev/null +++ b/www/templates/includes/sidebar.html @@ -0,0 +1,10 @@ + diff --git a/www/templates/layout.html b/www/templates/layout.html index e556e6e..04103b7 100644 --- a/www/templates/layout.html +++ b/www/templates/layout.html @@ -12,8 +12,6 @@ - {% include "includes/header.html" %} -
{% block body %} From b02f267fd95d16da219349e536ff036d0b4359ab Mon Sep 17 00:00:00 2001 From: Fizitzfux <66255957+fizitzfux@users.noreply.github.com> Date: Thu, 23 Jan 2025 11:52:47 +0000 Subject: [PATCH 02/56] Add login button back --- config/texts.example.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/config/texts.example.ts b/config/texts.example.ts index 3ed357a..dad6441 100644 --- a/config/texts.example.ts +++ b/config/texts.example.ts @@ -1,11 +1,6 @@ export default { index: `

Welcome to KeukNet!

-

- If you're new here we recommend reading the getting started guide immediately after registering.
- It can be found top-left next to the logo.
- Registering and logging in can be done at the top-right. -

For help or questions please contact @fizitzfux on Discord
or join our Discord server. @@ -13,5 +8,7 @@ export default {

Please do be aware of the fact that this is still very much in development and a lot of stuff will be improved with time.

+ + Register / Login `, } From f18e670ab071f9262ea3f9b01cce09ef71538ba2 Mon Sep 17 00:00:00 2001 From: Fizitzfux <66255957+fizitzfux@users.noreply.github.com> Date: Thu, 23 Jan 2025 18:46:15 +0000 Subject: [PATCH 03/56] fix nginx mode --- src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.ts b/src/index.ts index 867101d..6d686bd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,5 @@ import http2 from 'http2' -import http1, { IncomingMessage, ServerResponse } from 'http' +import http1, { IncomingMessage, RequestListener, ServerResponse } from 'http' import Knex from 'knex' import dotenv from 'dotenv' import {cookie, config, Log } from './modules.ts' @@ -199,7 +199,7 @@ async function startServer(http_enabled: boolean, https_enabled: boolean) { if (http_enabled) { // Start server http1.createServer( - https_enabled ? httpsRedirect : requestListenerCompat + https_enabled ? httpsRedirect : requestListener as unknown as RequestListener ).listen( config.http_port, config.host, From 5439bb3cd8b59b83c6828955721496f7a4240256 Mon Sep 17 00:00:00 2001 From: Fizitzfux <66255957+fizitzfux@users.noreply.github.com> Date: Mon, 27 Jan 2025 13:20:43 +0000 Subject: [PATCH 04/56] Update dependabot to ignore type libs --- .github/dependabot.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 4482ad1..ee44dfe 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -12,3 +12,5 @@ updates: assignees: - "fizitzfux" target-branch: "main" + ignore: + - dependency-name: "@types/*" From 026bbb020032e6651f0d807329bfc187c73aa6a1 Mon Sep 17 00:00:00 2001 From: Fizitzfux <66255957+fizitzfux@users.noreply.github.com> Date: Thu, 30 Jan 2025 19:39:46 +0000 Subject: [PATCH 05/56] Fix #41 --- src/extensions/root/index.ts | 35 ++++++++++++++++++---------------- src/extensions/root/login.html | 2 +- 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/extensions/root/index.ts b/src/extensions/root/index.ts index ee737e1..c72ece3 100644 --- a/src/extensions/root/index.ts +++ b/src/extensions/root/index.ts @@ -56,7 +56,7 @@ export default class extends ExtensionBase implements RootExtension { if (!ctx.context.user) { // Attempt if (ctx.data) { - let form = ctx.data.form + let form: {login?: string, register?: string, username?: string, password?: string} = ctx.data.form // Login if (form.login) { let auth = ''; @@ -70,21 +70,24 @@ export default class extends ExtensionBase implements RootExtension { } // Register else if (form.register) { - this.addUser(form.username, form.password, (err?: Error) => { - // if invalid credentials - if (err) { - ctx.context.auth_err = err - return this.return_html(ctx, 'login') - } - // success - else { - let auth = Buffer.from(form.username+":"+form.password).toString('base64') - return this.return_html(ctx, 'login', undefined, 500, 303, { - "Location": "/", - "Set-Cookie": this.set_cookie('auth', 'Basic '+auth, true) - }) - } - }) + if (form.username && form.password) { + form.username = form.username.substring(0, 32) + this.addUser(form.username, form.password, (err?: Error) => { + // if invalid credentials + if (err) { + ctx.context.auth_err = err + return this.return_html(ctx, 'login') + } + // success + else { + let auth = Buffer.from(form.username+":"+form.password).toString('base64') + return this.return_html(ctx, 'login', undefined, 500, 303, { + "Location": "/", + "Set-Cookie": this.set_cookie('auth', 'Basic '+auth, true) + }) + } + }) + } return } } diff --git a/src/extensions/root/login.html b/src/extensions/root/login.html index 8427eb0..a790687 100644 --- a/src/extensions/root/login.html +++ b/src/extensions/root/login.html @@ -6,7 +6,7 @@

Register / Log in

- + From ade8448711fa0ed0b526238f343700481ecf606c Mon Sep 17 00:00:00 2001 From: Fizitzfux <66255957+fizitzfux@users.noreply.github.com> Date: Fri, 31 Jan 2025 09:26:23 +0000 Subject: [PATCH 06/56] auto-load all extensions --- src/handle.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/handle.ts b/src/handle.ts index 952f9af..4f4ff9e 100644 --- a/src/handle.ts +++ b/src/handle.ts @@ -1,13 +1,11 @@ import { load } from "./extman.ts" import Log from "./modules/log.ts" import { unpack } from "./util.ts" +import { readdir } from "fs/promises" let log = new Log(true) export default class implements Handle { - extensions_list = [ - 'profile','nothing','admin','chat' - ] root: RootExtension wg_config: any extensions = new Map() @@ -24,11 +22,13 @@ export default class implements Handle { init: Handle['init'] = async (modules, knex) => { this.root = await load(modules, 'root', knex) as RootExtension - for (const path of this.extensions_list) { - try { - this.extensions.set(path, await load(modules, path, knex) as Extension) - } catch (err: any) { - log.err(`Unable to load extension '${path}':\n\t${err.message}\n${err.stack}`) + for (const path of await readdir(`${import.meta.dirname}/extensions`)) { + if (path != 'root') { + try { + this.extensions.set(path, await load(modules, path, knex) as Extension) + } catch (err: any) { + log.err(`Unable to load extension '${path}':\n\t${err.message}\n${err.stack}`) + } } } From 2ea4596e782028b5e45036731d74a0ad189b7bdb Mon Sep 17 00:00:00 2001 From: Fizitzfux <66255957+fizitzfux@users.noreply.github.com> Date: Fri, 31 Jan 2025 12:05:26 +0000 Subject: [PATCH 07/56] Redo chat using SSE --- src/extensions/chat/index.html | 55 +------------ src/extensions/chat/index.ts | 113 ++++++++++++++++----------- src/extensions/chat/static/chat.js | 76 ++++++++++++++++++ src/extensions/chat/static/index.css | 75 +++++++++++++++--- 4 files changed, 210 insertions(+), 109 deletions(-) create mode 100644 src/extensions/chat/static/chat.js diff --git a/src/extensions/chat/index.html b/src/extensions/chat/index.html index e96ed42..927e006 100644 --- a/src/extensions/chat/index.html +++ b/src/extensions/chat/index.html @@ -2,62 +2,13 @@ {% block head %} - + {% endblock %} {% block body %}
-
- {% for msg in chat %} - - - - - - - {% else %} -

No chat items

- {% endfor %} -
{{msg.user.name}}{{msg.time}}{{msg.content}}
+
+
diff --git a/src/extensions/chat/index.ts b/src/extensions/chat/index.ts index 6876236..bf0dafa 100644 --- a/src/extensions/chat/index.ts +++ b/src/extensions/chat/index.ts @@ -1,60 +1,85 @@ import { ExtensionBase } from "../../modules.ts" +type message = {user: {name: any, pfp_code: any}, time: any, content: any} + export default class extends ExtensionBase { override name = 'chat' override title = 'Chat' - messages: {user: {name: any, pfp_code: any}, time: any, content: any}[] = [{ - user: {name:'SYSTEM',pfp_code:'seed=SYSTEM'}, - time:(new Date()).toLocaleTimeString('en-US', {hour12: false}), - content: 'Welcome to the chatroom!' - }] - last_got_id: {[user_id: number]: number} = {} + private MessageStore = class { + messages: message[] = [{ + user: {name:'SYSTEM',pfp_code:'seed=SYSTEM'}, + time:(new Date()).toLocaleTimeString('en-US', {hour12: false}), + content: 'Welcome to the chatroom!' + }] + onPushListeners: Set<(msg: message) => void> = new Set() + + push(ctx: Context, content: string) { + const message: message = { + user: { + name: ctx.context.user?.name, + pfp_code: `${ctx.context.dicebear_host}?${ctx.context.user?.pfp_code}`, + }, + time: (new Date()).toLocaleTimeString('en-US', {hour12: false}), + content, + } + this.messages.push(message) + this.onPushListeners.forEach((listener) => listener(message)) + } + } + message_store = new this.MessageStore() override handle: Extension['handle'] = (ctx) => { - var location = ctx.path.shift() + const location = ctx.path.shift() - const user_id = ctx.context.user?.id as number + switch (location) { + case '': + case undefined: { + if (ctx.data && ctx.data.form.message) { + const message = ctx.data.form.message.substring(0,255) + this.message_store.push(ctx, message) + } + ctx.context.chat = this.message_store.messages + return this.return_html(ctx, 'index') + } + case 'history': { + // Should at some point return history by request + return this.return_data(ctx, JSON.stringify({messages: this.message_store.messages})) + } + case 'new_message_event': { + const {req, res} = ctx - if (!location) { - if (ctx.data && ctx.data.form.message) { - var message = ctx.data.form.message.substring(0,255) - var now = (new Date()).toLocaleTimeString('en-US', {hour12: false}) - this.messages.push({ - user: { - name: ctx.context.user?.name, - pfp_code: ctx.context.user?.pfp_code, - }, - time: now, - content: message, + res.writeHead(200, { + 'Content-Type': 'text/event-stream', + 'Cache-Control': 'no-cache', + }); + + let counter = 0; + + // Send a message on connection + res.write('event: connected\n'); + res.write(`data: null\n`); + res.write(`id: ${counter}\n\n`); + counter += 1; + + const listener = (msg: message) => { + res.write('event: message\n'); + res.write(`data: ${JSON.stringify(msg)}\n`); + res.write(`id: ${counter}\n\n`); + counter += 1; + } + this.message_store.onPushListeners.add(listener) + + // Close the connection when the client disconnects + req.on('close', () => { + this.message_store.onPushListeners.delete(listener) + res.end('OK') }) + return } - ctx.context.chat = this.messages - this.last_got_id[user_id] = this.messages.length - return this.return_html(ctx, 'index') - } - else if (location == 'getnew') { - var part = this.last_got_id.hasOwnProperty(user_id) ? this.last_got_id[user_id] : 0 - this.last_got_id[user_id] = this.messages.length - return this.return_data(ctx, `{"messages":${JSON.stringify(this.messages.slice(part))}}`) - } - else if (location == 'postmessage') { - if (ctx.data && ctx.data.form.message) { - var message = ctx.data.form.message.substring(0,255) - var now = (new Date()).toLocaleTimeString('en-US', {hour12: false}) - this.messages.push({ - user: { - name: ctx.context.user?.name, - pfp_code: ctx.context.user?.pfp_code, - }, - time: now, - content: message, - }) + default: { + return this.return_file(ctx, location) } - return this.return(ctx) - } - else { - return this.return_file(ctx, location) } } } diff --git a/src/extensions/chat/static/chat.js b/src/extensions/chat/static/chat.js new file mode 100644 index 0000000..6d87125 --- /dev/null +++ b/src/extensions/chat/static/chat.js @@ -0,0 +1,76 @@ +/** @type {HTMLTableElement} */ +let messages + +window.onload = function() { + const send = document.getElementById('sendmessage') + send.removeAttribute('action') + send.onsubmit = sendMessage + + messages = document.getElementById('messages') + getHistory() +} + +function sendMessage (e) { + e.preventDefault() + const msg = e.target.message.value + + if (msg !== '') { + var http = new XMLHttpRequest() + http.open('POST', window.location.href, true) + http.send('message='+encodeURIComponent(msg)) + } + + e.target.message.value = '' +} + +function addMessage(msg) { + function field(c) { + let f = document.createElement('span') + f.textContent = c + return f + } + const row = messages.insertRow(-1) + const img_col = row.insertCell(-1) + img_col.innerHTML = '' + const col = row.insertCell(-1) + const info_col = col.appendChild(document.createElement('div')) + info_col.appendChild(field(msg.user.name)) + info_col.appendChild(field(msg.time)) + const msg_col = col.appendChild(document.createElement('div')) + msg_col.appendChild(field(msg.content)) +} + +function getHistory() { + const http = new XMLHttpRequest() + http.open('GET', window.location.href+'/history', true) + http.responseType = 'json' + + http.onreadystatechange = () => { + if (http.readyState == 4 && http.status == 200) { + data = http.response.messages + if (data) { + for (var i=0; i { + console.log('Connected') +}) + +subscription.addEventListener('error', () => { + console.log('Connection error') +}) + +subscription.addEventListener('message', (e) => { + console.log('Received message') + const message = JSON.parse(e.data) + addMessage(message) +}) diff --git a/src/extensions/chat/static/index.css b/src/extensions/chat/static/index.css index 13cce15..f578f6e 100644 --- a/src/extensions/chat/static/index.css +++ b/src/extensions/chat/static/index.css @@ -4,8 +4,10 @@ } .content > .chat { margin: auto; - max-width: 650px; width: 100%; + height: 100%; + display: flex; + flex-direction: column; } .content #messages { background-color: white; @@ -15,34 +17,57 @@ margin-bottom: var(--margin-normal); width: 100%; display: flex; + flex-grow: 1; overflow-y: scroll; + overflow-x: hidden; scroll-snap-type: y proximity; - max-height: 500px; flex-direction: column-reverse; } .content #messages tr:last-child { scroll-snap-align: end; } -.content #messages tr td { - text-align: start; +.content #messages table { + border-collapse: collapse; } -.content #messages tr :nth-child(1) { +.content #messages tr .pfp { width: 35px; height: 35px; - margin: -15px 0; + margin: 0 0; } -.content #messages tr :nth-child(2) { - font-style: italic; - width: 0; +.content #messages tr > :nth-child(1) { + vertical-align: top; +} +.content #messages tr > :nth-child(2) { + height: 100%; + width: 100%; + display: flex; +} +.content #messages tr > :nth-child(2) > :nth-child(1) { + text-align: start; + height: 100%; + width: max-content; padding-right: var(--margin-small); } -.content #messages tr :nth-child(3) { +.content #messages tr > :nth-child(2) > :nth-child(1) > :nth-child(1) { + display: block; + height: 50%; + width: max-content; + font-style: italic; +} +.content #messages tr > :nth-child(2) > :nth-child(1) > :nth-child(2) { + display: block; + height: 50%; + width: max-content; font-weight: bold; - width: 0; - padding-right: var(--margin-small); + font-size: 12px; } -.content #messages tr :nth-child(4) { +.content #messages tr > :nth-child(2) > :nth-child(2) { + padding-left: var(--margin-small); + border-left: 3px solid lightgray; +} +.content #messages tr > :nth-child(2) > :nth-child(2) > * { word-break: break-all; + width: 100%; } .content form { @@ -65,3 +90,27 @@ .content form > input[type=submit] { width: fit-content; } + + +/* Phones */ +@media (max-width: 700px) { + .content #messages tr > :nth-child(2) { + flex-wrap: wrap; + } + .content #messages tr > :nth-child(2) > :nth-child(1) { + width: 100%; + display: flex; + flex-wrap: nowrap; + gap: 10px; + } + .content #messages tr > :nth-child(2) > :nth-child(1) > :nth-child(1) { + height: 100%; + width: max-content; + text-align: center; + } +} +@media (max-width: 460px) { + .content #messages tr > :nth-child(1) { + display: none; + } +} From 4d9088d3bb61cac6616d88e50809e8e7750b14ee Mon Sep 17 00:00:00 2001 From: Fizitzfux <66255957+fizitzfux@users.noreply.github.com> Date: Fri, 31 Jan 2025 13:07:50 +0000 Subject: [PATCH 08/56] Improve mobile layout --- src/extensions/root/static/index.css | 75 ++++++++++++++++++++++++++++ src/templates/extension.html | 2 +- src/templates/includes/sidebar.html | 37 +++++++++++++- 3 files changed, 112 insertions(+), 2 deletions(-) diff --git a/src/extensions/root/static/index.css b/src/extensions/root/static/index.css index d049589..77380b9 100644 --- a/src/extensions/root/static/index.css +++ b/src/extensions/root/static/index.css @@ -19,6 +19,10 @@ --color-link: darkslateblue; } +* { + box-sizing: border-box; +} + body { padding: 0; margin: 0; @@ -139,6 +143,26 @@ a:visited { .sidebar > .extensions > * { background-color: gray; } +.topbar { + display: none; + width: 100%; + height: max-content; + align-items: baseline; + border-radius: 0; + z-index: 3; + background-color: rgba(0,0,0,0.5); +} +.topbar > h3 { + width: 100%; + color: white; + text-align: center; +} +.topbar > .button { + width: 30px; + height: 30px; + font-size: large; + margin-left: var(--margin-normal-large); +} .content { max-height: 100%; @@ -152,3 +176,54 @@ a:visited { box-sizing: border-box; border-radius: 5px; } + + +/* Phones */ +@media (max-width: 550px) { + .sidebar { + display: none; + } + .topbar { + display: flex; + } + .main { + max-width: 100%; + max-height: 100%; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + flex-direction: column; + border-radius: 0; + } + .content { + height: 100%; + border-radius: 0; + } + .sidebar { + flex-direction: column-reverse; + position: absolute; + max-width: 100%; + width: 100%; + height: calc(100% - 60px); + top: 60px; + padding: var(--margin-normal) var(--margin-normal); + overflow-y: scroll; + } + .sidebar > :nth-child(1) img { + height: var(--margin-normal-large); + width: var(--margin-normal-large); + top: 0; + right: 0; + } + .sidebar > * { + margin-right: 0; + text-align: center; + } + .sidebar .item { + width: 100%; + display: block; + height: 40px; + line-height: 30px; + } +} diff --git a/src/templates/extension.html b/src/templates/extension.html index a40d742..955560a 100644 --- a/src/templates/extension.html +++ b/src/templates/extension.html @@ -16,7 +16,7 @@
{% include "includes/sidebar.html" %} -
+
{% block body %} {% endblock %}
diff --git a/src/templates/includes/sidebar.html b/src/templates/includes/sidebar.html index 2c9324d..9e16855 100644 --- a/src/templates/includes/sidebar.html +++ b/src/templates/includes/sidebar.html @@ -1,4 +1,39 @@ -