Skip to content

Commit

Permalink
Merge pull request #115 from RSE-Sheffield/ui/navbar
Browse files Browse the repository at this point in the history 
UI/navbar
  • Loading branch information
@twinkarma
twinkarma authored Feb 12, 2025
2 parents 8e9a571 + 7395dde commit 43891ea
Show file tree
Hide file tree
Showing 9 changed files with 101 additions and 71 deletions.
3 changes: 1 addition & 2 deletions home/templates/home/profile.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
{% extends "base_manager.html" %}

{% block content %}
<div class="container mt-3">

<div class="container mx-auto px-4 py-8 mt-4">
<div>
<h1>Profile</h1>
<p class="subtitle">Use the form below to update your profile details.</p>
Expand Down
6 changes: 2 additions & 4 deletions home/templates/home/welcome.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
{% extends "base_manager.html" %}

{% block content %}
<div class="container my-4">
<div class="row justify-content-center">
<div class="col-12 col-lg-12 mb-4">
<div class="container mx-auto px-4 py-8 mt-4">
{% if user.is_authenticated %}
<div class="card custom-card shadow-sm mb-4">
<div class="card-body">
Expand All @@ -29,7 +27,7 @@ <h2 class="card-title">
</div>
{% endif %}

<div class="card custom-card shadow-sm">
<div class="card custom-card shadow-sm mb-4">
<div class="card-body">
<h1 class="card-title">About SORT</h1>
<p class="card-text">
Expand Down
33 changes: 24 additions & 9 deletions static/css/base.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
:root {
--primary-colour: #440099;
--primary-colour-lg: #7C4DB8;
--primary-bg-colour: #DACCEB;
--primary-dark-colour: #131e29;
}

