darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-04-30 06:01:06 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
a088409dfeba315d3719e9e6d147ddf96cd75b0f
notifications-admin/app/assets/stylesheets/main.scss

91 lines
2.6 KiB
SCSS
Raw Normal View History

Updates to ‘send SMS’ page Based on discussion with Pete. Make the blue banner an ‘important’ banner (copied from Register to Vote, used because it’s not as boxy and fits on the page better). Remove the back button because you haven’t changed any data yet. If you need to go back you can just press back or start again. Make the filename stand out more. Remove the ‘download example’ link. Will need to revist the best way of doing this. Make text messages consistently 2/3rd width.
2016-02-04 12:20:24 +00:00
// Path to assets for use with file-url()
$path: '/static/images/';
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
// Dependencies from GOV.UK Frontend Toolkit
Add govuk-template-flask-skeleton
2015-11-23 13:50:37 +00:00
// https://github.com/alphagov/govuk_frontend_toolkit/
Install GOV.UK Elements + Frontend Toolkit w/ NPM Because: - GOV.UK elements is now published with a package.json that only install the SASS files (https://github.com/alphagov/govuk_elements/pull/156) - We can drop Git submodules, so one less dependency management tool This commit also changes the `gulpfile.js` and `main.scss` files to use the assets from `node_modules` rather than the Git submodules.
2016-01-14 15:53:19 +00:00
@import 'conditionals';
@import 'shims';
@import 'measurements';
@import 'css3';
@import 'colours';
@import 'typography';
@import 'grid_layout';
@import 'helpers';
Add govuk-template-flask-skeleton
2015-11-23 13:50:37 +00:00
Replace gulp-base64 with gulp-base64-inline The gulp-base64 package has 11 dependencies with vulnerabilities listed against them as of this time. It also doesn't seem to be maintained any more. The last commit was in 2015 and there are issues and pull requests up to bump the dependencies. This replaces it with gulp-base64-inline. gulp-base64-inline takes a single path, which it prepends to any image paths it finds. Our image paths are actually URLs, not filesystem paths so we need to send it a relative path to repoint the URL. This commit includes changes that remove a few `@import`s from one of our sass partials. They aren't needed as those files are imported further up the stack and `_typography.scss` has an import in it that overwrites the new `_url-helpers.scss` we added here.
2019-04-05 13:16:12 +01:00
// Dependencies from GOVU.UK Frontend Toolkit, rewritten for this application
@import 'url-helpers';
Move global CSS to top of cascade The global CSS we're keeping from the GOVUK Template styles needs to go in the same position as it was before, above GOVUK Elements. This means we can't use any variables from GOVUK Frontend in it so this changes the link colour back to what it was (until all links get updated).
2019-11-22 17:39:48 +00:00
// Specific to this application, needs to go at the top of the cascade
@import 'globals';
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
// Dependencies from GOV.UK Elements
Add govuk-template-flask-skeleton
2015-11-23 13:50:37 +00:00
// https://github.com/alphagov/govuk_elements
Install GOV.UK Elements + Frontend Toolkit w/ NPM Because: - GOV.UK elements is now published with a package.json that only install the SASS files (https://github.com/alphagov/govuk_elements/pull/156) - We can drop Git submodules, so one less dependency management tool This commit also changes the `gulpfile.js` and `main.scss` files to use the assets from `node_modules` rather than the Git submodules.
2016-01-14 15:53:19 +00:00
@import 'elements/helpers';
@import 'elements/reset';
@import 'elements/details';
@import 'elements/elements-typography';
@import 'elements/forms';
Change class names for validation errors in html Implements the class name changes detailed in: https://github.com/alphagov/govuk_elements/pull/405
2017-04-10 11:16:22 +01:00
@import 'elements/forms/form-multiple-choice';
Install GOV.UK Elements + Frontend Toolkit w/ NPM Because: - GOV.UK elements is now published with a package.json that only install the SASS files (https://github.com/alphagov/govuk_elements/pull/156) - We can drop Git submodules, so one less dependency management tool This commit also changes the `gulpfile.js` and `main.scss` files to use the assets from `node_modules` rather than the Git submodules.
2016-01-14 15:53:19 +00:00
@import 'elements/forms/form-validation';
@import 'elements/lists';
@import 'elements/panels';
@import 'elements/tables';
Create base forms for registration and sign in Created routes and forms for registration, sign in, and registration from an invite. Also tidied up assets folder, removed copy of fronted toolkit.
2015-11-25 16:21:28 +00:00
Add GOVUK Frontend Sass, configured for this app Like: https://github.com/alphagov/govuk-frontend/blob/v2.13.0/package/all.scss ...but specifying the components to include, starting with the ones that make up the govuk_template and setting any variables needed.
2019-10-09 12:48:59 +01:00
// Dependencies from GOV.UK Frontend, packaged to be specific to this application
@import './govuk-frontend/all';
Add big number component… …and count the messages to display some totals
2015-12-17 11:52:24 +00:00
try overriding default govuk-frontend font weight
2024-09-23 07:50:52 -07:00
// Custom overrides
.govuk-link {
font-weight: bold;
}
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
// Specific to this application
Add styles for destructive links This colour is used in a few places so worth making into its own block and classes. Note: this establishes a `app/assets/stylesheets/local` folder for any Sass files whose names clash with files from vendored libraries. `_typography.scss` already exists in GOV.UK Elements Sass. This will no longer be needed when GOV.UK Elements is gone and GOV.UK Frontend is at version 3, where all its folders are in a `govuk` folder.
2019-12-11 10:11:54 +00:00
@import 'local/typography';
Make navigation column 1/4 width
2015-12-17 10:18:31 +00:00
@import 'grids';
Fix alignment and spacing of page footer on mobile SASS pinched from here: https://github.com/alphagov/pay-product-page/blob/696ce451a74866ee01412628af894c9698019678/source/pay-product-page/stylesheets/modules/_footer-categories.scss
2017-07-12 15:22:52 +01:00
@import 'components/site-footer';
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
@import 'components/placeholder';
@import 'components/sms-message';
Rename `submit_form` component to `page_footer` Submit form was - a confusing name in itself - not descriptive, because it also has an optional ‘back’ link This commit also puts this component in as many pages as possible, stripping out any hard-coded buttons and links. It replaces any usage of buttons for ‘back’, because these are links, not buttons (ie they don’t change any data).
2016-01-07 20:11:22 +00:00
@import 'components/page-footer';
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
@import 'components/table';
@import 'components/navigation';
Add big number component… …and count the messages to display some totals
2015-12-17 11:52:24 +00:00
@import 'components/big-number';
Add a banner ✔
2015-12-17 14:05:35 +00:00
@import 'components/banner';
Enhance message textbox by styling placeholders Users can add placeholders to their messages, eg > …your vehicle ((registration number)) when the message is sent, this gets replaced with the data the user uploads, eg > …your vehicle LC12 BFL We reckon that it will be useful to see that the placeholder has been recognised, ie that its syntax is correct, before uploading any data. We reckon that the best way to do this is by styling it differently to the rest of the text that the user types. This is not a trivial problem. There are two possible ways to do it: 1 Write a Google Docs-style text rendering engine, which completely replaces the native HTML `<textarea>` with a custom control, and programme what should happen when the user types something that looks like a placeholder, or presses an arrow key, or makes a selection, or… 2 Leave the `<textarea>` in place, unmodified, and duplicate layers in front of/behind it to visually replace a placeholder with the blue lozenge Unsurprisingly, this commit implements 2. There are four layers. Each layer contains live-updated copy of the text in the textbox, and each is styled differently: - one layer behind the textbox to make the blue background - the textbox itself - a layer with the white text, which overlays the black text of the textbox - a layer with an inner shadow to knock back the brackets This is because of some interesting limitations: - The text in the foreground and background must occupy the same physical space, so no deleting characters from the duplicated layers - Words can’t be split up into multiple elements, eg `<span>((</span>regist…`:—this results in slightly different kerning to `((regis…`, which messes up the alignment of the layers - The textbox can’t be completely overlapped with a block of colour, because the cursor disappears behind it. Trying to edit text when you can’t see the cursor is hard. Implementation Technically this makes use of Paul Hayes work on Javascript modules in the GOV.UK frontend toolkit[1]. It also makes use of the `oninput` event to detect changes to the textbox’s contents. This is much more performant than `onkeydown`, `onpaste`, etc. Without it the delay between user input and the layers all updating is too slow and you see misalignment of the layers. 1. https://github.com/alphagov/govuk_frontend_toolkit/pull/227
2015-12-20 00:00:01 +00:00
@import 'components/textbox';
Add custom file upload component The default browser file upload control is difficult to style, but looks totally out of place. This commit replaces it with one that has a GOV.UK style button, as a first step. Based heavily on this example: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
2016-02-02 17:28:30 +00:00
@import 'components/file-upload';
Add pages for ‘service settings’ flow Adds the pages and wires them together, so that it’s possible to click through them. The wording is not quite English, but attempts to be an rough description of what the consequences are for each of the four actions.
2016-01-07 12:29:56 +00:00
@import 'components/browse-list';
Add a prototype email template If the templates page contains text messages and emails then there’s two ways it could be structured: - into two sections, all text messages first, then all emails - emails and text messages interleaved, sorted by date I think the second one is better. Imagine a situation where you mostly do emails but have a few text messages. You’d have to scroll past the text messages to get to your emails. Every time. I reckon that the most commonly accessed templates will be the most recent ones.
2016-01-13 16:27:54 +00:00
@import 'components/email-message';
rename api key component to copy_to_clipboard does what it says on the tin, and is also consistent with prior art: https://components.publishing.service.gov.uk/component-guide/copy_to_clipboard
2021-08-27 17:32:06 +01:00
@import 'components/copy-to-clipboard';
Don’t lint SCSS files that have come from outside 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
2016-04-13 12:50:13 +01:00
@import 'components/vendor/previous-next-navigation';
Reflect expanded scope of radio SASS file
2019-01-04 14:56:22 +00:00
@import 'components/radios';
Add checkboxes-nested CSS rules
2019-02-27 15:44:52 +00:00
@import 'components/checkboxes';
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
@import 'components/pill';
Make template usage on dashboard easier to scan The dashboard looked a bit table-y. This commit makes four main changes: - show a bar chart (drawn in CSS) for template usage (only shown if you’ve used more than one template recently) - only break down template usage by template name, not template type (because that’s happening with the big numbers) - change the style of the ‘show more’ links under each section so that they are all consistent, and a little less busy (one less keyline) - remove the ‘recent templates‘ title so that the first two sections of the page group under ‘in the last 7 days’
2016-05-11 15:05:40 +01:00
@import 'components/show-more';
Move parameters out of the `…_message` components This commit refactors the `email_message` and `sms_message` UI components to take fewer parameters. `name`, `edit_link` and anything to do with versions are identical for both text and email messages so I’ve moved them to the pages where you choose a template or see the versions. This commit also tidies up the wording and styling of the template history stuff.
2016-05-26 17:05:16 +01:00
@import 'components/message';
Platform admin: Highlight service in research mode Research mode trumps live. Copies the same style we use in the page footer.
2016-06-23 17:31:45 +01:00
@import 'components/research-mode';
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
@import 'components/tick-cross';
Add a page to manage a service’s whitelist Services who are in alpha or building prototypes need a way of sending to any email address or phone number without having to sign the MOU. This commit adds a page where they can whitelist up to 5 email addresses and 5 phone numbers. It uses the ‘list entry’ UI pattern from the Digital Marketplace frontend toolkit [1] [2] [3]. I had to do some modification: - of the Javascript, to make it work with the GOV.UK Module pattern - of the template to make it work with WTForms - of the content security policy, because the list entry pattern uses Hogan[1], which needs to use `eval()` (this should be fine if we’re only allowing it for scripts that we serve) - of our SASS lint config, to allow browser-targeting mixins to come after normal rules (so that they can override them) This commit also adds a new form class to validate and populate the two whitelists. The validation is fairly rudimentary at the moment, and doesn’t highlight which item in the list has the error, but it’s probably good enough. The list can only be updated all-at-once, this is how it’s possible to remove items from the list without having to make multiple `POST` requests. 1. https://github.com/alphagov/digitalmarketplace-frontend-toolkit/blob/434ad307913651ecb041ab94bdee748ebe066d1a/toolkit/templates/forms/list-entry.html 2. https://github.com/alphagov/digitalmarketplace-frontend-toolkit/blob/434ad307913651ecb041ab94bdee748ebe066d1a/toolkit/scss/forms/_list-entry.scss 3. https://github.com/alphagov/digitalmarketplace-frontend-toolkit/blob/434ad307913651ecb041ab94bdee748ebe066d1a/toolkit/javascripts/list-entry.js 4. http://twitter.github.io/hogan.js/
2016-09-20 12:30:00 +01:00
@import 'components/list-entry';
Add find-as-you-type on the choose template page Not everyone knows how to use `ctrl` + `f`, and it’s not scoped to just the list of templates. The template you want to work with is often not the first one in the list, but ordering by created at is useful for other reasons (mainly around first time use). This commit adds a find as you type control which aims to give users a quick way of getting to the template they want to work with.
2017-03-14 10:46:38 +00:00
@import 'components/live-search';
Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
@import 'components/stick-at-top-when-scrolling';
Go fullscreen for row-level errors in spreadsheets Two bits of context: 1. As we start dealing with letters, which have more columns, it’s more likely that people’s spreadsheets won’t fit in our current layout. 2. We already removed the view of the template from the page that shows row-level errors (eg bad phone number or missing personalisation) in spreadsheets because you don’t need to know about the content of the message in order to fix the errors. This commit goes further by removing anything that isn’t to do with the errors, including the normal GOV.UK header and the service’s navigation. This means the content can go the width of the page, which means it can be allowed to scroll horizontally without being a usability car crash. Which means that the layout doesn’t break with a spreadsheet that has lots of columns.
2017-10-29 22:18:46 +00:00
@import 'components/fullscreen-table';
Allow setting of caseworking on a user This commit changes the form that the user sees when inviting or editing another user, if the service has the ‘caseworking’ permission set. This will allow creating a new type of user, one who only has the `send_messages` permission, without the `view_activity` permission. We are doing this because we think there are a number of services with a lot of users who don’t need to see the dashboard, or the other team members, and that we can make a simpler interface for these users.
2018-06-12 14:29:47 +01:00
@import 'components/conditional-radios';
Add a breadcrumb to the product page This copies what the other GaaP components will be doing for their product pages. The SASS and HTML is taken from here: https://github.com/alphagov/product-page-example/blob/f05ca1fb71f16728bb7a52462b11a850420f36f0/source/stylesheets/modules/_breadcrumbs.scss Only changes I’ve made are: - making the file paths work with our build pipeline Changes to our code to accomodate this are: - putting the padding on the product page `<h1>` not its container - moving the hero image accordingly so that it lines up - making the `<main>` element on the product page into an anchor so that the breadcrumb can link to it – screenreader will then announce the link as “GOV.UK Notify, same page”
2017-01-19 14:52:54 +00:00
@import 'components/vendor/breadcrumbs';
Add introducer video to the product page It’s always been the plan to put this video on the product page. Just getting round to it now. Watch the video here: https://www.youtube.com/watch?v=i2a2jiwYTd4 Uses the CSS developed by the service manual team, taken from here: https://github.com/alphagov/product-page-example/blob/a5c613f07bca47a15f67c529615bc83995aea3b5/source/stylesheets/modules/_responsive-embed.scss
2017-01-23 16:25:11 +00:00
@import 'components/vendor/responsive-embed';
Rename 'email-branding-preview' CSS styles to 'branding-preview' Renamed since the same styling will be used for previewing letters.
2019-02-13 08:40:52 +00:00
@import 'components/preview-pane';
Use task list pattern for request to go live We’ve found a significant property of users (about 25%) who request to go live aren’t completing all the items on the checklist. In 1 of 6 (17%) of the usability testing sessions we did on this process we saw someone skip straight past the checklist page because of big green button syndrome. While 1 in 6 people would normally be a small number[1] in the context of a usability testing session, it’s enough to cause a big workload for our team (assuming it is the sole cause of people not completing the items on the checklist). The initial reason for using the tick cross pattern for the checklist was: - it was coherent with the rest of Notify - the task list pattern didn’t have a way of showing that something still needed doing – it put more visual emphasis on the things the user had already done There’s been some interesting discussion on the GOV.UK Design System backlog about users failing to complete items in the task list. A few people have tried different patterns for communicating that items in the task list still need ‘completing’. So this commit: - adds a task list pattern - uses the task list pattern for the request to go live checklist The task list is adapted from the one in the design system in that: - the ‘completed’ label has a black, not blue background (because Notify often uses blocks of blue to indicate something that’s clickable) - it adds an explicit ‘not complete’ label which is visually not filled in (sort of how ticked/unticket radio buttons work) 1. With the caveat that looking only at task completion, or quantifying qualitative not good practices and the intention here is to show that the numbers are close enough to say that they could be symptomatic of the same problem. Leisa Reichelt’s Mind the Product talk is good on this https://vimeo.com/284015765
2018-08-23 14:15:16 +01:00
@import 'components/task-list';
Add a loading indicator component This will let us design a page which tells the user they need to wait.
2019-05-15 15:29:47 +01:00
@import 'components/loading-indicator';
Style the area labels and polygons Gives them some colours, borders and stuff to make them visually consistent with the rest of Notify. The idea is the tags and polygons have a similar affordances (i.e. border thickness, colour) to visually link them and imply that they are two representations of the same thing.
2020-07-06 10:53:15 +01:00
@import 'components/area-list';
Add styles and Jinja for component Most of these are cut-and-paste'd from the GOVUK metadata component: https://components.publishing.service.gov.uk/component-guide/metadata ...but stripped back to only include what we need and a optional suffix paragraph added. Links to styles and ERB template https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss https://github.com/alphagov/govuk_publishing_components/blob/master/app/views/govuk_publishing_components/components/_metadata.html.erb Also adds it to the accessibility statement as an example and updates the test that checks any updates bump the date.
2022-01-05 11:53:09 +00:00
@import 'components/content-metadata';
Add big number component… …and count the messages to display some totals
2015-12-17 11:52:24 +00:00
Add usage to the dashboard Takes the number of emails and SMS fragments sent from: https://github.com/alphagov/notifications-api/pull/273 Using these numbers it’s possible to show: - how much of your allowance is left - or how much you have spent For now the allowance and rates are hard coded. Only for users that have manage service.
2016-04-20 15:37:17 +01:00
@import 'views/dashboard';
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
@import 'views/users';
Add log of notifications to API integration page Now that we’ve removed simulated notifications from the dashboard and activity pages they’re not visible anywhere in the app. While they should’t be visible to non-technical users, developers have a real need for Notify to confirm that their code is doing what they expect. This is needed especially when they’re just getting started with Notify. There’s no way of seeing this info from the API either, because a key can only get notifications created with a key of that type. It doesn’t make sense to make this a ‘mode’ of the dashboard or activity because the information about notifications that developers need is also different. So this commit adds up to 50 of the most recent notifications sent via the API to the page that developers use as their ‘home’ page. This also lets us explain the 7 days thing to developers via the empty slate state of this area of the page.
2016-09-21 10:13:25 +01:00
@import 'views/api';
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
@import 'views/product-page';
Add multiple ‘edit’ links for letter templates Letter templates have (or will have) multiple different editable regions. I think that the most intuitive way for this to work is to have - an edit link for each of these areas - positioned next to the thing to be edited Again, this isn’t fully hooked up, but since no-one is using letters live yet this is a good way of getting research feedback and pointing towards where we want the feature to go. Uses percentages for the positioning so that the alignment is maintained on mobile.
2017-03-13 10:55:15 +00:00
@import 'views/template';
Revert "Merge pull request #1336 from alphagov/revert-show-notifications" This reverts commit 7e354ff341172041d6141b50833af6262308fcb4, reversing changes made to 6f3bcff32fbfc78b4df0558d08605a260786112f.
2017-06-24 17:12:45 +01:00
@import 'views/notification';
Fix spacing on upload link when not inside sticky We adjust the spacing under the textbox when doing the send one off flow. This was based on the assumption that there would always be a sticky header in the send one off flow. This assumption is no longer true, so this commit implements the same spacing in an independent way.
2018-12-07 11:41:11 +00:00
@import 'views/send';
Style the page to look like the Pay one
2019-10-31 09:57:56 +00:00
@import 'views/get_started';
Chunk events by day Scanning the page is difficult at the moment because it’s hard to tell how far apart in time events are, and thereby determine which events might be related. Grouping the events by day quickly lets users narrow their focus to a meaningful subset of the events.
2019-10-18 16:43:52 +01:00
@import 'views/history';
Improvements to send SMS page - make messages align horizontally - change wording of step 2 (from Lorena)
2015-12-11 14:20:44 +00:00
Replace CSV preview with rendered messages If there are less than 7 messages, show them all. If there are more than 7, show the first and last three, and a link to the remaining x.
2015-12-11 13:52:58 +00:00
// TODO: break this up
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
@import 'app';
Reference in New Issue Copy Permalink