darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-07 01:58:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

Replace links in navigation

Browse Source 
Includes:
- removing all styling of those links
  outside of GOV.UK Frontend (except for a few fixes
  due to their interaction with our design)
- bringing together some duplicate styles into one
  block
- changing how links are marked as selected, now
  they have multiple classes

Fix Sass-lint error in navigation.scss
This commit is contained in:
Tom Byers
2019-12-11 20:33:57 +00:00
parent 58c08ad89b
commit 9a6916ff31
7 changed files with 52 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
app/assets/stylesheets/components/navigation.scss
View File

@@ -1,64 +1,74 @@
.navigation { .navigation {
@include govuk-font($size: 19);
padding: 0 $gutter 0 0; padding: 0 $gutter 0 0;
$padding-top: 14px; $padding-top: 14px;
$padding-bottom: 11px; $padding-bottom: 11px;
&-service-name,
&-organisation-link {
display: inline-block;
overflow: hidden;
// aligning to the baseline with overflow: hidden adds to the parent's height
// aligning to the top doesn't
// see: https://stackoverflow.com/questions/23529369/why-does-x-overflowhidden-cause-extra-space-below#answer-51088033
vertical-align: top;
white-space: nowrap;
text-overflow: ellipsis;
}
&-service-switch,
&-service-back-to,
&-organisation-link {
&:link,
&:visited {
text-decoration: none;
}
&:hover {
text-decoration: underline;
}
}
&-service { &-service {
@include govuk-font($size: 19);
border-bottom: 1px solid $border-colour; border-bottom: 1px solid $border-colour;
margin: 0 0 10px; margin: 0 0 10px;
position: relative; position: relative;
font-size: 0;
&-name { &-name {
@include bold-19;
padding: $padding-top 0 $padding-bottom 0; padding: $padding-top 0 $padding-bottom 0;
display: inline-block;
max-width: 50%; max-width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
&-switch { &-switch {
@include core-19;
text-decoration: none;
text-align: right; text-align: right;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
padding: $padding-top 0 $padding-bottom $gutter-half; padding: $padding-top 0 $padding-bottom $gutter-half;
&:hover {
color: $link-hover-colour;
text-decoration: underline;
}
&:focus { &:focus {
outline: none; outline: none;
border-bottom: 1px solid $yellow; border-bottom: 1px solid $yellow;
border-left: 10px solid $yellow; border-left: 10px solid $yellow;
border-right: 3px solid $yellow; border-right: 3px solid $yellow;
right: -3px; right: -3px;
color: $text-colour;
} }
} }
&-back-to { &-back-to {
@include core-19;
padding: $padding-top $gutter-half $padding-bottom 0; padding: $padding-top $gutter-half $padding-bottom 0;
display: inline-block; display: inline-block;
text-decoration: none;
&:hover {
text-decoration: underline;
color: $link-hover-colour;
}
} }
@@ -66,14 +76,7 @@
&-organisation-link { &-organisation-link {
@include core-19;
display: inline-block;
max-width: 25%; max-width: 25%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
text-decoration: none;
padding: $padding-top 20px $padding-bottom 0; padding: $padding-top 20px $padding-bottom 0;
margin-right: 7px; margin-right: 7px;
box-sizing: border-box; box-sizing: border-box;
@@ -97,13 +100,8 @@
border-color: $secondary-text-colour; border-color: $secondary-text-colour;
} }
&:hover { // hack to make the focus style fit in the navigation bar
color: $link-hover-colour;
text-decoration: underline;
}
&:focus { &:focus {
color: $text-colour;
outline: none; outline: none;
box-shadow: 0 1px 0 0 $focus-colour, -3px 0 0 0 $focus-colour, -3px 1px 0 0 $focus-colour; box-shadow: 0 1px 0 0 $focus-colour, -3px 0 0 0 $focus-colour, -3px 1px 0 0 $focus-colour;
} }
@@ -111,7 +109,6 @@
} }
li { li {
@include core-19;
margin: 0; margin: 0;
list-style-type: none; list-style-type: none;
} }
@@ -129,14 +126,9 @@
} }
&:hover { &:hover {
color: $link-hover-colour;
text-decoration: underline; text-decoration: underline;
} }
&:focus {
color: $text-colour;
}
&.selected { &.selected {
@include bold-19; @include bold-19;
position: relative; position: relative;

6
app/navigation.py
View File

@@ -7,7 +7,7 @@ class Navigation:
mapping = {} mapping = {}
exclude = {} exclude = {}
selected_attribute = "class=selected" selected_class = "selected"
def __init__(self): def __init__(self):
self.mapping = { self.mapping = {
@@ -32,7 +32,7 @@ class Navigation:
def is_selected(self, navigation_item): def is_selected(self, navigation_item):
if request.endpoint in self.mapping[navigation_item]: if request.endpoint in self.mapping[navigation_item]:
return self.selected_attribute return " " + self.selected_class
return '' return ''
@staticmethod @staticmethod
@@ -42,8 +42,6 @@ class Navigation:
class HeaderNavigation(Navigation): class HeaderNavigation(Navigation):
selected_attribute = "class=active"
mapping = { mapping = {
'support': { 'support': {
'bat_phone', 'bat_phone',

22
app/templates/main_nav.html
View File

@@ -5,32 +5,32 @@
<ul> <ul>
{% if current_user.has_permissions() %} {% if current_user.has_permissions() %}
{% if current_user.has_permissions('view_activity') %} {% if current_user.has_permissions('view_activity') %}
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.service_dashboard', service_id=current_service.id) }}" {{ main_navigation.is_selected('dashboard') }}>Dashboard</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('dashboard') }}" href="{{ url_for('.service_dashboard', service_id=current_service.id) }}">Dashboard</a></li>
{% endif %} {% endif %}
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.choose_template', service_id=current_service.id) }}" {{ main_navigation.is_selected('templates') }}>Templates</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('templates') }}" href="{{ url_for('.choose_template', service_id=current_service.id) }}">Templates</a></li>
{% if current_user.has_permissions('view_activity') %} {% if current_user.has_permissions('view_activity') %}
{% if current_service.can_upload_letters %} {% if current_service.can_upload_letters %}
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.uploads', service_id=current_service.id) }}" {{ main_navigation.is_selected('uploads') }}>Uploads</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('uploads') }}" href="{{ url_for('main.uploads', service_id=current_service.id) }}">Uploads</a></li>
{% endif %} {% endif %}
{% else %} {% else %}
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.view_notifications', service_id=current_service.id, status='sending,delivered,failed') }}" {{ casework_navigation.is_selected('sent-messages') }}>Sent messages</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ casework_navigation.is_selected('sent-messages') }}" href="{{ url_for('.view_notifications', service_id=current_service.id, status='sending,delivered,failed') }}">Sent messages</a></li>
{% if current_service.has_jobs or current_service.can_upload_letters %} {% if current_service.has_jobs or current_service.can_upload_letters %}
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.uploads', service_id=current_service.id) }}" {{ casework_navigation.is_selected('uploads') }}>Uploads</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ casework_navigation.is_selected('uploads') }}" href="{{ url_for('main.uploads', service_id=current_service.id) }}">Uploads</a></li>
{% endif %} {% endif %}
{% endif %} {% endif %}
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.manage_users', service_id=current_service.id) }}" {{ main_navigation.is_selected('team-members') }}>Team members</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>
{% if current_user.has_permissions('manage_service', allow_org_user=True) %} {% if current_user.has_permissions('manage_service', allow_org_user=True) %}
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.usage', service_id=current_service.id) }}" {{ main_navigation.is_selected('usage') }}>Usage</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('usage') }}" href="{{ url_for('.usage', service_id=current_service.id) }}">Usage</a></li>
{% endif %} {% endif %}
{% if current_user.has_permissions('manage_api_keys', 'manage_service') %} {% if current_user.has_permissions('manage_api_keys', 'manage_service') %}
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.service_settings', service_id=current_service.id) }}" {{ main_navigation.is_selected('settings') }}>Settings</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('settings') }}" href="{{ url_for('.service_settings', service_id=current_service.id) }}">Settings</a></li>
{% endif %} {% endif %}
{% if current_user.has_permissions('manage_api_keys') %} {% if current_user.has_permissions('manage_api_keys') %}
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.api_integration', service_id=current_service.id) }}" {{ main_navigation.is_selected('api-integration') }}>API integration</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('api-integration') }}" href="{{ url_for('.api_integration', service_id=current_service.id) }}">API integration</a></li>
{% endif %} {% endif %}
{% elif current_user.has_permissions(allow_org_user=True) %} {% elif current_user.has_permissions(allow_org_user=True) %}
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.usage', service_id=current_service.id) }}" {{ main_navigation.is_selected('usage') }}>Usage</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('usage') }}" href="{{ url_for('.usage', service_id=current_service.id) }}">Usage</a></li>
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.manage_users', service_id=current_service.id) }}" {{ main_navigation.is_selected('team-members') }}>Team members</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>
{% endif %} {% endif %}
</ul> </ul>
</nav> </nav>

8
app/templates/org_nav.html
View File

@@ -1,10 +1,10 @@
<nav class="navigation"> <nav class="navigation">
<ul> <ul>
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.organisation_dashboard', org_id=current_org.id) }}" {{ org_navigation.is_selected('dashboard') }}>Usage</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ org_navigation.is_selected('dashboard') }}" href="{{ url_for('.organisation_dashboard', org_id=current_org.id) }}">Usage</a></li>
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.manage_org_users', org_id=current_org.id) }}" {{ org_navigation.is_selected('team-members') }}>Team members</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ org_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_org_users', org_id=current_org.id) }}">Team members</a></li>
{% if current_user.platform_admin %} {% if current_user.platform_admin %}
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.organisation_settings', org_id=current_org.id) }}" {{ org_navigation.is_selected('settings') }}>Settings</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ org_navigation.is_selected('settings') }}" href="{{ url_for('.organisation_settings', org_id=current_org.id) }}">Settings</a></li>
<li><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.organisation_trial_mode_services', org_id=current_org.id) }}" {{ org_navigation.is_selected('trial-services') }}>Trial mode services</a></li> <li><a class="govuk-link govuk-link--no-visited-state{{ org_navigation.is_selected('trial-services') }}" href="{{ url_for('.organisation_trial_mode_services', org_id=current_org.id) }}">Trial mode services</a></li>
{% endif %} {% endif %}
</ul> </ul>
</nav> </nav>

2
app/templates/org_template.html
View File

@@ -10,7 +10,7 @@
{% if current_user.platform_admin %} {% if current_user.platform_admin %}
<a href="{{ url_for('.organisations') }}" class="govuk-link govuk-link--no-visited-state navigation-organisation-link">All organisations</a> <a href="{{ url_for('.organisations') }}" class="govuk-link govuk-link--no-visited-state navigation-organisation-link">All organisations</a>
{% endif %} {% endif %}
<div class="navigation-service-name"> <div class="navigation-service-name govuk-!-font-weight-bold">
{{ current_org.name }} {{ current_org.name }}
</div> </div>
<a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a> <a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>

2
app/templates/views/organisations/index.html
View File

@@ -11,7 +11,7 @@
{% block maincolumn_content %} {% block maincolumn_content %}
<div class="navigation-service"> <div class="navigation-service">
<div class="navigation-service-name"> <div class="navigation-service-name govuk-!-font-weight-bold">
&nbsp; &nbsp;
</div> </div>
<a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a> <a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>

2
app/templates/withnav_template.html
View File

@@ -15,7 +15,7 @@
<a href="{{ url_for('.organisation_dashboard', org_id=current_service.organisation_id) }}" class="govuk-link govuk-link--no-visited-state navigation-organisation-link">{{ current_service.organisation.name }}</a> <a href="{{ url_for('.organisation_dashboard', org_id=current_service.organisation_id) }}" class="govuk-link govuk-link--no-visited-state navigation-organisation-link">{{ current_service.organisation.name }}</a>
{% endif %} {% endif %}
{% endif %} {% endif %}
<div class="navigation-service-name"> <div class="navigation-service-name govuk-!-font-weight-bold">
{{ current_service.name }} {{ current_service.name }}
</div> </div>
<a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a> <a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>