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

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>
<nav class="mdl-cell mdl-cell--12-col">
<a>
<div class="empty"></div>
<div>
More
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons">arrow_forward</i>
</button>
</a>
</div>
</nav>
</main>
<div class="mdl-layout__obfuscator"></div>
@ -147,6 +148,9 @@
return;
}
var target = link.getAttribute('href');
if(!target) {
return;
}
el.addEventListener('click', function() {
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 {
flex-grow: 0;
height: 64px;
min-height: 64px;
}
.mdl-card__supporting-text:not(:last-child) {
box-sizing: border-box;
height: 76px;
min-height: 76px;
}
.mdl-card__supporting-text ~ .mdl-card__supporting-text {
border-top: 1px solid rgba(0,0,0,0.12);
@ -92,7 +92,7 @@ main.mdl-layout__content {
padding: 16px;
display: flex;
flex-direction: row;
align-items: center;
align-items: center !important;
justify-content: flex-start;
height: auto;
}
@ -150,11 +150,12 @@ main > nav {
margin: 12px 15px;
display: flex;
flex-direction: row;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
padding-bottom: 30vh;
padding: 0 !important;
padding-bottom: 30vh !important;
}
main > nav > a {
main > nav > div {
color: white;
cursor: pointer;
}
@ -162,7 +163,12 @@ main > nav button {
color: black !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 {
display: flex;
flex-direction: row;
@ -191,10 +197,13 @@ h3.quote:before {
h3.quote:after {
content: '”';
}
.blogpost .custom-header {
background-color: transparent;
}
.blogpost main > .mdl-card {
width: 100%;
height: auto;
margin-top: 230px;
}
.blogpost main > .mdl-card > .mdl-card__actions {
box-sizing: border-box;
@ -208,6 +217,7 @@ h3.quote:after {
}
.blogpost main > .mdl-card .mdl-card__media {
background-image: url('images/road_big.jpg');
height: 280px;
}
.blogpost main .mdl-card__actions {
border: 0 !important;
@ -219,12 +229,27 @@ h3.quote:after {
.blogpost main > nav > div:last-child {
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;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
padding: 32px !important;
}
.comments > form {
display: flex;
@ -233,7 +258,18 @@ h3.quote:after {
}
.comments > form .mdl-textfield {
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 {
display: flex;
@ -266,15 +302,23 @@ h3.quote:after {
justify-content: flex-start;
align-items: center;
font-size: 0.8em;
margin-top: 16px;
}
.comments .comment > .comment__actions button {
margin-right: 16px;
color: rgba(0, 0, 0, 0.24);
}
.comments .comment > .comment__answers {
padding-top: 32px;
padding-left: 48px;
}
body .demo-back {
position: absolute;
top: 16px;
left: 16px;
color: white;
}
.spacer {
flex-grow: 1;
}