From 117888cf59c10330671f43bbce949a3984761c91 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Mon, 8 Aug 2022 10:40:51 +0200
Subject: [feature] Add first iteration of a user panel at `/user` (#736)

* start work on user panel

* parse source first before checking if empty form

* newline

* set avi + header nicely

* add posts settings

* render signin a bit nicer on mobile

* return OK json on successful change

* return unauthorized on bad password

* clarify message on insecure password

* make login a bit prettier

* add alt text + border round image previews

* add logout button

* add password change

* styling updates

* redirect /auth/edit to /user

* update tests

* fix validation tests

* better labels, link to more info

* make submit button generic component

* move submit button inside forms

* add autocomplete labels to password fields

* fix indentation (thx eslint)

* update eslintrc

* eslint: no-unescaped-entities

* initial deduplication between user and admin panel

* add default status/post format setting

* user panel styling for inputs

* update user panel styling, include normalize css

* add placeholder text

* input padding

Co-authored-by: f0x <f0x@cthu.lu>
---
 web/source/css/_colors.css |  5 ++++-
 web/source/css/base.css    | 49 ++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 45 insertions(+), 9 deletions(-)

(limited to 'web/source/css')

diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css
index 25bfae26e..5390f13d2 100644
--- a/web/source/css/_colors.css
+++ b/web/source/css/_colors.css
@@ -51,6 +51,7 @@ $bg_trans: color-mod($sloth_gray2 alpha(62%));
 
 $bg_accent: $sloth_gray2_lighter3;
 $fg_accent: $lightblue;
+$border_accent: $sloth_orange2;
 
 /* Color variables as used in a specific location */
 
@@ -70,4 +71,6 @@ $status_info_fg: #CBCBD7;
 $boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15);
 $boxshadow_border: 0.08rem solid $sloth_gray2_darker5;
 
-$profile_avatar_border: 0.2rem solid $sloth_orange2;
\ No newline at end of file
+$profile_avatar_border: 0.2rem solid $border_accent;
+
+$input_bg: $sloth_gray2_darker3;
\ No newline at end of file
diff --git a/web/source/css/base.css b/web/source/css/base.css
index 11d6dc407..5f07fb847 100644
--- a/web/source/css/base.css
+++ b/web/source/css/base.css
@@ -16,6 +16,8 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+@import "modern-normalize/modern-normalize.css";
+
 @font-face {
 	font-family: "Noto Sans";
 	font-weight: 400;
@@ -48,6 +50,10 @@ body {
 	position: relative;
 }
 
+.hidden {
+	display: none;
+}
+
 .page {
 	position: absolute;
 	display: grid;
@@ -215,13 +221,26 @@ section.apps {
 
 section.login {
 	form {
-		display: inline-grid;
-		grid-template-columns: auto 100%;
-		grid-gap: 0.7rem;
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+
+
+		padding-bottom: 1rem;
+		padding-top: 1rem;
+
+		label, input {
+			padding-left: 0.2rem;
+		}
 
-		button {
-			place-self: center;
-			grid-column: 2;
+		.labelinput {
+			display: flex;
+			flex-direction: column;
+			gap: 0.4rem;
+		}
+
+		.btn {
+			margin-top: 1rem;
 		}
 	}
 }
@@ -245,11 +264,25 @@ section.error {
 }
 
 input, select, textarea {
-	border: 1px solid $fg;
+	box-sizing: border-box;
+	border: 0.15rem solid $border_accent;
+	border-radius: 0.1rem;
 	color: $fg;
-	background: $bg;
+	/* background: $input_bg; */
+	background: $bg_accent;
 	width: 100%;
 	font-family: 'Noto Sans', sans-serif;
+	font-size: 1rem;
+	padding: 0.3rem;
+
+	&:focus {
+		border-color: $fg_accent;
+	}
+}
+
+input, textarea {
+	padding-top: 0.1rem;
+	padding-bottom: 0.1rem;
 }
 
 footer {
-- 
cgit v1.2.3