mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-17 04:59:37 -04:00
1fba5d186d
In research I’ve sometimes seen people click the wrong nav item. I reckon that people’s concept of which pages live behind which navigation items isn’t very strong. We can reinforce this relationship by showing, for every page, which is the corresponding nav item. The conventional way of doing this is either with some kind of emphasis, typically colour or bold. I’ve gone for bold because colour would be weird. --- The implementation of this is quite loosely coupled to our application code because: - our application code is not well structured (eg we don’t make any use of blueprints) - spreading this change across lots of files in our application would make it harder to test without actually hitting each endpoints; such tests would be slow and verbose So I’ve gone for more of a meta approach. Rather than testing that each endpoint has a specific navigation item selected, I’ve gone for validating that: - all endpoints being mapped to are real - all endpoints have _a_ selected navigation item (or are specifically excluded) This means that it’s impossible to add, change or remove an endpoint without also updating which navigation item should be selected. And the actual mapping is so declarative that it testing it would be redundant.
117 lines
1.8 KiB
SCSS
117 lines
1.8 KiB
SCSS
.navigation {
|
|
|
|
padding: 0 $gutter 0 0;
|
|
|
|
&-service {
|
|
|
|
padding: 11px 0 9px 0;
|
|
border-bottom: 1px solid $border-colour;
|
|
margin: 0 0 10px;
|
|
position: relative;
|
|
|
|
&-name {
|
|
@include bold-19;
|
|
margin: 0 0 0 0;
|
|
}
|
|
|
|
&-switch {
|
|
|
|
@include core-16;
|
|
text-align: right;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 13px 0 9px 15px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-bottom: 4px solid $yellow;
|
|
border-left: 10px solid $yellow;
|
|
border-right: 3px solid $yellow;
|
|
right: -3px;
|
|
color: $text-colour;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
li {
|
|
@include core-19;
|
|
margin: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
a {
|
|
|
|
display: block;
|
|
padding: 5px 0;
|
|
position: relative;
|
|
top: 5px;
|
|
|
|
&:link,
|
|
&:visited {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:hover {
|
|
color: $link-hover-colour;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:focus {
|
|
color: $text-colour;
|
|
}
|
|
|
|
&.selected {
|
|
@include bold-19;
|
|
position: relative;
|
|
// These two lines stop the width of the item jumping so much
|
|
// between selected and unselected states
|
|
left: -0.5px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// https://github.com/alphagov/product-page-example/blob/master/source/stylesheets/modules/_sub-navigation.scss
|
|
.sub-navigation {
|
|
@include media(tablet) {
|
|
margin-top: $gutter * 1.5;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
&__item {
|
|
@include core-16;
|
|
|
|
border-bottom: 1px $grey-3 solid;
|
|
display: block;
|
|
padding: $gutter-one-third 0;
|
|
|
|
a:link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover,
|
|
a:active {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
&__item--active {
|
|
@include bold-16;
|
|
|
|
a:link, a:visited {
|
|
color: $text-colour;
|
|
}
|
|
}
|
|
}
|