Not sure why we were doing this. But as part of the Elements upgrade
our back buttons got bigger (because they weren’t constrained by the
line in our `app.scss`) but any green submit buttons stayed smaller in
height, so didn’t line up.
This commit removes the override, so all buttons have the size that
Elements intended.
The Elements CSS was making the `label` and `input` of disabled radio
buttons `opacity: 0.5`. This was resulting in text that was:
- too pale, especially where we were nesting 16px ‘hint’ text inside the
label
- waaaay too pale when inside a link inside the label
This commit overrides elements to dim the disabled radio button by
making it’s text colour grey, rather than making the whole thing
semi-transparent.
Our CSS adjusts the spacing for the first `.heading-large` on the page
so that it aligns with the navigation. This doesn’t work when something
else comes first on the page, like a notification banner.
But since we only ever user `.heading-large` for the `<h1>`, and there
should only be one `<h1>` on the page we can just change the spacing
for _all_ `<h1>`s.
We didn’t have an element with an `id` of `content` on the product page
because we didn’t want the styles that come with it (from GOV.UK
Elements here: d6226bd2c8/public/sass/elements/_layout.scss (L9-L20))
This meant that the skiplink didn’t work on the product page because
it’s target was not on the page. The skiplink’s target is hardcoded to
point at `#content`.
The proper way to fix this would be to not hardcode the skiplink to
point at `#content`, ie what this pull request does:
https://github.com/alphagov/govuk_template/pull/275
Until that is merged, we can hack around the problem by overriding the
styles that Elements applies to `#content`, which is what this pull
request does.
The previous, weekly activity breakdown was what we reckoned might be
useful. But now that we have people using the platform it feels like
aggregating a service’s usage by month is:
- matches the timeframe users report on within their organisation
- is consistent with the usage page
And like the usage page this commit also limits the page to only show
one financial year’s worth of data at once (rather than data for all
time).
This commit also makes some changes to the jobs view code so that our
aggregation of failure states is consistent between the dashboard pages
and the jobs pages.
This is part of the new header style that Tim, Stephen et al have been
working on.
This means that we lose the feedback link, so I’m trying out having it
in the top right.
This is trying to resolve these confusions:
- that you’re in trial mode, which means you can’t have a live key yet (
or you can but it wont work, which is what we used to have)
- what does simulate mean
The create key page is the right place to resolve these confusions
because it’s where users are actively reading.
This commit also removes the trial mode banner from API integration
page because this where users _aren’t_ actively reading. A whole bunch
of users weren’t seeing this banner at all.
The implementation of the disabled API key options is kinda clunky
because WTForms doesn’t have a native way of doing this.
¯\_(ツ)_/¯
The polyfill we use for details/summary only renders the arrow if the
browser doesn’t natively support the feature.
The latest versions of Firefox _do_ now support the feature (after 5
years), but for some reason they don’t draw the arrow. So this commit
forces the arrow to be polyfilled in all browsers, and hides the browser
default one, for those browsers that do render it.
Basically:
- shows all the months from start of given financial year to now or end
of given financial year (whichever is earliest)
- shows a breakdown of free and paid text messages for each of these
months
Depends on:
- [x] https://github.com/alphagov/notifications-api/pull/699
When a user adds or removes placeholders in their template we should consider
this a ‘breaking change’ and warn them accordingly.
Implementing this mostly relies on using
https://github.com/alphagov/notifications-utils/pull/37
Temporarily storing the new template until the user confirms that they want to
make the changes in done using hidden fields. This is a bit hacky, but the
complexity of making sessions interact with WTForms was just too much to handle.
This commit also changes the example spreadsheet that we show on this page to
look more like a spreadsheet.
> On the send pages, we have a call to action in the middle of the
> page with lots of words and placeholder buttony looking things
> above and below it....
>
> You'll also see this every time you use this page, even though you
> probably get it after a single use.
>
> So let's wrap it up under a usefully titled (?) help link that
> expands to reveal all the things.
This commit implements the above.
It also rewords the messaging to talk about various spreadsheet formats,
not just CSV.
For users who:
- want to send messages from a template
- want to edit templates
For developers:
- who need to get the ID of a template
This commit mainly cleans up the choose template page so there are less
options, and the options that are there are less wordy.
This means:
- moving ‘send yourself a test’ onto the send messages page, and making
it button
- stripping a lot of stuff out of the ‘send from API’ page, so it’s more
obvious what the template ID is
We should (and do) keep exact copies of SCSS files that have come from
elsewhere so that we can easily upgrade them. But sometimes they don’t
always pass our linting rules, or throw a lot of warnings, which is
noisy.
This commit:
- moves such files into their own subdirectory
- tells SCSS Lint to ignore files in this directory
This commit adds a 3 screen tour, similar to those used on GOV.UK Verify
and Passports.
We guerilla tested this on Friday, and it really helped users to build a
mental model of how Notify works, so that when they’re playing around
with it they have a greater sense of what they’re aiming to do. This
makes concepts like templates and placeholders click more quickly.
https://www.pivotaltracker.com/story/show/116710119
When the first heading on the page is inside a grid row, it doesn’t
vertically align properly with the navigation. This is because it
isn’t targeted by the selector that does this for pages without
an initial grid row.
This commit:
- adds an extra selector to target these headings
- makes the ‘add new thing’ buttons maintain their alignment with
the page heading
The yes/no pattern didn’t work too well, because:
- it didn’t read naturally as a question and answer
- often users left them completely unclicked if they didn’t want to set
the permission (rather than clicking no)
This commit changes both the invite and edit user pages to use
checkboxes to set permissions. If also rewords these pages to read more
naturally, and explain what the permissions mean.
This meant changing some of the view logic around invites and
persmissions, and I ended up refactoring a bunch of it because I found
it hard to understand what was going on.
Would like to test something like this and see how well it works.
Intention of having this page is so:
- template IDs are discoverable (https://www.pivotaltracker.com/story/show/115404593)
- it’s obvious there’s an ‘automated’ way to send messages, as well as the CSV
way (we’ve seen people oblivious to this in research)
This takes the original prototype version of this page, and, using the same
fake data (ie nothing is wired up):
- adds an invite users page
- adds an edit (and delete) user page
Both these pages allow the user to set another user’s permissions.
This commit adds images for the ticks and crosses, so we have control over their
appearance.
Since placeholders (almost) work now, it’s worth telling people what the syntax
is.
This commit also removes the ‘template type’ picker, since you can only create
SMS templates at the moment. This will be revisited when we start looking at how
you add an email template.
For entering 2 or 3fa codes, we want a textbox that’s just over 6 characters
wide.
To do this, a width can now be passed to the textbox macro. The possible widths
are the same as those provided by GOV.UK Elements, and in the same format (eg
1-4, 1-2, 2-3…)
This commit also adds a new width (5em) which is suitable for 3fa codes, and
adds it to the verify page.
- 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’
There’s an argument to be made that the beta label should only apply to
the public-facing parts of services/platforms.
Removing it from here means that we don’t need to deal with the hassle of how it
fits into the navigation. If we have to bring it back then we could follow the
banner example here instead:
http://govuk-elements.herokuapp.com/alpha-beta-banners/#beta-banner
‘GOV.UK’ in the template is set in 30px type to line up perfectly with the
crown. When adding more text, it looks too big.
This commit reduces the type size to 27px (which is still a core type size) and
tweaks the spacing so that things still look nice/aligned.
This commit moves user-related navigation into the proposition header (the black
bar) at the top of the site. It adds some custom SASS to override GOV.UK
template and align these navigation items to the right (because it looks
better).
It then removes the service chooser dropdown (and its associated SASS and JS) in
favour of a link alongside the user-related navigation items. ‘Switch service’
is the best language for this that we’ve come up with so far.
This means that the only way of adding a new service is from the `/services`
page. So this commit removes the redirect if you land on this page with only one
service (else it would prevent you from ever being able to add more).
…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).
