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

46 lines
532 B
SCSS
Raw Normal View History

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
.message {
&-name {
@include bold-24;
Make spacing tighter on templates page The prototype for folders tightens up the templates page to fit more templates on the screen. Partly because it looks better, and partly because the sticky bottom toolbar means that there’s less available space. So reducing the spacing means that roughly the same number of templates fit on the screen. For those who won’t see the checkboxes (people who don’t have the send permission) or use folders, this just means that they’ll have slightly less scrolling to do if they have a lot of templates. Doing this before adding the folders so that: - we roll out changes more gradually - once we add the folders we can see if the spacing has stayed consistent - changing where the margins are applied to resolve the inconsistent spacing when there is/isn’t tabbed navigation or a search box shown
2018-10-29 14:24:44 +00:00
margin: 0;
Make click areas bigger on template picker Generally, bigger click areas are better[1], as long as they don’t cause ambiguity. This commit expands the clickable area of links to templates to include hint text underneath which states the type of template. 1. https://en.wikipedia.org/wiki/Fitts%27s_law
2017-06-20 10:03:39 +01:00
a {
display: block;
margin-bottom: -$gutter;
padding-bottom: $gutter;
}
}
&-type {
color: $secondary-text-colour;
Make spacing tighter on templates page The prototype for folders tightens up the templates page to fit more templates on the screen. Partly because it looks better, and partly because the sticky bottom toolbar means that there’s less available space. So reducing the spacing means that roughly the same number of templates fit on the screen. For those who won’t see the checkboxes (people who don’t have the send permission) or use folders, this just means that they’ll have slightly less scrolling to do if they have a lot of templates. Doing this before adding the folders so that: - we roll out changes more gradually - once we add the folders we can see if the spacing has stayed consistent - changing where the margins are applied to resolve the inconsistent spacing when there is/isn’t tabbed navigation or a search box shown
2018-10-29 14:24:44 +00:00
margin: 0 0 $gutter-two-thirds 0;
Make click areas bigger on template picker Generally, bigger click areas are better[1], as long as they don’t cause ambiguity. This commit expands the clickable area of links to templates to include hint text underneath which states the type of template. 1. https://en.wikipedia.org/wiki/Fitts%27s_law
2017-06-20 10:03:39 +01:00
pointer-events: none;
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
}
}
Make spacing tighter on templates page The prototype for folders tightens up the templates page to fit more templates on the screen. Partly because it looks better, and partly because the sticky bottom toolbar means that there’s less available space. So reducing the spacing means that roughly the same number of templates fit on the screen. For those who won’t see the checkboxes (people who don’t have the send permission) or use folders, this just means that they’ll have slightly less scrolling to do if they have a lot of templates. Doing this before adding the folders so that: - we roll out changes more gradually - once we add the folders we can see if the spacing has stayed consistent - changing where the margins are applied to resolve the inconsistent spacing when there is/isn’t tabbed navigation or a search box shown
2018-10-29 14:24:44 +00:00
#template-list {
margin-top: $gutter;
}
Show form elements for templates and folders This commit adds: - checkboxes to let you select a template or folder - radio buttons to let you select where to move those template(s) and/or folder(s) to It only does the `get` part of this work; handling the `post` and calling API will be done in a subsequent commit.
2018-11-08 11:56:29 +00:00
Refactor CSS to better use inherited naming
2018-11-09 15:37:37 +00:00
.template-list {
&-item {
&-with-checkbox {
Show form elements for templates and folders This commit adds: - checkboxes to let you select a template or folder - radio buttons to let you select where to move those template(s) and/or folder(s) to It only does the `get` part of this work; handling the `post` and calling API will be done in a subsequent commit.
2018-11-08 11:56:29 +00:00
Refactor CSS to better use inherited naming
2018-11-09 15:37:37 +00:00
position: relative;
padding-left: $gutter * 2;
Show form elements for templates and folders This commit adds: - checkboxes to let you select a template or folder - radio buttons to let you select where to move those template(s) and/or folder(s) to It only does the `get` part of this work; handling the `post` and calling API will be done in a subsequent commit.
2018-11-08 11:56:29 +00:00
Refactor CSS to better use inherited naming
2018-11-09 15:37:37 +00:00
.multiple-choice {
position: absolute;
left: 0;
}
}
Show form elements for templates and folders This commit adds: - checkboxes to let you select a template or folder - radio buttons to let you select where to move those template(s) and/or folder(s) to It only does the `get` part of this work; handling the `post` and calling API will be done in a subsequent commit.
2018-11-08 11:56:29 +00:00
}
Refactor CSS to better use inherited naming
2018-11-09 15:37:37 +00:00
Show form elements for templates and folders This commit adds: - checkboxes to let you select a template or folder - radio buttons to let you select where to move those template(s) and/or folder(s) to It only does the `get` part of this work; handling the `post` and calling API will be done in a subsequent commit.
2018-11-08 11:56:29 +00:00
}
Reference in New Issue Copy Permalink