Merge pull request #34 from alphagov/quarter-width-nav

Make navigation column 1/4 width
This commit is contained in:
minglis
2016-01-06 09:35:35 +00:00
6 changed files with 37 additions and 38 deletions

View File

@@ -0,0 +1,7 @@
.column-one-quarter {
@include grid-column(1/4);
}
.column-three-quarters {
@include grid-column(3/4);
}

View File

@@ -40,20 +40,10 @@
} }
} }
#global-header #logo { #global-header #logo {
white-space: nowrap; white-space: nowrap;
} }
.column-three-quarters {
@include grid-column(3/4);
}
a:visited { a:visited {
color: #005ea5; color: $link-colour;
} }

View File

@@ -1,23 +1,26 @@
#navigation { .navigation {
padding: 50px 0 0 0;
}
#navigation li { padding: $gutter 0 0 0;
@include core-16();
margin: 3px 0;
}
#navigation ul { li {
border-bottom: 1px solid #777; @include core-16();
margin: 0 20px 0 0; margin: 3px 0;
list-style-type: none; }
padding: 0;
}
#navigation a:link,a:visited { ul {
text-decoration: none; border-bottom: 1px solid $border-colour;
} margin: 0 20px 0 0;
list-style-type: none;
padding: 0;
}
#navigation a:hover { a:link,
color: #2e8aca; a:visited {
} text-decoration: none;
}
a:hover {
color: $link-hover-colour;
}
}

View File

@@ -28,6 +28,7 @@
@import '../govuk_elements/public/sass/elements/tables'; @import '../govuk_elements/public/sass/elements/tables';
// Specific to this application // Specific to this application
@import 'grids';
@import 'components/template-picker'; @import 'components/template-picker';
@import 'components/placeholder'; @import 'components/placeholder';
@import 'components/sms-message'; @import 'components/sms-message';

View File

@@ -1,5 +1,4 @@
{% macro main_nav() %} <nav class="navigation">
<nav id="navigation">
<h3><a href="{{ url_for('.dashboard') }}">Service name</a></h3> <h3><a href="{{ url_for('.dashboard') }}">Service name</a></h3>
<ul> <ul>
<li><a href="{{ url_for('.sendsms') }}">Send text messages</a></li> <li><a href="{{ url_for('.sendsms') }}">Send text messages</a></li>
@@ -16,5 +15,4 @@
<ul> <ul>
<li><a href="/user-profile">Your details</a></li> <li><a href="/user-profile">Your details</a></li>
</ul> </ul>
</nav> </nav>
{% endmacro %}

View File

@@ -3,10 +3,10 @@
{% block fullwidth_content %} {% block fullwidth_content %}
<div class="grid-row"> <div class="grid-row">
<div class="column-third"> <div class="column-one-quarter">
{{ main_nav() }} {% include "main_nav.html" %}
</div> </div>
<div class="column-two-thirds"> <div class="column-three-quarters">
{% block maincolumn_content %}{% endblock %} {% block maincolumn_content %}{% endblock %}
</div> </div>
</div> </div>