views/layout.pug
doctype html
html(lang="en" ng-app="bookApp")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
meta(name="viewport" content="width=device-width, initial-scale=1")
title= pageTitle
//Add to homescreen for Chrome on Android
meta(name="mobile-web-app-capable" content="yes")
link(rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png")
//Add to homescreen for Safari on iOS
meta(name="apple-mobile-web-app-capable" content="yes")
meta(name="apple-mobile-web-app-status-bar-style" content="black")
meta(name="apple-mobile-web-app-title" content="Material Design Lite")
link(rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png")
//Tile icon for Win8 (144x144 + tile color)
meta(name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png")
meta(name="msapplication-TileColor" content="#3372DF")
link(href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet")
link(href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet")
link(rel="stylesheet" href="/bower_components/material-design-lite/material.min.css")
link(rel="stylesheet" href="styles.css")
block style
//
style.
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
body
div(class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header")
header(class="demo-header mdl-layout__header mdl-color--white mdl-color--grey-100 mdl-color-text--grey-600")
div(class="mdl-layout__header-row")
span(class="mdl-layout-title")= pageTitle
div(class="mdl-layout-spacer")
div(class="mdl-textfield mdl-js-textfield mdl-textfield--expandable")
label(class="mdl-button mdl-js-button mdl-button--icon" for="search")
i(class="material-icons") search
div(class="mdl-textfield__expandable-holder")
input(class="mdl-textfield__input" type="text" id="search")
label(class="mdl-textfield__label" for="search") Enter your query...
button(class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn")
i(class="material-icons") more_vert
ul(class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn")
li(class="mdl-menu__item") About
li(class="mdl-menu__item") Contact
li(class="mdl-menu__item") Legal information
div(class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50")
header(class="demo-drawer-header")
img(src="image/user.png" class="demo-avatar")
div(class="demo-avatar-dropdown")
span hello@email.com
div(class="mdl-layout-spacer")
button(id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon")
i(class="material-icons") arrow_drop_down
ul(class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn")
button(class="mdl-menu__item") hello@email.com
button(class="mdl-menu__item") Add another account...
nav(class="demo-navigation mdl-navigation mdl-color--blue-grey-800")
a(class="mdl-navigation__link" href="")
i(class="mdl-color-text--blue-grey-400 material-icons") home
| Home
a(class="mdl-navigation__link" href="")
i(class="mdl-color-text--blue-grey-400 material-icons") search
| Search
div(class="mdl-layout-spacer")
a(class="mdl-navigation__link" href="")
i(class="mdl-color-text--blue-grey-400 material-icons") help_outline
main(class="mdl-layout__content mdl-color--grey-100")
div(class="mdl-grid demo-content")
block content
block script
script(src="/bower_components/material-design-lite/material.min.js")
script(src="/bower_components/angular/angular.min.js")
script(src="/bower_components/jquery/dist/jquery.min.js")