app/templates/withnav_template.html

{% extends "admin_template.html" %}

{% block fullwidth_content %}
  <div class="grid-row">
    <div class="column-one-third">
      {% include "main_nav.html" %}
    </div>
    <main role="main" class="column-two-thirds column-main">
      {% include 'flash_messages.html' %}
      {% block maincolumn_content %}{% endblock %}
    </main>
  </div>
{% endblock %}
Initial nav & implementation on dashboard 2015-12-14 16:37:15 +00:00			`{% extends "admin_template.html" %}`

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			`{% block fullwidth_content %}`
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 class="grid-row">`
Various tweaks - remove black border from banner - make banners have internal columns - make nav 2/3rd width, 19px text and more spaced out - only show the ‘restricted mode’ banner where it’s needed - rename ‘restricted mode’ to ‘trial mode’ 2016-02-02 13:38:39 +00:00			`<div class="column-one-third">`
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			`{% include "main_nav.html" %}`
			`</div>`
Use <main> element in semantically appropriate way Assistive technologies use the `<main>` element to navigate around a document. In `<main>` their users expect to find: > [content] unique to the document, excluding any content that is > repeated across a set of documents such as sidebars, navigation links, > copyright information, site logos, and search forms… — https://developer.mozilla.org/en/docs/Web/HTML/Element/main Previously, the `<main>` element also wrapped the sidebar navigation. This commit moves the `<main>` element to only wrap the content of the page when the page has a navigation sidebar. This commit also removes the `page-container` class which wasn’t being used for anything. 2016-02-10 12:07:59 +00:00			`<main role="main" class="column-two-thirds column-main">`
Make spacing and position of banners consistent Banners should always be the first thing on the page. Because headers already have padding we don’t want to put padding on the container. So banners should also have top padding to distance then from the red bar. They should also sit in the 3/4 column if the page has side navigation. This commit adds a new template (`withoutnav_template.html`) which extends `admin_template.html`. All views then extend one or the other, never the `admin_template.html` directly. This means that `admin_template.html` doesn’t have to make decisions about where the flash messages are displayed. 2016-02-01 12:15:38 +00:00			`{% include 'flash_messages.html' %}`
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			`{% block maincolumn_content %}{% endblock %}`
Use <main> element in semantically appropriate way Assistive technologies use the `<main>` element to navigate around a document. In `<main>` their users expect to find: > [content] unique to the document, excluding any content that is > repeated across a set of documents such as sidebars, navigation links, > copyright information, site logos, and search forms… — https://developer.mozilla.org/en/docs/Web/HTML/Element/main Previously, the `<main>` element also wrapped the sidebar navigation. This commit moves the `<main>` element to only wrap the content of the page when the page has a navigation sidebar. This commit also removes the `page-container` class which wasn’t being used for anything. 2016-02-10 12:07:59 +00:00			`</main>`
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>`
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 %}`