google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update blogpost page of blog template (Closes #384) 

Implement code review
master
Alexander Surma 2015-06-11 16:36:05 -07:00 committed by Addy Osmani
parent cd728130e4
commit 7435631e4b
4 changed files with 73 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
templates/blog/entry.html
View File

@ -46,30 +46,18 @@
</head> </head>
<body class="blogpost"> <body class="blogpost">
<div class="mdl-layout mdl-js-layout has-drawer is-upgraded"> <div class="mdl-layout mdl-js-layout has-drawer is-upgraded">
<header class="mdl-layout__header mdl-layout__header--scroll mdl-layout__header--transparent is-casting-shadow mdl-color-text--white"> <div class="demo-back">
<div class="mdl-layout__header-row"> <a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" href="index.html">
<!-- Title --> <i class="material-icons">arrow_back</i>
<span class="mdl-layout-title">The Newist</span> </a>
<!-- Add spacer, to align navigation to the right --> </div>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
<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">
</div>
</div>
</div>
</header>
<main class="mdl-layout__content mdl-grid"> <main class="mdl-layout__content mdl-grid">
<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col"> <div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">
<div class="mdl-card__media mdl-color-text--grey-50"> <div class="mdl-card__media mdl-color-text--grey-50">
<h3>On the road again</h3> <h3>On the road again</h3>
</div> </div>
<div class="mdl-color-text--grey-700 mdl-card__supporting-text meta"> <div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">
<img src="images/logo.svg" class="logo"> <div class="minilogo"></div>
<div> <div>
<strong>The Newist</strong> <strong>The Newist</strong>
<span>2 days ago</span> <span>2 days ago</span>
@ -96,7 +84,7 @@
<textarea rows=1 class="mdl-textfield__input" id="comment"></textarea> <textarea rows=1 class="mdl-textfield__input" id="comment"></textarea>
<label for="comment" class="mdl-textfield__label">Join the discussion</label> <label for="comment" class="mdl-textfield__label">Join the discussion</label>
</div> </div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--primary-dark mdl-color-text--grey-50"> <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons">check</i> <i class="material-icons">check</i>
</button> </button>
</form> </form>
@ -119,7 +107,7 @@
<i class="material-icons">thumb_down</i> <i class="material-icons">thumb_down</i>
</button> </button>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"> <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons">replay</i> <i class="material-icons">share</i>
</button> </button>
</nav> </nav>
<div class="comment__answers"> <div class="comment__answers">
@ -134,7 +122,7 @@
<div class="comment__text"> <div class="comment__text">
Yep, agree! Yep, agree!
</div> </div>
<nav> <nav class="comment__actions">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"> <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons">thumb_up</i> <i class="material-icons">thumb_up</i>
</button> </button>
@ -142,7 +130,7 @@
<i class="material-icons">thumb_down</i> <i class="material-icons">thumb_down</i>
</button> </button>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"> <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons">replay</i> <i class="material-icons">share</i>
</button> </button>
</nav> </nav>
</div> </div>
@ -151,15 +139,14 @@
</div> </div>
</div> </div>
<nav class="mdl-color-text--grey-50 mdl-cell mdl-cell--12-col mdl-grid"> <nav class="mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
<div class="mdl-cell mdl-cell--2-col"> <div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900"> <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900">
<i class="material-icons">arrow_back</i> <i class="material-icons">arrow_back</i>
</button> </button>
Newer Newer
</div> </div>
<div class="mdl-cell mdl-cell--8-col-desktop mdl-cell--4-col-tablet mdl-cell--hide-phone"></div> <div>
<div class="mdl-cell mdl-cell--2-col">
Older Older
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900"> <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900">
<i class="material-icons">arrow_forward</i> <i class="material-icons">arrow_forward</i>

BIN
templates/blog/images/co1.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

8
templates/blog/index.html
View File

@ -127,12 +127,13 @@
</div> </div>
</div> </div>
<nav class="mdl-cell mdl-cell--12-col"> <nav class="mdl-cell mdl-cell--12-col">
<a> <div class="empty"></div>
<div>
More More
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"> <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons">arrow_forward</i> <i class="material-icons">arrow_forward</i>
</button> </button>
</a> </div>
</nav> </nav>
</main> </main>
<div class="mdl-layout__obfuscator"></div> <div class="mdl-layout__obfuscator"></div>
@ -147,6 +148,9 @@
return; return;
} }
var target = link.getAttribute('href'); var target = link.getAttribute('href');
if(!target) {
return;
}
el.addEventListener('click', function() { el.addEventListener('click', function() {
location.href = target; location.href = target;
}); });

