feature/css (#29)

Reviewed-on: data.coop/membersystem#29
Co-authored-by: Halfdan Mouritzen <halfdan@robothangarskib.dk>
Co-committed-by: Halfdan Mouritzen <halfdan@robothangarskib.dk>
This commit is contained in:
Halfdan Mouritzen 2024-02-29 20:02:39 +00:00 committed by valberg
parent bdc2d8717c
commit 4112069cac
10 changed files with 703 additions and 2392 deletions

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,56 @@
html.dark body {
--splash: #5b47e0;
background: var(--dark-dark);
color: var(--medium-dust)
}
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark footer,
html.dark nav ol li a {
color: var(--medium-dust);
}
html.dark nav ol li a:not(.current):hover {
border-color: var(--medium-dust);
}
html.dark header,
html.dark main aside,
html.dark nav {
background: #1d1d1d;
}
html.dark nav {
border: none;
}
html.dark hr {
border-color: var(--twilight);
}
html.dark main aside div,
html.dark article div.content-view {
background: var(--dark-twilight);
}
html.dark article table tbody {
background: var(--dark-twilight);
}
html.dark article table tbody tr:nth-child(2n+1) {
background: var(--dark);
}
html.dark article table tbody tr:nth-child(2n+1) td {
border-top: 1px solid var(--dark-dark);
border-bottom: 1px solid var(--dark-dark);
}
html.dark article table tbody tr:last-child td {
border-bottom: var(--half-space) solid var(--twilight);
}

View file

@ -1,348 +1,573 @@
/* Reset */ /* Reset */
*, *::before, *::after { *,
*::before,
*::after {
box-sizing: border-box; box-sizing: border-box;
} }
* { * {
margin: 0; margin: 0;
} }
body { body {
line-height: 1.5; line-height: 1.5;
} }
img, picture, video, canvas, svg {
img,
picture,
video,
canvas,
svg {
display: block; display: block;
max-width: 100%; max-width: 100%;
} }
input, button, textarea, select {
input,
button,
textarea,
select {
font: inherit; font: inherit;
} }
p, h1, h2, h3, h4, h5, h6 {
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
#root, #__next {
#root,
#__next {
isolation: isolate; isolation: isolate;
} }
/* Variables */ /* Variables */
:root { :root {
/* Colors */ /* Colors */
--light : #fff; --light: #ffffff;
--light-dust : #f6f6f6; --light-dust: #fefef9;
--dust : #f1f1f1; --dust: #f4f1ef;
--medium-dust : #dadada; --medium-dust: #dadada;
--dark-dust : #bfbfbf; --dark-dust: #bfbfbf;
--fade : #878787; --fade: #878787;
--twilight : #4a4a4a; --twilight: #4a4a4a;
--dark : #2a2a2a; --dark-twilight: #2f2f2f;
--custard : #f0dcac; --dark: #2a2a2a;
--water : #a8f3f4; --dark-dark: #121212;
--splash : #4b3aba; --light-custard: #eee7d5;
--custard: #f0dcac;
--dark-custard: #d4c7a9;
--water: #a8f3f4;
--splash: #4b3aba;
/* Sizes */ /* Sizes */
--space : 12px; --space: 12px;
--double-space : calc(var(--space) * 2); --double-space: calc(var(--space) * 2);
--half-space : calc(var(--space) / 2); --half-space: calc(var(--space) / 2);
--quarter-space : calc(var(--space) / 4); --quarter-space: calc(var(--space) / 4);
--outer-space : var(--double-space); --outer-space: var(--double-space);
} }
@media (min-width: 1380px) { @media (min-width: 1380px) {
:root { :root {
--outer-space : 15%; --outer-space: 15%;
} }
} }
html, body { html,
height : 100%; body {
height: 100%;
font-size: 1.05em;
} }
h1, h2, h3, h4, h5, h6 { h1,
font-weight : 600; h2,
color : var(--twilight); h3,
h4,
h5,
h6 {
font-weight: 600;
color: var(--twilight);
} }
a { a {
font-weight : 500; <<<<<<< HEAD font-weight: 500;
color : var(--splash); color: var(--splash);
text-decoration : none; text-decoration: none;
cursor: pointer;
}
hr {
margin: var(--double-space) 0;
height: 0;
border: 0;
border-bottom: 1px solid var(--dark-custard);
=======font-weight: 500;
color: var(--splash);
text-decoration: none;
>>>>>>>bdc2d8717cbcab1795b1b2dc4f08f83242e4a4ca
} }
body { body {
margin : 0; margin: 0;
padding : 0; padding: 0;
background : var(--custard); background: var(--custard);
font-family : Inter; font-family: Inter;
font-weight : 400; font-weight: 400;
line-height : 1.6; line-height: 1.6;
color : var(--dark); color: var(--dark);
} }
header { header {
display : flex; display: flex;
padding : var(--double-space) var(--outer-space); padding: var(--double-space) var(--outer-space);
background : var(--light); background: var(--light);
justify-content : space-between; justify-content: space-between;
align-items : center; align-items: center;
} }
header > h1 { header>h1 {
font-size : 1.44em; font-size: 1.44em;
} }
header > a.logout { #switch-icon {
padding : 6px 12px; width: 30px;
border-radius : 6px; height: 30px;
background : var(--twilight); display: inline-block;
text-decoration : none; vertical-align: middle;
color : var(--dust); margin: 0 var(--space);
top: -2px;
position: relative;
} }
header > a.logout:hover { #switch-icon #layer1 path {
background : var(--splash); fill: var(--twilight);
color : var(--light); }
header>div>a#logout {
padding: 6px 12px;
border-radius: 6px;
background: var(--twilight);
text-decoration: none;
color: var(--dust);
transition: background 0.2s;
}
header>div>a#logout:hover {
background: var(--splash);
color: var(--light);
} }
aside { aside {
padding : var(--double-space) var(--outer-space); padding: 0 var(--outer-space) var(--double-space) var(--outer-space);
background : var(--light); background: var(--light);
} }
aside > div { aside>div {
background : var(--dust); background: var(--dust);
padding : var(--double-space); padding: var(--double-space);
border-radius : var(--quarter-space); border-radius: var(--quarter-space);
overflow : hidden; overflow: hidden;
} }
aside > div > h2 { aside>div>h2 {
font-size : 1.22em; font-size: 1.22em;
margin : 0 0 6px 0; margin: 0 0 6px 0;
} }
aside > div > figure { aside>div>figure {
width : 100px; width: 100px;
height : 100px; height: 100px;
border : 1px solid var(--dark-dust); border: 1px solid var(--dark-dust);
float : left; float: left;
margin-right : var(--double-space); margin-right: var(--double-space);
} }
aside > div > dl { aside>div>dl {
overflow : hidden; overflow: hidden;
} }
aside > div > dl > dt { aside>div>dl>dt {
float : left; float: left;
clear : left; clear: left;
margin : 0 var(--double-space) 0 0; margin: 0 var(--double-space) 0 0;
width : 180px; width: 180px;
font-weight : 600; font-weight: 600;
color : var(--twilight); color: var(--twilight);
} }
nav { nav {
display : block; display: block;
border-bottom : 1px solid var(--dark-dust); border-bottom: 1px solid var(--dark-custard);
background : var(--light); background: var(--light);
} }
nav ol { nav ol {
margin: 0 calc(var(--outer-space)); margin: 0 calc(var(--outer-space));
padding : 0; padding: 0;
list-style-type : none; list-style-type: none;
overflow : hidden; overflow: hidden;
} }
nav ol li { nav ol li {
margin : 0; margin: 0;
padding : 0; padding: 0;
float : left; float: left;
} }
nav > ol > li > a { nav>ol>li>a {
display : block; display: block;
padding : var(--half-space) var(--half-space) var(--quarter-space); padding: var(--half-space) var(--half-space) var(--quarter-space);
margin : 0 var(--space); margin: 0 var(--space);
border-bottom : var(--half-space) solid transparent; border-bottom: var(--half-space) solid transparent;
text-decoration : none; text-decoration: none;
color : var(--dark); color: var(--dark);
cursor : pointer; cursor: pointer;
font-weight : 500; font-weight: 500;
letter-spacing : 0.04em; letter-spacing: 0.04em;
} }
nav > ol > li:first-child > a { nav>ol>li:first-child>a {
margin-left : 0; margin-left: 0;
} }
nav ol li a:hover { nav ol li a:hover {
border-color : rgba(0,0,0,0.6); border-color: rgba(0, 0, 0, 0.6);
} }
nav ol li a.current { nav ol li a.current {
font-weight : bold; font-weight: bold;
border-color : var(--splash); border-color: var(--splash);
color : var(--splash); color: var(--splash);
} }
article { article {
padding : var(--double-space) var(--outer-space); padding: var(--double-space) var(--outer-space);
} }
article > div { article>div.content-view {
background : var(--dust); background: var(--dust);
padding : var(--double-space); padding: var(--double-space);
margin-bottom : var(--double-space); margin-bottom: var(--space);
} }
div.content-view > h2 { div.content-view>h2 {
margin : 0 0 var(--double-space) 0; margin: 0 0 var(--space) 0;
} }
div.services { div.services {
display : flex; display: flex;
justify-content : space-between; justify-content: space-between;
gap : var(--double-space); gap: var(--double-space);
flex-wrap: wrap; flex-wrap: wrap;
} }
div.services > div, div.services>div,
div.infobox { div.infobox {
background : var(--light); <<<<<<< HEAD background: var(--light);
padding : var(--double-space); padding: var(--double-space);
border-radius : 6px; border-radius: 6px;
flex : 240px; flex: 240px;
max-width : 420px; max-width: 420px;
display : flex; =======background: var(--light);
flex-flow : column; padding: var(--double-space);
justify-content : space-between; border-radius: 6px;
} flex: 240px;
max-width: 420px;
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;
}
article table {
width : 100%;
border-spacing : 0;
margin : var(--space) 0;
}
article table thead th {
text-align : left;
}
article table tbody tr:nth-child(odd) {
background : var(--medium-dust);
}
article table thead th,
article table tbody td {
padding : var(--half-space);
}
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; display: flex;
flex-flow: column; flex-flow: column;
justify-content: space-between; justify-content: space-between;
} }
#loginbox > div.signup { div.infobox button {
background : var(--water); 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;
}
article table {
width: 100%;
border-spacing: 0;
margin: var(--space) 0;
}
article table thead th {
text-align: left;
}
article table tbody tr:nth-child(odd) {
background: var(--medium-dust);
}
article table thead th,
article table tbody td {
padding: var(--half-space);
}
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);
>>>>>>>bdc2d8717cbcab1795b1b2dc4f08f83242e4a4ca 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: var(--quarter-space);
opacity: 0.85;
cursor: pointer;
text-align: center;
border: 0;
font-weight: 600;
text-decoration: none;
transition: opacity 0.15s;
}
button.small {
font-size: 0.78em;
padding: var(--half-space) var(--space);
}
div.services>div>a:hover,
a.button:hover,
button:hover {
opacity: 1.0;
}
button:disabled {
opacity: 0.6;
background: var(--twilight);
cursor: default;
}
article table {
width: 100%;
border-spacing: 0;
margin: var(--space) 0;
}
article table thead th {
background: var(--twilight);
color: var(--medium-dust);
}
article table thead th a {
color: var(--light);
}
article table thead th:first-child {
border-radius: var(--half-space) 0 0 0;
}
article table thead th:last-child {
border-radius: 0 var(--half-space) 0 0;
}
article table tbody {
background: var(--light-dust);
}
article table tbody tr:nth-child(odd) {
background: var(--light-custard);
}
article table tbody tr:nth-child(odd) td {
border-top: 1px solid var(--dark-custard);
border-bottom: 1px solid var(--dark-custard);
}
article table tbody tr:last-child td {
border-bottom: var(--half-space) solid var(--twilight);
}
article table thead th,
article table tbody td {
padding: var(--space);
text-align: left;
}
article table#user_email_table tbody tr td:first-child {
text-align: center;
}
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"],
input[type="email"] {
border: 2px solid var(--twilight);
border-radius: 6px;
padding: 8px;
background: var(--light-dust);
width: 100%;
color: var(--dark);
}
form fieldset {
border: 0;
padding: 0;
margin: 0;
}
form div.buttonHolder button {
display: inline-block;
}
#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; display: flex;
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
} }
#loginbox > div:first-child { #loginbox>div:first-child {
border-radius : var(--half-space) 0 0 var(--half-space); border-radius: var(--half-space) 0 0 var(--half-space);
} }
#loginbox > div:last-child { #loginbox>div:last-child {
border-radius : 0 var(--half-space) var(--half-space) 0; border-radius: 0 var(--half-space) var(--half-space) 0;
} }
#loginbox > div:last-child > * { #loginbox>div:last-child>* {
flex : 1; flex: 1;
} }
#loginbox div.new_here { #loginbox div.new_here {
margin-top : var(--double-space); margin-top: var(--double-space);
} }
#loginbox div.new_here h2 { #loginbox div.new_here h2 {
@ -350,35 +575,73 @@ form > div > input[type="password"] {
} }
#loginbox button { #loginbox button {
width : 100%; width: 100%;
} }
#loginbox img { #loginbox img {
padding : 0 var(--double-space); padding: 0 var(--double-space);
} }
footer { footer {
margin : var(--space) var(--outer-space); margin: var(--space) var(--outer-space);
padding : var(--space); padding: var(--space);
border-radius : var(--quarter-space); border-radius: var(--quarter-space);
background : var(--dark); background: var(--dark);
color : var(--dust); color: var(--dust);
font-size : 0.78em; font-size: 0.78em;
opacity : 0.8; opacity: 0.8;
} }
span.time_remaining { span.time_remaining {
color : var(--fade); color: var(--fade);
} }
.pagination { .pagination {
display : flex; display: flex;
justify-content : center; justify-content: center;
list-style : none; list-style: none;
padding : 0; padding: var(--half-space) 0;
margin : 0; margin: 0;
} }
.pagination > li { .pagination>li {
margin : 0 6px; margin: 0 var(--half-space);
}
.pagination>li:first-child {
margin-right: var(--double-space);
}
.pagination>li:last-child {
margin-left: var(--double-space);
}
.pagination .page-item {
border: 1px solid var(--fade);
padding: var(--quarter-space) var(--half-space);
border-radius: var(--half-space);
background: var(--light-dust);
font-size: 0.78em;
}
.pagination .page-link {
padding: var(--half-space);
color: var(--twilight);
}
.pagination .page-item.active {
background: var(--twilight);
}
.pagination .page-item.active .page-link {
color: var(--light-dust);
font-weight: bold;
}
.pagination .page-item.disabled {
opacity: 0.6;
}
.pagination .page-item.disabled .page-link {
cursor: default;
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -2,115 +2,95 @@
{% load i18n %} {% load i18n %}
{% block head_title %}{% trans "E-mail Addresses" %}{% endblock %} {% block head_title %}{% trans "Email Addresses" %}{% endblock %}
{% block content %} {% block content %}
<div class="content-view">
<h2>{% trans "Email Addresses" %}</h2>
<p>{% trans 'The following email addresses are associated with your account:' %}</p>
<div class="row"> <hr />
<div class="col-md-12">
<div class="panel panel-default"> {% if user.emailaddress_set.all %}
<div class="panel-heading"> <form action="{% url 'account_email' %}" class="email_list" method="post">
<h4>{% trans "E-mail Addresses" %}</h4> {% csrf_token %}
</div> <fieldset class="blockLabels">
<div class="panel-body"> <div class="buttonHolder">
<button class="small" name="action_add" style="float:right">Add Email …</button>
<button class="small" disabled type="submit" id="action_primary" name="action_primary">Make Primary</button>
<button class="small" type="submit" name="action_send">Re-send Verification</button>
<button class="small" type="submit" name="action_remove">Remove</button>
</div>
<table class="table" id="user_email_table">
<thead>
<tr>
<th></th>
<th>{% trans "Address" %}</th>
<th>{% trans "Status" %}</th>
<th>{% trans "Primary" %}</th>
</tr>
</thead>
<tbody>
{% for emailaddress in user.emailaddress_set.all %}
<tr>
<label for="email_radio_{{ forloop.counter }}"
class="{% if emailaddress.primary %}primary_email{% endif %}">
<td>
<input
id="email_radio_{{ forloop.counter }}"
type="radio"
name="email"
value="{{ emailaddress.email }}"
{% if emailaddress.primary or user.emailaddress_set.count == 1 %}
checked="checked"
{% endif %}
class="{% if emailaddress.primary %}primary_email{% endif %}"
/>
</td>
<td>
{{ emailaddress.email }}
</td>
<td>
{% if emailaddress.verified %}
<span class="label label-success">{% trans "Verified" %}</span>
{% else %}
<span class="label label-danger">{% trans "Unverified" %}</span>
{% endif %}
</td>
<td>
{% if emailaddress.primary %}
<span class="label label-primary">{% trans "Primary" %}</span>
{% endif %}
</td>
</label>
</tr>
{% endfor %}
{% if user.emailaddress_set.all %} </tbody>
<p>{% trans 'The following e-mail addresses are associated with your account:' %}</p> </table>
<form action="{% url 'account_email' %}" class="email_list" </fieldset>
method="post"> </form>
{% csrf_token %} {% else %}
<fieldset class="blockLabels"> <p>
<strong>{% trans 'Warning:' %}</strong>
<table class="table"> {% trans "You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc." %}
<thead> </p>
<tr> {% endif %}
<th></th> <!--
<th>{% trans "Address" %}</th> <hr />
<th>{% trans "Status" %}</th>
<th>{% trans "Primary" %}</th>
</tr>
</thead>
<tbody>
{% for emailaddress in user.emailaddress_set.all %}
<tr class="ctrlHolder">
<label for="email_radio_{{ forloop.counter }}"
class="{% if emailaddress.primary %}primary_email{% endif %}">
<td>
<input
id="email_radio_{{ forloop.counter }}"
type="radio"
name="email"
value="{{ emailaddress.email }}"
{% if emailaddress.primary or user.emailaddress_set.count == 1 %}
checked="checked"
{% endif %}
/>
</td>
<td>
{{ emailaddress.email }}
</td>
<td>
{% if emailaddress.verified %}
<span class="label label-success">Verified</span>
{% else %}
<span class="label label-danger">Unverified</span>
{% endif %}
</td>
<td>
{% if emailaddress.primary %}
<span class="label label-primary">Primary</span>{% endif %}
</td>
</label>
</tr>
{% endfor %}
</tbody>
</table>
<div class="buttonHolder">
<button class="btn btn-success" type="submit"
name="action_primary">Make Primary
</button>
<button class="btn btn-primary" type="submit"
name="action_send">Re-send Verification
</button>
<button class="btn btn-danger" type="submit"
name="action_remove">Remove
</button>
</div>
</fieldset>
</form>
{% else %}
<p>
<strong>{% trans 'Warning:' %}</strong>
{% trans "You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc." %}
</p>
{% endif %}
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4>{% trans "Add E-mail" %}</h4>
</div>
<div class="panel-body">
<form method="post" action="{% url 'account_email' %}"
class="add_email">
{% csrf_token %}
{{ form.as_p }}
<button name="action_add" class="btn btn-success" type="submit">
{% trans "Add E-mail" %}
</button>
</form>
</div>
</div>
<h3>{% trans "Add E-mail" %}</h3>
<div class="panel-body">
<form method="post" action="{% url 'account_email' %}"
class="add_email">
{% csrf_token %}
{{ form.as_p }}
<button name="action_add" class="btn btn-success" type="submit">
{% trans "Add E-mail" %}
</button>
</form>
</div> </div>
-->
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
@ -124,6 +104,15 @@
} }
}); });
} }
let radio_actions = document.getElementsByName('email');
if (radio_actions.length) {
for (radio of radio_actions) {
radio.addEventListener("change", function (e) {
document.getElementById('action_primary').disabled = e.target.classList.contains('primary_email')
});
}
}
})(); })();
</script> </script>

