Implement text template review (closes #406)
commit 4b14d019974a251dfcd43a5ef327c777216f26d8
Author: Alexander Surma <surma@surmair.de>
Date: Fri Jun 19 12:27:55 2015 +0100
Code review
commit 8033ef62cb99e3e6d801eacf94ec01b205723294
Author: Alexander Surma <surma@surmair.de>
Date: Wed Jun 17 16:17:15 2015 +0100
Implement review for feature page of text template
commit 6b845e34381686e2b4754d42ebaeb8911441e4ce
Author: Alexander Surma <surma@surmair.de>
Date: Wed Jun 17 14:41:22 2015 +0100
Implement review for main page of text template
commit d2246fa882d1a43bcd5f5e53fd2cfc053513c195
Author: Alexander Surma <surma@surmair.de>
Date: Tue Jun 16 19:04:44 2015 +0100
Working
master
Alexander Surma
parent
7b6aac355e
commit
172358f769
|
|
@ -43,13 +43,13 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
|
||||
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
|
||||
<div class="mdl-layout__header-row">
|
||||
</div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<h2>Name & Title</h2>
|
||||
<h3>Name & Title</h3>
|
||||
</div>
|
||||
<div class="mdl-layout__header-row">
|
||||
</div>
|
||||
|
|
@ -72,8 +72,8 @@
|
|||
</header>
|
||||
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
|
||||
<div class="mdl-card__supporting-text">
|
||||
<h3>Features</h3>
|
||||
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse. Pariatur occaecat nisi laboris tempor laboris eiusmod qui id Lorem esse commodo in. Exercitation aute dolore deserunt culpa consequat elit labore incididunt elit anim.
|
||||
<h4>Features</h4>
|
||||
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse.
|
||||
</div>
|
||||
<div class="mdl-card__actions">
|
||||
<a href="#" class="mdl-button">Read our features</a>
|
||||
|
|
@ -91,24 +91,27 @@
|
|||
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
|
||||
<div class="mdl-card mdl-cell mdl-cell--12-col">
|
||||
<div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing">
|
||||
<h3 class="mdl-cell mdl-cell--12-col">Details</h3>
|
||||
<div class="section__circle mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
|
||||
<div class="mdl-color--primary"></div>
|
||||
<h4 class="mdl-cell mdl-cell--12-col">Details</h4>
|
||||
<div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
|
||||
<div class="section__circle-container__circle mdl-color--primary"></div>
|
||||
</div>
|
||||
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
|
||||
Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis proident minim.
|
||||
<h5>Lorem ipsum dolor sit amet</h5>
|
||||
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis <a href="#">proident minim</a>.
|
||||
</div>
|
||||
<div class="section__circle mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
|
||||
<div class="mdl-color--primary"></div>
|
||||
<div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
|
||||
<div class="section__circle-container__circle mdl-color--primary"></div>
|
||||
</div>
|
||||
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
|
||||
Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis proident minim.
|
||||
<h5>Lorem ipsum dolor sit amet</h5>
|
||||
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis <a href="#">proident minim</a>.
|
||||
</div>
|
||||
<div class="section__circle mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
|
||||
<div class="mdl-color--primary"></div>
|
||||
<div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
|
||||
<div class="section__circle-container__circle mdl-color--primary"></div>
|
||||
</div>
|
||||
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
|
||||
Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis proident minim.
|
||||
<h5>Lorem ipsum dolor sit amet</h5>
|
||||
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis <a href="#">proident minim</a>.
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-card__actions">
|
||||
|
|
@ -127,7 +130,7 @@
|
|||
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
|
||||
<div class="mdl-card mdl-cell mdl-cell--12-col">
|
||||
<div class="mdl-card__supporting-text">
|
||||
<h3>Technology</h3>
|
||||
<h4>Technology</h4>
|
||||
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse. Pariatur occaecat nisi laboris tempor laboris eiusmod qui id Lorem esse commodo in. Exercitation aute dolore deserunt culpa consequat elit labore incididunt elit anim.
|
||||
</div>
|
||||
<div class="mdl-card__actions">
|
||||
|
|
@ -143,37 +146,38 @@
|
|||
<li class="mdl-menu__item">Dolor</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="mdl-color--white mdl-grid">
|
||||
<div class="section__circle section__circle--big mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
|
||||
<div class="mdl-color--accent"></div>
|
||||
<section class="section--footer mdl-color--white mdl-grid">
|
||||
<div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
|
||||
<div class="section__circle-container__circle mdl-color--accent section__circle--big"></div>
|
||||
</div>
|
||||
<div class="section__text mdl-cell mdl-cell--4-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
|
||||
Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex. Magna do magna ea anim occaecat anim non sit adipisicing et do sit sit laboris. Magna dolore do id mollit reprehenderit.
|
||||
<h5>Lorem ipsum dolor sit amet</h5>
|
||||
Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex.
|
||||
</div>
|
||||
<div class="section__circle section__circle--big mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
|
||||
<div class="mdl-color--accent"></div>
|
||||
<div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
|
||||
<div class="section__circle-container__circle mdl-color--accent section__circle--big"></div>
|
||||
</div>
|
||||
<div class="section__text mdl-cell mdl-cell--4-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
|
||||
Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex. Magna do magna ea anim occaecat anim non sit adipisicing et do sit sit laboris. Magna dolore do id mollit reprehenderit.
|
||||
<h5>Lorem ipsum dolor sit amet</h5>
|
||||
Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex.
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="mdl-layout__tab-panel" id="features">
|
||||
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
|
||||
<div class="mdl-card mdl-cell mdl-cell--12-col">
|
||||
<h3>Features</h3>
|
||||
Minim duis incididunt est cillum est ex occaecat consectetur.
|
||||
|
||||
<section class="section--center mdl-grid mdl-grid--no-spacing">
|
||||
<div class="mdl-cell mdl-cell--12-col">
|
||||
<h4>Features</h4>
|
||||
Minim duis incididunt est cillum est ex occaecat consectetur. Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex.
|
||||
<ul class="toc">
|
||||
<h4>Contents</h4>
|
||||
<a href="#">Lorem ipsum</a>
|
||||
<a href="#">Lorem ipsum</a>
|
||||
<a href="#">Lorem ipsum</a>
|
||||
<a href="#">Lorem ipsum</a>
|
||||
<a href="#">Lorem ipsum</a>
|
||||
<a href="#lorem1">Lorem ipsum</a>
|
||||
<a href="#lorem2">Lorem ipsum</a>
|
||||
<a href="#lorem3">Lorem ipsum</a>
|
||||
<a href="#lorem4">Lorem ipsum</a>
|
||||
<a href="#lorem5">Lorem ipsum</a>
|
||||
</ul>
|
||||
|
||||
<h4>Lorem ipsum dolor sit amet</h4>
|
||||
<h5 id="lorem1">Lorem ipsum dolor sit amet</h5>
|
||||
Excepteur et pariatur officia veniam anim culpa cupidatat consequat ad velit culpa est non.
|
||||
<ul>
|
||||
<li>Nisi qui nisi duis commodo duis reprehenderit consequat velit aliquip.</li>
|
||||
|
|
@ -187,7 +191,7 @@
|
|||
<p>
|
||||
Do dolor eiusmod eu mollit dolore nostrud deserunt cillum irure esse sint irure fugiat exercitation. Magna sit voluptate id in tempor elit veniam enim cupidatat ea labore elit. Aliqua pariatur eu nulla labore magna dolore mollit occaecat sint commodo culpa. Eu non minim duis pariatur Lorem quis exercitation. Sunt qui ex incididunt sit anim incididunt sit elit ad officia id.
|
||||
</p>
|
||||
<p>
|
||||
<p id="lorem2">
|
||||
Tempor voluptate ex consequat fugiat aliqua. Do sit et reprehenderit culpa deserunt culpa. Excepteur quis minim mollit irure nulla excepteur enim quis in laborum. Aliqua elit voluptate ad deserunt nulla reprehenderit adipisicing sint. Est in eiusmod exercitation esse commodo. Ea reprehenderit exercitation veniam adipisicing minim nostrud. Veniam dolore ex ea occaecat non enim minim id ut aliqua adipisicing ad. Occaecat excepteur aliqua tempor cupidatat aute dolore deserunt ipsum qui incididunt aliqua occaecat sit quis. Culpa sint aliqua aliqua reprehenderit veniam irure fugiat ea ad.
|
||||
</p>
|
||||
<p>
|
||||
|
|
@ -197,14 +201,12 @@
|
|||
Id occaecat velit non ipsum occaecat aliqua quis ut. Eiusmod est magna non esse est ex incididunt aute ullamco. Cillum excepteur sint ipsum qui quis velit incididunt amet. Qui deserunt anim enim laborum cillum reprehenderit duis mollit amet ad officia enim. Minim sint et quis aliqua aliqua do minim officia dolor deserunt ipsum laboris. Nulla nisi voluptate consectetur est voluptate et amet. Occaecat ut quis adipisicing ad enim. Magna est magna sit duis proident veniam reprehenderit fugiat reprehenderit enim velit ex. Ullamco laboris culpa irure aliquip ad Lorem consequat veniam ad ipsum eu. Ipsum culpa dolore sunt officia laborum quis.
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
<h5 id="lorem3">Lorem ipsum dolor sit amet</h5>
|
||||
|
||||
<h4>Lorem ipsum dolor sit amet</h4>
|
||||
|
||||
<p>
|
||||
<p id="lorem4">
|
||||
Eiusmod nulla aliquip ipsum reprehenderit nostrud non excepteur mollit amet esse est est dolor. Dolore quis pariatur sit consectetur veniam esse ullamco duis Lorem qui enim ut veniam. Officia deserunt minim duis laborum dolor in velit pariatur commodo ullamco eu. Aute adipisicing ad duis labore laboris do mollit dolor cillum sunt aliqua ullamco. Esse tempor quis cillum consequat reprehenderit. Adipisicing proident anim eu sint elit aliqua anim dolore cupidatat fugiat aliquip qui.
|
||||
</p>
|
||||
<p>
|
||||
<p id="lorem5">
|
||||
Nisi eiusmod esse cupidatat excepteur exercitation ipsum reprehenderit nostrud deserunt aliqua ullamco. Anim est irure commodo eiusmod pariatur officia. Est dolor ipsum excepteur magna aliqua ad veniam irure qui occaecat eiusmod aute fugiat commodo. Quis mollit incididunt amet sit minim velit eu fugiat voluptate excepteur. Sit minim id pariatur ex cupidatat cupidatat nostrud nostrud ipsum.
|
||||
</p>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -1,125 +1,177 @@
|
|||
html, body {
|
||||
font-family: 'Roboto', 'Helvetica', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.mdl-layout__tab-bar-button, .mdl-layout__drawer-button {
|
||||
.mdl-demo .mdl-layout__header-row {
|
||||
padding-left: 40px;
|
||||
height: 53px;
|
||||
}
|
||||
.mdl-demo .mdl-layout__tab-bar-button, .mdl-layout__drawer-button {
|
||||
display: none;
|
||||
}
|
||||
.mdl-layout__tab-bar-container {
|
||||
.mdl-demo .mdl-layout__tab-bar-container {
|
||||
overflow: visible;
|
||||
height: 64px;
|
||||
}
|
||||
.mdl-layout__tab-bar {
|
||||
.mdl-demo .mdl-layout__tab-bar {
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
padding-left: 16px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
main {
|
||||
padding: 48px 0;
|
||||
.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
#add {
|
||||
.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab.is-active::after {
|
||||
background-color: white;
|
||||
height: 4px;
|
||||
}
|
||||
.mdl-demo main > .mdl-layout__tab-panel {
|
||||
padding: 0;
|
||||
padding-top: 48px;
|
||||
height: 100%;
|
||||
}
|
||||
.mdl-demo .mdl-card {
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.mdl-demo .mdl-card > * {
|
||||
height: auto;
|
||||
}
|
||||
.mdl-demo .mdl-card .mdl-card__supporting-text {
|
||||
margin: 40px;
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
}
|
||||
.mdl-demo.mdl-demo .mdl-card__supporting-text h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.mdl-demo .mdl-card__actions {
|
||||
margin: 0;
|
||||
padding: 4px 40px;
|
||||
color: inherit;
|
||||
}
|
||||
.mdl-demo .mdl-card__actions a {
|
||||
color: #00BCD4;
|
||||
margin: 0;
|
||||
}
|
||||
.mdl-demo .mdl-card__actions a:hover,
|
||||
.mdl-demo .mdl-card__actions a:active {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
.mdl-demo .mdl-card__supporting-text + .mdl-card__actions {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.mdl-demo #add {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: 20px;
|
||||
top: 36px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.mdl-layout__content section:not(:last-of-type) {
|
||||
.mdl-demo .mdl-layout__content section:not(:last-of-type) {
|
||||
position: relative;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
section.section--center {
|
||||
max-width: 840px;
|
||||
.mdl-demo section.section--center {
|
||||
max-width: 860px;
|
||||
}
|
||||
section > header{
|
||||
.mdl-demo #features section.section--center {
|
||||
max-width: 620px;
|
||||
}
|
||||
.mdl-demo section > header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
section > .section__play-btn {
|
||||
.mdl-demo section > .section__play-btn {
|
||||
min-height: 200px;
|
||||
}
|
||||
section > header > .material-icons {
|
||||
.mdl-demo section > header > .material-icons {
|
||||
font-size: 3rem;
|
||||
}
|
||||
section > button {
|
||||
position: absolute !important;
|
||||
.mdl-demo section > button {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
section .section__circle {
|
||||
.mdl-demo section .section__circle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
section .section__circle > div {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
margin: 8px;
|
||||
.mdl-demo section .section__text {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
padding-top: 8px;
|
||||
}
|
||||
section .section__circle--big > div {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 36px;
|
||||
.mdl-demo section .section__text h5 {
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
section.section--center .section__text:not(:last-child) {
|
||||
.mdl-demo section .section__text a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.mdl-demo section .section__circle-container > .section__circle-container__circle {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 32px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.mdl-demo section.section--footer .section__circle--big {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50px;
|
||||
margin: 8px 32px;
|
||||
}
|
||||
.mdl-demo section.section--footer {
|
||||
padding: 64px 0;
|
||||
}
|
||||
.mdl-demo section.section--center .section__text:not(:last-child) {
|
||||
border-bottom: 1px solid rgba(0,0,0,.13);
|
||||
}
|
||||
.mdl-card .mdl-card__supporting-text > h3:first-child {
|
||||
margin-bottom: 24px !important;
|
||||
.mdl-demo .mdl-card .mdl-card__supporting-text > h3:first-child {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
#features .mdl-card {
|
||||
padding: 72px;
|
||||
.mdl-demo .mdl-layout__tab-panel:not(#overview) {
|
||||
background-color: white;
|
||||
}
|
||||
#features section {
|
||||
.mdl-demo #features section {
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
#features h3, #features h4 {
|
||||
margin-bottom: 8px;
|
||||
.mdl-demo #features h4, #features h5 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.toc {
|
||||
border-left: 2px solid #C1EEF4;
|
||||
.mdl-demo .toc {
|
||||
border-left: 4px solid #C1EEF4;
|
||||
margin: 24px;
|
||||
padding: 0;
|
||||
padding-left: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.toc h4 {
|
||||
font-size: 0.8rem;
|
||||
.mdl-demo .toc h4 {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
.toc a {
|
||||
.mdl-demo .toc a {
|
||||
@extend mdl-color-text--cyan-300;
|
||||
text-decoration: none;
|
||||
line-height: 1.5em;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.mdl-card {
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.mdl-card > * {
|
||||
height: auto;
|
||||
}
|
||||
.mdl-card__actions {
|
||||
color: inherit;
|
||||
}
|
||||
.mdl-card__actions a {
|
||||
color: inherit;
|
||||
}
|
||||
.mdl-card__supporting-text {
|
||||
flex-grow: 1;
|
||||
margin: 32px;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
}
|
||||
.mdl-menu__container {
|
||||
.mdl-demo .mdl-menu__container {
|
||||
z-index: 99;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue