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,39 +1,65 @@
/* 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-twilight: #2f2f2f;
--dark: #2a2a2a; --dark: #2a2a2a;
--dark-dark: #121212;
--light-custard: #eee7d5;
--custard: #f0dcac; --custard: #f0dcac;
--dark-custard: #d4c7a9;
--water: #a8f3f4; --water: #a8f3f4;
--splash: #4b3aba; --splash: #4b3aba;
@ -51,19 +77,38 @@ p, h1, h2, h3, h4, h5, h6 {
} }
} }
html, body { html,
body {
height: 100%; height: 100%;
font-size: 1.05em;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600; font-weight: 600;
color: var(--twilight); 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 {
@ -88,21 +133,36 @@ header > h1 {
font-size: 1.44em; font-size: 1.44em;
} }
header > a.logout { #switch-icon {
width: 30px;
height: 30px;
display: inline-block;
vertical-align: middle;
margin: 0 var(--space);
top: -2px;
position: relative;
}
#switch-icon #layer1 path {
fill: var(--twilight);
}
header>div>a#logout {
padding: 6px 12px; padding: 6px 12px;
border-radius: 6px; border-radius: 6px;
background: var(--twilight); background: var(--twilight);
text-decoration: none; text-decoration: none;
color: var(--dust); color: var(--dust);
transition: background 0.2s;
} }
header > a.logout:hover { header>div>a#logout:hover {
background: var(--splash); background: var(--splash);
color: var(--light); 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);
} }
@ -141,7 +201,7 @@ aside > div > dl > dt {
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);
} }
@ -188,14 +248,14 @@ 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 {
@ -207,7 +267,12 @@ div.services {
div.services>div, div.services>div,
div.infobox { div.infobox {
background : var(--light); <<<<<<< HEAD background: var(--light);
padding: var(--double-space);
border-radius: 6px;
flex: 240px;
max-width: 420px;
=======background: var(--light);
padding: var(--double-space); padding: var(--double-space);
border-radius: 6px; border-radius: 6px;
flex: 240px; flex: 240px;
@ -315,6 +380,166 @@ form > div > input[type="password"] {
color: var(--twilight); 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 { #loginbox>div.login {
background: var(--light-dust); background: var(--light-dust);
display: flex; display: flex;
@ -375,10 +600,48 @@ span.time_remaining {
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,29 +2,26 @@
{% 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">
<div class="panel-heading">
<h4>{% trans "E-mail Addresses" %}</h4>
</div>
<div class="panel-body">
{% if user.emailaddress_set.all %} {% if user.emailaddress_set.all %}
<p>{% trans 'The following e-mail addresses are associated with your account:' %}</p> <form action="{% url 'account_email' %}" class="email_list" method="post">
<form action="{% url 'account_email' %}" class="email_list"
method="post">
{% csrf_token %} {% csrf_token %}
<fieldset class="blockLabels"> <fieldset class="blockLabels">
<div class="buttonHolder">
<table class="table"> <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> <thead>
<tr> <tr>
<th></th> <th></th>
@ -34,9 +31,8 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for emailaddress in user.emailaddress_set.all %} {% for emailaddress in user.emailaddress_set.all %}
<tr class="ctrlHolder"> <tr>
<label for="email_radio_{{ forloop.counter }}" <label for="email_radio_{{ forloop.counter }}"
class="{% if emailaddress.primary %}primary_email{% endif %}"> class="{% if emailaddress.primary %}primary_email{% endif %}">
<td> <td>
@ -48,6 +44,7 @@
{% if emailaddress.primary or user.emailaddress_set.count == 1 %} {% if emailaddress.primary or user.emailaddress_set.count == 1 %}
checked="checked" checked="checked"
{% endif %} {% endif %}
class="{% if emailaddress.primary %}primary_email{% endif %}"
/> />
</td> </td>
<td> <td>
@ -55,14 +52,15 @@
</td> </td>
<td> <td>
{% if emailaddress.verified %} {% if emailaddress.verified %}
<span class="label label-success">Verified</span> <span class="label label-success">{% trans "Verified" %}</span>
{% else %} {% else %}
<span class="label label-danger">Unverified</span> <span class="label label-danger">{% trans "Unverified" %}</span>
{% endif %} {% endif %}
</td> </td>
<td> <td>
{% if emailaddress.primary %} {% if emailaddress.primary %}
<span class="label label-primary">Primary</span>{% endif %} <span class="label label-primary">{% trans "Primary" %}</span>
{% endif %}
</td> </td>
</label> </label>
</tr> </tr>
@ -70,19 +68,6 @@
</tbody> </tbody>
</table> </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> </fieldset>
</form> </form>
{% else %} {% else %}
@ -91,13 +76,10 @@
{% 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." %} {% 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> </p>
{% endif %} {% endif %}
</div> <!--
</div> <hr />
<div class="panel panel-default"> <h3>{% trans "Add E-mail" %}</h3>
<div class="panel-heading">
<h4>{% trans "Add E-mail" %}</h4>
</div>
<div class="panel-body"> <div class="panel-body">
<form method="post" action="{% url 'account_email' %}" <form method="post" action="{% url 'account_email' %}"
class="add_email"> class="add_email">
@ -108,9 +90,7 @@
</button> </button>
</form> </form>
</div> </div>
</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

@ -20,13 +20,13 @@
<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>