Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI/navbar #115

Merged
merged 12 commits into from
Feb 12, 2025
Merged

UI/navbar #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
8540a7b
adding uos style header and navbar
rosannamilner Feb 5, 2025
cf2002e
changing navbar position
rosannamilner Feb 5, 2025
3e9b906
changed button colours
rosannamilner Feb 11, 2025
f112ada
added navbar
rosannamilner Feb 11, 2025
3b368da
Merge remote-tracking branch 'origin/dev' into ui/navbar
rosannamilner Feb 11, 2025
7af8446
added header.html and moved navitems to base_*.html
rosannamilner Feb 11, 2025
f2fd1c3
added fix
rosannamilner Feb 11, 2025
d1d9dd0
Update base_anonymous.html
rosannamilner Feb 12, 2025
1bd349e
Update base_anonymous.html
rosannamilner Feb 12, 2025
66936fd
Update base_anonymous.html
rosannamilner Feb 12, 2025
3862aae
added more url paths to hover
rosannamilner Feb 12, 2025
7395dde
Merge branch 'dev' into ui/navbar
twinkarma Feb 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions home/templates/home/profile.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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 %}