ui-overhaul (#24)

Co-authored-by: Halfdan <halm@itu.dk>
Co-authored-by: Halfdan Mouritzen <halfdan@robothangarskib.dk>
Reviewed-on: data.coop/membersystem#24
This commit is contained in:
valberg 2024-01-13 20:07:36 +00:00
parent 2ed5df5241
commit 33f5e7a285
54 changed files with 832 additions and 330 deletions

1
.gitignore vendored
View file

@ -7,3 +7,4 @@ db.sqlite3
*.mo
.env
venv/
.venv/

View file

@ -7,6 +7,7 @@
{% block content %}
<div class="content-view">
<h1>
{{ member.username }}
</h1>
@ -39,5 +40,6 @@
{% else %}
{% trans "No memberships" %}
{% endif %}
</div>
{% endblock %}

View file

@ -7,6 +7,8 @@
{% block content %}
<div class="content-view">
<h2>Membership settings</h2>
{% if not current_membership %}
<p>{% trans "You do not have an active membership!" %}</p>
@ -24,4 +26,38 @@
<p>{% trans "Period" %}: {{ current_period.lower|date:"SHORT_DATE_FORMAT" }} to {{ current_period.upper|date:"SHORT_DATE_FORMAT"|default:next_general_assembly }}</p>
<p>{% trans "Type" %}: {{ current_membership.membership_type }}</p>
{% endif %}
{% endblock %}
</div>
<div class="content-view">
<h2>Profile settings</h2>
<form>
<div>
<label for="username">
Username
</label>
<input id="username" type="text" value="{{user}}" />
</div>
<div>
<label for="first_name">
First name
</label>
<input id="first_name" type="text" value="{{user.first_name}}" />
</div>
<div>
<label for="last_name">
Last name
</label>
<input id="last_name" type="text" value="{{user.last_name}}" />
</div>
<button>Update Profile</button>
</form>
</div>
<div class="view-list">
<h2>Email settings</h2>
<button>Update Email</button>
</div>
{% endblock %}

View file

@ -70,6 +70,7 @@ def members_admin_detail(request, member_id):
context = {
"member": member,
"subscription_periods": subscription_periods,
"base_path": "admin-members",
}
return render(

View file

@ -0,0 +1,362 @@
/* 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;
}
/* Variables */
:root {
/* Colors */
--light : #fff;
--light-dust : #f6f6f6;
--dust : #f1f1f1;
--dark-dust : #bfbfbf;
--fade : #878787;
--twilight : #4a4a4a;
--dark : #2a2a2a;
--custard : #f0dcac;
--water : #a8f3f4;
--splash : #4b3aba;
/* Sizes */
--space : 12px;
--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%;
}
}
html, body {
height : 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight : 600;
color : var(--twilight);
}
a {
font-weight : 500;
}
body {
margin : 0;
padding : 0;
background : var(--custard);
font-family : Inter;
font-weight : 400;
line-height : 1.6;
color : var(--dark);
}
header {
display : flex;
padding : var(--double-space) var(--outer-space);
background : var(--light);
justify-content : space-between;
align-items : center;
}
header > h1 {
font-size : 1.44em;
}
header > a.logout {
padding : 6px 12px;
border-radius : 6px;
background : var(--twilight);
text-decoration : none;
color : var(--dust);
}
header > a.logout:hover {
background : var(--splash);
color : var(--light);
}
aside {
padding : var(--double-space) var(--outer-space);
background : var(--light);
}
aside > div {
background : var(--dust);
padding : var(--double-space);
border-radius : var(--quarter-space);
overflow : hidden;
}
aside > div > h2 {
font-size : 1.22em;
margin : 0 0 6px 0;
}
aside > div > figure {
width : 100px;
height : 100px;
border : 1px solid var(--dark-dust);
float : left;
margin-right : var(--double-space);
}
aside > div > dl {
overflow : hidden;
}
aside > div > dl > dt {
float : left;
clear : left;
margin : 0 var(--double-space) 0 0;
width : 180px;
font-weight : 600;
color : var(--twilight);
}
nav {
display : block;
border-bottom : 1px solid var(--dark-dust);
background : var(--light);
}
nav ol {
margin: 0 calc(var(--outer-space));
padding : 0;
list-style-type : none;
overflow : hidden;
}
nav ol li {
margin : 0;
padding : 0;
float : left;
}
nav > ol > li > a {
display : block;
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;
font-weight : 500;
letter-spacing : 0.04em;
}
nav > ol > li:first-child > a {
margin-left : 0;
}
nav ol li a:hover {
border-color : rgba(0,0,0,0.6);
}
nav ol li a.current {
font-weight : bold;
border-color : var(--splash);
color : var(--splash);
}
article {
padding : var(--double-space) var(--outer-space);
}
article > div {
background : var(--dust);
padding : var(--double-space);
margin-bottom : var(--double-space);
}
div.content-view > h2 {
margin : 0 0 var(--double-space) 0;
}
div.services {
display : flex;
justify-content : space-between;
gap : var(--double-space);
flex-wrap: wrap;
}
div.services > div,
div.infobox {
background : var(--light);
padding : var(--double-space);
border-radius : 6px;
flex : 240px;
max-width : 420px;
display : flex;
flex-flow : column;
justify-content : space-between;
}
div.infobox button {
margin-top : var(--double-space);
}
div.services > div > div.description {
margin-bottom : var(--double-space);
}
div.services > div > div.description > p {
margin-top : var(--half-space);
}
div.services > div > a,
a.button,
button {
display : block;
color : var(--light);
background : var(--splash);
padding : var(--space) var(--double-space);
border-radius : 3px;
opacity : 0.9;
cursor : pointer;
text-align : center;
border : 0;
font-weight : 600;
letter-spacing : 0.03em;
text-decoration : none;
}
div.services > div > a:hover,
a.button:hover,
button:hover {
opacity : 1.0;
}
form > div {
margin : 0 0 var(--double-space);
}
form > div >label {
display : block;
margin : 0 0 6px;
}
form > div > input[type="text"],
form > div > input[type="password"] {
border : 2px solid var(--twilight);
border-radius : 6px;
padding : 8px;
background : var(--light-dust);
width : 100%;
}
#login {
height : 100%;
display : flex;
align-items : center;
justify-content : center;
}
#loginbox {
border-radius : var(--space);
border : 6px solid white;
width : 800px;
height : 500px;
display : flex;
flex-flow : row;
}
#loginbox > div {
padding : var(--double-space);
flex : 1;
}
#loginbox label {
color : var(--twilight);
}
#loginbox > div.login {
background : var(--light-dust);
display: flex;
flex-flow: column;
justify-content: space-between;
}
#loginbox > div.signup {
background : var(--water);
display: flex;
flex-flow: column;
align-items: center;
}
#loginbox > div:first-child {
border-radius : var(--half-space) 0 0 var(--half-space);
}
#loginbox > div:last-child {
border-radius : 0 var(--half-space) var(--half-space) 0;
}
#loginbox > div:last-child > * {
flex : 1;
}
#loginbox div.new_here {
margin-top : var(--double-space);
}
#loginbox div.new_here h2 {
margin: var(--double-space) 0;
}
#loginbox button {
width : 100%;
}
#loginbox img {
padding : 0 var(--double-space);
}
footer {
margin : var(--space) var(--outer-space);
padding : var(--space);
border-radius : var(--quarter-space);
background : var(--dark);
color : var(--dust);
font-size : 0.78em;
opacity : 0.8;
}
span.time_remaining {
color : var(--fade);
}
.pagination {
display : flex;
justify-content : center;
list-style : none;
padding : 0;
margin : 0;
}
.pagination > li {
margin : 0 6px;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -0,0 +1,200 @@
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("Inter-Thin.woff2?v=3.19") format("woff2"),
url("Inter-Thin.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"),
url("Inter-ThinItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"),
url("Inter-ExtraLight.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
url("Inter-ExtraLightItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("Inter-Light.woff2?v=3.19") format("woff2"),
url("Inter-Light.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"),
url("Inter-LightItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("Inter-Regular.woff2?v=3.19") format("woff2"),
url("Inter-Regular.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("Inter-Italic.woff2?v=3.19") format("woff2"),
url("Inter-Italic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("Inter-Medium.woff2?v=3.19") format("woff2"),
url("Inter-Medium.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"),
url("Inter-MediumItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"),
url("Inter-SemiBold.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
url("Inter-SemiBoldItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("Inter-Bold.woff2?v=3.19") format("woff2"),
url("Inter-Bold.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"),
url("Inter-BoldItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"),
url("Inter-ExtraBold.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("Inter-Black.woff2?v=3.19") format("woff2"),
url("Inter-Black.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"),
url("Inter-BlackItalic.woff?v=3.19") format("woff");
}
/* -------------------------------------------------------
Variable font.
Usage:
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
}
*/
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: 'Regular';
src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
}
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: italic;
font-named-instance: 'Italic';
src: url("Inter-italic.var.woff2?v=3.19") format("woff2");
}
/* --------------------------------------------------------------------------
[EXPERIMENTAL] Multi-axis, single variable font.
Slant axis is not yet widely supported (as of February 2019) and thus this
multi-axis single variable font is opt-in rather than the default.
When using this, you will probably need to set font-variation-settings
explicitly, e.g.
* { font-variation-settings: "slnt" 0deg }
.italic { font-variation-settings: "slnt" 10deg }
*/
@font-face {
font-family: 'Inter var experimental';
font-weight: 100 900;
font-display: swap;
font-style: oblique 0deg 10deg;
src: url("Inter.var.woff2?v=3.19") format("woff2");
}

View file

@ -4,6 +4,8 @@
{% block non_login_content %}
<div id="loginbox">
<div class="login">
{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
<div class="alert alert-danger" role="alert">
@ -11,10 +13,11 @@
</div>
{% endfor %}
{% endif %}
<h2>Log in</h2>
<form method="post" action="">
{% csrf_token %}
<div>
<label for="id_username"
class="visually-hidden">
{% trans "E-mail" %}
@ -26,7 +29,8 @@
placeholder="{% trans "E-mail" %}"
required
autofocus>
</div>
<div>
<label for="id_password" class="visually-hidden">
{% trans "Password" %}
</label>
@ -36,23 +40,25 @@
class="form-control mb-lg-2"
placeholder="{% trans "Password" %}"
required>
<button class="w-100 mb-lg-2 btn btn-lg btn-primary"
type="submit">{% trans "Sign in" %}</button>
</div>
<div>
<button type="submit">{% trans "Sign in" %}</button>
</div>
</form>
<div>
<a href="{% url "account_reset_password" %}"
class="w-100 btn btn-lg btn-outline-info">
{% trans "Forgot password?" %}
</a>
<div class="hr-text">
<span>{% trans "Or"|upper %}</span>
</div>
</div>
<div class="signup">
<img src="https://data.coop/static/img/logo_da.svg" alt="data.coop logo">
<div class="new_here">
<h2> Are you new here? </h2>
<a class="button" href="{% url "account_signup" %}">{% trans "Become a member" %}</a>
</div>
</div>
</div>
<a class="w-100 btn btn-lg btn-outline-success"
type="submit"
href="{% url "account_signup" %}">
{% trans "Become a member" %}
</a>
{% endblock %}

View file

@ -5,17 +5,18 @@
{% block head_title %}{% trans "Sign Out" %}{% endblock %}
{% block content %}
<h1>{% trans "Sign Out" %}</h1>
<div class="content-view">
<h2>{% trans "Sign Out" %}</h2>
<p>{% trans 'Are you sure you want to sign out?' %}</p>
<form method="post" action="{% url 'account_logout' %}">
{% csrf_token %}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
{% endif %}
<button type="submit">{% trans 'Sign Out' %}</button>
{% csrf_token %}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
{% endif %}
<button type="submit">{% trans 'Sign Out' %}</button>
</form>
</div>
{% endblock %}

View file

@ -7,76 +7,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Login {{ site.name }}</title>
<link href="{% static "/css/bootstrap.min.css" %}" rel="stylesheet"
crossorigin="anonymous">
<link href="{% static "/css/bootstrap-icons.css" %}" rel="stylesheet"
crossorigin="anonymous">
<style>
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #a8f3f4;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.hr-text {
width: 100%;
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 20px 0 20px;
}
.hr-text span {
background: #a8f3f4;
padding: 0 10px;
}
</style>
<link rel="stylesheet" href="{% static "/fonts/inter.css" %}">
<link rel="stylesheet" href="{% static "/css/style.css" %}">
</head>
<body class="text-center">
<main class="form-signin">
<img class="mb-4" src="https://data.coop/static/img/logo_da.svg" alt=""
width="260" height="160">
<body>
<main id="login">
{% block non_login_content %}
{% endblock %}
</main>
</main>
</body>
</html>

View file

@ -3,211 +3,82 @@
{% load static %}
<!doctype html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>{% block head_title %}{% endblock %} {{ site.name }}</title>
<link rel="stylesheet" href="{% static "fonts/inter.css" %}">
<link rel="stylesheet" href="{% static "css/style.css" %}">
</head>
<body>
<header>
<h1> data.coop membersystem </h1>
<a class="logout" href="{% url "account_logout" %}">Log out</a>
</header>
<main>
<aside>
<div>
<figure></figure>
<h2>{{ user }}</h2>
<link href="{% static "/css/bootstrap.min.css" %}" rel="stylesheet"
crossorigin="anonymous">
{% if current_membership %}
<dl>
<dt>Membership</dt>
<dd>
Active
</dd>
<link href="{% static "/css/bootstrap-icons.css" %}" rel="stylesheet"
crossorigin="anonymous">
<dt>Period</dt>
<dd>
Until {{ current_period.upper }} <span class="time_remaining">({{ current_period.upper|timeuntil }})</span>
</dd>
<style>
body {
font-size: .875rem;
}
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
@media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: #727272;
}
.sidebar .nav-link.active {
color: #007bff;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
/*
* Navbar
*/
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
.navbar .navbar-toggler {
top: .25rem;
right: 1rem;
}
.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
}
.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}
.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
} </style>
<script src="{% static "js/bootstrap.bundle.min.js" %}"
crossorigin="anonymous"></script>
</head>
<body>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">{{ site.name }}</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#sidebarMenu"
aria-controls="sidebarMenu" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="{% url "account_logout" %}">
<i class="bi bi-person-circle"></i>
Sign out</a>
</li>
</ul>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu"
class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link {% active_path "index" "active" %}"
href="{% url "index" %}">
{% trans "Dashboard" %}
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>{% trans "Profile" %}</span>
</h6>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">
{% trans "Details" %}
</a>
</li>
<li class="nav-item">
<a class="nav-link {% active_path "account_email" "active" %}"
aria-current="page" href="{% url "account_email" %}">
{% trans "Emails" %}
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>{% trans "Membership" %}</span>
</h6>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link {% active_path "membership-overview" "active" %}"
aria-current="page" href="{% url "membership-overview" %}">
{% trans "Overview" %}
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>{% trans "Services" %}</span>
</h6>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link {% active_path "services-overview" "active" %}"
href="{% url "services-overview" %}">
{% trans "Overview" %}
</a>
</li>
</ul>
{% if perms.membership.administrate_memberships %}
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>{% trans "Admin" %}</span>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item {% active_path "admin-members" "active" %}">
<a class="nav-link" href="{% url "admin-members" %}">
<span data-feather="file-text"></span>
{% trans "Members" %}
</a>
</li>
</ul>
<dt>Membership type</dt>
<dd>Normal member</dd>
</dl>
{% else %}
Your membership status will be displayed here in the future.
{% endif %}
</div>
</nav>
</aside>
<nav>
<ol>
<li>
<a href="/" class="{% active_path "index" "current" %}">
Dashboard
</a>
</li>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 p-4">
{% block content %}
{% endblock %}
{% comment %}
<li>
<a href="/services" class="{% active_path "services" "current" %}">
Services
</a>
</li>
{% endcomment %}
<li>
<a href="{% url "account_email" %}" class="{% active_path "account_email" "current" %}">
Email
</a>
</li>
{% if perms.membership.administrate_memberships %}
<li>
<a href="{% url "admin-members" %}" class="{% active_path "admin-members" "current" %}">
Admin
</a>
</li>
{% endif %}
</ol>
</nav>
<article>
{% block content %}{% endblock %}
</article>
</main>
</div>
</div>
</body>
<footer>
data.coop membersystem version 0.0.1
</footer>
</body>
</html>

View file

@ -3,3 +3,26 @@
{% block head_title %}
{% trans "Home" %}
{% endblock %}
{% block content %}
<div class="content-view">
<h2>Welcome {{ user }}!</h2>
<p>
This is the new member area.
</p>
<p>
It is very much under construction.
</p>
{% comment %}
<hr>
<br>
<div class="infobox">
<p>
To get started we need you to verify your email!
</p>
<button>Verify email</button>
</div>
{% endcomment %}
</div>
{% endblock %}

View file

@ -1,10 +1,62 @@
{% extends "base.html" %}
{% block content %}
<p>
Services and signup to these will be
</p>
<p>
This is yet to be implemented.
</p>
<div class="content-view">
Coming soon!
</div>
{% comment %}
<div class="content-view">
<h2>Services you subscribe to</h2>
<div class="services">
<div>
<div class="description">
<h3>Passit</h3>
<p>Passit is a service that blabla</p>
<a href="#">Read more &hellip;</a>
</div>
<a>Unsubscribe</a>
</div>
</div>
</div>
<div class="content-view">
<h2>Available services</h2>
<div class="services">
<div>
<div class="description">
<h3>Forgejo</h3>
<p>Forgejo is a service that blabla</p>
<a href="#">Read more &hellip;</a>
</div>
<a>Subscribe</a>
</div>
<div>
<div class="description">
<h3>Mastodon</h3>
<p>Mastodon is a service where you can write things to people around the world.</p>
<a href="#">Read more &hellip;</a>
</div>
<a>Subscribe</a>
</div>
<div>
<div class="description">
<h3>Matrix</h3>
<p>Matrix is a service that blabla</p>
<a href="#">Read more &hellip;</a>
</div>
<a>Subscribe</a>
</div>
<div>
<div class="description">
<h3>NextCloud</h3>
<p>NextCloud is a service that blabla</p>
<a href="#">Read more &hellip;</a>
</div>
<a>Subscribe</a>
</div>
</div>
</div>
{% endcomment %}
{% endblock %}

View file

@ -13,7 +13,7 @@ from membership.views import membership_overview
urlpatterns = [
path("", login_required(index), name="index"),
path("services/", login_required(services_overview), name="services-overview"),
path("services/", login_required(services_overview), name="services"),
path("membership/", membership_overview, name="membership-overview"),
path("admin/members/", members_admin, name="admin-members"),
path(

View file

@ -7,6 +7,8 @@
{% block content %}
<div class="content-view">
<h1>
{{ entity_name_plural|capfirst }} <small class="text-muted">{{ total_count }}</small>
</h1>
@ -48,7 +50,6 @@
</table>
{% if is_paginated %}
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
{% if not page.has_previous %}
@ -101,8 +102,9 @@
{% endif %}
</ul>
</nav>
{% endif %}
</div>
{% endblock %}

View file

@ -5,9 +5,17 @@ register = template.Library()
@register.simple_tag(takes_context=True)
def active_path(context, path_name, class_name):
def active_path(context, path_name, class_name) -> str | None:
"""Return the given class name if the current path matches the given path name."""
path = reverse(path_name)
request_path = context.get("request").path
if path == request_path or ("basepath" in context and context["basepath"] == path):
# Check if the current path matches the given path name.
is_path = path == request_path
# Check if the current path is a sub-path of the given path name.
is_base_path = "base_path" in context and reverse(context["base_path"]) == path
if is_path or is_base_path:
return class_name