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
3944c67a0ad3d0fcb44b669ecc2610c3e7bdd504
notifications-admin/app/assets/stylesheets/components/sms-message.scss

83 lines
1.2 KiB
SCSS
Raw Normal View History

Put message previews on ‘Send SMS’ page A previous commit removed these to differentiate between this page and the manage templates page. It turns out that we do want previews on this page because: - the users for the two pages might be different—they might only be allowed to do one or the other depending what permissions they have - it’s useful to see what the placeholders in the message are before uploading a CSV, to make sure the CSV has the correct column headings This commit re-adds the message preview with a simpler UI. Discussed with @antimega and we both agreed that the speech bubble tails on the messages should go.
2016-01-20 10:36:41 +00:00
%sms-message-wrapper,
.sms-message-wrapper {
Respect linebreaks in templates If a user puts a linebreak in an SMS template then the recipient will see these linebreaks on their phone. So when we show a preview of an SMS template, it should have linebreaks in it.
2016-04-11 10:51:32 +01:00
Put message previews on ‘Send SMS’ page A previous commit removed these to differentiate between this page and the manage templates page. It turns out that we do want previews on this page because: - the users for the two pages might be different—they might only be allowed to do one or the other depending what permissions they have - it’s useful to see what the placeholders in the message are before uploading a CSV, to make sure the CSV has the correct column headings This commit re-adds the message preview with a simpler UI. Discussed with @antimega and we both agreed that the speech bubble tails on the messages should go.
2016-01-20 10:36:41 +00:00
width: 100%;
box-sizing: border-box;
Fix problems found by SASS Lint
2016-02-08 11:11:55 +00:00
padding: $gutter-half;
Put message previews on ‘Send SMS’ page A previous commit removed these to differentiate between this page and the manage templates page. It turns out that we do want previews on this page because: - the users for the two pages might be different—they might only be allowed to do one or the other depending what permissions they have - it’s useful to see what the placeholders in the message are before uploading a CSV, to make sure the CSV has the correct column headings This commit re-adds the message preview with a simpler UI. Discussed with @antimega and we both agreed that the speech bubble tails on the messages should go.
2016-01-20 10:36:41 +00:00
background: $panel-colour;
border: 1px solid $panel-colour;
border-radius: 5px;
white-space: normal;
margin: 0 0 $gutter 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;
Wrap long words in SMS template previews If you put, for example, a URL in an SMS template it can be very long. This can cause it to overflow its container. This commit forces it to wrap instead. Related: https://github.com/alphagov/notifications-admin/pull/439
2016-04-15 15:11:44 +01:00
word-wrap: break-word;
Respect linebreaks in templates If a user puts a linebreak in an SMS template then the recipient will see these linebreaks on their phone. So when we show a preview of an SMS template, it should have linebreaks in it.
2016-04-11 10:51:32 +01:00
p {
margin: 0;
}
p + p {
margin-top: 20px;
}
Put message previews on ‘Send SMS’ page A previous commit removed these to differentiate between this page and the manage templates page. It turns out that we do want previews on this page because: - the users for the two pages might be different—they might only be allowed to do one or the other depending what permissions they have - it’s useful to see what the placeholders in the message are before uploading a CSV, to make sure the CSV has the correct column headings This commit re-adds the message preview with a simpler UI. Discussed with @antimega and we both agreed that the speech bubble tails on the messages should go.
2016-01-20 10:36:41 +00:00
}
Hard code some data in the Python This commit adds some stubbed data for the pages. The structure of the data is just a proposal, but it gives the templates something to work with for now.
2015-12-10 16:48:07 +00:00
Put message previews on ‘Send SMS’ page A previous commit removed these to differentiate between this page and the manage templates page. It turns out that we do want previews on this page because: - the users for the two pages might be different—they might only be allowed to do one or the other depending what permissions they have - it’s useful to see what the placeholders in the message are before uploading a CSV, to make sure the CSV has the correct column headings This commit re-adds the message preview with a simpler UI. Discussed with @antimega and we both agreed that the speech bubble tails on the messages should go.
2016-01-20 10:36:41 +00:00
.sms-message-wrapper-with-radio {
@extend %sms-message-wrapper;
padding-left: 45px;
cursor: pointer;
}
.sms-message-recipient {
@include copy-19;
color: $secondary-text-colour;
Add recipient to message previews When previewing a template on the send page, having the recipient appear as a placeholder should help reinforce the relationship between the columns in the CSV and the placeholders. Then, when previewing a message, having the template populated with the first recipient’s email address/phone number should reinforce that relationship again.
2016-05-05 08:38:55 +01:00
margin: 10px 0 5px 0;
Put message previews on ‘Send SMS’ page A previous commit removed these to differentiate between this page and the manage templates page. It turns out that we do want previews on this page because: - the users for the two pages might be different—they might only be allowed to do one or the other depending what permissions they have - it’s useful to see what the placeholders in the message are before uploading a CSV, to make sure the CSV has the correct column headings This commit re-adds the message preview with a simpler UI. Discussed with @antimega and we both agreed that the speech bubble tails on the messages should go.
2016-01-20 10:36:41 +00:00
}
.sms-message-name {
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
@include bold-24;
Make first page of ‘send texts’ use links not form This doesn’t need to be a form—it’s not changing any data. And having the primary action on the page as ‘Use this template’ it makes it clear what the page is for.
2016-02-04 14:02:16 +00:00
margin: 20px 0 10px 0;
Put message previews on ‘Send SMS’ page A previous commit removed these to differentiate between this page and the manage templates page. It turns out that we do want previews on this page because: - the users for the two pages might be different—they might only be allowed to do one or the other depending what permissions they have - it’s useful to see what the placeholders in the message are before uploading a CSV, to make sure the CSV has the correct column headings This commit re-adds the message preview with a simpler UI. Discussed with @antimega and we both agreed that the speech bubble tails on the messages should go.
2016-01-20 10:36:41 +00:00
}
.sms-message-picker {
display: block;
margin: 7px 0 0 0;
position: absolute;
left: 15px;
top: 50%;
z-index: 50;
}
Add view for a single template > At the moment, we have an all email templates page, and an edit an > individual page. > > This gets messy when we refer to templates like the dashboard and the > activity views. We solve this currently by using anchor links to the > list page, but this is clunky. > > So lets add it, then update the links on the dash and activity to the > new view page. > > Should be a link from the view a single template page, to the template > hub page. https://www.pivotaltracker.com/story/show/117349227
2016-04-12 09:55:51 +01:00
%sms-message-use-links,
Add flow for sending yourself a text message This commit adds a shortcut, which (in the background) does the creation and uploading of a CSV file for you. This enables users to send themselves a test message without having to fiddle about with CSV files.
2016-02-12 10:55:21 +00:00
.sms-message-use-links {
@include copy-19;
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
margin-top: -5px;
Add flow for sending yourself a text message This commit adds a shortcut, which (in the background) does the creation and uploading of a CSV file for you. This enables users to send themselves a test message without having to fiddle about with CSV files.
2016-02-12 10:55:21 +00:00
a {
display: block;
margin-bottom: 5px;
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
text-decoration: none;
&:hover {
text-decoration: underline;
}
Add flow for sending yourself a text message This commit adds a shortcut, which (in the background) does the creation and uploading of a CSV file for you. This enables users to send themselves a test message without having to fiddle about with CSV files.
2016-02-12 10:55:21 +00:00
}
Make ‘send emails/text messages’ link bold It: - makes this whole block of links slightly more prominent - reinforces that ‘send’ is the primary action
2016-05-04 21:24:02 +01:00
.primary {
@include bold-19;
}
Make first page of ‘send texts’ use links not form This doesn’t need to be a form—it’s not changing any data. And having the primary action on the page as ‘Use this template’ it makes it clear what the page is for.
2016-02-04 14:02:16 +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
Add view for a single template > At the moment, we have an all email templates page, and an edit an > individual page. > > This gets messy when we refer to templates like the dashboard and the > activity views. We solve this currently by using anchor links to the > list page, but this is clunky. > > So lets add it, then update the links on the dash and activity to the > new view page. > > Should be a link from the view a single template page, to the template > hub page. https://www.pivotaltracker.com/story/show/117349227
2016-04-12 09:55:51 +01:00
.sms-message-use-links-with-title {
@extend %sms-message-use-links;
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
margin-top: 55px;
Add view for a single template > At the moment, we have an all email templates page, and an edit an > individual page. > > This gets messy when we refer to templates like the dashboard and the > activity views. We solve this currently by using anchor links to the > list page, but this is clunky. > > So lets add it, then update the links on the dash and activity to the > new view page. > > Should be a link from the view a single template page, to the template > hub page. https://www.pivotaltracker.com/story/show/117349227
2016-04-12 09:55:51 +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
.sms-message-from {
@include bold-19;
display: block;
}
Reference in New Issue Copy Permalink