From 1ab7fd5c0c6c4bfe8e350cf549182c27580d56c5 Mon Sep 17 00:00:00 2001 From: Halfdan Date: Tue, 3 Oct 2023 18:18:22 +0200 Subject: [PATCH 01/12] Starting a rather large UI/UX overhaul :D --- .gitignore | 1 + .../membership/membership_overview.html | 38 ++- src/project/static/css/style.css | 224 ++++++++++++++++ src/project/templates/base.html | 246 +++--------------- src/project/templates/services_overview.html | 52 +++- 5 files changed, 350 insertions(+), 211 deletions(-) create mode 100644 src/project/static/css/style.css diff --git a/.gitignore b/.gitignore index c4bb9c0..86b4cf9 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ db.sqlite3 *.mo .env venv/ +.venv/ diff --git a/src/membership/templates/membership/membership_overview.html b/src/membership/templates/membership/membership_overview.html index 3e12bb7..ecb42b8 100644 --- a/src/membership/templates/membership/membership_overview.html +++ b/src/membership/templates/membership/membership_overview.html @@ -7,6 +7,8 @@ {% block content %} +
+

Membership settings

{% if not current_membership %}

{% trans "You do not have an active membership!" %}

@@ -24,4 +26,38 @@

{% trans "Period" %}: {{ current_period.lower|date:"SHORT_DATE_FORMAT" }} to {{ current_period.upper|date:"SHORT_DATE_FORMAT"|default:next_general_assembly }}

{% trans "Type" %}: {{ current_membership.membership_type }}

{% endif %} - {% endblock %} +
+ +
+

Profile settings

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ +
+

Email settings

+ +
+{% endblock %} diff --git a/src/project/static/css/style.css b/src/project/static/css/style.css new file mode 100644 index 0000000..c344680 --- /dev/null +++ b/src/project/static/css/style.css @@ -0,0 +1,224 @@ +/* Start reset */ +*, *::before, *::after { + box-sizing: border-box; +} +* { + margin: 0; +} +body { + line-height: 1.5; +} +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} +input, button, textarea, select { + font: inherit; +} +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +} +#root, #__next { + isolation: isolate; +} +/* End reset */ + +body { + margin : 0; + padding : 0; + background : #f0dcac; + font-family : sans-serif; + color : #232323; +} + +header { + display : flex; + padding : 12px 24px; + background : #fff; + justify-content : space-between; + align-items : center; +} + +header > h1 { + font-size : 1.44em; +} + +header > div.logout { + padding : 6px; +} + +header > div.logout a { + padding : 6px; +} + +aside { + padding : 24px 24px; + background : #fff; +} + +aside > div { + background : #efefef; + padding : 24px; + border-radius : 6px; + overflow : hidden; +} + +aside > div > h2 { + font-size : 1.22em; + margin : 0 0 6px 0; +} + +aside > div > figure { + width : 100px; + height : 100px; + border : 1px solid rgba(0,0,0,0.4); + float : left; + margin-right : 24px; +} + +aside > div > dl { + overflow : hidden; +} + +aside > div > dl > dt { + float : left; + clear : left; + margin : 0 24px 0 0; + width : 180px; + font-weight : bold; +} + +nav { + display : block; + border-bottom : 1px solid rgba(0,0,0,0.2); + background : #fff; + padding : 0 12px; +} + +nav ol { + margin : 0; + padding : 0; + list-style-type : none; + overflow : hidden; +} + +nav ol li { + margin : 0; + padding : 0; + float : left; +} + +nav > ol > li > a { + display : block; + padding : 6px 6px 3px 6px; + margin : 0 12px; + cursor : pointer; + border-bottom : 4px solid transparent; + text-decoration : none; + color : #121212; +} + +nav ol li a:hover { + border-color : rgba(0,0,0,0.6); +} + +nav ol li a.current { + font-weight : bold; + border-color : #4b3aba; + color : #4b3aba; +} + +article { + padding : 24px; +} + +article > div { + background : #efefef; + padding : 24px; + margin-bottom : 24px; +} + +div.view-list > h2 { + margin : 0 0 24px 0; +} + +div.services { + display : flex; + justify-content : space-between; + gap : 24px; + flex-wrap: wrap; +} + +div.services > div { + background : #fff; + padding : 24px; + border-radius : 6px; + flex : 240px; + max-width : 420px; + display : flex; + flex-flow : column; + justify-content : space-between; +} + +/* +div.services > div:hover { + transform : scale(1.02); + transition : all 0.2s; +} +*/ + +div.services > div > div.description { + margin-bottom : 24px; +} + +div.services > div > a, +button { + color : #fff; + background : #4b3aba; + padding : 6px 12px; + border-radius : 3px; + opacity : 0.8; + cursor : pointer; + text-align : center; + border : 0; +} + + +div.services > div > a:hover, +button:hover { + opacity : 1.0; +} + +form > div { + margin : 0 0 24px; +} + +form > div >label { + display : block; + margin : 0 0 6px; +} + +form > div > input[type="text"] { + border : 1px solid #343434; + border-radius : 3px; + padding : 6px 12px; + background : #fefefe; + width : 100%; +} + + +footer { + position : fixed; + bottom : 0; + left : 0; + right : 0; + background : #232323; + color : #efefef; + padding : 12px; + font-size : 0.78em; + opacity : 0.8; +} + +span.time_remaining { + opacity : 0.6; +} diff --git a/src/project/templates/base.html b/src/project/templates/base.html index 9225f6d..1e844d5 100644 --- a/src/project/templates/base.html +++ b/src/project/templates/base.html @@ -3,211 +3,49 @@ {% load static %} - - - - - {% block head_title %}{% endblock %} – {{ site.name }} + + + + + {% block head_title %}{% endblock %} – {{ site.name }} + + + +
+

