darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-02 17:48:50 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
d46120698bca8900cd6b45f17405e2eb783699ef
notifications-admin/app/assets/stylesheets/components/email-message.scss

76 lines
1.2 KiB
SCSS
Raw Normal View History

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
$white-50-opaque: rgba($white, 0.5);
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
$button-bottom-border-colour: rgba(0, 0, 0, 0.17);
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
$email-message-gutter: govuk-spacing(9);
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
Updated email preview to mimic sent emails
2018-01-10 16:00:11 +00:00
// sass-lint:disable no-important
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
.email-message {
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
margin-bottom: govuk-spacing(6);
Add a border around the email template The email looks a lot like the normal content of a page (black on white text, same font, rendered by the browser). It needed differentiating visually. This commit adds a border and spacing around the email to separate it from the things on the page that you’re supposed to be interacting with.
2017-03-10 17:00:13 +00:00
border: 1px solid $border-colour;
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
Make email pattern work in new context The email pattern looked a bit shonky when displayed in a narrower column. This commit fixes it by making the email’s metadata (eg subject, from) into a table, which it sort of is. This means that it is more flexible about the size of container in which it sits.
2016-02-23 14:58:49 +00:00
&-meta {
@include core-19;
margin: 0;
td,
th {
@include core-19;
Add a border around the email template The email looks a lot like the normal content of a page (black on white text, same font, rendered by the browser). It needed differentiating visually. This commit adds a border and spacing around the email to separate it from the things on the page that you’re supposed to be interacting with.
2017-03-10 17:00:13 +00:00
border-top: 0;
border-bottom: 1px solid $border-colour;
Fix bug which prevented viewing an email job The template for viewing a job was not getting all the variables it needed in order to display an email template. Hadn’t noticed this before, because email templates require more variables than SMS templates. This commit fixes that bug.
2016-03-09 12:18:11 +00:00
vertical-align: top;
Make email pattern work in new context The email pattern looked a bit shonky when displayed in a narrower column. This commit fixes it by making the email’s metadata (eg subject, from) into a table, which it sort of is. This means that it is more flexible about the size of container in which it sits.
2016-02-23 14:58:49 +00:00
}
th {
color: $secondary-text-colour;
Add a border around the email template The email looks a lot like the normal content of a page (black on white text, same font, rendered by the browser). It needed differentiating visually. This commit adds a border and spacing around the email to separate it from the things on the page that you’re supposed to be interacting with.
2017-03-10 17:00:13 +00:00
padding-left: $email-message-gutter;
Make email pattern work in new context The email pattern looked a bit shonky when displayed in a narrower column. This commit fixes it by making the email’s metadata (eg subject, from) into a table, which it sort of is. This means that it is more flexible about the size of container in which it sits.
2016-02-23 14:58:49 +00:00
}
td {
Fix overridden padding on email subject Something in a new version of GOV.UK Elements, Template, or Frontend Toolkit has introduced a rules which removes padding for the last column in a table. This is undesirable in the case of email message previews.
2017-09-28 10:45:47 +01:00
Make email pattern work in new context The email pattern looked a bit shonky when displayed in a narrower column. This commit fixes it by making the email’s metadata (eg subject, from) into a table, which it sort of is. This means that it is more flexible about the size of container in which it sits.
2016-02-23 14:58:49 +00:00
width: 99%;
Add a border around the email template The email looks a lot like the normal content of a page (black on white text, same font, rendered by the browser). It needed differentiating visually. This commit adds a border and spacing around the email to separate it from the things on the page that you’re supposed to be interacting with.
2017-03-10 17:00:13 +00:00
padding-right: $email-message-gutter;
Make meta email preview meta info wrap nicely Because the email addresses can get pretty long, and have no spaces in them, they sometimes break out of their containing box. This looks messy and causes horizontal scrolling.
2017-05-03 15:12:25 +01:00
word-break: break-word;
Fix overridden padding on email subject Something in a new version of GOV.UK Elements, Template, or Frontend Toolkit has introduced a rules which removes padding for the last column in a table. This is undesirable in the case of email message previews.
2017-09-28 10:45:47 +01:00
Update email-message.scss Got my first and last mixed up…
2017-09-28 16:15:48 +01:00
&:last-child {
Fix overridden padding on email subject Something in a new version of GOV.UK Elements, Template, or Frontend Toolkit has introduced a rules which removes padding for the last column in a table. This is undesirable in the case of email message previews.
2017-09-28 10:45:47 +01:00
padding-right: $email-message-gutter;
}
Make email pattern work in new context The email pattern looked a bit shonky when displayed in a narrower column. This commit fixes it by making the email’s metadata (eg subject, from) into a table, which it sort of is. This means that it is more flexible about the size of container in which it sits.
2016-02-23 14:58:49 +00:00
}
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
}
Preview service name when adding a new service This commit adds a new page, which appears after a user enters the name for their new service. It shows how the service name will appear in emails and text messages. This means that the new service is not created until after they have confirmed that the name is appropriate in context. This has also involved: - visual changes to the ‘email template’ pattern, which wasn’t very refined before - removing a bunch of words from the enter service name page, because most users don’t read them, and we reckon that showing a preview is a better way of getting them to understand what is meant by service name Still to do: - validating the the generated email address for a service is unique (on the API) side - having the API return the generated email address, rather than determining it in the admin app
2016-02-18 14:54:59 +00:00
&-from {
padding-top: 15px;
}
&-body {
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
Preview service name when adding a new service This commit adds a new page, which appears after a user enters the name for their new service. It shows how the service name will appear in emails and text messages. This means that the new service is not created until after they have confirmed that the name is appropriate in context. This has also involved: - visual changes to the ‘email template’ pattern, which wasn’t very refined before - removing a bunch of words from the enter service name page, because most users don’t read them, and we reckon that showing a preview is a better way of getting them to understand what is meant by service name Still to do: - validating the the generated email address for a service is unique (on the API) side - having the API return the generated email address, rather than determining it in the admin app
2016-02-18 14:54:59 +00:00
width: 100%;
box-sizing: border-box;
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: govuk-spacing(3) $email-message-gutter 0 $email-message-gutter;
Add a border around the email template The email looks a lot like the normal content of a page (black on white text, same font, rendered by the browser). It needed differentiating visually. This commit adds a border and spacing around the email to separate it from the things on the page that you’re supposed to be interacting with.
2017-03-10 17:00:13 +00:00
margin: 0 0 0 0;
Preview service name when adding a new service This commit adds a new page, which appears after a user enters the name for their new service. It shows how the service name will appear in emails and text messages. This means that the new service is not created until after they have confirmed that the name is appropriate in context. This has also involved: - visual changes to the ‘email template’ pattern, which wasn’t very refined before - removing a bunch of words from the enter service name page, because most users don’t read them, and we reckon that showing a preview is a better way of getting them to understand what is meant by service name Still to do: - validating the the generated email address for a service is unique (on the API) side - having the API return the generated email address, rather than determining it in the admin app
2016-02-18 14:54:59 +00:00
clear: both;
Truncate previews of email messages to ~3 lines Emails can get very long. When you’re trying to do other things on the page this results in a lot of scrolling. This commit truncates email messages to about 3 lines, and adds a JS toggle which reveal the full contents of the email.
2016-04-11 15:16:41 +01:00
position: relative;
Wrap long words in email template previews If you put, for example, a URL in an email template it can be very long. This can cause it to overflow its container. This commit forces it to wrap instead.
2016-04-13 14:59:19 +01:00
word-wrap: break-word;
Truncate previews of email messages to ~3 lines Emails can get very long. When you’re trying to do other things on the page this results in a lot of scrolling. This commit truncates email messages to about 3 lines, and adds a JS toggle which reveal the full contents of the email.
2016-04-11 15:16:41 +01:00
Updated email preview to mimic sent emails
2018-01-10 16:00:11 +00:00
table {
margin: 0 0 20px 0;
td {
border: 0;
padding: 0;
font-family: inherit !important;
}
li:first-child {
margin-top: 0 !important;
}
}
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
}
}
Reference in New Issue Copy Permalink