From affc6ee68f95ee02630f9a2fbff870ba043ff5db Mon Sep 17 00:00:00 2001
From: unknown <zack@wongbox.internal.wongworks.net>
Date: Fri, 3 Jan 2020 14:26:07 +0800
Subject: [PATCH] fix styling
---
src/static/base.scss | 39 ++++++++-----------
src/static/shared.scss | 6 +--
src/templates/base.html | 9 ++---
src/templates/base_navbar.html | 69 ++++++++++++++++++++++++++++++++++
4 files changed, 88 insertions(+), 35 deletions(-)
create mode 100644 src/templates/base_navbar.html
diff --git a/src/static/base.scss b/src/static/base.scss
index 57ddfb9..427797d 100644
--- a/src/static/base.scss
+++ b/src/static/base.scss
@@ -1,30 +1,21 @@
- .sidebar {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- z-index: 100; /* Behind the navbar */
- padding: 48px 0 0; /* Height of navbar */
- box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+.sidebar {
+ position: -webkit-sticky;
+ position: sticky;
+ top: 40px;
+ z-index: 1000;
+ height: calc(100vh - 40px);
+ box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}
-.sidebar-sticky {
- position: relative;
- top: 0;
- height: calc(100vh - 48px);
- padding-top: .5rem;
- overflow-x: hidden;
- overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-}
-
-@supports ((position: -webkit-sticky) or (position: sticky)) {
- .sidebar-sticky {
- position: -webkit-sticky;
- position: sticky;
+.col-sb {
+ @media (min-width: 1200px) {
+ -ms-flex: 0 1 280px;
+ flex: 0 1 280px;
}
}
+
#footer {
- color: #777;
- overflow: hidden;
-}
\ No newline at end of file
+ color: #777;
+ overflow: hidden;
+}
diff --git a/src/static/shared.scss b/src/static/shared.scss
index d45825c..3d3fe0d 100644
--- a/src/static/shared.scss
+++ b/src/static/shared.scss
@@ -137,11 +137,7 @@ body {
color: #333;
}
-/* make div expand to contain float children */
-.float-container {
- overflow: auto;
- display: inline-block;
-}
+
/* MESSAGES & ERRORS */
ul.messagelist {
diff --git a/src/templates/base.html b/src/templates/base.html
index fe375b9..5b86ca6 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -48,16 +48,13 @@
<!-- Alerts -->
<div class="container-fluid ">
- {% include "watermark.html" %}
- <div class="row">
+ <div class="row flex-xl-nowrap">
<!-- sidebar -->
- <nav class="col-md-1 d-none d-md-block bg-light navbar-light sidebar">
- <div class="sidebar-sticky">
+ <nav class="col-md-3 col-xl-2 col-sb bg-light navbar-light sidebar">
{% block sidebar %}{% endblock %}
- </div>
</nav>
<!-- Content -->
- <div class="col-md-11 ml-sm-auto col-lg-11 px4">
+ <div class="col ml-sm-auto px4">
<main class="px4 bg-white" role="main">
{% block content %}{% endblock %}
</main>
diff --git a/src/templates/base_navbar.html b/src/templates/base_navbar.html
new file mode 100644
index 0000000..ba644df
--- /dev/null
+++ b/src/templates/base_navbar.html
@@ -0,0 +1,69 @@
+{% load static %}
+{% load sass_tags %}
+
+ <link rel="stylesheet" type="text/css" href="{% sass_src 'base_navbar.scss' %}" />
+
+ <!-- Container -->
+ {% block navbar %}
+ <nav class="navbar navbar-expand grey-900 navbar-dark flex-column flex-md-row p-0 shadow">
+
+ <a class="navbar-brand col-sm col-md-3 col-xl-2 mr-0 col-sb" title="UCCPortal homepage">
+ <span class="nav-item float-right logo"></span>
+ <div class="font-weight-bold text-light float-right font-italic" text-light>UCCPORTAL</div>
+ </a>
+
+ <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 {{membership}}" href="{% url "memberdb:home" %}">Membership </a>
+ <a class="nav-item nav-link disabled">Account</a>
+ {% endif %}
+
+ {% if request.user.is_staff %}
+ <a class="nav-item nav-link {% block adminactive %}{% endblock %}" href="{% url "admin:index" %}">
+ Admin
+ </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 %}
+
+ <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false">
+ <i class="icon md-18 md-light" data-feather="user"></i>
+ 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 dropdown-menu-right text-dark" aria-labelledby="navbarDropdownMenuLink">
+ <a class="dropdown-item disabled"> Dark theme: off</a>
+ <div class="dropdown-divider m-0"></div>
+ <a class="dropdown-item" href="{% url "memberdb:logout" %}">Logout</a>
+ </div>
+ </div>
+ {%else%}
+ <a class="btn btn-dark btn-sm my-1 border-light" href='{% url "memberdb:register" %}'>Signup</a>
+ <a class="nav-item nav-link" href="{% url "memberdb:login" %}">Login</a>
+ {%endif%}
+ </div>
+ {% endwith %}
+ </div>
+ </nav>
+ {% endblock %}
+
--
GitLab