Created
September 16, 2016 14:31
-
-
Save Christo44/5b488e4a43ca3053c3bd0db9724610ea to your computer and use it in GitHub Desktop.
Object traversal in Pug (fna Jade)
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
- var floors = { ground: { name: "Ground Floor", image: "ground.png", tenants: { t1: { image: false, heading: '4 desks available', description: 'Lorem ipsum dolor sit amet,consectetur adipisicing elit', linkDescription: 'Link to sales page', linkTarget: 'http://www.google.com', posx: '120', posy: '330' }, t2: { image: 'avaaz.png', heading: 'Company name', description: 'Lorem ipsum dolor sit amet,consectetur adipisicing elit', linkDescription: 'External link', linkTarget: 'http://www.google.com', posx: '340', posy: '280' } } }, first: { name: "1st Floor", image: "ground.png", tenants: { t1: { image: false, heading: '4 desks available', description: 'Lorem ipsum dolor sit amet,consectetur adipisicing elit', linkDescription: 'Link to sales page', linkTarget: 'http://www.google.com', posx: '120', posy: '330' }, t2: { image: 'avaaz.png', heading: 'Company name', description: 'Lorem ipsum dolor sit amet,consectetur adipisicing elit', linkDescription: 'External link', linkTarget: 'http://www.google.com', posx: '340', posy: '280' } } }, second: { name: "2nd Floor", image: "ground.png", tenants: { t1: { image: false, heading: '4 desks available', description: 'Lorem ipsum dolor sit amet,consectetur adipisicing elit', linkDescription: 'Link to sales page', linkTarget: 'http://www.google.com', posx: '120', posy: '330' }, t2: { image: 'avaaz.png', heading: 'Company name', description: 'Lorem ipsum dolor sit amet,consectetur adipisicing elit', linkDescription: 'External link', linkTarget: 'http://www.google.com', posx: '340', posy: '280' } } }, third: { name: "3rd Floor", image: "ground.png" } }; | |
doctype | |
html.no-js | |
head | |
meta(charset='utf-8') | |
meta(http-equiv='X-UA-Compatible', content='IE=edge') | |
- var title = title || "Floor Plans" | |
title #{title} | |
meta(name='description', content='') | |
meta(name='viewport', content='width=device-width, initial-scale=1') | |
link(rel='stylesheet', href='css/main.css') | |
body | |
// content | |
.wrapper | |
h1 Take a look at this Borough’s floor plan | |
.box | |
#tabContainer | |
ul.box__tabs | |
// grab all the floors and build the selector tabs | |
each v,i in floors | |
li | |
a(href="##{i}") #{v.name} | |
// grab all the floors and build the selector tabs | |
each v,i in floors | |
div(id="#{i}") | |
if v.image | |
figure | |
img(src="img/placeholders/#{v.image}", alt="#{v.name}") | |
// cycle all tenants in this floor | |
// we have tenants on this floor | |
if v.tenants | |
ul | |
// this is one tenant | |
each a in v.tenants | |
li | |
if a.image | |
img(src="img/logos/#{a.image}", alt="#{a.heading}") | |
h3= a.heading | |
p= a.description | |
if a.linkDescription | |
a(href="#{a.linkTarget}", target="_new") #{a.linkDescription} | |
else | |
p No tenants for this floor |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment