From 2847cfcebcd6b0a4bdecac6ef5a16609295d1059 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Wed, 27 Apr 2022 05:03:47 +0300
Subject: [PATCH] frontend: inital steps for responsive design and mobile
support
---
frontend/public/global.css | 44 +++++++++++++------
frontend/public/index.html | 2 +-
frontend/src/components/ChannelTopBar.svelte | 16 ++++++-
frontend/src/components/Main.svelte | 18 +++++---
frontend/src/components/Message.svelte | 2 +-
frontend/src/components/MessageInput.svelte | 12 ++++-
frontend/src/components/Messages.svelte | 13 +++++-
frontend/src/components/Sidebar.svelte | 12 ++++-
.../components/overlays/CreateAccount.svelte | 2 +-
frontend/src/components/overlays/Login.svelte | 2 +-
frontend/src/components/overlays/Toast.svelte | 2 +-
frontend/src/main.js | 2 +
frontend/src/responsive.js | 12 +++++
frontend/src/stores.js | 2 +
14 files changed, 110 insertions(+), 31 deletions(-)
create mode 100644 frontend/src/responsive.js
diff --git a/frontend/public/global.css b/frontend/public/global.css
index 013a60a..b7474c4 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -59,6 +59,11 @@
--radius-xxl: calc(5.25 * var(--sradius-unit));
}
+html, body {
+ width: 100%;
+ height: 100%;
+}
+
body {
color: var(--foreground-color-1);
background-color: var(--background-color-1);
@@ -67,8 +72,6 @@ body {
font-weight: 400;
line-height: 1.75;
- width: 100vw;
- height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
@@ -89,7 +92,7 @@ body {
.top-bar {
display: flex;
align-items: center;
- justify-content: flex-start;
+ justify-content: left;
height: 3.4em;
width: 100%;
padding: var(--space-sm);
@@ -105,14 +108,19 @@ body {
/* modal */
.modal-backdrop {
- position: absolute;
- width: 100vw;
- height: 100vh;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
z-index: 0;
- top: 50%;
- left: 50%;
background-color: rgba(0, 0, 0, 0.4);
- transform: translate(-50%, -50%);
}
.modal-backdrop-opaque {
@@ -122,10 +130,6 @@ body {
.modal {
display: flex;
flex-direction: column;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
background-color: var(--background-color-2);
border-radius: var(--radius-lg);
padding: var(--space-md);
@@ -149,6 +153,17 @@ body {
float: left;
}
+@media screen and (max-width: 768px) {
+ .modal {
+ width: 100%;
+ height: 100%;
+ border-radius: 0px;
+ }
+ .modal-backdrop {
+ display: block;
+ }
+}
+
/* input */
.input-label {
@@ -205,6 +220,9 @@ body {
border: none;
border-radius: var(--radius-md);
font: inherit;
+}
+
+.icon-button-auto {
margin-left: auto;
}
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 5874974..672e685 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -2,7 +2,7 @@
-
+
app
diff --git a/frontend/src/components/ChannelTopBar.svelte b/frontend/src/components/ChannelTopBar.svelte
index 964b0c2..218af5b 100644
--- a/frontend/src/components/ChannelTopBar.svelte
+++ b/frontend/src/components/ChannelTopBar.svelte
@@ -1,10 +1,22 @@
+
+
+ {#if !$showSidebar}
+
+ {/if}
- { channel.name }
+ { channel.name }
diff --git a/frontend/src/components/Main.svelte b/frontend/src/components/Main.svelte
index 309d564..338b3d5 100644
--- a/frontend/src/components/Main.svelte
+++ b/frontend/src/components/Main.svelte
@@ -1,6 +1,6 @@