From c7298672380eedfa80ea9ac8f56a0967f5f77d0d Mon Sep 17 00:00:00 2001
From: Dylan Hicks <dylanh333@ucc.asn.au>
Date: Sat, 16 Feb 2019 16:43:55 +0800
Subject: [PATCH] Did a massive cleanup and refactor of shared.css, to make it
more organised and readable, and more consistent with naming. This included
adding dashes to a few class names, and ensuring that the spelling used for
words like "centre" was proper English, not US English. More modifier classes
have also been prefixed with a dash, similar to how command line arguments
are formatted.
Updated files that used some of these renamed CSS classes to use the new class names.
---
src/static/shared.css | 662 +++++++++---------
src/templates/admin/index.html | 4 +-
.../admin/memberdb/membership_approve.html | 2 +-
src/templates/base.html | 2 +-
src/templates/base_form.html | 2 +-
src/templates/payment_form.html | 4 +-
6 files changed, 351 insertions(+), 325 deletions(-)
diff --git a/src/static/shared.css b/src/static/shared.css
index 16e7797..d253a43 100644
--- a/src/static/shared.css
+++ b/src/static/shared.css
@@ -1,19 +1,313 @@
-/* Apply foating card style */
-nav, .form-container {
+/**
+ * Common Styles applied acorss multiple different selectors
+ */
+/* Floating card style: grey background, rounded corners, drop shadow*/
+header > nav,
+.form-container {
background: #303030;
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.5);
}
+
+
+
+/**
+ * Reusable Styles for elements and classes
+ */
* {
- box-sizing: border-box;
+ box-sizing: border-box;
}
+/* General reusable styles */
a {
color: inherit;
}
+fieldset {
+ border: none;
+}
+
+.-text-centre {
+ text-align: center;
+}
+
+/* Float container: make div expand to contain float children */
+.-float-container {
+ overflow: auto;
+ display: inline-block;
+}
+
+/* Buttons */
+.button, input[type=submit], input[type=button] {
+ display: inline-block;
+ height: 36px;
+ transform: translateY(0px);
+ padding: 0 16px;
+
+ border: 1px solid rgba(0,0,0,0.4);
+ border-radius: 4px;
+ box-shadow:
+ 0px -2px 0px 0px rgba(0,0,0,0.4) inset,
+ 0px 1px 3px 0px rgba(0,0,0,0.2),
+ 0px 1px 0px 0px rgba(0,0,0,0.1)
+ ;
+ background: #484848;
+ color: white;
+ cursor: pointer;
+ text-decoration: none;
+ font-size: inherit;
+ white-space: nowrap;
+
+ transition-duration: 50ms;
+ transition-property: height, margin, transform, box-shadow, filter;
+}
+ .button:focus, input[type=submit]:focus, input[type=button]:focus,
+ .button:hover, input[type=submit]:hover, input[type=button]:hover,
+ .button:active, input[type=submit]:active, input[type=button]:active {
+ filter: brightness(1.35);
+ outline: none;
+ }
+
+ .button.-disabled, input[type=submit]:disabled, input[type=button]:disabled {
+ filter: none;
+ text-shadow: 0px 1px 0px rgba(255,255,255,0.5);
+ color: rgba(0, 0, 0, 0.5);
+ opacity: 0.5;
+ cursor: default;
+ }
+
+ .button:active, input[type=submit]:active, input[type=button]:active {
+ height: 33px;
+ margin-bottom: 3px;
+ transform: translateY(3px);
+
+ box-shadow: none;
+ filter: brightness(0.5);
+ outline: none;
+ }
+
+ .button.-default, input[type=submit].-default {
+ margin-left: auto;
+ font-weight: 400;
+ background: #609ab6;
+ }
+
+ /* Hack to get text vertically centred in a.button */
+ .button::before {
+ display: inline-block;
+ height: 100%;
+ vertical-align: middle;
+ content: "";
+ }
+
+/* Text boxes */
+input[type="text"], input[type="email"], input[type="password"], textarea {
+ display: block;
+ position: relative;
+ height: 36px;
+ padding: 4px;
+
+ border: 1px solid rgba(0,0,0,0.4);
+ border-radius: 4px;
+ box-shadow: 0px 2px 1px rgba(0,0,0,0.2) inset;
+ background-color: #484848;
+ color: white;
+
+ transition-property: background-color;
+ transition-duration: 100ms;
+}
+ input[type="text"]:focus,
+ input[type="email"]:focus,
+ input[type="password"]:focus,
+ textarea:active {
+ background-color: #686868;
+ outline: none;
+ }
+
+/* Forms and form components */
+.form-container {
+ position: relative;
+ margin: 20px auto;
+ padding: 10px;
+}
+ .form-header {
+ text-align: center;
+ }
+ .form-header .tips {
+ color: #333;
+ font-weight: 400;
+ border-radius: 10px;
+ background-color: #feb;
+ padding: 10px 10px 7px 10px;
+ margin: 10px 10px 20px 10px;
+ display: inline-block;
+ text-align: center;
+ line-height: 23px;
+ }
+
+ .form-header .tips.error {
+ color: #000;
+ background-color: rgb(255, 145, 0);
+ }
+
+ .form-row,
+ .submit-row {
+ margin: 10px 0px;
+ }
+ .submit-row {
+ display: flex;
+ margin-bottom: 0px;
+ }
+
+ .submit-row *+* {
+ margin-left: 10px;
+ }
+
+ .form-row label {}
+
+ .form-row input[type="text"],
+ .form-row input[type="email"],
+ .form-row input[type="password"],
+ .form-row textarea {
+ width: 100%;
+ }
+
+ .form-row input[type=checkbox],
+ .form-row.readonly .text {
+ display: inline;
+ line-height: 20px;
+ }
+
+ .form-row.readonly .text {
+ padding-left: 10px;
+ color: #444;
+ }
+
+/* Tables */
+table {
+ border-collapse: collapse;
+ border-color: #ccc;
+}
+ td, th {
+ font-size: 13px;
+ line-height: 16px;
+ border-bottom: 1px solid #eee;
+ vertical-align: top;
+ padding: 8px;
+ /*font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;*/
+ }
+
+ th {
+ font-weight: 600;
+ text-align: left;
+ }
+
+ thead th,
+ tfoot td {
+ color: #666;
+ padding: 5px 10px;
+ font-size: 11px;
+ background: #fff;
+ border: none;
+ border-top: 1px solid #eee;
+ border-bottom: 1px solid #eee;
+ }
+
+ tfoot td {
+ border-bottom: none;
+ border-top: 1px solid #eee;
+ }
+
+ thead th.required {
+ color: #000;
+ }
+
+ tr.alt {
+ background: #f6f6f6;
+ }
+
+ .row1 {
+ background: rgba(255, 255, 255, 0.7);
+ }
+
+ .row2 {
+ background: rgba(230, 230, 230, 0.7);
+ }
+
+/* Messages and errors */
+.help {
+ margin: 8px 8px 0 8px;
+}
+ .help a {
+ color: #777;
+ }
+
+ul.error-list {
+ list-style: none;
+ background-color: #a33;
+ color: white;
+ padding: 10px 30px;
+ margin: 30px 0 10px 0;
+ font-weight: bold;
+}
+
+.member-details,
+.membership-details {
+ width: 100%;
+ text-align: left;
+}
+
+ul.message-list {
+ padding: 0;
+ margin: 0;
+}
+ ul.message-list li {
+ display: block;
+ font-weight: 400;
+ padding: 10px 10px 10px 65px;
+ margin: 0 0 10px 0;
+ background: #dfd url(../img/icon-yes.svg) 40px 12px no-repeat;
+ background-size: 16px auto;
+ color: #333;
+ }
+
+ ul.message-list li.warning {
+ background: #ffc url(../img/icon-alert.svg) 40px 14px no-repeat;
+ background-size: 14px auto;
+ }
+
+ ul.message-list li.error {
+ background: #ffefef url(../img/icon-no.svg) 40px 12px no-repeat;
+ background-size: 16px auto;
+ }
+
+.error-note {
+ font-weight: 700;
+ display: block;
+ padding: 10px 12px;
+ margin: 0 0 10px 0;
+ color: #ba2121;
+ border: 1px solid #ba2121;
+ border-radius: 4px;
+ background-color: #fff;
+ background-position: 5px 12px;
+}
+
+.help {
+ color: #999;
+}
+
+
+
+
+/**
+ * Single-element styles
+ */
+/* Html & body */
html {
height: 100%;
+ overflow-x: hidden;
+ overflow-y: scroll;
}
body {
@@ -22,7 +316,8 @@ body {
padding-bottom: 80px; /* allows room for footer */
padding-top: 80px; /* allows room for header */
- background-color: #181818;
+ background-color: rgba(24,24,24,1);
+ background-image: linear-gradient(to bottom, rgba(24,24,24,1) 0%, rgba(24,24,24,0) 75%);
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -31,84 +326,93 @@ body {
margin: 0;
}
+/* Responsive sizing of top-level structural elements */
@media (max-width: 1280px) {
- main, nav, footer {
+ header, main, footer {
width: 100%;
margin: 0px;
}
- nav {
- width: 100%;
+ header > nav {
top: 0px;
}
- nav, .form-container {
+ header > nav, .form-container {
border-radius: 0px;
}
}
@media (min-width: 1280px) {
- main, nav, footer {
+ header, main, footer {
width: 1280px;
margin: 0px auto;
left: 0px; right: 0px;
}
- nav {
+ header > nav {
top: 10px;
}
- nav, .form-container {
+ header > nav, .form-container {
border-radius: 8px;
}
}
-nav {
+/* Header */
+header {
+ display: block;
+ position: fixed;
+ top: 0px;
+ height: 80px;
+ background-image: inherit;
+ z-index: 100;
+}
+
+/* Header navigation */
+header > nav {
display: flex;
- position: fixed;
+ position: relative;
+ height: 60px;
line-height: 60px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
- z-index: 100;
}
- nav, nav ul, nav li, nav li > * {
- height: 60px;
- }
- nav ul, nav li, nav li > * {
+ header > nav ul, header > nav li, header > nav li > * {
position: relative;
+ height: 100%;
}
- nav ul {
+ header > nav ul {
display: flex;
margin: 0px;
padding: 0px;
list-style: none;
flex-shrink: 1;
}
- nav > ul.-left, nav > ul.-right {
+ header > nav > ul.-left, header > nav > ul.-right {
width: 100%; /* this will automatically collapse as appropriate with flex-shrink applied */
flex-grow: 0;
}
- nav > ul.-centre {
+ header > nav > ul.-centre {
flex-grow: 1;
justify-content: center;
}
- nav > ul.-right {
+ header > nav > ul.-right {
flex-grow: 0;
justify-content: flex-end;
}
- nav li {
+ header > nav li {
display: block;
flex-shrink: 0;
position: relative;
margin: 0px 1px;
}
- nav li > * {
+ header > nav li > * {
display: block;
position: relative;
padding: 0px 20px;
@@ -121,36 +425,36 @@ nav {
transition-duration: 100ms;
}
- nav li > :first-child {
+ header > nav li > :first-child {
margin-left: 0px;
}
- nav li > :last-child {
+ header > nav li > :last-child {
margin-right: 0px;
}
- nav li > a:hover, nav li > a:focus {
+ header > nav li > a:hover, header > nav li > a:focus {
color: #fff;
background-color: rgba(255,255,255,0.1);
outline: none;
}
- nav li > a.-selected {
+ header > nav li > a.-selected {
color: #fff;
box-shadow: 0px -2px 0px 0px #fff inset;
}
- nav li > a.logo {
+ header > nav li > a.logo {
display: block;
width: 60px;
padding: 0px;
}
- nav li+li::before,
- nav > ul.-left > li:last-child::after,
- nav > ul.-centre > li:first-child::before,
- nav > ul.-centre > li:last-child::after,
- nav > ul.-right > li:first-child::before {
+ header > nav li+li::before,
+ header > nav > ul.-left > li:last-child::after,
+ header > nav > ul.-centre > li:first-child::before,
+ header > nav > ul.-centre > li:last-child::after,
+ header > nav > ul.-right > li:first-child::before {
display: block;
position: absolute;
top: 0px; bottom: 0px; left: -2px;
@@ -159,13 +463,14 @@ nav {
border-left: 1px solid rgba(0,0,0,0.5);
border-right: 1px solid rgba(255,255,255,0.1);
}
- nav > ul.-left > li:last-child::after,
- nav > ul.-centre > li:last-child::after {
+ header > nav > ul.-left > li:last-child::after,
+ header > nav > ul.-centre > li:last-child::after {
left: auto;
right: -2px;
}
-nav li > a.logo::before {
+/* Header logo */
+header > nav li > a.logo::before {
display: block;
position: absolute;
width: 42px; height: 42px;
@@ -186,7 +491,7 @@ nav li > a.logo::before {
100% {transform: rotate(360deg);}
}
- nav li > a.logo:hover::before {
+ header > nav li > a.logo:hover::before {
animation-name: logo-rotate;
animation-delay: 5s;
animation-duration: 500ms;
@@ -194,6 +499,7 @@ nav li > a.logo::before {
animation-iteration-count: infinite;
}
+/* Footer */
footer {
display: block;
position: absolute;
@@ -224,283 +530,3 @@ footer {
footer > ul > li+li::before {
content: "\2022 ";
}
-
-.form-container {
- position: relative;
- margin: 20px auto;
- padding: 10px;
-}
-
-.text-center, .form-header {
- text-align: center;
-}
-
-.form-header .tips {
- color: #333;
- font-weight: 400;
- border-radius: 10px;
- background-color: #feb;
- padding: 10px 10px 7px 10px;
- margin: 10px 10px 20px 10px;
- display: inline-block;
- text-align: center;
- line-height: 23px;
-}
-
-.form-header .tips.error {
- color: #000;
- background-color: rgb(255, 145, 0);
-}
-
-fieldset {
- border: none;
-}
-
-.form-row, .submit-row {
- margin: 10px 0px;
-}
-
-.submit-row {
- display: flex;
- margin-bottom: 0px;
-}
-
-.submit-row *+* {
- margin-left: 10px;
-}
-
-.form-row label {}
-
-/* style text boxes */
-.form-row input[type="text"],
-.form-row input[type="email"],
-.form-row input[type="password"],
-.form-row textarea {
- width: 100%;
-}
-
-.form-row input[type=checkbox],
-.form-row.readonly .text {
- display: inline;
- line-height: 20px;
-}
-
-.form-row.readonly .text {
- padding-left: 10px;
- color: #444;
-}
-
-.help {
- margin: 8px 8px 0 8px;
-}
-
-.help a {
- color: #777;
-}
-
-ul.errorlist {
- list-style: none;
- background-color: #a33;
- color: white;
- padding: 10px 30px;
- margin: 30px 0 10px 0;
- font-weight: bold;
-}
-
-
-.member-details, .membership-details {
- width: 100%;
- text-align: left;
-}
-
-/* make div expand to contain float children */
-.float-container {
- overflow: auto;
- display: inline-block;
-}
-
-
-
-/* MESSAGES & ERRORS */
-ul.messagelist {
- padding: 0;
- margin: 0;
-}
-
-ul.messagelist li {
- display: block;
- font-weight: 400;
- padding: 10px 10px 10px 65px;
- margin: 0 0 10px 0;
- background: #dfd url(../img/icon-yes.svg) 40px 12px no-repeat;
- background-size: 16px auto;
- color: #333;
-}
-
-ul.messagelist li.warning {
- background: #ffc url(../img/icon-alert.svg) 40px 14px no-repeat;
- background-size: 14px auto;
-}
-
-ul.messagelist li.error {
- background: #ffefef url(../img/icon-no.svg) 40px 12px no-repeat;
- background-size: 16px auto;
-}
-
-.errornote {
- font-weight: 700;
- display: block;
- padding: 10px 12px;
- margin: 0 0 10px 0;
- color: #ba2121;
- border: 1px solid #ba2121;
- border-radius: 4px;
- background-color: #fff;
- background-position: 5px 12px;
-}
-
-/* FORM BUTTONS */
-.button, input[type=submit], input[type=button] {
- display: inline-block;
- height: 36px;
- transform: translateY(0px);
- padding: 0 16px;
-
- border: 1px solid rgba(0,0,0,0.4);
- border-radius: 4px;
- box-shadow:
- 0px -2px 0px 0px rgba(0,0,0,0.4) inset,
- 0px 1px 3px 0px rgba(0,0,0,0.2),
- 0px 1px 0px 0px rgba(0,0,0,0.1)
- ;
- background: #484848;
- color: white;
- cursor: pointer;
- text-decoration: none;
- font-size: inherit;
- white-space: nowrap;
-
- transition-duration: 50ms;
- transition-property: height, margin, transform, box-shadow, filter;
-}
-
-/* Hack to get text vertically centred in a.button */
-.button::before {
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- content: "";
-}
-
-.button:focus, input[type=submit]:focus, input[type=button]:focus,
-.button:hover, input[type=submit]:hover, input[type=button]:hover,
-.button:active, input[type=submit]:active, input[type=button]:active {
- filter: brightness(1.35);
- outline: none;
-}
-
-.button.-disabled, input[type=submit]:disabled, input[type=button]:disabled {
- filter: none;
- text-shadow: 0px 1px 0px rgba(255,255,255,0.5);
- color: rgba(0, 0, 0, 0.5);
- opacity: 0.5;
- cursor: default;
-}
-
-.button:active, input[type=submit]:active, input[type=button]:active {
- height: 33px;
- margin-bottom: 3px;
- transform: translateY(3px);
-
- box-shadow: none;
- filter: brightness(0.5);
- outline: none;
-}
-
-.button.-default, input[type=submit].-default {
- margin-left: auto;
- font-weight: 400;
- background: #609ab6;
-}
-
-.help, p.help, form p.help, div.help, form div.help, div.help li {
- color: #999;
-}
-
-/* TEXT BOXES */
-input[type="text"], input[type="email"], input[type="password"], textarea {
- display: block;
- position: relative;
- height: 36px;
- padding: 4px;
-
- border: 1px solid rgba(0,0,0,0.4);
- border-radius: 4px;
- box-shadow: 0px 2px 1px rgba(0,0,0,0.2) inset;
- background-color: #484848;
- color: white;
-
- transition-property: background-color;
- transition-duration: 100ms;
-}
-
-input[type="text"]:focus,
-input[type="email"]:focus,
-input[type="password"]:focus,
-textarea:active {
- background-color: #686868;
- outline: none;
-}
-
-/* TABLES */
-
-table {
- border-collapse: collapse;
- border-color: #ccc;
-}
-
-td, th {
- font-size: 13px;
- line-height: 16px;
- border-bottom: 1px solid #eee;
- vertical-align: top;
- padding: 8px;
- /*font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;*/
-}
-
-th {
- font-weight: 600;
- text-align: left;
-}
-
-thead th,
-tfoot td {
- color: #666;
- padding: 5px 10px;
- font-size: 11px;
- background: #fff;
- border: none;
- border-top: 1px solid #eee;
- border-bottom: 1px solid #eee;
-}
-
-tfoot td {
- border-bottom: none;
- border-top: 1px solid #eee;
-}
-
-thead th.required {
- color: #000;
-}
-
-tr.alt {
- background: #f6f6f6;
-}
-
-.row1 {
- background: rgba(255, 255, 255, 0.7);
-}
-
-.row2 {
- background: rgba(230, 230, 230, 0.7);
-}
diff --git a/src/templates/admin/index.html b/src/templates/admin/index.html
index 385d095..70a573c 100644
--- a/src/templates/admin/index.html
+++ b/src/templates/admin/index.html
@@ -100,7 +100,7 @@
<p>
When new members <a href="{% url 'memberdb:register' %}">register</a> or existing members
<a href="{% url 'memberdb:renew' %}">renew</a>, a pending membership record is created for that member.
-
+
</p>
</div>
<div class="module" id="recent-actions-module">
@@ -111,7 +111,7 @@
{% if not admin_log %}
<p>{% trans 'None available' %}</p>
{% else %}
- <ul class="actionlist">
+ <ul class="action-list">
{% for entry in admin_log %}
<li class="{% if entry.is_addition %}addlink{% endif %}{% if entry.is_change %}changelink{% endif %}{% if entry.is_deletion %}deletelink{% endif %}">
{% if entry.is_deletion or not entry.get_admin_url %}
diff --git a/src/templates/admin/memberdb/membership_approve.html b/src/templates/admin/memberdb/membership_approve.html
index c27848a..39acf8c 100644
--- a/src/templates/admin/memberdb/membership_approve.html
+++ b/src/templates/admin/memberdb/membership_approve.html
@@ -14,7 +14,7 @@
{% csrf_token %}
{% if form.non_field_errors|length > 0 %}
- <p class="errornote">
+ <p class="error-note">
Please correct the errors below.
</p>
{{ form.non_field_errors }}
diff --git a/src/templates/base.html b/src/templates/base.html
index 81264f3..c81d164 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -54,7 +54,7 @@
{% block breadcrumbs %}{% endblock %}
{% block messages %}{% if messages %}
- <ul class="messagelist">{% for message in messages %}
+ <ul class="message-list">{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>
{% endfor %}</ul>
{% endif %}{% endblock messages %}
diff --git a/src/templates/base_form.html b/src/templates/base_form.html
index c6475a1..7031aed 100644
--- a/src/templates/base_form.html
+++ b/src/templates/base_form.html
@@ -17,7 +17,7 @@
{% csrf_token %}
{% if form.non_field_errors|length > 0 %}
- <p class="errornote">
+ <p class="error-note">
Please correct the errors below.
</p>
{{ form.non_field_errors }}
diff --git a/src/templates/payment_form.html b/src/templates/payment_form.html
index bd2f08b..068bf31 100644
--- a/src/templates/payment_form.html
+++ b/src/templates/payment_form.html
@@ -21,7 +21,7 @@ var amount = {{ payment.amount }};
{% block content_title %}<h1>Checkout</h1>{% endblock %}
{% block content %}
-<div class="form-container text-center">
+<div class="form-container -text-centre">
<div class="form-header">
<span class="tips {% if payment.is_paid %}error{% endif %}">{% block tips %}
{% if payment.is_paid %}
@@ -38,7 +38,7 @@ var amount = {{ payment.amount }};
<span class="tips error">Please enable javascript to use the payment form.</span>
</noscript>
</div>
- <div class="float-container">
+ <div class="-float-container">
<div class="payment-info">
<div class="form-row readonly">
<label for="id_desc">Item:</label>
--
GitLab