View file

@ -13,20 +13,20 @@
</div> </div>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
<h2>Log in</h2> <h2>Login</h2>
<form method="post" action=""> <form method="post" action="">
{% csrf_token %} {% csrf_token %}
<div> <div>
<label for="id_username" <label for="id_username"
class="visually-hidden"> class="visually-hidden">
{% trans "E-mail" %} {% trans "Email" %}
</label> </label>
<input type="text" <input type="text"
id="id_username" id="id_username"
name="login" name="login"
class="form-control mb-lg-2" class="form-control mb-lg-2"
placeholder="{% trans "E-mail" %}" placeholder="{% trans "Email" %}"
required required
autofocus> autofocus>
</div> </div>
@ -42,7 +42,7 @@
required> required>
</div> </div>
<div> <div>
<button type="submit">{% trans "Sign in" %}</button> <button type="submit">{% trans "Login" %}</button>
</div> </div>
</form> </form>
<div> <div>
@ -55,7 +55,7 @@
<div class="signup"> <div class="signup">
<img src="https://data.coop/static/img/logo_da.svg" alt="data.coop logo"> <img src="https://data.coop/static/img/logo_da.svg" alt="data.coop logo">
<div class="new_here"> <div class="new_here">
<h2> Are you new here? </h2> <h2>{% trans "Are you new here?" %}</h2>
<a class="button" href="{% url "account_signup" %}">{% trans "Become a member" %}</a> <a class="button" href="{% url "account_signup" %}">{% trans "Become a member" %}</a>
</div> </div>
</div> </div>

