|
|
@ -50,60 +50,7 @@ |
|
|
|
</head> |
|
|
|
<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--grey-100 mdl-color-text--grey-600"> |
|
|
|
<div class="mdl-layout__header-row"> |
|
|
|
<span class="mdl-layout-title">Home</span> |
|
|
|
<div class="mdl-layout-spacer"></div> |
|
|
|
<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</i> |
|
|
|
</label> |
|
|
|
<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...</label> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn"> |
|
|
|
<i class="material-icons">more_vert</i> |
|
|
|
</button> |
|
|
|
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn"> |
|
|
|
<li class="mdl-menu__item">About</li> |
|
|
|
<li class="mdl-menu__item">Contact</li> |
|
|
|
<li class="mdl-menu__item">Legal information</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</header> |
|
|
|
<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="{% static 'images/user.jpg' %}" class="demo-avatar"> |
|
|
|
<div class="demo-avatar-dropdown"> |
|
|
|
<span>hello@example.com</span> |
|
|
|
<div class="mdl-layout-spacer"></div> |
|
|
|
<button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"> |
|
|
|
<i class="material-icons" role="presentation">arrow_drop_down</i> |
|
|
|
<span class="visuallyhidden">Accounts</span> |
|
|
|
</button> |
|
|
|
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn"> |
|
|
|
<li class="mdl-menu__item">hello@example.com</li> |
|
|
|
<li class="mdl-menu__item">info@example.com</li> |
|
|
|
<li class="mdl-menu__item"><i class="material-icons">add</i>Add another account...</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</header> |
|
|
|
<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" role="presentation">home</i>Home</a> |
|
|
|
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">inbox</i>Inbox</a> |
|
|
|
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">delete</i>Trash</a> |
|
|
|
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">report</i>Spam</a> |
|
|
|
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">forum</i>Forums</a> |
|
|
|
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">flag</i>Updates</a> |
|
|
|
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">local_offer</i>Promos</a> |
|
|
|
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">shopping_cart</i>Purchases</a> |
|
|
|
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">people</i>Social</a> |
|
|
|
<div class="mdl-layout-spacer"></div> |
|
|
|
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">help_outline</i><span class="visuallyhidden">Help</span></a> |
|
|
|
</nav> |
|
|
|
</div> |
|
|
|
{% block header %}{% endblock %} |
|
|
|
<main class="mdl-layout__content mdl-color--grey-100"> |
|
|
|
<div class="mdl-grid demo-content"> |
|
|
|
{% block content %} |
|
|
|