diff --git a/src/gms/settings.py b/src/gms/settings.py index 9dfb8a715859e6fdffa1eeafc675faf7976fc48c..3f0a39eb468785754eb2b014a3ff06a9e10482aa 100644 --- a/src/gms/settings.py +++ b/src/gms/settings.py @@ -25,6 +25,7 @@ INSTALLED_APPS = ( 'import_members', 'squarepay', 'formtools', + 'bootstrap4', ) MIDDLEWARE = [ diff --git a/src/templates/base.html b/src/templates/base.html index 1710d6a2daf95b22e08de6dc1024c4853b882a7f..6fa69b2e248bbb94245933e1866be8b794fe1304 100644 --- a/src/templates/base.html +++ b/src/templates/base.html @@ -1,13 +1,23 @@ {% load static %} + <!DOCTYPE html> <html> +{# Load Bootstrap #} +{% load bootstrap4 %} +{% bootstrap_css %} +{% bootstrap_javascript jquery='full' %} + +{# Display django.contrib.messages as Bootstrap alerts #} +{% bootstrap_messages %} + + <head> <!-- 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" %}"> + <link rel="stylesheet" type="text/css" href="{% static 'shared.css' %}"/> + <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> {% block prestyle %}{% endblock %} - <link rel="stylesheet" type="text/css" href="{% static "shared.css" %}"> {% block extrahead %}{% endblock %} {% block extrastyle %}{% endblock %} {% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %} @@ -21,45 +31,59 @@ {% block header_div %}<!-- Header --> <div id="header"> {% block navbar %} - <nav> + <nav class="navbar navbar-expand-lg navbar-dark bg-grey-900 font-weight-bold"> + {% block branding %} - <a class="logo" title="UCCPortal homepage"> - <span></span> - </a> + <a class="navbar-brand logo" title="UCCPortal homepage"></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> - - {% 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.user.is_staff %} - <a class="navtab {% block adminactive %}{% endblock %}" href="{% url "admin:index" %}">Admin site</a> - {% endif %} - - {% 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 %} - - {# add the groups class only if we have groups to display #} - <div class="userinfo{% if request.user.is_authenticated %}{% if request.member %} groups{% endif %}"> - <span class="username">Welcome, {{ request.user.username }}</span> - {% if request.member %} - {% for g in request.member.groups %}<span class="group {{ g }}">{{ g }}</span>{% endfor %} - {% endif %} - {% else %}"> - <span class="username">Not logged in</span> - {% endif %} + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="navbarSupportedContent"> + {% with url_name=request.resolver_match.url_name %} + <div class="navbar-nav mr-auto"> + {% if not request.user.is_authenticated or request.user.is_staff %} + {% endif %} + + + {% if request.member %} + <a class="nav-item nav-link {% if url_name == 'home' %}active{% endif %}" href="{% url "memberdb:home" %}">Member home</a> + <a class="nav-item nav-link {% if url_name == 'renew' %}active{% endif %}" href="{% url "memberdb:renew" %}">Renew membership</a> + {% endif %} + + {% if request.user.is_staff %} + <a class="nav-item nav-link {% block adminactive %}{% endblock %}" href="{% url "admin:index" %}">Admin site</a> + <a class="nav-item nav-link {% if url_name == 'register' %}active{% endif %}" href="{% url "memberdb:register" %}">Add Member</a> + {% endif %} + + </div> + + <div class="navbar-nav"> + {% if request.user.is_authenticated and request.member %} + <div class="nav-item"> + <i class=" align-baseline icon md-light">person</i> + </div> + <div class="nav-item userinfo groups dropdown"> + + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Welcome, {{ request.user.username }} + <!--<div class="navbar-nav userinfo{ if request.user.is_authenticated %}{ if request.member %} groups{ endif %}"> + { if request.member %} + { for g in request.member.groups %}<span class="group { g }}">{ g }}</span>{ endfor %} + { endif %} + </div>--> + </a> + <div class="dropdown-menu bg-grey-900" aria-labelledby="navbarDropdownMenuLink"> + <a class="nav-item nav-link {% if url_name == 'logout' %}active{% endif %}" href="{% url "memberdb:logout" %}">Logout</a> + </div> + </div> + {%else%} + <a class="nav-item nav-link {% if url_name == 'login' %}active{% endif %}" href="{% url "memberdb:login" %}">Login</a> + {%endif%} + </div> + {% endwith %} </div> </nav> {% endblock %} @@ -76,7 +100,7 @@ {% endif %}{% endblock messages %} <!-- Content --> - <div id="content"> + <div class="text-light bg-dark" id="content"> {% block pretitle %}{% endblock %} {% block content_title %}<h1></h1>{% endblock %} {% block content %} @@ -111,9 +135,9 @@ transform: translate(-50%, -50%); opacity: 0.3; {% if DEPLOYMENT_ENV == "STAGE" %} - color: RED; + color: RED; {% else %} - color: GREEN; + color: GREEN; {% endif %} font-size: 15em; top: 50%;