darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-04-27 12:40:55 -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 a61856ffe1
commit c51d414197
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 {
@include govuk-font($size: 19);
padding: 0 $gutter 0 0;
$padding-top: 14px;
$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 {
@include govuk-font($size: 19);
border-bottom: 1px solid $border-colour;
margin: 0 0 10px;
position: relative;
font-size: 0;
&-name {
@include bold-19;
padding: $padding-top 0 $padding-bottom 0;
display: inline-block;
max-width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-switch {
@include core-19;
text-decoration: none;
text-align: right;
position: absolute;
top: 0;
right: 0;
padding: $padding-top 0 $padding-bottom $gutter-half;
&:hover {
color: $link-hover-colour;
text-decoration: underline;
}
&:focus {
outline: none;
border-bottom: 1px solid $yellow;
border-left: 10px solid $yellow;
border-right: 3px solid $yellow;
right: -3px;
color: $text-colour;
}
}
&-back-to {
@include core-19;
padding: $padding-top $gutter-half $padding-bottom 0;
display: inline-block;
text-decoration: none;
&:hover {
text-decoration: underline;
color: $link-hover-colour;
}
}
@@ -66,14 +76,7 @@
&-organisation-link {
@include core-19;
display: inline-block;
max-width: 25%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
text-decoration: none;
padding: $padding-top 20px $padding-bottom 0;
margin-right: 7px;
box-sizing: border-box;
@@ -97,13 +100,8 @@
border-color: $secondary-text-colour;
}
&:hover {
color: $link-hover-colour;
text-decoration: underline;
}
// hack to make the focus style fit in the navigation bar
&:focus {
color: $text-colour;
outline: none;
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 {
@include core-19;
margin: 0;
list-style-type: none;
}
@@ -129,14 +126,9 @@
}
&:hover {
color: $link-hover-colour;
text-decoration: underline;
}
&:focus {
color: $text-colour;
}
&.selected {
@include bold-19;
position: relative;

6
app/navigation.py
View File

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

22
app/templates/main_nav.html
View File

@@ -5,32 +5,32 @@
<ul>
{% if current_user.has_permissions() %}
{% 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 %}
<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_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 %}
{% 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 %}
<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 %}
<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) %}
<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 %}
{% 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 %}
{% 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 %}
{% 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" 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('usage') }}" href="{{ url_for('.usage', service_id=current_service.id) }}">Usage</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 %}
</ul>
</nav>

8
app/templates/org_nav.html
View File

@@ -1,10 +1,10 @@
<nav class="navigation">
<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" 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('dashboard') }}" href="{{ url_for('.organisation_dashboard', org_id=current_org.id) }}">Usage</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 %}
<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" 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('settings') }}" href="{{ url_for('.organisation_settings', org_id=current_org.id) }}">Settings</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 %}
</ul>
</nav>

2
app/templates/org_template.html
View File

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