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

57 lines
862 B
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%;
Move code for rendering messages/templates → utils Utils is better structured to handle the logic of what thing to show for what template type, especially now that what we show for different template types in different contexts has diverged significantly. See https://github.com/alphagov/notifications-utils/commit/6b39c1a for an example of this code moving into utils Depends on and implements: https://github.com/alphagov/notifications-utils/pull/84 The main reason for doing this is to get Paul’s fix for the misaligned CSV columns: https://github.com/alphagov/notifications-utils/pull/87
2016-12-05 11:51:19 +00:00
max-width: 410px;
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
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;
Make the tour interactive _The code for this is quite hacky and light on tests. But I’d really like to get it in the app for the research tomorrow to see how well the feature works._ This commit changes the tour from being a set of static screens to some help which guides you through the process of sending your first test message. The theory behind this is that what users are really struggling with is the concept of a variable, rather than the relationship between the placeholders and the column headers. And like learning to program, the best way to learn is by taking an example and modifying it to your own needs. This means that when someone adds their first service we set them up an example email template and an example text message template. Then there is a guided, three step process where _all_ the user can do is send a test message to themselves. Once the message is sent, the user still has the example templates which they can edit, rather than having to remember what they’re supposed to be doing.
2016-05-20 12:05:05 +01:00
line-height: 1.6;
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 + 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 a component for picking the time to send a job Users need to pick a time in the next 24hrs, or send a file immediately. Rationale for this is a bit lost in time-before-holiday, but generally: ‘Now’ and ‘later’ as the inital choices makes it really clear what this feature is about conceptually. The choice of times is absolute, eg ‘1pm’ not ‘in 3 hours’
2016-08-07 09:17:49 +01:00
margin: 10px 0 0 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;
Beautify the template version links and template link page.
2016-05-20 13:58:16 +01:00
margin: 20px 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-picker {
display: block;
margin: 7px 0 0 0;
position: absolute;
left: 15px;
top: 50%;
z-index: 50;
}
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