darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-08 08:28:15 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
32b2f617f10323c8670836174cb7d82ce5cb4e0c
notifications-admin/app/assets/stylesheets/views/users.scss

87 lines
1.4 KiB
SCSS
Raw Normal View History

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
$item-top-padding: govuk-spacing(3);
Tidy up layout of letter contact blocks Linebreaks are an important part of the letter contact block, and make it easier to read. Bold text works for short pieces of info like email addresses or phone numbers, but is too heavy for the letter contact blocks because they tend to be longer.
2017-10-25 11:46:12 +01:00
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
.user-list {
Use 19px not 16px type in more places Making the navigation narrower means that we have more space on every page. So on pages where we had to use 16px type just to fit stuff on the page we can now bump the type size up to something less miserly. This is mainly the team and settings pages. We still need to use 16px on pages which list notifications or previews of spreadsheets, because we’re still trying to fit a lot of information onto these pages, so every little space-saving helps.
2017-03-15 12:50:45 +00:00
@include core-19;
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);
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
&-item {
Change list items on /users page Change the HTML & CSS for user-list-item's to support their content being split into 2 columns of a grid instead of the edit link being positioned absolutely. Also includes: 1. removes `<div>`s from `<ul>` (non-valid HTML) 2. split action link out from permissions list 3. split summary of folder permissions out from permissions list 4. introduces a class for blocks of text that appear when there are no items. 5. fixes tests broken by changes to HTML
2020-08-19 14:52:17 +01:00
padding: govuk-spacing(3) 0px;
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
border-top: 1px solid $border-colour;
Ensure H2 headings follow H1 headings We had some cases where an H3 heading followed an H1. This was flagged as something to change in the accessibility report.
2020-08-21 16:52:35 +01:00
&-heading {
Don’t wrap users onto multiple lines It looks cleaner to truncate instead. You can always see the full email address by clicking into ‘edit’.
2018-11-22 10:41:47 +00:00
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-right: govuk-spacing(3);
Don’t wrap users onto multiple lines It looks cleaner to truncate instead. You can always see the full email address by clicking into ‘edit’.
2018-11-22 10:41:47 +00:00
overflow: hidden;
Prevent user emails being cut off Make heading break on whitespace - it means if the combination of name and email address is too long for the line, email address will go underneath and be more visible. If email address too big for the allotted space, it will break onto the next line and all of it will be visible.
2020-08-27 15:42:35 +01:00
overflow-wrap: break-word;
Don’t wrap users onto multiple lines It looks cleaner to truncate instead. You can always see the full email address by clicking into ‘edit’.
2018-11-22 10:41:47 +00:00
.heading-small {
color: $black;
}
}
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
&:last-child {
border-bottom: 1px solid $border-colour;
}
Change list items on /users page Change the HTML & CSS for user-list-item's to support their content being split into 2 columns of a grid instead of the edit link being positioned absolutely. Also includes: 1. removes `<div>`s from `<ul>` (non-valid HTML) 2. split action link out from permissions list 3. split summary of folder permissions out from permissions list 4. introduces a class for blocks of text that appear when there are no items. 5. fixes tests broken by changes to HTML
2020-08-19 14:52:17 +01:00
& :last-child {
margin-bottom: 0;
}
&-blank {
margin-bottom: govuk-spacing(3);
@include govuk-media-query($from: tablet) {
margin-bottom: 0;
}
}
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
}
Tidy up layout of letter contact blocks Linebreaks are an important part of the letter contact block, and make it easier to read. Bold text works for short pieces of info like email addresses or phone numbers, but is too heavy for the letter contact blocks because they tend to be longer.
2017-10-25 11:46:12 +01:00
&-edit-link {
Change list items on /users page Change the HTML & CSS for user-list-item's to support their content being split into 2 columns of a grid instead of the edit link being positioned absolutely. Also includes: 1. removes `<div>`s from `<ul>` (non-valid HTML) 2. split action link out from permissions list 3. split summary of folder permissions out from permissions list 4. introduces a class for blocks of text that appear when there are no items. 5. fixes tests broken by changes to HTML
2020-08-19 14:52:17 +01:00
position: relative;
display: block;
margin: govuk-spacing(3) 0 govuk-spacing(3);
@include govuk-media-query($from: tablet) {
float: right;
margin: 0;
}
&:before {
content: "";
display: block;
position: absolute;
top: -1 * govuk-spacing(3) - 1;
right: 0;
bottom: -1 * govuk-spacing(3);
left: -1 * govuk-spacing(3);
background: transparent;
}
&:active:before,
&:focus:before {
border-color: $yellow;
border-style: solid;
border-width: 15px 3px;
right: -3px;
left: -3px;
@include govuk-media-query($from: tablet) {
border-width: 15px 3px 15px 15px;
left: -15px;
}
}
Tidy up layout of letter contact blocks Linebreaks are an important part of the letter contact block, and make it easier to read. Bold text works for short pieces of info like email addresses or phone numbers, but is too heavy for the letter contact blocks because they tend to be longer.
2017-10-25 11:46:12 +01:00
}
Tidy layout of team page The team page was a bit of a mess: - invited and active tables didn’t line up - lots of things were wrapping onto two lines - the empty fields for when a user didn’t have permissions looked broken This commit splits each row of the table (not actually a table any more) onto two lines. First line has the user’s info, second has their permissions and any associated actions.
2016-07-07 09:17:50 +01:00
}
Reference in New Issue Copy Permalink