body {
Expand All @@ -16,17 +18,30 @@ header {
z-index: 1000;
}

.subheader {
color: white;
background-color: var(--primary-colour);
font-weight: bold;
}

.navbar {
background-color: var(--primary-bg-colour);
top: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: var(--primary-dark-colour);
}

.navbar a {
color: lightgrey;
}

.nav-link:hover,
.nav-link.active {
color: black !important;
filter: brightness(0.8);
color: white !important;
filter: brightness(1.0);
}


.container {
display: flex;
justify-content: center;
Expand All @@ -45,7 +60,7 @@ h1, h2, h3, h4, h5, h6 {
}

.text-center a {
color: #7C4DB8;
color: var(--primary-colour-lg);
text-decoration: none;
}

Expand Down Expand Up @@ -87,13 +102,13 @@ h1, h2, h3, h4, h5, h6 {
}

.btn-primary {
background-color: #6933AD !important;
border-color: #6933AD !important;
background-color: var(--primary-colour) !important;
border-color: var(--primary-colour) !important;
}

.btn-primary:hover {
background-color: var(--primary-colour) !important;
border-color: var(--primary-colour) !important;
background-color: var(--primary-colour-lg) !important;
border-color: var(--primary-colour-lg) !important;
}

.btn-primary, .btn-primary:hover {
Expand Down
8 changes: 4 additions & 4 deletions static/css/login_base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,13 @@ h1, h2, h3, h4, h5, h6 {
}

.btn-primary {
background-color: #6933AD !important;
border-color: #6933AD !important;
background-color: #440099 !important;
border-color: #440099 !important;
}

.btn-primary:hover {
background-color: #440099 !important;
border-color: #440099 !important;
background-color: #6933AD !important;
border-color: #6933AD !important;
}

.btn-primary, .btn-primary:hover {
Expand Down
2 changes: 2 additions & 0 deletions static/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
{% block extra_css %}{% endblock %}
</head>
<body>
{% include 'header.html' %}
{% block navitems %}<!-- Content here -->{% endblock %}
<main>
<div class="card-body">
Expand Down Expand Up @@ -44,3 +45,4 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>

4 changes: 1 addition & 3 deletions static/templates/base_anonymous.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@
{% load django_bootstrap5 %}
{% block navitems %}
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<img src="/static/images/sort_logo_placeholder.png" alt="Self-assessment of organisational readiness tool logo" height="30rem" />
</div>

</nav>
{% endblock %}
{% block content %}<!-- Content here -->{% endblock %}
54 changes: 30 additions & 24 deletions static/templates/base_manager.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,50 +2,56 @@
{% load static %}
{% load django_bootstrap5 %}
{% block navitems %}
<nav class="navbar navbar-expand-lg navbar-light">

<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<div class="container-fluid">
{% url 'home' as home_url %}
<a class="navbar-brand" href="{{ home_url }}"><img src="/static/images/sort_logo_placeholder.png" alt="Self-assessment of organisational readiness tool logo" height="30rem" /></a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-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="navbarNav">
<ul class="navbar-nav ms-auto">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link {% if request.path == invite_url %}active{% endif %}" href="{{ home_url }}"><i class="bx bxs-home"></i>Home</a>
<a class="nav-link {% if request.path == '/' %}active{% endif %}" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link {% if '/profile' in request.path %}active{% endif %}" href="{% url 'profile' %}"><i class="bx bxs-user"></i>Profile</a>
</li>
<li class="nav-item">
{% url 'organisation_create' as organisation_create_url %}
<a class="nav-link
{% if '/myorganisation' in request.path %}active{% endif %}
{% if '/projects' in request.path %}active{% endif %}
{% if '/survey' in request.path %}active{% endif %}
{% if '/completion' in request.path %}active{% endif %}"
href="{% url 'myorganisation' %}"><i class="bx bxs-buildings"></i>My Organisation</a>
<a class="nav-link
{% if '/myorganisation' in request.path %}active{% endif %}
{% if '/organisation' in request.path %}active{% endif %}
{% if '/projects' in request.path %}active{% endif %}
{% if '/survey' in request.path %}active{% endif %}
{% if '/completion' in request.path %}active{% endif %}
{% if '/invite' in request.path %}active{% endif %}"
href="{% url 'myorganisation' %}">My Organisation</a>
</li>
</ul>
<ul class="navbar-nav">
{% if user.is_authenticated %}
<li class="nav-item">
<form id="logout-form"
action="{% url 'logout' %}"
method="POST"
style="display: inline">
action="{% url 'logout' %}"
method="POST"
style="display: inline">
{% csrf_token %}
<button type="submit" class="nav-link btn btn-link btn-primary"><i class="bx bxs-user-x"></i> Logout</button>
<button type="submit" class="nav-link btn btn-link btn-primary">Logout</button>
</form>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
</div>
</nav>
{% endblock %}
{% block content %}<!-- Content here -->{% endblock %}
12 changes: 12 additions & 0 deletions static/templates/header.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<header>
<div class="px-3 py-2 bg-light">
<div class="container">
<a class="navbar-brand" href="{% url 'home' %}"><img src="/static/images/sort_logo_placeholder.png" alt="Self-assessment of organisational readiness tool logo" height="30rem" /></a>
</div>
</div>
<div class="px-3 py-2 subheader">
<div class="container">
The Self-Assessment of Organisational Readiness Tool
</div>
</div>
</header>
50 changes: 25 additions & 25 deletions survey/templates/invitations/send_invitation.html
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
{% extends 'base_manager.html' %}

{% block content %}
<div class="container mt-3">
<div class="container mx-auto px-4 py-8 mt-4">
<div>
<h1>Invitations</h1>
<p class="subtitle">Use the form below to send out invitations to your survey participants.</p>
</div>

<div>
<h1>Invitations</h1>
<p class="subtitle">Use the form below to send out invitations to your survey participants.</p>
</div>

<div class="card custom-card shadow-sm my-4">
<div class="card-body">
<div class="card custom-card shadow-sm my-4">
<div class="card-body">

<form method="post">
{% csrf_token %}
<form method="post">
{% csrf_token %}

<div class="mb-3">
<label for="id_email" class="form-label">Email Address</label>
<input type="email" name="email" id="id_email" class="form-control" placeholder="Enter email address" required>
<small class="form-text text-muted">Enter the participant's email address. You can separate multiple addresses with commas.</small>
</div>
<div class="mb-3">
<label for="id_email" class="form-label">Email Address</label>
<input type="email" name="email" id="id_email" class="form-control" placeholder="Enter email address" required>
<small class="form-text text-muted">Enter the participant's email address. You can separate multiple addresses with commas.</small>
</div>

<div class="mb-3">
<label for="id_message" class="form-label">Message (Optional)</label>
<textarea name="message" id="id_message" class="form-control" rows="3" placeholder="Write your message here..."></textarea>
<small class="form-text text-muted">Add any additional messages.</small>
</div>
<div class="mb-3">
<label for="id_message" class="form-label">Message (Optional)</label>
<textarea name="message" id="id_message" class="form-control" rows="3" placeholder="Write your message here..."></textarea>
<small class="form-text text-muted">Add any additional messages.</small>
</div>

<div class="text-center">
<button type="submit" class="btn btn-primary" style="background-color: #6933AD; border: none;">Send</button>
</div>
</form>
</div>

<div class="text-center">
<button type="submit" class="btn btn-primary" style="background-color: #6933AD; border: none;"><i class="bx bxs-send"></i> Send</button>
</div>
</form>
</div>
</div>

</div>
{% endblock %}

0 comments on commit 43891ea

Please sign in to comment.