darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-04 22:48:26 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
b68b97943bfe3457d99697b7b73ebd05bc00fd40
notifications-admin/app/assets/stylesheets/views/template.scss

38 lines
559 B
SCSS
Raw Normal View History

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
.template-container {
position: relative;
}
%edit-template-link,
.edit-template-link {
@include core-19;
position: absolute;
background: $link-colour;
color: $white;
Replace $gutter with govuk-spacing function Replaced `$gutter` and similar variables such as `$gutter-half` with the `govuk-spacing()` static spacing function. This uses `govuk-spacing()` instead of `$govuk-gutter` because `$govuk-gutter` should only be used for the gaps in between grid columns and we were mostly using `$gutter` to add more space around elements. There are other places in the SCSS files where we had hardcoded a measurement in px which could be replaced with `govuk-spacing`, but this commit only replaces the existing uses of `$gutter`.
2020-02-21 13:21:44 +00:00
padding: 10px govuk-spacing(3);
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
z-index: 10000;
&:link, &:visited {
color: $white;
}
&:hover {
color: $light-blue-25;
}
Fix the focus colour on edit template links Since the focus background colour is now Design System yellow, the text should be black for sufficent contrast. This wasn’t happening because the `:link` selector’s definition had greater specificity.
2020-11-11 14:58:21 +00:00
&:focus {
color: $govuk-text-colour;
}
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
}
Style template length message to sit inline This looks tidy, and because of the sticky footer it means the message is always visible, even if your template is quite long. So no matter where you’re scrolled to in the template you don’t have to scroll to the bottom to see the count update.
2021-01-06 17:38:44 +00:00
.template-content-count {
@include core-19($tabular-numbers: true);
color: $secondary-text-colour;
Stop content length message from making page jumpy The content length message was making the page jumpy and causing reflows in three ways. This commit addresses each of those ways: As the user scrolled --- The footer went from fixed to sticky and the spacing around the message changed. This change in spacing was needed so that the message looked right in both contexts. I think the best way to resolve this is to not use the sticky footer when editing text message or broadcast templates. On my 1440×900 screen I can fit a 5 fragment text message, plus the ‘will be charged as 5 text messages’ message, plus the save button. Our top 10 screen resolutions according to our analytics are: Position | Resolution | Percentage of users ---------|------------|-------------------- 1 | 1920x1080 | 27.37% 2 | 1280×720 | 11.07% 3 | 1366×768 | 8.88% 4 | 1536×864 | 5.79% 5 | 1440×900 | 4.52% 6 | 1600×900 | 3.71% 7 | 1280×1024 | 3.10% 8 | 1680×1050 | 2.42% 9 | 1920×1200 | 2.33% 10 | 2560×1440 | 1.99% When the page first loaded --- The message is empty so takes up no space, then the javascript fires and inserts the message, taking up a line of space. This is resolved by making the empty message take up space with a non-breaking space character. When the user first typed --- We previously didn’t show any message until the user started typing. This meant that, with the above fix, there was a larger than normal empty space between the textarea and the save button. This is resolved by always showing the message, even when the user hasn’t typed anything yet. *** These are design decisions which made sense when the message was displayed along side the button, but we’ve had to change now that the message is above the button.
2021-01-08 15:23:54 +00:00
padding: 0 0 govuk-spacing(6) 0;
Move message length information before the button We feel that this is more appropriate because it’s part of the information you’re agreeing to before you hit submit. Sometimes users can missing information that doesn’t start left-aligned to the column they’re interacting with. It also makes it closer to the Design System component. We’re keeping it in the sticky footer, so that it’s always visible no matter where in the message you’re scrolled to (this means you won’t have to edited to content then scroll down to check whether you’ve made it fit).
2021-01-08 13:49:18 +00:00
Style template length message to sit inline This looks tidy, and because of the sticky footer it means the message is always visible, even if your template is quite long. So no matter where you’re scrolled to in the template you don’t have to scroll to the bottom to see the count update.
2021-01-06 17:38:44 +00:00
& .govuk-error-message {
Stop content length message from making page jumpy The content length message was making the page jumpy and causing reflows in three ways. This commit addresses each of those ways: As the user scrolled --- The footer went from fixed to sticky and the spacing around the message changed. This change in spacing was needed so that the message looked right in both contexts. I think the best way to resolve this is to not use the sticky footer when editing text message or broadcast templates. On my 1440×900 screen I can fit a 5 fragment text message, plus the ‘will be charged as 5 text messages’ message, plus the save button. Our top 10 screen resolutions according to our analytics are: Position | Resolution | Percentage of users ---------|------------|-------------------- 1 | 1920x1080 | 27.37% 2 | 1280×720 | 11.07% 3 | 1366×768 | 8.88% 4 | 1536×864 | 5.79% 5 | 1440×900 | 4.52% 6 | 1600×900 | 3.71% 7 | 1280×1024 | 3.10% 8 | 1680×1050 | 2.42% 9 | 1920×1200 | 2.33% 10 | 2560×1440 | 1.99% When the page first loaded --- The message is empty so takes up no space, then the javascript fires and inserts the message, taking up a line of space. This is resolved by making the empty message take up space with a non-breaking space character. When the user first typed --- We previously didn’t show any message until the user started typing. This meant that, with the above fix, there was a larger than normal empty space between the textarea and the save button. This is resolved by always showing the message, even when the user hasn’t typed anything yet. *** These are design decisions which made sense when the message was displayed along side the button, but we’ve had to change now that the message is above the button.
2021-01-08 15:23:54 +00:00
margin: 0;
Style template length message to sit inline This looks tidy, and because of the sticky footer it means the message is always visible, even if your template is quite long. So no matter where you’re scrolled to in the template you don’t have to scroll to the bottom to see the count update.
2021-01-06 17:38:44 +00:00
}
}
Reference in New Issue Copy Permalink