darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-06-01 12:00:36 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
e6f49825e5fdfd798ca2f2622f12342dfd15dbf8
notifications-admin/app/templates/withnav_template.html

47 lines
1.8 KiB
HTML
Raw Normal View History

Initial nav & implementation on dashboard
2015-12-14 16:37:15 +00:00
{% extends "admin_template.html" %}
Set vertical spacing for <main> GOV.UK Frontend gives `<main>` different padding on the top and bottom to us. This adds our spacing to `<main>` for pages without a side nav (except the product page which is special) and to the row containing the `<main>` and side nav sections on pages that have a side nav.
2019-10-14 16:23:53 +01:00
{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
Include service name in page `<title>` In pages specific to a service (e.g. dashboard and sub pages) the title needs to distinguish which service it applies to. This is mainly to give context to screen reader users who could be managing multiple services. Implementing this uses template inheritance: `page_title` includes `per_page_title` includes `service_page_title` ‘GOV.UK Notify’ is inserted into every page title. Pages that set `service_page_title` get the service name inserted too.
2017-02-13 10:45:15 +00:00
{% block per_page_title %}
{% block service_page_title %}{% endblock %} – {{ current_service.name }}
{% endblock %}
Update content area blocks in descendent pages GOV.UK Frontend's template wraps all content in a `<main>` tag and puts it in the main column. Some of Notify's pages need to reach out of the main column (product page). Some have several blocks of navigation before the main content area. This adjusts the blocks in all the templates where this is the case so those conditions can be met.
2019-10-11 16:44:17 +01:00
{% block main %}
<div class="govuk-width-container">
Make a full width base template We need this because the top section of the new product page will be going full-bleed.
2016-11-22 17:15:31 +00:00
<div class="navigation-service">
Restrict max width of org and service name Service names can be quite long. Organisation names can be quite long. Together they can be very long. This isn’t great because: - sometimes they overflow the width of the container, which looks broken - even if they’re not that long they can make the UI look quite cluttered This commit restricts them to widths that should stop the above from happening. In the case of the organisation name the width has specifically been chosen to line up with the ¼ and ¾ column grid used by the navigation.
2019-06-21 14:05:00 +01:00
{% if current_service.organisation_id %}
{% if current_user.platform_admin or
(current_user.belongs_to_organisation(current_service.organisation_id) and current_service.live) %}
Cache organisation name in Redis A lot of pages in the admin app are now generated entirely from Redis, without touching the API. The one remaining API call that a lot of pages make, when the user is platform admin or a member of an organisation, is to get the name of the current service’s organisation. This commit adds some code to start caching that as well, which should speed up page load times for when we’re clicking around the admin app (it’s typically 100ms just to get the organisation, and more than that when the API is under load). This means changing the service model to get the organisation from the API by ID, not by service ID. Otherwise it would be very hard to clear the cache if the name of the organisation ever changed. We can’t cache the whole organisation because it has a `count_of_live_services` field which can change at any time, without an update being made.
2020-03-20 08:42:33 +00:00
<a href="{{ url_for('.organisation_dashboard', org_id=current_service.organisation_id) }}" class="govuk-link govuk-link--no-visited-state navigation-organisation-link">{{ current_service.organisation_name }}</a>
Show organisation breadcrumbs Added a breadcrumb link to a service's organisation to the withnav_template. This will only show if a service has an organisation and the current user is also a member of that org, or the current user is a platform admin user. Also removed a couple of unused fixtures from the client_request fixture.
2019-06-20 09:53:21 +01:00
{% endif %}
Restrict max width of org and service name Service names can be quite long. Organisation names can be quite long. Together they can be very long. This isn’t great because: - sometimes they overflow the width of the container, which looks broken - even if they’re not that long they can make the UI look quite cluttered This commit restricts them to widths that should stop the above from happening. In the case of the organisation name the width has specifically been chosen to line up with the ¼ and ¾ column grid used by the navigation.
2019-06-21 14:05:00 +01:00
{% endif %}
Replace links in navigation Includes: - removing all styling of those links outside of GOV.UK Frontend (except for a few fixes due to their interaction with our design) - bringing together some duplicate styles into one block - changing how links are marked as selected, now they have multiple classes Fix Sass-lint error in navigation.scss
2019-12-11 20:33:57 +00:00
<div class="navigation-service-name govuk-!-font-weight-bold">
Make a full width base template We need this because the top section of the new product page will be going full-bleed.
2016-11-22 17:15:31 +00:00
{{ current_service.name }}
Remove `<h2>` tag around service name in nav The heading structure of most pages is incorrect (`<h2>` followed by `<h1>`). The `<h1>` indicates the main purpose of the page, the service name (currently the first `<h2>`) doesn't need to be a heading.
2017-02-13 10:46:56 +00:00
</div>
Update all links to use GOVUK Frontend style Includes: - turning off :visited styles to match existing design - swapping heading classes used to make links bold for the GOVUK Frontend bold override class - adding visually hidden text to some links to make them work when isolated from their context We may need to revisit whether some links, such as those for documentation and features, may benefit from having some indication that their target has been visited.
2019-12-06 07:53:46 +00:00
<a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>
Make a full width base template We need this because the top section of the new product page will be going full-bleed.
2016-11-22 17:15:31 +00:00
</div>
Replace `grid-row` with `govuk-grid-row` Replaced all instances of `grid-row` in the HTML and JavaScript with `govuk-grid-row`, which is the new GOV.UK Frontend class.
2020-02-19 11:57:15 +00:00
<div class="govuk-grid-row govuk-!-padding-bottom-12">
Fix left-hand column width on the tour When we moved from 1/3rd 2/3rd columns to 1/4th 3/4th columns we should have excluded the tour page. The tour page needs the width of the 1/3rd column to look right.
2017-04-27 15:20:25 +01:00
{% if help %}
Replace `column-one-third` with `govuk-grid-column-one-third` Also replaces `column-third`, with `govuk-grid-column-one-third`, since this appears to be an alias of `column-one-third`.
2020-02-19 12:29:28 +00:00
<div class="govuk-grid-column-one-third">
Fix left-hand column width on the tour When we moved from 1/3rd 2/3rd columns to 1/4th 3/4th columns we should have excluded the tour page. The tour page needs the width of the 1/3rd column to look right.
2017-04-27 15:20:25 +01:00
{% else %}
Replace `column-one-quarter` with `govuk-grid-column-one-quarter`
2020-02-19 12:53:59 +00:00
<div class="govuk-grid-column-one-quarter">
Fix left-hand column width on the tour When we moved from 1/3rd 2/3rd columns to 1/4th 3/4th columns we should have excluded the tour page. The tour page needs the width of the 1/3rd column to look right.
2017-04-27 15:20:25 +01:00
{% endif %}
Set vertical spacing for <main> GOV.UK Frontend gives `<main>` different padding on the top and bottom to us. This adds our spacing to `<main>` for pages without a side nav (except the product page which is special) and to the row containing the `<main>` and side nav sections on pages that have a side nav.
2019-10-14 16:23:53 +01:00
{% include "main_nav.html" %}
</div>
Fix left-hand column width on the tour When we moved from 1/3rd 2/3rd columns to 1/4th 3/4th columns we should have excluded the tour page. The tour page needs the width of the 1/3rd column to look right.
2017-04-27 15:20:25 +01:00
{% if help %}
Replace `column-two-thirds` with `govuk-grid-column-two-thirds`
2020-02-19 12:36:02 +00:00
<div class="govuk-grid-column-two-thirds">
Fix left-hand column width on the tour When we moved from 1/3rd 2/3rd columns to 1/4th 3/4th columns we should have excluded the tour page. The tour page needs the width of the 1/3rd column to look right.
2017-04-27 15:20:25 +01:00
{% else %}
Replace the `.column-...` classes in _grids.scss We had 7 classes in _grids.scss named `.column-...` which were being used to give a certain column width. These worked by using `@include grid column()`, which is now deprecated. `.column-whole` and `.column-three-quarters` can be removed and replaced with `govuk-grid-column-full` and `govuk-grid-column-three-quarters` respectively. The other column classes don't have a direct replacment in GOV.UK Frontend. To get round this, we overwrite the `$govuk-grid-width` SASS map in `extensions.scss` to add in extra widths, then use this with the `govuk-grid-column` mixin to create new classes in for our custom widths in `_grids.scss`
2020-02-20 16:55:56 +00:00
<div class="govuk-grid-column-three-quarters">
Fix left-hand column width on the tour When we moved from 1/3rd 2/3rd columns to 1/4th 3/4th columns we should have excluded the tour page. The tour page needs the width of the 1/3rd column to look right.
2017-04-27 15:20:25 +01:00
{% endif %}
Update content area blocks in descendent pages GOV.UK Frontend's template wraps all content in a `<main>` tag and puts it in the main column. Some of Notify's pages need to reach out of the main column (product page). Some have several blocks of navigation before the main content area. This adjusts the blocks in all the templates where this is the case so those conditions can be met.
2019-10-11 16:44:17 +01:00
{% block beforeContent %}{% endblock %}
<main class="govuk-main-wrapper column-main {{ mainClasses }}" id="main-content" role="main">
{% block content %}
{% include 'flash_messages.html' %}
{% block maincolumn_content %}{% endblock %}
{% endblock %}
</main>
</div>
Add restricted mode warning For the hack day, we should only let developers use the platform in restricted mode. This commit adds a banner telling them this. Can’t get the app running locally, so fingers crossed it actually looks how I imagine it’s going to look…
2016-01-22 10:57:49 +00:00
</div>
</div>
Use a Node-based tools for handling assets …or how to move a bunch of things from a bunch of different places into `app/static`. There are three main reasons not to use Flask Assets: - It had some strange behaviour like only - It was based on Ruby SASS, which is slower to get new features than libsass, and meant depending on Ruby, and having the SASS Gem globally installed—so you’re already out of being a ‘pure’ Python app - Martyn and I have experience of doing it this way on Marketplace, and we’ve ironed out the initial rough patches The specific technologies this introduces, all of which are Node-based: - Gulp – like a Makefile written in Javascript - NPM – package management, used for managing Gulp and its related dependencies - Bower – also package management, and the only way I can think to have GOV.UK template as a proper dependency …speaking of which, GOV.UK template is now a dependency. This means it can’t be modified at all (eg to add a global `#content` wrapper), so every page now inherits from a template that has this wrapper. But it also means that we have a clean upgrade path when the template is modified. Everything else (toolkit, elements) I’ve kept as submodules but moved them to a more logical place (`app/assets` not `app/assets/stylesheets`, because they contain more than just SASS/CSS).
2015-12-15 08:20:25 +00:00
{% endblock %}
Reference in New Issue Copy Permalink