64
templates/blog/styles.css
View File

@ -67,11 +67,11 @@ main.mdl-layout__content {
} }
.mdl-card__media ~ .mdl-card__supporting-text { .mdl-card__media ~ .mdl-card__supporting-text {
flex-grow: 0; flex-grow: 0;
height: 64px; min-height: 64px;
} }
.mdl-card__supporting-text:not(:last-child) { .mdl-card__supporting-text:not(:last-child) {
box-sizing: border-box; box-sizing: border-box;
height: 76px; min-height: 76px;
} }
.mdl-card__supporting-text ~ .mdl-card__supporting-text { .mdl-card__supporting-text ~ .mdl-card__supporting-text {
border-top: 1px solid rgba(0,0,0,0.12); border-top: 1px solid rgba(0,0,0,0.12);
@ -92,7 +92,7 @@ main.mdl-layout__content {
padding: 16px; padding: 16px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center !important;
justify-content: flex-start; justify-content: flex-start;
height: auto; height: auto;
} }
@ -150,11 +150,12 @@ main > nav {
margin: 12px 15px; margin: 12px 15px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: space-between;
align-items: center; align-items: center;
padding-bottom: 30vh; padding: 0 !important;
padding-bottom: 30vh !important;
} }
main > nav > a { main > nav > div {
color: white; color: white;
cursor: pointer; cursor: pointer;
} }
@ -162,7 +163,12 @@ main > nav button {
color: black !important; color: black !important;
background-color: white !important; background-color: white !important;
} }
main > nav > div:first-child button {
margin-right: 16px;
}
main > nav > div:last-child button {
margin-left: 16px;
}
ul.social { ul.social {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -191,10 +197,13 @@ h3.quote:before {
h3.quote:after { h3.quote:after {
content: '”'; content: '”';
} }
.blogpost .custom-header {
background-color: transparent;
}
.blogpost main > .mdl-card { .blogpost main > .mdl-card {
width: 100%; width: 100%;
height: auto; height: auto;
margin-top: 230px;
} }
.blogpost main > .mdl-card > .mdl-card__actions { .blogpost main > .mdl-card > .mdl-card__actions {
box-sizing: border-box; box-sizing: border-box;
@ -208,6 +217,7 @@ h3.quote:after {
} }
.blogpost main > .mdl-card .mdl-card__media { .blogpost main > .mdl-card .mdl-card__media {
background-image: url('images/road_big.jpg'); background-image: url('images/road_big.jpg');
height: 280px;
} }
.blogpost main .mdl-card__actions { .blogpost main .mdl-card__actions {
border: 0 !important; border: 0 !important;
@ -219,12 +229,27 @@ h3.quote:after {
.blogpost main > nav > div:last-child { .blogpost main > nav > div:last-child {
text-align: right; text-align: right;
} }
.blogpost .meta > div {
align-items: center;
}
.blogpost .meta + .mdl-card__supporting-text {
border: 0;
display: flex;
flex-direction: column;
}
.blogpost .meta + .mdl-card__supporting-text p {
max-width: 512px;
margin: 16px auto;
font-size: 16px;
line-height: 28px;
}
.comments { .comments.comments.comments {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
padding: 32px !important;
} }
.comments > form { .comments > form {
display: flex; display: flex;
@ -233,7 +258,18 @@ h3.quote:after {
} }
.comments > form .mdl-textfield { .comments > form .mdl-textfield {
flex-grow: 1; flex-grow: 1;
margin-right: 32px; margin-right: 16px;
}
.comments > form .mdl-textfield input,
.comments > form .mdl-textfield textarea{
resize: none;
}
.comments > form button {
margin-top: 20px;
background-color: rgba(0, 0, 0, 0.24);
}
.comments > form button .material-icons {
color: white;
} }
.comments .comment { .comments .comment {
display: flex; display: flex;
@ -266,15 +302,23 @@ h3.quote:after {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
font-size: 0.8em; font-size: 0.8em;
margin-top: 16px;
} }
.comments .comment > .comment__actions button { .comments .comment > .comment__actions button {
margin-right: 16px; margin-right: 16px;
color: rgba(0, 0, 0, 0.24);
} }
.comments .comment > .comment__answers { .comments .comment > .comment__answers {
padding-top: 32px; padding-top: 32px;
padding-left: 48px; padding-left: 48px;
} }
body .demo-back {
position: absolute;
top: 16px;
left: 16px;
color: white;
}
.spacer { .spacer {
flex-grow: 1; flex-grow: 1;
} }