data.coop membersystem

+ Log out +
+ + +
+ {% block content %}{% endblock %} +
- - - + + diff --git a/src/project/templates/services_overview.html b/src/project/templates/services_overview.html index f2a2aed..ef7d3b7 100644 --- a/src/project/templates/services_overview.html +++ b/src/project/templates/services_overview.html @@ -1,10 +1,50 @@ {% extends "base.html" %} {% block content %} -

- Services and signup to these will be -

-

- This is yet to be implemented. -

+
+

Services you subscribe to

+
+
+
+

Passit

+

Passit is a service that blabla

+
+ Unsubscribe +
+
+
+ +
+

Available services

+
+
+
+

Forgejo

+

Forgejo is a service that blabla

+
+ Subscribe +
+
+
+

Mastodon

+

Mastodon is a service where you can write things to people around the world.

+
+ Subscribe +
+
+
+

Matrix

+

Matrix is a service that blabla

+
+ Subscribe +
+
+
+

NextCloud

+

NextCloud is a service that blabla

+
+ Subscribe +
+
+
{% endblock %} -- 2.40.1 From 565018ea30c1c19833fd1435a5b2be1c79d291ef Mon Sep 17 00:00:00 2001 From: Halfdan Date: Tue, 3 Oct 2023 19:45:19 +0200 Subject: [PATCH 02/12] Variables in the CSS file --- src/project/static/css/style.css | 60 +++++++++++++++++++++----------- 1 file changed, 39 insertions(+), 21 deletions(-) diff --git a/src/project/static/css/style.css b/src/project/static/css/style.css index c344680..8dbddcf 100644 --- a/src/project/static/css/style.css +++ b/src/project/static/css/style.css @@ -21,20 +21,39 @@ p, h1, h2, h3, h4, h5, h6 { #root, #__next { isolation: isolate; } -/* End reset */ + +/* Variables */ + +:root { + /* Colors */ + --light : #fff; + --light-dust : #fefefe; + --dust : #f1f1f1; + --dark-dust : #bfbfbf; + --twilight : #404040; + --dark : #323232; + --custard : #f0dcac; + --splash : #4b3aba; + + /* Sizes */ + --space : 12px; + --double-space : calc(--space * 2); + --half-space : calc(--space / 2); + --quarter-space : calc(--space / 4); +} body { margin : 0; padding : 0; - background : #f0dcac; + background : var(--custard); font-family : sans-serif; - color : #232323; + color : var(--dark); } header { display : flex; padding : 12px 24px; - background : #fff; + background : var(--light); justify-content : space-between; align-items : center; } @@ -53,11 +72,11 @@ header > div.logout a { aside { padding : 24px 24px; - background : #fff; + background : var(--light); } aside > div { - background : #efefef; + background : var(--dust); padding : 24px; border-radius : 6px; overflow : hidden; @@ -71,7 +90,7 @@ aside > div > h2 { aside > div > figure { width : 100px; height : 100px; - border : 1px solid rgba(0,0,0,0.4); + border : 1px solid var(--dark-dust); float : left; margin-right : 24px; } @@ -90,8 +109,8 @@ aside > div > dl > dt { nav { display : block; - border-bottom : 1px solid rgba(0,0,0,0.2); - background : #fff; + border-bottom : 1px solid var(--dark-dust); + background : var(--light); padding : 0 12px; } @@ -115,7 +134,7 @@ nav > ol > li > a { cursor : pointer; border-bottom : 4px solid transparent; text-decoration : none; - color : #121212; + color : var(--dark); } nav ol li a:hover { @@ -124,8 +143,8 @@ nav ol li a:hover { nav ol li a.current { font-weight : bold; - border-color : #4b3aba; - color : #4b3aba; + border-color : var(--splash); + color : var(--splash); } article { @@ -133,7 +152,7 @@ article { } article > div { - background : #efefef; + background : var(--dust); padding : 24px; margin-bottom : 24px; } @@ -150,7 +169,7 @@ div.services { } div.services > div { - background : #fff; + background : var(--light); padding : 24px; border-radius : 6px; flex : 240px; @@ -173,8 +192,8 @@ div.services > div > div.description { div.services > div > a, button { - color : #fff; - background : #4b3aba; + color : var(--light); + background : var(--splash); padding : 6px 12px; border-radius : 3px; opacity : 0.8; @@ -199,21 +218,20 @@ form > div >label { } form > div > input[type="text"] { - border : 1px solid #343434; + border : 1px solid var(--twilight); border-radius : 3px; padding : 6px 12px; - background : #fefefe; + background : var(--dust); width : 100%; } - footer { position : fixed; bottom : 0; left : 0; right : 0; - background : #232323; - color : #efefef; + background : var(--dark); + color : var(--dust); padding : 12px; font-size : 0.78em; opacity : 0.8; -- 2.40.1 From 62956deb1defca39a1ebbba7354b93a9a80fb96b Mon Sep 17 00:00:00 2001 From: Halfdan Date: Tue, 3 Oct 2023 20:50:34 +0200 Subject: [PATCH 03/12] Media queries --- src/project/static/css/style.css | 78 +++++++++++++++++++------------- src/project/templates/base.html | 2 +- 2 files changed, 48 insertions(+), 32 deletions(-) diff --git a/src/project/static/css/style.css b/src/project/static/css/style.css index 8dbddcf..6ea0811 100644 --- a/src/project/static/css/style.css +++ b/src/project/static/css/style.css @@ -27,19 +27,26 @@ p, h1, h2, h3, h4, h5, h6 { :root { /* Colors */ --light : #fff; - --light-dust : #fefefe; + --light-dust : #fcfcfc; --dust : #f1f1f1; --dark-dust : #bfbfbf; --twilight : #404040; - --dark : #323232; + --dark : #2a2a2a; --custard : #f0dcac; --splash : #4b3aba; /* Sizes */ --space : 12px; - --double-space : calc(--space * 2); - --half-space : calc(--space / 2); - --quarter-space : calc(--space / 4); + --double-space : calc(var(--space) * 2); + --half-space : calc(var(--space) / 2); + --quarter-space : calc(var(--space) / 4); + --outer-space : var(--double-space); +} + +@media (min-width: 1380px) { + :root { + --outer-space : 15%; + } } body { @@ -52,7 +59,7 @@ body { header { display : flex; - padding : 12px 24px; + padding : var(--double-space) var(--outer-space); background : var(--light); justify-content : space-between; align-items : center; @@ -62,23 +69,28 @@ header > h1 { font-size : 1.44em; } -header > div.logout { - padding : 6px; +header > a.logout { + padding : 6px 12px; + border-radius : 6px; + background : var(--twilight); + text-decoration : none; + color : var(--dust); } -header > div.logout a { - padding : 6px; +header > a.logout:hover { + background : var(--splash); + color : var(--light); } aside { - padding : 24px 24px; + padding : var(--double-space) var(--outer-space); background : var(--light); } aside > div { background : var(--dust); - padding : 24px; - border-radius : 6px; + padding : var(--double-space); + border-radius : var(--quarter-space); overflow : hidden; } @@ -92,7 +104,7 @@ aside > div > figure { height : 100px; border : 1px solid var(--dark-dust); float : left; - margin-right : 24px; + margin-right : var(--double-space); } aside > div > dl { @@ -102,7 +114,7 @@ aside > div > dl { aside > div > dl > dt { float : left; clear : left; - margin : 0 24px 0 0; + margin : 0 var(--double-space) 0 0; width : 180px; font-weight : bold; } @@ -111,11 +123,10 @@ nav { display : block; border-bottom : 1px solid var(--dark-dust); background : var(--light); - padding : 0 12px; } nav ol { - margin : 0; + margin: 0 calc(var(--outer-space)); padding : 0; list-style-type : none; overflow : hidden; @@ -129,12 +140,16 @@ nav ol li { nav > ol > li > a { display : block; - padding : 6px 6px 3px 6px; - margin : 0 12px; - cursor : pointer; - border-bottom : 4px solid transparent; + padding : var(--half-space) var(--half-space) var(--quarter-space); + margin : 0 var(--space); + border-bottom : var(--half-space) solid transparent; text-decoration : none; color : var(--dark); + cursor : pointer; +} + +nav > ol > li:first-child > a { + margin-left : 0; } nav ol li a:hover { @@ -148,29 +163,29 @@ nav ol li a.current { } article { - padding : 24px; + padding : var(--double-space) var(--outer-space); } article > div { background : var(--dust); - padding : 24px; - margin-bottom : 24px; + padding : var(--double-space); + margin-bottom : var(--double-space); } div.view-list > h2 { - margin : 0 0 24px 0; + margin : 0 0 var(--double-space) 0; } div.services { display : flex; justify-content : space-between; - gap : 24px; + gap : var(--double-space); flex-wrap: wrap; } div.services > div { background : var(--light); - padding : 24px; + padding : var(--double-space); border-radius : 6px; flex : 240px; max-width : 420px; @@ -187,7 +202,7 @@ div.services > div:hover { */ div.services > div > div.description { - margin-bottom : 24px; + margin-bottom : var(--double-space); } div.services > div > a, @@ -196,10 +211,11 @@ button { background : var(--splash); padding : 6px 12px; border-radius : 3px; - opacity : 0.8; + opacity : 0.9; cursor : pointer; text-align : center; border : 0; + font-weight : bold; } @@ -209,7 +225,7 @@ button:hover { } form > div { - margin : 0 0 24px; + margin : 0 0 var(--double-space); } form > div >label { @@ -221,7 +237,7 @@ form > div > input[type="text"] { border : 1px solid var(--twilight); border-radius : 3px; padding : 6px 12px; - background : var(--dust); + background : var(--light-dust); width : 100%; } diff --git a/src/project/templates/base.html b/src/project/templates/base.html index 1e844d5..0e78a21 100644 --- a/src/project/templates/base.html +++ b/src/project/templates/base.html @@ -13,7 +13,7 @@

data.coop membersystem

- Log out + Log out