darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-05-05 08:31:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add a new pattern for sub-navigation

Browse Source 
This is like the ‘pill’ pattern that we use for filtering lists of
notifications. However it is meant for navigating between discrete
things, not a filtered view of the same list.

This is why is has a gutter between each item, and no selected state.

Turns out we already had a pattern about this on the dashboard, so this
commit also changes the dashboard to use the same code.
This commit is contained in:
Chris Hill-Scott
2016-09-20 11:46:56 +01:00
parent dfa3a9242f
commit f514d377f7
3 changed files with 40 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/assets/stylesheets/components/pill.scss
View File

@@ -55,3 +55,26 @@
color: $text-colour;
}
}
.pill-separate {
&-item {
display: block;
text-align: left;
padding: 10px $gutter-half;
&:link,
&:visited {
background: $link-colour;
color: $white;
text-decoration: underline;
}
&:hover {
color: $light-blue-25;
}
}
}

12
app/templates/views/api/index.html
View File

@@ -8,11 +8,17 @@
{% block maincolumn_content %}
<h1 class="heading-large">
<h1 class="heading-large bottom-gutter">
API integration
</h1>
<a href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
<a href="{{ url_for('.api_documentation', service_id=current_service.id) }}">Documentation</a>
<nav class="grid-row">
<div class="column-half">
<a class="pill-separate-item" href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
</div>
<div class="column-half">
<a class="pill-separate-item" href="{{ url_for('.api_documentation', service_id=current_service.id) }}">Documentation</a>
</div>
</nav>
{% endblock %}

22
app/templates/views/dashboard/write-first-messages.html
View File

@@ -1,16 +1,10 @@
{% from "components/banner.html" import banner_wrapper %}
<h2 class="heading-medium">Get started</h2>
<nav class="grid-row">
<div class="column-half">
{% call banner_wrapper(type="mode") %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type='email') }}">Write an email
{% endcall %}
</div>
<div class="column-half">
{% call banner_wrapper(type="mode") %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type='sms') }}">Write a text message</a>
{% endcall %}
</div>
</nav>
<nav class="grid-row">
<div class="column-half">
<a class="pill-separate-item" href="{{ url_for('.choose_template', service_id=current_service.id, template_type='email') }}">Write an email</a>
</div>
<div class="column-half">
<a class="pill-separate-item" href="{{ url_for('.choose_template', service_id=current_service.id, template_type='sms') }}">Write a text message</a>
</div>
</nav>