diff --git a/src/static/admin_custom.css b/src/static/admin_custom.css index 629d6c09b024c7598d1fecd17bd3941a52af0a9b..5d0d0d5177797cf057044e5c8dbee470e4189479 100644 --- a/src/static/admin_custom.css +++ b/src/static/admin_custom.css @@ -2,16 +2,6 @@ display: inline-block; } -.logo span { - transform: rotate(45deg); -} - -.logo span:hover { - animation: spin 0.5s linear infinite; -} - -@keyframes spin { 100% { transform: rotate(360deg); } } - #branding h1 { float: left; } @@ -21,16 +11,11 @@ margin-right: -440px; } -#header { - padding: 0; - height: auto; -} - #admin-header { padding: 0px 40px; } -#admin-header, #container { +#admin-header, body { overflow: auto; } diff --git a/src/static/shared.css b/src/static/shared.css index 7ded656bd42e901312923226139443497ec35fb5..16e7797ac715cf6d1d97fd175b02d90277f79992 100644 --- a/src/static/shared.css +++ b/src/static/shared.css @@ -1,70 +1,272 @@ -/* memberdb: css used by both main site & admin pages - * some of this is just copied from the admin css */ +/* Apply foating card style */ +nav, .form-container { + background: #303030; + box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.5); +} + +* { + box-sizing: border-box; +} -/* BEGIN MEMBERDB.CSS */ +a { + color: inherit; +} html { - height: 100%; + height: 100%; +} + +body { + position: relative; + min-height: 100%; + padding-bottom: 80px; /* allows room for footer */ + padding-top: 80px; /* allows room for header */ + + background-color: #181818; + color: #fff; + + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: normal; + + margin: 0; } -#content { - width: 80%; - margin: 0 10%; +@media (max-width: 1280px) { + main, nav, footer { + width: 100%; + margin: 0px; + } + + nav { + width: 100%; + top: 0px; + } + + nav, .form-container { + border-radius: 0px; + } } -.centered { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); +@media (min-width: 1280px) { + main, nav, footer { + width: 1280px; + margin: 0px auto; + left: 0px; right: 0px; + } + + nav { + top: 10px; + } + + nav, .form-container { + border-radius: 8px; + } } +nav { + display: flex; + position: fixed; + 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 > * { + position: relative; + } + + nav ul { + display: flex; + margin: 0px; + padding: 0px; + list-style: none; + flex-shrink: 1; + } + nav > ul.-left, nav > ul.-right { + width: 100%; /* this will automatically collapse as appropriate with flex-shrink applied */ + flex-grow: 0; + } + + nav > ul.-centre { + flex-grow: 1; + justify-content: center; + } + + nav > ul.-right { + flex-grow: 0; + justify-content: flex-end; + } + + nav li { + display: block; + flex-shrink: 0; + position: relative; + margin: 0px 1px; + } + nav li > * { + display: block; + position: relative; + padding: 0px 20px; + + font-size: 20px; + font-variant-caps: all-petite-caps; + text-decoration: none; + + transition-property: background, color; + transition-duration: 100ms; + } + + nav li > :first-child { + margin-left: 0px; + } + + nav li > :last-child { + margin-right: 0px; + } + + nav li > a:hover, nav li > a:focus { + color: #fff; + background-color: rgba(255,255,255,0.1); + outline: none; + } + + nav li > a.-selected { + color: #fff; + box-shadow: 0px -2px 0px 0px #fff inset; + } + + 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 { + display: block; + position: absolute; + top: 0px; bottom: 0px; left: -2px; + content: ""; + + 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 { + left: auto; + right: -2px; + } + +nav li > a.logo::before { + display: block; + position: absolute; + width: 42px; height: 42px; + top: 0px; right: 0px; bottom: 0px; left: 0px; + margin: auto; + content: ""; + + background-image: url("ucc-logo-white.png"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} + @keyframes logo-rotate { + 0% {transform: rotate(0deg);} + 25% {transform: rotate(90deg);} + 50% {transform: rotate(180deg);} + 75% {transform: rotate(270deg);} + 100% {transform: rotate(360deg);} + } + + nav li > a.logo:hover::before { + animation-name: logo-rotate; + animation-delay: 5s; + animation-duration: 500ms; + animation-timing-function: linear; + animation-iteration-count: infinite; + } + +footer { + display: block; + position: absolute; + bottom: 0px; + overflow: hidden; + text-align: center; + + color: #707070; +} + + footer > p { + padding: 0; + margin: 12px 0 6px 0; + } + + footer > ul { + margin-left: 0px; + margin-right: 0px; + padding: 0px; + list-style: none; + } + + footer > ul > li { + display: inline; + margin: 0px; + } + + footer > ul > li+li::before { + content: "\2022 "; + } + .form-container { - position: relative; + 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; + 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; + 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); + color: #000; + background-color: rgb(255, 145, 0); } fieldset { - border: none; + border: none; } .form-row, .submit-row { - margin: 10px 0px; + margin: 10px 0px; } .submit-row { - display: flex; - margin-bottom: 0px; + display: flex; + margin-bottom: 0px; } .submit-row *+* { - margin-left: 10px; + margin-left: 10px; } .form-row label {} @@ -74,335 +276,231 @@ fieldset { .form-row input[type="email"], .form-row input[type="password"], .form-row textarea { - width: 100%; + width: 100%; } .form-row input[type=checkbox], .form-row.readonly .text { - display: inline; - line-height: 20px; + display: inline; + line-height: 20px; } .form-row.readonly .text { - padding-left: 10px; - color: #444; + padding-left: 10px; + color: #444; } .help { - margin: 8px 8px 0 8px; + margin: 8px 8px 0 8px; } .help a { - color: #777; + color: #777; } ul.errorlist { - list-style: none; - background-color: #a33; - color: white; - padding: 10px 30px; - margin: 30px 0 10px 0; - font-weight: bold; + 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 { - position: relative; - min-height: 100%; - - background-color: #181818; - color: #fff; - - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: normal; - - margin: 0; -} - -.logo { - float: left; - margin: 5px 30px 5px 20px; - height: 50px; - width: 50px; - overflow: hidden; /* hide the overflow when it is rotated on the admin site */ -} - -.logo span { - height: 100%; - width: 100%; - display: block; - background-image: url("ucc-logo-white.png"); - background-repeat: no-repeat; - background-position: center; - background-size: cover; -} - -#container { - padding-bottom: 60px; - position: static; -} - -#footer { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - clear: both; - background-color: #ccc; - color: #777; - text-align: center; - overflow: hidden; -} - -#footer p { - padding: 0; - margin: 12px 0 6px 0; -} - -.linkslist a { - display: inline-block; - padding: 0; - margin: 6px 10px 12px 10px; - color: #555; -} - -.linkslist a:visited { - color: #333; + width: 100%; + text-align: left; } /* make div expand to contain float children */ .float-container { - overflow: auto; - display: inline-block; + overflow: auto; + display: inline-block; } /* MESSAGES & ERRORS */ ul.messagelist { - padding: 0; - margin: 0; + 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; + 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; + 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; + 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; + 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; - - transition-duration: 50ms; - transition-property: height, margin, transform, box-shadow, filter; + 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: ""; + 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; + 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; + 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); + height: 33px; + margin-bottom: 3px; + transform: translateY(3px); - box-shadow: none; - filter: brightness(0.5); - outline: none; + box-shadow: none; + filter: brightness(0.5); + outline: none; } .button.-default, input[type=submit].-default { - margin-left: auto; - font-weight: 400; - background: #609ab6; + margin-left: auto; + font-weight: 400; + background: #609ab6; } .help, p.help, form p.help, div.help, form div.help, div.help li { - color: #999; + color: #999; } /* TEXT BOXES */ input[type="text"], input[type="email"], input[type="password"], textarea { - display: block; - position: relative; - height: 36px; - padding: 4px; + 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; + 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; + 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; + background-color: #686868; + outline: none; } /* TABLES */ table { - border-collapse: collapse; - border-color: #ccc; + 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;*/ + 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; + 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; + 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; + border-bottom: none; + border-top: 1px solid #eee; } thead th.required { - color: #000; + color: #000; } tr.alt { - background: #f6f6f6; + background: #f6f6f6; } .row1 { - background: rgba(255, 255, 255, 0.7); + background: rgba(255, 255, 255, 0.7); } .row2 { - background: rgba(230, 230, 230, 0.7); + background: rgba(230, 230, 230, 0.7); } diff --git a/src/templates/base.html b/src/templates/base.html index 60c4565b1d81b12977227d0ed3d721af29b4a6ee..81264f3acc310d2c4647ccda4fa61ab6208c0da1 100644 --- a/src/templates/base.html +++ b/src/templates/base.html @@ -7,55 +7,51 @@ <link rel="shortcut icon" type="image/png" href="{% static 'ucc-logo.png' %}"/> {% block prestyle %}{% endblock %} <link rel="stylesheet" type="text/css" href="{% static "shared.css" %}"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> {% block extrahead %}{% endblock %} {% block extrastyle %}{% endblock %} {% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %} </head> <body {% block bodyattrs %}{% endblock %}> - -<!-- Container --> -<div id="container"> - {% block header_div %}<!-- Header --> - <div id="header"> - {% block navbar %} + <header> + {% block navbar %}{% with url_name=request.resolver_match.url_name %} <nav> - {% block branding %} - <a class="logo" title="UCCPortal homepage"> - <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 %} - <a class="navtab {% if url_name == 'home' %}active{% endif %}" href="{% url "memberdb:home" %}">Member home</a> - {% endif %} - <a class="navtab {% if url_name == 'register' %}active{% endif %}" href="{% url "memberdb:register" %}">Register</a> + <ul class="-left"> + {% block branding %} + <li><a class="logo" title="UCCPortal homepage"></a></li> + {% endblock %} + </ul> + <ul class="-centre"> + {# fancy automatic navbar thing from https://stackoverflow.com/questions/39639264 #} - {% if not request.user.is_authenticated %} - <a class="navtab {% if url_name == 'login' %}active{% endif %}" href="{% url "memberdb:login" %}">Login</a> - {% else %} - <a class="navtab {% if url_name == 'renew' %}active{% endif %}" href="{% url "memberdb:renew" %}">Renew membership</a> + {% if request.member %} + <li><a class="{% if url_name == 'home' %}-selected{% endif %}" href="{% url "memberdb:home" %}">Member home</a></li> + {% endif %} - {% if request.user.is_staff %} - <a class="navtab {% block adminactive %}{% endblock %}" href="{% url "admin:index" %}">Admin site</a> - {% endif %} + <li><a class="{% if url_name == 'register' %}-selected{% endif %}" href="{% url "memberdb:register" %}">Register</a></li> - {% endif %} - - {% if request.user.is_authenticated or request.member %} - <a class="navtab {% if url_name == 'logout' %}active{% endif %}" href="{% url "memberdb:logout" %}">Logout</a> - {% endif %} - {% endwith %} + {% if not request.user.is_authenticated %} + <li><a class="{% if url_name == 'login' %}-selected{% endif %}" href="{% url "memberdb:login" %}">Login</a></li> + {% else %} + <li><a class="{% if url_name == 'renew' %}-selected{% endif %}" href="{% url "memberdb:renew" %}">Renew membership</a></li> + {% if request.user.is_staff %} + <li><a class="{% block adminactive %}{% endblock %}" href="{% url "admin:index" %}">Admin site</a></li> + {% endif %} + {% endif %} + </ul> + <ul class="-right"> + {% if request.user.is_authenticated or request.member %} + <li><a class="{% if url_name == 'logout' %}-selected{% endif %}" href="{% url "memberdb:logout" %}">Logout</a></li> + {% endif %} + </ul> </nav> - {% endblock %} - + {% endwith %}{% endblock %} {% block header %}{% endblock %} - - </div> + </header> {% endblock %}<!-- END Header --> + {% block breadcrumbs %}{% endblock %} {% block messages %}{% if messages %} <ul class="messagelist">{% for message in messages %} @@ -64,7 +60,7 @@ {% endif %}{% endblock messages %} <!-- Content --> - <div id="content"> + <main> {% block pretitle %}{% endblock %} {% block content_title %}<h1></h1>{% endblock %} {% block content %} @@ -72,27 +68,24 @@ <!-- sidebar --> {% block sidebar %}{% endblock %} <br class="clear"> - </div> + </main> <!-- END Content --> <!-- Footer --> {% block footer %} - <div id="footer"> + <footer> <p> - The University Computer Club Inc. + The University Computer Club Inc.<br/> ABN: 98 843 368 069 </p> - <div class="linkslist"> - <a href="https://www.ucc.asn.au">main website</a>• - <a href="https://wiki.ucc.asn.au">UCC wiki</a>• - <a href="https://www.ucc.asn.au/aboutucc/contact.ucc">contact us</a>• - <a href="https://gitlab.ucc.asn.au/frekk/uccportal">source code</a> - </div> - </div> + <ul> + <li><a href="https://www.ucc.asn.au">main website</a></li> + <li><a href="https://wiki.ucc.asn.au">UCC wiki</a></li> + <li><a href="https://www.ucc.asn.au/aboutucc/contact.ucc">contact us</a></li> + <li><a href="https://gitlab.ucc.asn.au/frekk/uccportal">source code</a></li> + </ul> + </footer> {% endblock %} <!-- END Footer --> -</div> -<!-- END Container --> - </body> </html>