View file

@ -10,11 +10,39 @@
<title>{% block head_title %}{% endblock %} {{ site.name }}</title> <title>{% block head_title %}{% endblock %} {{ site.name }}</title>
<link rel="stylesheet" href="{% static "fonts/inter.css" %}"> <link rel="stylesheet" href="{% static "fonts/inter.css" %}">
<link rel="stylesheet" href="{% static "css/style.css" %}"> <link rel="stylesheet" href="{% static "css/style.css" %}">
<link rel="stylesheet" href="{% static "css/dark-style.css" %}">
<script>
const savedTheme = localStorage.getItem('theme');
if (savedTheme === "dark" || (savedTheme == null && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.querySelector('html').classList.add('dark');
}
</script>
</head> </head>
<body> <body>
<header> <header>
<h1> data.coop membersystem </h1> <h1> data.coop membersystem </h1>
<a class="logout" href="{% url "account_logout" %}">Log out</a> <div>
<a id="theme-switcher" title="Switch theme">
<svg id="switch-icon"
width="20.00033mm"
height="20.000334mm"
viewBox="0 0 20.00033 20.000334"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g id="layer1">
<path id="path1"
style="fill-opacity:1;stroke:none;stroke-width:0.697782;stroke-linecap:round"
d="M 9.999906,20.000334 A 10,10 0 0 0 20.000329,9.999911 10,10 0 0 0 9.999906,0 10,10 0 0 0 0,9.999911 10,10 0 0 0 9.999906,20.000334 Z m 0,-2.00039 V 1.99988 a 8,8 0 0 1 8.000023,8.000031 8,8 0 0 1 -8.000023,8.000033 z" />
</g>
</svg>
</a>
<a id="logout" href="{% url "account_logout" %}">Log out</a>
</div>
</header> </header>
<main> <main>
<aside> <aside>
@ -80,5 +108,14 @@
<footer> <footer>
data.coop membersystem version 0.0.1 data.coop membersystem version 0.0.1
</footer> </footer>
<script>
const themeSwitcher = document.getElementById('theme-switcher');
themeSwitcher.addEventListener('click', function() {
themeSwitcher.classList.toggle('active')
let isDark = document.querySelector('html').classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
</script>
</body> </body>
</html> </html>