darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2025-12-10 07:03:12 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
3e42042156ab46311c3c3cecb953099a373caae8
notifications-admin/app/assets/stylesheets/main.scss

70 lines
1.9 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';
@import 'url-helpers';
@import 'design-patterns/buttons';
@import 'design-patterns/alpha-beta';
Add govuk-template-flask-skeleton
2015-11-23 13:50:37 +00:00
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/buttons';
@import 'elements/details';
@import 'elements/elements-typography';
@import 'elements/forms';
@import 'elements/forms/form-validation';
@import 'elements/forms/form-block-labels';
@import 'elements/forms/form-validation';
@import 'elements/icons';
@import 'elements/layout';
@import 'elements/lists';
@import 'elements/panels';
Add beta banner to homepage Because the homepage of the app is discoverable to the public, it makes “gives the wrong impression” for it not to have a beta banner.
2016-07-28 09:05:10 +01:00
@import 'elements/phase-banner';
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/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 big number component… …and count the messages to display some totals
2015-12-17 11:52:24 +00:00
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
Make navigation column 1/4 width
2015-12-17 10:18:31 +00:00
@import 'grids';
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';
Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else.
2016-01-15 10:50:10 +00:00
@import 'components/api-key';
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';
Add a component for picking the time to send a job Users need to pick a time in the next 24hrs, or send a file immediately. Rationale for this is a bit lost in time-before-holiday, but generally: ‘Now’ and ‘later’ as the inital choices makes it really clear what this feature is about conceptually. The choice of times is absolute, eg ‘1pm’ not ‘in 3 hours’
2016-08-07 09:17:49 +01:00
@import 'components/radio-select';
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 the flow of using templates better 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
2016-04-18 11:10:47 +01:00
@import 'components/secondary-button';
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';
Make it clearer what Notify is for from homepage Uses some graphic design to communicate what Notify is: - for sending messages to lots of people - messages can be personalised
2016-06-03 16:55:59 +01:00
@import 'components/phone';
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 big number component… …and count the messages to display some totals
2015-12-17 11:52:24 +00:00
@import 'views/job';
Add a hint about how to use placeholders 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.
2016-02-18 07:44:50 +00:00
@import 'views/edit-template';
Add some basic typography, tweak the Markdown This commit adds some basic type sizes, weights and spacing for HTML elements scoped inside a `.documentation` container. It also tweaks some of the Markdown so that it renders the same as it does on Github.
2016-04-15 10:56:47 +01:00
@import 'views/documenation';
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';
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