Skip to content

Instantly share code, notes, and snippets.

@edwardhorsford
Last active August 29, 2015 14:05
Show Gist options
  • Save edwardhorsford/502a68faa85e60149122 to your computer and use it in GitHub Desktop.
Save edwardhorsford/502a68faa85e60149122 to your computer and use it in GitHub Desktop.
The basics needed to fake a 'GOV.UK guide' in the express prototype. Hacky
{{<layout}}
{{$pageTitle}}Index{{/pageTitle}}
{{$content}}
<main id="content" role="main" class="group multi-page">
<header class="page-header group">
<div>
<h1>{{guideTitle}}</h1>
</div>
</header>
<div class="article-container group">
<aside class="inner">
<div class="">
<nav role="navigation" class="page-navigation" aria-label="parts to this guide">
<ol>
{{#guide-pages}}
{{#isGroupA}}
<li {{#active}}class="active"{{/active}}>
{{^active}}
<a href="{{pageURL}}">
{{/active}}
<span class="part-number">{{pageNumber}}. </span><span>{{pageTitle}}</span>
{{^active}}
</a>
{{/active}}
</li>
{{/isGroupA}}
{{/guide-pages}}
</ol>
<!--Change start to reflect number of pages-->
<ol start="4">
{{#guide-pages}}
{{^isGroupA}}
<li {{#active}}class="active"{{/active}}>
{{^active}}
<a href="{{pageURL}}">
{{/active}}
<span class="part-number">{{pageNumber}}.</span><span>{{pageTitle}}</span>
{{^active}}
</a>
{{/active}}
</li>
{{/isGroupA}}
{{/guide-pages}}
</ol>
</nav>
</div>
</aside>
<article role="article" class="group form-group">
<div class="inner">
<header>
<h1>{{currentPageNumber}}. {{currentPageTitle}}</h1>
</header>
{{$page-content}}{{/page-content}}
<footer>
<nav class="pagination" role="navigation" aria-label="Pagination">
<ul class="group">
{{#hasPreviousPage}}
<li class="previous">
<a href="{{previousPageURL}}">
<span class="pagination-label">Previous </span>
<span class="pagination-part-title">{{previousPageTitle}}</span>
</a>
</li>
{{/hasPreviousPage}}
{{#hasNextPage}}
<li class="next">
<a href="{{nextPageURL}}">
<span class="pagination-label">Next</span>
<span class="pagination-part-title">{{nextPageTitle}}</span>
</a>
</li>
{{/hasNextPage}}
</ul>
</nav>
</footer>
</div>
</article>
</div>
</main>
{{/content}}
{{/layout}}
<!-- Overview -->
{{<guide-template}}
{{$page-content}}
<p>This is some page content</p>
{{/page-content}}
{{/guide-template}}
app.get('/guidance-:pageNumber', function (req, res) {
var pageNumber = parseInt(req.params['pageNumber']);
var baseURL = '/guidance-';
var iterator = 1;
var pageTitle = "";
var guideTitle = "Guide title";
var hasNextPage = false;
var hasPreviousPage = false;
var nextPageURL = baseURL + (pageNumber + 1);
var nextPageTitle = "";
var previousPageURL = baseURL + (pageNumber - 1);
var previousPageTitle = "";
var totalPages = 1;
var Page = function(options){
this.pageTitle = options.title;
this.pageURL = baseURL + iterator;
this.pageNumber = iterator;
this.active = (pageNumber == iterator);
pageTitle = (pageNumber == iterator) ? this.pageTitle : pageTitle;
if ((pageNumber - 1) == iterator) previousPageTitle = this.pageTitle;
if ((pageNumber + 1) == iterator) nextPageTitle = this.pageTitle;
this.isGroupA = (iterator <= Math.ceil(totalPages/2) ) ? true : false;
console.log("page: " + iterator + " is: " + this.group );
iterator++;
};
var guidePages = [
new Page({'title':'Overview'})
];
console.log("guide pages length: ", guidePages.length);
if (pageNumber < guidePages.length ){
hasNextPage = true;
}
if ((pageNumber - 1) > 0 ){
hasPreviousPage = true;
}
res.render('page-' + pageNumber,
{'assetPath' : assetPath,
'guide-pages' : guidePages,
'currentPageNumber' : pageNumber,
'currentPageTitle' : pageTitle,
'guideTitle' : guideTitle,
'hasPreviousPage' : hasPreviousPage,
'hasNextPage' : hasNextPage,
'previousPageURL' : previousPageURL,
'previousPageTitle' : previousPageTitle,
'nextPageURL' : nextPageURL,
'nextPageTitle' : nextPageTitle
});
});
.page-navigation li, .page-navigation nav, .page-navigation li span{
@include core-16;
}
.page-navigation ol {
margin: 0;
padding: 0;
float: left;
display: inline;
overflow: hidden;
width: 50%;
}
.page-navigation li.active {
padding: 0.25em 0.25em 0.25em 0;
}
aside .page-navigation li a {
display: block;
// padding: 0.25em 1em 0.25em 0;
}
.page-navigation li {
list-style: decimal;
list-style-position: outside;
margin-right: 0.75em;
margin-left: 1.5em;
clear: left;
font-family: "nta",Arial,sans-serif;
font-size: 16px;
line-height: 1.25;
font-weight: 300;
text-transform: none;
}
.page-navigation li span.part-number {
display: none;
width: 1.75em;
}
.multi-page article h1 {
@include bold-27;
}
#content.multi-page aside {
z-index: 10;
border-bottom: 1px solid #bbb;
margin-bottom: 1em;
padding-bottom: 1em;
overflow: hidden;
}
#content.multi-page aside {
margin: 0 0 1.5em 2em;
padding-left: 0;
}
nav.page-navigation{
@include clearfix;
}
.pagination {
display: block;
margin: 4em 0 0 0;
border-bottom: 1px solid #bfc1c3;
}
.pagination ul {
margin: 0;
padding: 0;
}
.pagination li.next {
float: right;
text-align: right;
clear: none;
}
.pagination li {
font-family: "nta",Arial,sans-serif;
font-size: 16px;
line-height: 1.25;
font-weight: 300;
text-transform: none;
float: left;
list-style: none;
text-align: right;
margin: 0;
padding: 0;
width: 49%;
}
aside .page-navigation li a {
display: block;
padding: 0.25em 1em 0.25em 0;
}
.pagination li a {
background-color: transparent;
display: block;
color: #005ea5;
text-decoration: none;
}
.pagination li a .pagination-label {
font-family: "nta",Arial,sans-serif;
font-size: 27px;
line-height: 1.25;
font-weight: 400;
text-transform: none;
margin-bottom: 0.1em;
display: block;
}
.pagination li a .pagination-part-title {
text-decoration: underline;
@include core-16;
}
.pagination li.previous {
float: left;
text-align: left;
}
.pagination li.previous a {
padding: 0.75em 0 0.75em 3em;
}
.pagination li.previous a:before {
background: transparent url(https://assets.digital.cabinet-office.gov.uk/static/arrow-sprite-93afeb702f53a20045ad9f4ab8170825.png) no-repeat -20px -11px;
margin: -4px 0 0 -32px;
display: block;
float: left;
width: 30px;
height: 38px;
content: " ";
}
.pagination li a:hover, .pagination li a:active {
background-color: #f8f8f8;
}
.pagination li.next a:before {
background: transparent url(https://assets.digital.cabinet-office.gov.uk/static/arrow-sprite-93afeb702f53a20045ad9f4ab8170825.png) no-repeat -102px -11px;
margin: -4px -32px 0 0;
display: block;
float: right;
width: 30px;
height: 38px;
content: " ";
}
.pagination li.next a {
padding: 0.75em 3em 0.75em 1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment