darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-25 00:33:58 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
fce4082ffffebfde2809dd47992b7ddaab986a2d
notifications-admin/app/assets/stylesheets/views/template.scss

68 lines
1.3 KiB
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
}
.edit-template-link-letter-contact {
@extend %edit-template-link;
right: -25px;
Move ‘edit’ contact block link button The contact block fills from the bottom upwards. So if it only has a few lines then the ‘Edit’ link button sits quite far away from where the text appears in the letter. This commit moves the link button to bottom align with the contact block, so it’s always in close visual proximity.
2019-02-05 15:31:26 +00:00
top: 232px; // align to bottom of contact block
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
}
.edit-template-link-letter-address {
@extend %edit-template-link;
Fix alignment of edit letter links Not sure how these got out of line (maybe when we brought the date into the left-hand text area). But this commit updates the percentages to match the comments. This is so it’s clear from the position of the link which part of the letter you’re editing.
2017-04-10 09:28:23 +01:00
top: 14.65%; // align bottom edge to bottom of address
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
left: -5px;
}
.edit-template-link-letter-body {
@extend %edit-template-link;
Make position of letter edit links absolute Previously they were relative (ie percentages). This made sure that they worked on mobile, when the letter might be narrower. However it broke when the preview was more than one page, because 13% of the height of 2 pages is different to 13% of the height of one pages. This commit changes the positions to be pixel values, which match the calculated percentage values when the preview is one page.
2017-04-25 16:01:14 +01:00
top: 400px; // aligns to top of subject
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
left: -5px;
}
Add link to edit postage to view_template page
2019-01-29 16:12:54 +00:00
.edit-template-link-letter-postage {
@extend %edit-template-link;
Move ‘change postage’ link So it aligns with how we’re displaying postage on the template.
2019-02-05 15:33:08 +00:00
top: 51px; // aligns bottom edge to bottom of postmark
right: 145px; // Aligns right edge to midpoint of postmark and fold
Add link to edit postage to view_template page
2019-01-29 16:12:54 +00:00
}
Add an ‘add logo’ button Because some people don’t know they can put their own logo on letters: > The HM Government Logo is at the top of the letter and we can't see > a way of putting the [organisation] logo on > We are intending to use the letter template feature for the first time > and wondered whether the branding is configurable or whether the HM > Government header is the standard default. > Can we replace HM Government logo with our own in the letter? IF yes, > then how? > I don't seem to be able to set the branding on the letters to be > [organisation]. it's always HM government. Is there something that > needs enabling for this account? No-one actually wants the HM Government logo (no-one is sending real letters using it). So we should leave the space blank and put a button there prompting people to add their own logo.
2019-01-23 10:16:43 +00:00
.edit-template-link-letter-branding {
@extend %edit-template-link;
top: 51px; // aligns with ‘change postage’ link
left: 66px; // Aligns to left of logo area
}
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