Created
September 4, 2017 19:56
-
-
Save joduplessis/85e95ef54e61a011b457b14ac427b960 to your computer and use it in GitHub Desktop.
Page layout for replicating a Wunderlist type of app using the Google Material components. This is only the 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
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css" /> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans:400,100,200,300,500,600,700,800,900" type="text/css" /> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arvo:400,400italic,700,700italic" type="text/css" /> | |
| <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.blue_grey-amber.min.css" /> | |
| <style> | |
| * { | |
| font-family: "WorkSans", "Helvetica","Arial",sans-serif; | |
| box-sizing: border-box; /* add for browser prefixes */ | |
| } | |
| :root { | |
| --header-height: 65px; | |
| --list-background: #ffffff; | |
| } | |
| .mdl-layout__header { min-height: 65px; position: relative; } | |
| .mdl-layout__header .mdl-icon-toggle.is-checked .mdl-icon-toggle__label { color: white; } | |
| .mdl-layout__header .mdl-icon-toggle__label { color: #D5AA32; } | |
| .mdl-layout__header .mdl-layout__header-row { padding: 0px 10px 0px 10px; } | |
| .mdl-layout__header .mdl-button--icon { overflow: visible; } | |
| .mdl-grid-header { height: var(--header-height); } | |
| .mdl-grid-main { height: calc(100vh - var(--header-height)); } | |
| .mdl-cell { position: relative; } | |
| .mdl-textfield { width: 100%; } | |
| .mdl-mini-footer { z-index: 1; } | |
| .background-color-transparent { background-color: transparent; } | |
| .background-color-yellow { background-color: #E6BC48; } | |
| .background-color-darkyellow { background-color: #D5AA32; } | |
| .background-color-darkgrey { background-color: #404548; } | |
| .background-color-semidarkgrey { background-color: #616567; } | |
| .background-color-grey { background-color: #E7E7E7; } | |
| .background-color-lightgrey { background-color: #EAEAEA; } | |
| .background-color-offwhite { background-color: #FAFAFA; } | |
| .background-color-lightergrey { background-color: #eeeeee; } | |
| .done { text-decoration: line-through; } | |
| .overdue { color: red !important; font-weight: bold !important; } /* Only place it's used */ | |
| .color-grey { color: #404548; } | |
| .position-absolute-bottom { position: absolute; bottom: 0px; width: 100%; } | |
| .hide { display:none; } | |
| .no-shadow { box-shadow: none; } | |
| .mdl-fix__h6_position.header-area-buttons { | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| position:relative; | |
| top: -5px; | |
| } | |
| .mdl-button.header-area-buttons { color: #D5AA32; } | |
| .mdl-button.header-area-buttons.is-active { color: white; } | |
| .header-searchbox { | |
| background-color: #F2C947; | |
| display: inline-block; | |
| border-radius: 5px; | |
| width: 50%; | |
| margin-left: 10px; | |
| } | |
| .header-searchbox form { | |
| padding: 0px; | |
| margin: 0px; | |
| display: inline-block; | |
| width: 100%; | |
| } | |
| .header-searchbox form input { | |
| width: 100%; | |
| font-size: 14px; | |
| outline: none; | |
| display: inline-block; | |
| padding:10px; | |
| background: transparent; | |
| border: 0px; | |
| color: #E5BA3E; | |
| } | |
| .people-searchbox { | |
| display: inline-block; | |
| width: 100%; | |
| margin: 0px; | |
| padding: 10px; | |
| } | |
| .people-searchbox form { | |
| padding: 0px; | |
| margin: 0px; | |
| display: block; | |
| width: 100%; | |
| border-radius: 5px; | |
| background-color: #EEE; | |
| } | |
| .people-searchbox form input { | |
| width: 100%; | |
| font-size: 14px; | |
| outline: none; | |
| display: inline-block; | |
| padding:10px; | |
| background: transparent; | |
| border: 0px; | |
| color: #CCC; | |
| } | |
| .project-tools .material-icons { color: #ccc; } | |
| .task-tools span.mdl-radio__label, .task-tools h6 { | |
| color: #D5AA32; | |
| font-size:11px; | |
| } | |
| .task-tools h6 { | |
| position:relative; | |
| top: -4px; | |
| } | |
| .task-tools .material-icons { | |
| color: #D5AA32; | |
| } | |
| .task-tools label { | |
| margin-right: 10px; | |
| } | |
| .asset-list { | |
| padding: 20px; | |
| } | |
| .asset-list table { | |
| border: 0; | |
| width: 100%; | |
| } | |
| .asset-list table td { | |
| border-color: #efefef; | |
| background: var(--list-background); | |
| color: #aaa; | |
| } | |
| .asset-list table th { | |
| color: #E6BC48; | |
| } | |
| ul.task-list { | |
| padding: 0px 20px 0px 20px; | |
| margin: 0px; | |
| } | |
| ul.task-list li { | |
| background: #FAFAFA; | |
| border-radius: 3px; | |
| margin-bottom: 2px; | |
| cursor: pointer; | |
| } | |
| ul.task-list li:hover { | |
| background: #F6F6F6; | |
| } | |
| ul.task-list li .mdl-checkbox { | |
| cursor: pointer; | |
| } | |
| ul.task-list .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-info { | |
| color: #aaa; | |
| } | |
| ul.task-list .mdl-list__item .mdl-button.mdl-js-button.mdl-button--icon { | |
| color: #dedede; | |
| } | |
| ul.task-list li.heading { | |
| background: transparent; | |
| padding: 0px; | |
| cursor: default; | |
| } | |
| ul.task-list li:first-child h5 { | |
| color: #777; | |
| font-family: "Arvo"; | |
| font-size: 16px; | |
| } | |
| ul.task-list li button.button-date { | |
| font-size: 10px; | |
| } | |
| ul.people-list { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| ul.people-list li { | |
| border-bottom: 1px solid #eeeeee; | |
| background: var(--list-background); | |
| cursor: pointer; | |
| } | |
| ul.people-list li:hover { | |
| background: #F6F6F6; | |
| } | |
| ul.people-list li button.mdl-button--colored i { | |
| color: #666; | |
| } | |
| ul.people-list li, | |
| ul.people-list li .material-icons.delete { | |
| color: #aaa; | |
| } | |
| ul.people-list li span.people-image { | |
| display: inline-block; | |
| width: 50px; | |
| height: 50px; | |
| overflow: hidden; | |
| position:relative; | |
| margin-right: 10px; | |
| border-radius: 30px; | |
| } | |
| ul.people-list li .material-icons.status-icon.online { color: rgb(205, 220, 57); } | |
| ul.people-list li .material-icons.status-icon.away { color: rgb(255, 152, 0); } | |
| ul.people-list li span.people-image img { | |
| width: 50px; | |
| height: auto; | |
| position: absolute; | |
| top: 0px; | |
| left:0px; | |
| } | |
| ul.people-list li span.mdl-list__item-secondary-info.last-seen { | |
| color: #ccc; | |
| font-size: 11px; | |
| } | |
| ul.people-list li span.people-user { | |
| color: #666; | |
| font-size: 14px; | |
| clear: both; | |
| } | |
| ul.people-list li span.people-status { | |
| color: #aaa; | |
| font-size: 11px; | |
| display: block; | |
| padding-left: 10px; | |
| } | |
| ul.project-list { | |
| padding: 0px; | |
| margin: 0px; | |
| } | |
| ul.project-list li { | |
| border-bottom: 1px solid #eeeeee; | |
| background: var(--list-background); | |
| cursor: pointer; | |
| } | |
| ul.project-list li:hover { | |
| background: #FAFAFA; | |
| } | |
| ul.project-list li.selected { | |
| background: #FAFAFA; | |
| } | |
| ul.project-list .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-info { | |
| color: #EAEAEA; | |
| } | |
| ul.project-list li.selected span, | |
| ul.project-list .selected.mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-info { | |
| color: #E6BC48; | |
| } | |
| .chat-window { | |
| z-index: 1; | |
| height: auto; | |
| } | |
| .chat-window .mdl-list__item--three-line { height: auto; } | |
| .chat-window .mdl-list__item--three-line .mdl-list__item-primary-content { height: auto; } | |
| .chat-window .mdl-list__item--three-line .mdl-list__item-text-body { height: auto; } | |
| .chat-window footer form { padding: 20px; } | |
| .chat-window main { | |
| width: 100%; | |
| padding: 20px; | |
| } | |
| .chat-window main ul { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| .chat-window main ul li { | |
| border-bottom: 1px solid #eeeeee; | |
| background: #FAFAFA; | |
| margin-bottom: 3px; | |
| border-radius: 5px; | |
| width:55%; | |
| clear:both; | |
| } | |
| .chat-window main ul li.me { | |
| float:right; | |
| } | |
| .chat-window main ul li button.mdl-button--colored i { | |
| color: #666; | |
| } | |
| .chat-window main ul li, | |
| .chat-window main ul li .material-icons.delete { | |
| color: #aaa; | |
| } | |
| .chat-window main ul li span.chat-people-image { | |
| display: inline-block; | |
| width: 50px; | |
| height: 50px; | |
| overflow: hidden; | |
| position:relative; | |
| margin-right: 10px; | |
| border-radius: 30px; | |
| float:left; | |
| } | |
| .chat-window main ul li span.chat-people-image img { | |
| width: 50px; | |
| height: auto; | |
| position: absolute; | |
| top: 0px; | |
| left:0px; | |
| } | |
| .chat-window main ul li span.chat-time.mdl-list__item-secondary-info { | |
| color: #ccc; | |
| font-size: 11px; | |
| } | |
| .chat-window main ul li span.mdl-list__item-text-body.chat-text { | |
| color: #aaa; | |
| font-size: 12px; | |
| } | |
| .chat-window main ul li span.chat-user { | |
| color: #666; | |
| font-size: 14px; | |
| } | |
| </style> | |
| <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="mdl-layout mdl-js-layout"> | |
| <header class="mdl-layout__header mdl-grid-header background-color-yellow app-header"> | |
| <div class="mdl-layout__header-row"> | |
| <button class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">keyboard_backspace</i> | |
| </button> | |
| <h6 class="mdl-fix__h6_position">Noodle</h6> | |
| <div class="mdl-layout-spacer"></div> | |
| <button class="mdl-button mdl-js-button header-area-buttons mdl-badge mdl-badge--overlap is-active">Tasks</button> | |
| <button class="mdl-button mdl-js-button header-area-buttons mdl-badge mdl-badge--overlap">Assets</button> | |
| <button class="mdl-button mdl-js-button header-area-buttons mdl-badge mdl-badge--overlap">Chat</button> | |
| <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1"> | |
| <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked> | |
| <i class="mdl-icon-toggle__label material-icons mdl-badge mdl-badge--overlap">assignment_turned_in</i> | |
| </label> | |
| <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2"> | |
| <input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input" checked> | |
| <i class="mdl-icon-toggle__label material-icons mdl-badge mdl-badge--overlap">dashboard</i> | |
| </label> | |
| <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-3"> | |
| <input type="checkbox" id="icon-toggle-3" class="mdl-icon-toggle__input"> | |
| <i class="mdl-icon-toggle__label material-icons mdl-badge mdl-badge--overlap" data-badge="2">fingerprint</i> | |
| </label> | |
| <div class="header-searchbox"> | |
| <form action="#"> | |
| <input type="text" value="Search"/> | |
| </form> | |
| </div> | |
| <button id="app-menu" class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">more_vert</i> | |
| </button> | |
| <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="app-menu"> | |
| <li class="mdl-menu__item">Help</li> | |
| <li class="mdl-menu__item">Profile</li> | |
| <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Logout</li> | |
| <li class="mdl-menu__item">Report an error</li> | |
| </ul> | |
| </div> | |
| </header> | |
| <main class="mdl-layout__content"> | |
| <div class="mdl-grid mdl-grid--no-spacing mdl-grid-main"> | |
| <div class="mdl-cell mdl-cell--3-col mdl-cell--stretch background-color-offwhite"> | |
| <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> | |
| <main class="mdl-layout__content"> | |
| <ul class="demo-list-two mdl-list project-list"> | |
| <li class="mdl-list__item mdl-list__item--two-line"> | |
| <span class="mdl-list__item-primary-content"> | |
| <i class="material-icons">done_all</i> | |
| <span>All tasks</span> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <span class="mdl-list__item-secondary-info">11 Tasks</span> | |
| </span> | |
| </li> | |
| <li class="mdl-list__item mdl-list__item--two-line selected"> | |
| <span class="mdl-list__item-primary-content"> | |
| <i class="material-icons">done</i> | |
| <span>Noodle</span> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <span class="mdl-list__item-secondary-info">11 Tasks</span> | |
| </span> | |
| </li> | |
| <li class="mdl-list__item mdl-list__item--two-line"> | |
| <span class="mdl-list__item-primary-content"> | |
| <i class="material-icons">done</i> | |
| <span class="mdl-badge" data-badge="1">CHOW</span> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <span class="mdl-list__item-secondary-info">4 Tasks</span> | |
| </span> | |
| </li> | |
| <li class="mdl-list__item mdl-list__item--two-line"> | |
| <span class="mdl-list__item-primary-content"> | |
| <i class="material-icons">done</i> | |
| <span class="mdl-badge" data-badge="4">Admin</span> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <span class="mdl-list__item-secondary-info">20 Tasks</span> | |
| </span> | |
| </li> | |
| </ul> | |
| </main> | |
| <footer class="mdl-mini-footer background-color-darkgrey"> | |
| <div class="mdl-mini-footer__left-section"> | |
| <button class="mdl-button mdl-js-button mdl-button--icon" id="user-menu"> | |
| <i class="material-icons">playlist_add</i> | |
| </button> | |
| <h8>Create project</h8> | |
| </div> | |
| </footer> | |
| </div> | |
| </div> | |
| <div class="mdl-cell mdl-cell--8-col mdl-cell--stretch background-color-lightgrey hide"> | |
| <div class="chat-window"> | |
| <main class="mdl-layout__content"> | |
| <ul class="mdl-list"> | |
| <li class="mdl-list__item mdl-list__item--three-line"> | |
| <span class="mdl-list__item-primary-content"> | |
| <span class="chat-people-image"><img src="pic1.jpg" /></span> | |
| <span class="chat-user">Jo du Plessis</span> | |
| <span class="mdl-list__item-text-body chat-text"> | |
| Hey, are those files I sent fine? | |
| </span> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <span class="mdl-list__item-secondary-info chat-time">7m</span> | |
| </span> | |
| </li> | |
| <li class="mdl-list__item mdl-list__item--three-line me"> | |
| <span class="mdl-list__item-primary-content"> | |
| <span class="chat-people-image"><img src="pic2.jpg" /></span> | |
| <span class="chat-user">Bryan Cranston</span> | |
| <span class="mdl-list__item-text-body chat-text"> | |
| Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle. | |
| </span> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <span class="mdl-list__item-secondary-info chat-time">14m</span> | |
| </span> | |
| </li> | |
| <li class="mdl-list__item mdl-list__item--three-line"> | |
| <span class="mdl-list__item-primary-content"> | |
| <span class="chat-people-image"><img src="pic1.jpg" /></span> | |
| <span class="chat-user">Jo du Plessis</span> | |
| <span class="mdl-list__item-text-body chat-text"> | |
| Cool, I'll get those to you now. | |
| </span> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <span class="mdl-list__item-secondary-info chat-time">24m</span> | |
| </span> | |
| </li> | |
| <li class="mdl-list__item mdl-list__item--three-line"> | |
| <span class="mdl-list__item-primary-content"> | |
| <span class="chat-people-image"><img src="pic1.jpg" /></span> | |
| <span class="chat-user">Jo du Plessis</span> | |
| <span class="mdl-list__item-text-body chat-text"> | |
| It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. | |
| </span> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <span class="mdl-list__item-secondary-info chat-time">24m</span> | |
| </span> | |
| </li> | |
| </ul> | |
| </main> | |
| <footer class="mdl-layout__footer position-absolute-bottom"> | |
| <form action="#"> | |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> | |
| <input class="mdl-textfield__input" type="text" id="sample3"> | |
| <label class="mdl-textfield__label" for="sample3">Enter text and press enter</label> | |
| </div> | |
| </form> | |
| </footer> | |
| </div> | |
| </div> | |
| <div class="mdl-cell mdl-cell--8-col mdl-cell--stretch background-color-lightgrey hide"> | |
| <div class="page-content asset-list"> | |
| <table class="mdl-data-table mdl-js-data-table" width="100%;"> | |
| <thead> | |
| <tr> | |
| <th class="mdl-data-table__cell--non-numeric">Document name</th> | |
| <th class="mdl-data-table__cell--non-numeric">Last modifed</th> | |
| <th></th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="mdl-data-table__cell--non-numeric">Roadmap</td> | |
| <td class="mdl-data-table__cell--non-numeric">7m ago</td> | |
| <td> | |
| <button class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">cloud_download</i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="mdl-data-table__cell--non-numeric">Change log</td> | |
| <td class="mdl-data-table__cell--non-numeric">4d 30m ago</td> | |
| <td> | |
| <button class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">cloud_download</i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="mdl-data-table__cell--non-numeric">Proposal</td> | |
| <td class="mdl-data-table__cell--non-numeric">1d 4h ago</td> | |
| <td> | |
| <button class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">cloud_download</i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="mdl-data-table__cell--non-numeric">Notes</td> | |
| <td class="mdl-data-table__cell--non-numeric">3m 1d</td> | |
| <td> | |
| <button class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">cloud_download</i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="mdl-cell mdl-cell--9-col mdl-cell--stretch background-color-lightgrey"> | |
| <header class="mdl-layout__header background-color-transparent no-shadow task-tools"> | |
| <div class="mdl-layout__header-row"> | |
| <button id="limit-menu" class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">date_range</i> | |
| </button> | |
| <h6>Showing tasks for <strong>today</strong></h6> | |
| <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="limit-menu"> | |
| <li class="mdl-menu__item" disabled>Today</li> | |
| <li class="mdl-menu__item">Tomorrow</li> | |
| <li class="mdl-menu__item">This week</li> | |
| <li class="mdl-menu__item">This month</li> | |
| <li class="mdl-menu__item">This year</li> | |
| <li class="mdl-menu__item">All</li> | |
| </ul> | |
| <button id="sort-menu" class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">reorder</i> | |
| </button> | |
| <h6>Sort by <strong>week</strong></h6> | |
| <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="sort-menu"> | |
| <li class="mdl-menu__item">By date</li> | |
| <li class="mdl-menu__item">By week</li> | |
| <li class="mdl-menu__item">By title</li> | |
| <li disabled class="mdl-menu__item">By project</li> | |
| </ul> | |
| <div class="mdl-layout-spacer"></div> | |
| <button id="sort-menu" class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">done_all</i> | |
| </button> | |
| <h6>Add new task</h6> | |
| </div> | |
| </header> | |
| <ul class="mdl-list task-list"> | |
| <li class="mdl-list__item heading"> | |
| <h5>Week 32</h5> | |
| </li> | |
| <li class="mdl-list__item"> | |
| <span class="mdl-list__item-primary-content"> | |
| <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1"> | |
| <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input"> | |
| <span class="mdl-checkbox__label">Bryan Cranston</span> | |
| </label> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <span class="mdl-list__item-secondary-info">Tomorrow</span> | |
| </span> | |
| <button class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">update</i> | |
| </button> | |
| <button id="task-menu" class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">more_vert</i> | |
| </button> | |
| <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="task-menu"> | |
| <li disabled class="mdl-menu__item">Delete</li> | |
| <li class="mdl-menu__item">Details</li> | |
| <li disabled class="mdl-menu__item">Delete</li> | |
| </ul> | |
| </li> | |
| <li class="mdl-list__item"> | |
| <span class="mdl-list__item-primary-content"> | |
| <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2"> | |
| <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input"> | |
| <span class="mdl-checkbox__label">Aaron Paul</span> | |
| </label> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <span class="mdl-list__item-secondary-info">Tomorrow</span> | |
| </span> | |
| <button class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">update</i> | |
| </button> | |
| <button id="task-menu" class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">more_vert</i> | |
| </button> | |
| </li> | |
| <li class="mdl-list__item"> | |
| <span class="mdl-list__item-primary-content"> | |
| <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-3"> | |
| <input type="checkbox" id="checkbox-3" class="mdl-checkbox__input"> | |
| <span class="mdl-checkbox__label">Bob Odenkirk</span> | |
| </label> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <span class="mdl-list__item-secondary-info overdue">Overdue</span> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <span class="mdl-list__item-secondary-info">Saturday</span> | |
| </span> | |
| <button class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">update</i> | |
| </button> | |
| <button id="task-menu" class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">more_vert</i> | |
| </button> | |
| </li> | |
| </ul> | |
| <ul class="demo-list-icon mdl-list task-list"> | |
| <li class="mdl-list__item heading"> | |
| <h5>Week 33</h5> | |
| </li> | |
| <li class="mdl-list__item"> | |
| <span class="mdl-list__item-primary-content"> | |
| <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-4"> | |
| <input type="checkbox" id="checkbox-4" class="mdl-checkbox__input" checked> | |
| <span class="mdl-checkbox__label">Bryan Cranston</span> | |
| </label> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <span class="mdl-list__item-secondary-info">Tuesday</span> | |
| </span> | |
| <button class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">update</i> | |
| </button> | |
| <button id="task-menu" class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">more_vert</i> | |
| </button> | |
| </li> | |
| </ul> | |
| <ul class="demo-list-icon mdl-list task-list"> | |
| <li class="mdl-list__item heading"> | |
| <h5>Done</h5> | |
| </li> | |
| <li class="mdl-list__item"> | |
| <span class="mdl-list__item-primary-content"> | |
| <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-4"> | |
| <input type="checkbox" id="checkbox-4" class="mdl-checkbox__input" checked> | |
| <span class="mdl-checkbox__label done">Bryan Cranston</span> | |
| </label> | |
| </span> | |
| <button class="mdl-button mdl-js-button mdl-button--icon"> | |
| <i class="material-icons">delete</i> | |
| </button> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mdl-cell mdl-cell--2-col mdl-cell--stretch background-color-offwhite hide"> | |
| <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs"> | |
| <main class="mdl-layout__content"> | |
| <div class="page-content"> | |
| <div class="people-searchbox"> | |
| <form action="#"> | |
| <input type="text" value="Find person"/> | |
| </form> | |
| </div> | |
| <ul class="demo-list-two mdl-list people-list"> | |
| <li class="mdl-list__item mdl-list__item--one-line"> | |
| <span class="mdl-list__item-primary-content"> | |
| <span class="people-image online"><img src="pic1.jpg" /></span> | |
| <span class="people-user">Jo du Plessis</span> | |
| <span class="people-status">5m ago</span> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <i class="material-icons status-icon online">panorama_fish_eye</i> | |
| </span> | |
| </li> | |
| <li class="mdl-list__item mdl-list__item--one-line"> | |
| <span class="mdl-list__item-primary-content"> | |
| <span class="people-image away"><img src="pic2.jpg" /></span> | |
| <span class="people-user">Bryan Cranston</span> | |
| <span class="people-status">Away</span> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <i class="material-icons status-icon away">panorama_fish_eye</i> | |
| </span> | |
| </li> | |
| <li class="mdl-list__item mdl-list__item--one-line"> | |
| <span class="mdl-list__item-primary-content"> | |
| <span class="people-image"><img src="pic1.jpg" /></span> | |
| <span class="people-user">Jo du Plessis</span> | |
| <span class="people-status">Offline</span> | |
| </span> | |
| <span class="mdl-list__item-secondary-content"> | |
| <i class="material-icons status-icon">panorama_fish_eye</i> | |
| </span> | |
| </li> | |
| </ul> | |
| </div> | |
| </main> | |
| <footer class="mdl-mini-footer background-color-darkgrey"> | |
| <div class="mdl-mini-footer__left-section"> | |
| <button id="project-detail-menu" class="mdl-button mdl-js-button mdl-button--icon edit"> | |
| <i class="material-icons">keyboard_arrow_up</i> | |
| </button> | |
| <h8>Edit project</h8> | |
| <ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect" for="project-detail-menu"> | |
| <li class="mdl-menu__item">Add user</li> | |
| <li class="mdl-menu__item">Disconnect assets</li> | |
| <li class="mdl-menu__item">Rename project</li> | |
| <li class="mdl-menu__item">Delete project</li> | |
| </ul> | |
| </div> | |
| </footer> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment