diff --git a/src/static/login.css b/src/static/login.css
index f8d64044b88604b1ad95008df3e20c4d48da67a0..1ea2dacd7283b1ddb20292ee3580fb476f3fe8ff 100644
--- a/src/static/login.css
+++ b/src/static/login.css
@@ -1,78 +1,3 @@
-/* LOGIN FORM stolen from Django admin */
-
-body.login {
- background: #f8f8f8;
-}
-
-.login #header {
- height: auto;
- padding: 5px 16px;
-}
-
-.login #header h1 {
- font-size: 18px;
-}
-
-.login #header h1 a {
- color: #fff;
-}
-
-.login #content {
- padding: 20px 20px 0;
-}
-
-.login #container {
- background: #fff;
- border: 1px solid #eaeaea;
- border-radius: 4px;
- overflow: hidden;
- width: 28em;
- min-width: 300px;
- margin: 100px auto;
-}
-
-.login #content-main {
- width: 100%;
-}
-
-.login .form-row {
- padding: 4px 0;
- float: left;
- width: 100%;
- border-bottom: none;
-}
-
-.login .form-row label {
- padding-right: 0.5em;
- line-height: 2em;
- font-size: 1em;
- clear: both;
- color: #333;
-}
-
-.login .form-row #id_username, .login .form-row #id_password {
- clear: both;
- padding: 8px;
- width: 100%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.login span.help {
- font-size: 10px;
- display: block;
-}
-
-.login .submit-row {
- clear: both;
- padding: 1em 0 0 9.4em;
- margin: 0;
- border: none;
- background: none;
- text-align: left;
-}
-
-.login .password-reset-link {
- text-align: center;
-}
+#login-form-container {
+ width: 350px;
+}
diff --git a/src/static/memberdb.css b/src/static/memberdb.css
deleted file mode 100644
index 004be23a6dae2550e8c7fd41ee4fd8d666860070..0000000000000000000000000000000000000000
--- a/src/static/memberdb.css
+++ /dev/null
@@ -1,137 +0,0 @@
-html {
- height: 100%;
-}
-
-#content {
- width: 80%;
- margin: 0 10%;
-}
-
-.centered {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-
-.form-container {
- margin: 20px 0;
-}
-
-.text-center, .form-header {
- text-align: center;
-}
-
-.form-header .tips {
- color: #333;
- font-weight: 400;
- font-size: 17px;
- 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 {
- margin: 10px 10px 20px 10px;
- overflow: auto;
-}
-
-.submit-row {
- margin: 10px;
- overflow: auto; /* stop parent div from collapsing when contents are floated */
-}
-
-.form-row label {
- font-weight: bold;
- display: inline;
-}
-
-/* style text boxes */
-.form-row input[type="text"],
-.form-row input[type="email"],
-.form-row input[type="password"] {
- display: block;
- padding: 4px;
- font-size: 14px;
- line-height: 20px;
- width: 100%;
-}
-
-.form-row input[type=checkbox],
-.form-row.readonly .text {
- display: inline;
- font-size: 14px;
- line-height: 20px;
-}
-
-.form-row.readonly .text {
- font-size: 16px;
- 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;
-}
-
-nav {
- background-color: #333;
- overflow: auto; /* make navbar expand in case the tab buttons flow to a second row */
-}
-
-.navtab {
- float: left;
- text-decoration: none;
- color: white;
- text-align: center;
- font-size: 22px;
- font-variant-caps: all-petite-caps;
- font-weight: 400;
- line-height: 26px;
- padding: 17px 20px; /* line-height and padding adds up to minimum 60px element height */
- border-style: solid;
- border-color: #555;
- border-width: 0 1px 0 1px;
- margin-right: -1px;
- background-color: #3c3c3c;
-}
-
-.navtab:hover, .navtab.active {
- color: #eee;
- background-color: black;
-}
-
-.navtab:last-child {
- border-right: 1.5px solid #555;
-}
-
-.member-details, .membership-details {
- width: 100%;
- text-align: left;
-}
diff --git a/src/static/shared.css b/src/static/shared.css
index dc9e6ceb24e1fcbb0c03e83f3fa8938e690ae982..7ded656bd42e901312923226139443497ec35fb5 100644
--- a/src/static/shared.css
+++ b/src/static/shared.css
@@ -1,16 +1,167 @@
-/* memberdb: css used by both main site & admin pages
+/* memberdb: css used by both main site & admin pages
* some of this is just copied from the admin css */
+/* BEGIN MEMBERDB.CSS */
+
+html {
+ height: 100%;
+}
+
+#content {
+ width: 80%;
+ margin: 0 10%;
+}
+
+.centered {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.form-container {
+ position: relative;
+ margin: 20px auto;
+ padding: 10px;
+
+ border-radius: 8px;
+ background: #303030;
+ box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.5);
+}
+
+.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;
+}
+
+nav {
+ background-color: #333;
+ overflow: auto; /* make navbar expand in case the tab buttons flow to a second row */
+}
+
+.navtab {
+ float: left;
+ text-decoration: none;
+ color: white;
+ text-align: center;
+ font-size: 22px;
+ font-variant-caps: all-petite-caps;
+ font-weight: 400;
+ line-height: 26px;
+ padding: 17px 20px; /* line-height and padding adds up to minimum 60px element height */
+ border-style: solid;
+ border-color: #555;
+ border-width: 0 1px 0 1px;
+ margin-right: -1px;
+ background-color: #3c3c3c;
+}
+
+.navtab:hover, .navtab.active {
+ color: #eee;
+ background-color: black;
+}
+
+.navtab:last-child {
+ border-right: 1.5px solid #555;
+}
+
+.member-details, .membership-details {
+ width: 100%;
+ text-align: left;
+}
+
+/* END MEMBERDB.CSS */
+
+
+
+
+
+
* {
box-sizing: border-box;
}
body {
- min-height: 100%;
position: relative;
- background-color: #f8f8f8;
+ min-height: 100%;
+
+ background-color: #181818;
+ color: #fff;
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
+
margin: 0;
}
@@ -82,7 +233,6 @@ ul.messagelist {
ul.messagelist li {
display: block;
font-weight: 400;
- font-size: 13px;
padding: 10px 10px 10px 65px;
margin: 0 0 10px 0;
background: #dfd url(../img/icon-yes.svg) 40px 12px no-repeat;
@@ -101,7 +251,6 @@ ul.messagelist li.error {
}
.errornote {
- font-size: 14px;
font-weight: 700;
display: block;
padding: 10px 12px;
@@ -114,55 +263,97 @@ ul.messagelist li.error {
}
/* FORM BUTTONS */
+.button, input[type=submit], input[type=button] {
+ display: inline-block;
+ height: 36px;
+ transform: translateY(0px);
+ padding: 0 16px;
-.button, input[type=submit], input[type=button], .submit-row input, a.button {
- background: #79aec8;
- padding: 10px 15px;
- border: none;
+ border: 1px solid rgba(0,0,0,0.4);
border-radius: 4px;
- color: #fff;
+ 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;
+
+ transition-duration: 50ms;
+ transition-property: height, margin, transform, box-shadow, filter;
}
-a.button {
- padding: 4px 5px;
+/* Hack to get text vertically centred in a.button */
+.button::before {
display: inline-block;
+ height: 100%;
+ vertical-align: middle;
+ content: "";
}
-.button:active, input[type=submit]:active, input[type=button]:active,
.button:focus, input[type=submit]:focus, input[type=button]:focus,
-.button:hover, input[type=submit]:hover, input[type=button]:hover {
- background: #609ab6;
+.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] {
- opacity: 0.4;
+.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.default, input[type=submit].default, .submit-row input.default {
- float: right;
- border: none;
- font-weight: 400;
- background: #417690;
-}
+.button:active, input[type=submit]:active, input[type=button]:active {
+ height: 33px;
+ margin-bottom: 3px;
+ transform: translateY(3px);
-.button.default:active, input[type=submit].default:active,
-.button.default:focus, input[type=submit].default:focus,
-.button.default:hover, input[type=submit].default:hover {
- background: #205067;
+ box-shadow: none;
+ filter: brightness(0.5);
+ outline: none;
}
-.button[disabled].default,
-input[type=submit][disabled].default,
-input[type=button][disabled].default {
- opacity: 0.4;
+.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 {
- font-size: 12px;
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 {
@@ -215,4 +406,3 @@ tr.alt {
.row2 {
background: rgba(230, 230, 230, 0.7);
}
-
diff --git a/src/templates/admin/memberdb/membership_approve.html b/src/templates/admin/memberdb/membership_approve.html
index ade99ddfd3f495dfa943b50ada8726989af0e3a0..c27848a002565a3ec4fd7e010a169d5ca316f05a 100644
--- a/src/templates/admin/memberdb/membership_approve.html
+++ b/src/templates/admin/memberdb/membership_approve.html
@@ -35,7 +35,7 @@
{% endfor %}
</fieldset>
<div class="submit-row">
- <input type="submit" class="default" value="Save & Approve">
+ <input type="submit" class="-default" value="Save & Approve">
</div>
</form>
</div>
diff --git a/src/templates/base.html b/src/templates/base.html
index e152ae96e194ed63a3408ef0a6671bcb832e0049..60c4565b1d81b12977227d0ed3d721af29b4a6ee 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -5,7 +5,6 @@
<!-- MemberDB base template -->
<title>{% block title %}UCC MemberDB{% endblock %}</title>
<link rel="shortcut icon" type="image/png" href="{% static 'ucc-logo.png' %}"/>
- <link rel="stylesheet" type="text/css" href="{% static "memberdb.css" %}">
{% block prestyle %}{% endblock %}
<link rel="stylesheet" type="text/css" href="{% static "shared.css" %}">
{% block extrahead %}{% endblock %}
@@ -27,7 +26,7 @@
<span></span>
</a>
{% endblock %}
-
+
{# fancy automatic navbar thing from https://stackoverflow.com/questions/39639264 #}
{% with url_name=request.resolver_match.url_name %}
{% if request.member %}
@@ -54,7 +53,7 @@
{% endblock %}
{% block header %}{% endblock %}
-
+
</div>
{% endblock %}<!-- END Header -->
{% block breadcrumbs %}{% endblock %}
@@ -91,7 +90,7 @@
</div>
</div>
{% endblock %}
- <!-- END Footer -->
+ <!-- END Footer -->
</div>
<!-- END Container -->
diff --git a/src/templates/base_form.html b/src/templates/base_form.html
index a979ae5f92ea3add22d12650b19a3d8173adfe06..c6475a178f5af9a19d4054346d56a9bbbb816c83 100644
--- a/src/templates/base_form.html
+++ b/src/templates/base_form.html
@@ -39,7 +39,7 @@
{% endfor %}
{% block postform %}{% endblock %}
<div class="submit-row">
- <input type="submit" class="default" value="{% block action_text %}Register{% endblock %}">
+ <input type="submit" class="-default" value="{% block action_text %}Register{% endblock %}">
</div>
</form>
{% endblock %}
diff --git a/src/templates/login.html b/src/templates/login.html
index d07731e38723a15b215f38d0b15942ce66066c15..04db59916c636681eaabc43f85bdc65609d79b68 100644
--- a/src/templates/login.html
+++ b/src/templates/login.html
@@ -4,63 +4,57 @@
{% block title %}UCC Member Login{% endblock %}
{% block extrahead %}
-{{ block.super }}
-<link rel="stylesheet" type="text/css" href="{% static "login.css" %}">
-{{ form.media }}
+ {{ block.super }}
+ <link rel="stylesheet" type="text/css" href="{% static "login.css" %}">
+ {{ form.media }}
{% endblock %}
-{% block content_title %}<h1>Login to MemberDB</h1>{% endblock %}
+{% block content_title %}{% endblock %}
{% block content %}
-
-<div class="form-container">
-
-<div class="form-header">
-{% if form.errors and not form.non_field_errors %}
-<p class="errornote">
-{% if form.errors.items|length == 1 %}Please correct the error below.{% else %}Please correct the errors below.{% endif %}
-</p>
-{% endif %}
-
-{% if form.non_field_errors %}
-{% for error in form.non_field_errors %}
-<p class="errornote">
- {{ error }}
-</p>
-{% endfor %}
-{% endif %}
-
-
-<p class="tips">
-{% if user.is_authenticated %}
- You are already logged in as {{ user.username }}.
- Would you like to login to a different account?
-{% else %}
- <b>Please enter your UCC username and password below.</b> <br><br>
- {% if not request.member %}
- If you do not have a UCC account yet, please apply for a membership by going to the <a href="{% url 'memberdb:register' %}">registration page</a>.
- {% else %}
- It appears you have already registered. If you have not yet received your UCC login details, please <a href="https://www.ucc.asn.au/aboutucc/contact.ucc">contact us</a>.
- {% endif %}
-{% endif %}
-</p>
-</div>
-
-<form action="{% url 'memberdb:login' %}" method="post" id="login-form">
- {% csrf_token %}
- <div class="form-row">
- {{ form.username.errors }}
- {{ form.username.label_tag }} {{ form.username }}
- </div>
- <div class="form-row">
- {{ form.password.errors }}
- {{ form.password.label_tag }} {{ form.password }}
- <input type="hidden" name="next" value="{{ next }}">
+ <div class="form-container" id="login-form-container">
+ <h1>UCCPortal</h1>
+ <div class="form-header">
+ {% if form.errors and not form.non_field_errors %}
+ <p class="errornote">
+ {% if form.errors.items|length == 1 %}Please correct the error below.{% else %}Please correct the errors below.{% endif %}
+ </p>
+ {% endif %}
+
+ {% if form.non_field_errors %}{% for error in form.non_field_errors %}
+ <p class="errornote">{{ error }}</p>
+ {% endfor %}{% endif %}
+
+ <p class="tips">
+ {% if user.is_authenticated %}
+ You are already logged in as {{ user.username }}.
+ Would you like to login to a different account?
+ {% else %}
+ <b>Please enter your UCC username and password below.</b> <br><br>
+ {% if not request.member %}
+ If you do not have a UCC account yet, please apply for a membership by going to the <a href="{% url 'memberdb:register' %}">registration page</a>.
+ {% else %}
+ It appears you have already registered. If you have not yet received your UCC login details, please <a href="https://www.ucc.asn.au/aboutucc/contact.ucc">contact us</a>.
+ {% endif %}
+ {% endif %}
+ </p>
+ </div>
+
+ <form action="{% url 'memberdb:login' %}" method="post" id="login-form">
+ {% csrf_token %}
+ <div class="form-row">
+ {{ form.username.errors }}
+ {{ form.username.label_tag }} {{ form.username }}
+ </div>
+ <div class="form-row">
+ {{ form.password.errors }}
+ {{ form.password.label_tag }} {{ form.password }}
+ <input type="hidden" name="next" value="{{ next }}">
+ </div>
+ <div class="submit-row">
+ <a href="/register" class="button">Register</a>
+ <input type="submit" value="Login" class="-default"/>
+ </div>
+ </form>
</div>
- <div class="submit-row">
- <label> </label><input type="submit" value="Log in">
- </div>
-</form>
-</div>
-
{% endblock %}