From 1ab7fd5c0c6c4bfe8e350cf549182c27580d56c5 Mon Sep 17 00:00:00 2001 From: Halfdan Date: Tue, 3 Oct 2023 18:18:22 +0200 Subject: [PATCH] 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 %}