Last active
August 29, 2015 14:05
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{{<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}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Overview --> | |
{{<guide-template}} | |
{{$page-content}} | |
<p>This is some page content</p> | |
{{/page-content}} | |
{{/guide-template}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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