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

53 lines
2.2 KiB
SCSS
Raw Normal View History

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/
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 '../govuk_frontend_toolkit/stylesheets/conditionals';
@import '../govuk_frontend_toolkit/stylesheets/shims';
@import '../govuk_frontend_toolkit/stylesheets/measurements';
@import '../govuk_frontend_toolkit/stylesheets/css3';
@import '../govuk_frontend_toolkit/stylesheets/colours';
@import '../govuk_frontend_toolkit/stylesheets/typography';
@import '../govuk_frontend_toolkit/stylesheets/grid_layout';
@import '../govuk_frontend_toolkit/stylesheets/helpers';
@import '../govuk_frontend_toolkit/stylesheets/url-helpers';
@import '../govuk_frontend_toolkit/stylesheets/design-patterns/buttons';
@import '../govuk_frontend_toolkit/stylesheets/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
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 '../govuk_elements/public/sass/elements/helpers';
@import '../govuk_elements/public/sass/elements/reset';
@import '../govuk_elements/public/sass/elements/buttons';
@import '../govuk_elements/public/sass/elements/details';
@import '../govuk_elements/public/sass/elements/elements-typography';
@import '../govuk_elements/public/sass/elements/forms';
Implementation of the new_password endpoint. Found a way to create the token that does not need to persist it to the database. This requires proper error messages, written by people who speak menglis good.
2016-01-07 17:13:49 +00:00
@import '../govuk_elements/public/sass/elements/forms/form-validation';
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 '../govuk_elements/public/sass/elements/forms/form-block-labels';
Add a WTForms-compatible textbox macro This macro: - accepts a WTForm form field as a parameter - renders a form field which follows the GOV.UK Elements patterns, both visually and in markup terms It then changes any page which uses either: - the old, non-WTForms macro or - the old, WTFforms `render_field` macro …to use this new macro and removes both of the old ones. It also adds the option to display hint text above the textbox.
2016-01-11 13:15:10 +00:00
@import '../govuk_elements/public/sass/elements/forms/form-validation';
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 '../govuk_elements/public/sass/elements/icons';
@import '../govuk_elements/public/sass/elements/layout';
@import '../govuk_elements/public/sass/elements/lists';
@import '../govuk_elements/public/sass/elements/panels';
@import '../govuk_elements/public/sass/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/template-picker';
@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 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 progressive enhancement to service switcher - by default, the menu is open - if Javascript is enabled/loaded, the links are hidden, and visual cues (▶) to show that it can be opened are added - clicking it opens and closes it
2016-01-11 16:23:34 +00:00
@import 'components/management-navigation';
@import 'components/dropdown';
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 big number component… …and count the messages to display some totals
2015-12-17 11:52:24 +00:00
@import 'views/job';
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