Skip to content

Commit

Permalink
Merge pull request #371 from rcpch/ui-features
Browse files Browse the repository at this point in the history
UI/UX Edits to Home, Navbar and Visit Forms
  • Loading branch information
mbarton authored Nov 14, 2024
2 parents daa7e4f + 1ba0fc8 commit d07bd4e
Show file tree
Hide file tree
Showing 18 changed files with 712 additions and 472 deletions.
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ media/submissions/csv/*
__pycache__
.DS_Store
/.cache

.vscode
*.code-workspace

node_modules
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

82 changes: 46 additions & 36 deletions project/npda/templates/base.html
Original file line number Diff line number Diff line change
@@ -1,39 +1,39 @@
<!DOCTYPE html>
<html>
{% load static %}

<head>
<meta charset="utf-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=no" />
<meta name="description" content="National Paediatric Diabetes Audit Platform." />
<meta name="keywords" content="National Paediatric Diabetes Audit Platform" />
<meta name="author" content="RCPCH" />
<meta name="theme-color" content="#ffffff" />
<meta name="latest_git_commit" content="{{latest_git_commit}}" />
<title>National Paediatric Diabetes Audit Platform | RCPCH</title>
<link rel="icon" href="/favicon.ico"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/arial-2" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/htmx.js"
integrity="sha384-l9bYT9SL4CAW0Hl7pAOpfRc18mys1b0wK4U8UtGnWOxPVbVMgrOdB+jyz/WY8Jue"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]"></script>

<link href="{% static 'tailwind.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">

</head>

<body id="root" class="bg-white">

{% csrf_token %}
{% block nav %}
{% include 'nav.html' %}
{% endblock %}
<html class="scroll-smooth">
{% load static %}

<head>
<meta charset="utf-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=no" />
<meta name="description" content="National Paediatric Diabetes Audit Platform." />
<meta name="keywords" content="National Paediatric Diabetes Audit Platform" />
<meta name="author" content="RCPCH" />
<meta name="theme-color" content="#ffffff" />
<meta name="latest_git_commit" content="{{ latest_git_commit }}" />
<title>National Paediatric Diabetes Audit Platform | RCPCH</title>
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
<link href="https://fonts.cdnfonts.com/css/arial-2" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/htmx.js" integrity="sha384-l9bYT9SL4CAW0Hl7pAOpfRc18mys1b0wK4U8UtGnWOxPVbVMgrOdB+jyz/WY8Jue" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/fontawesome.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/solid.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/brands.js"></script>

<link href="{% static 'tailwind.css' %}" rel="stylesheet" />
<link rel="stylesheet" href="{% static 'css/styles.css' %}" />
</head>

<body id="root">
{% csrf_token %}

{% block nav %}
{% include 'nav.html' %}
{% endblock %}

<div>
{% block content %}{% endblock %}
Expand All @@ -46,4 +46,14 @@
{% endblock %}
</body>

</html>
</html>
<script>
window.addEventListener('DOMContentLoaded', function() {
// Retrieve theme from localStorage
const savedTheme = localStorage.getItem('theme') || 'light'; // default to 'light' if nothing is saved

// Set the data-theme attribute on the body
document.body.setAttribute('data-theme', savedTheme);
localStorage.setItem('theme', savedTheme);
});
</script>
50 changes: 22 additions & 28 deletions project/npda/templates/dashboard.html
Original file line number Diff line number Diff line change
@@ -1,35 +1,29 @@
{% extends "base.html" %}
{% extends 'base.html' %}
{% load static %}
{% load npda_tags %}
{% block content %}
{% url 'dashboard' as hx_get %}
<div class="flex flex-col justify-center px-10" hx-get={{hx_get}} hx-trigger="dashboard from:body" hx-target="#dashboard">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div class="relative overflow-x-auto">

<section class="bg-rcpch_dark_blue font-montserrat">
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
<h1 class="mb-4 text-4xl font-extrabold font-arial tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl text-white">National Paediatric Diabetes Audit</h1>
<p class="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">We are now accepting data for the 2023-24 audit year. <b>{% text_for_data_submission can_upload_csv can_complete_questionnaire %}</b>
For more information check out our user guide.</p>
<div class="flex flex-col mb-8 lg:mb-16 space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
<a href="http://0.0.0.0:8007/" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 focus:ring-primary-900">
Learn more
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</section>

<section class="bg-rcpch_dark_blue font-montserrat">
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
<h1 class="mb-4 text-4xl font-extrabold font-arial tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl text-white">National Paediatric Diabetes Audit</h1>
<p class="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">
We are now accepting data for the 2023-24 audit year. <b>{% text_for_data_submission can_upload_csv can_complete_questionnaire %}</b>
For more information check out our user guide.
</p>
<div class="flex flex-col mb-8 lg:mb-16 space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
<a href="http://0.0.0.0:8007/" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 focus:ring-primary-900">
Learn more<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</section>

<div id="dashboard" class="mt-5">
{% include "partials/kpi_table.html" with kpi_results=kpi_results pdu=pdu aggregation_level=aggregation_level %}
</div>
</div>
</div>
<section class="mb-5 container-mx-auto flex items-center justify-center" hx-get="{{ hx_get }}" hx-trigger="dashboard from:body" hx-target="#dashboard">
<div id="dashboard" class="max-h-screen w-full mt-5 mx-2">
{% include 'partials/kpi_table.html' with kpi_results=kpi_results pdu=pdu aggregation_level=aggregation_level %}
</div>
</div>
{% endblock %}
</section>
{% endblock %}
30 changes: 19 additions & 11 deletions project/npda/templates/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,26 @@
{% block content %}

<section class="bg-rcpch_dark_blue font-montserrat">
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
<h1 class="mb-4 text-4xl font-extrabold font-arial tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl text-white">National Paediatric Diabetes Audit</h1>
<p class="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">We are now accepting data for the 2023-24 audit year. Download the current dataset, templates for submitting data via CSV and questionnaire and our user guide.</p>
<div class="flex flex-col mb-8 lg:mb-16 space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
<a href="http://0.0.0.0:8007/" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 focus:ring-primary-900">
Learn more
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
<div
class="hero min-h-screen bg-rcpch_dark_blue font-montserrat "
style="background-image: url({% static 'images/procedural-generation-bg.gif' %});">
<div class="hero-overlay bg-opacity-70 backdrop-hue-rotate-30 backdrop-blur-sm"></div>
<div class="w-full hero-content text-neutral-content flex flex-wrap items-center justify-around">
<img
src="{% static 'npda-logo.png' %}"
class="rounded-lg shadow-2xl order-2 md:order-1 max-w-[50%]" />
<div class="max-w-md order-1 md:order-2">
<h1 class="mb-5 text-5xl font-bold text-center">National Paediatric Diabetes Audit</h1>
<p class="mb-5 text-center">
We are now accepting data for the 2023-24 audit year. Download the current dataset, templates for submitting data via CSV and questionnaire and our user guide.
</p>
<a href="http://0.0.0.0:8007/" class="btn w-full">Read User Guide</a>
</div>
<img
src="{% static 'rcpch-logo.jpg' %}"
class="rounded-lg shadow-2xl order-3 max-w-[50%]" />
</div>
</div>
</section>
{% if can_upload_csv %}
<section class="container-mx-auto pt-4 px-4 flex items-center justify-center rounded-none">
Expand Down
Loading

0 comments on commit d07bd4e

Please sign in to comment.