dfx.sk/dfx-jekyll-mdl
1
0
Fork 0
Code Issues Releases Activity

JKM-23 fix Unconventional use of floating action button

Browse source 
Remove floating action buttons from cards. See #23 for more details
This commit is contained in:
Oscar Cortez 2015-10-31 12:24:22 -06:00
parent 2ee1968cde
commit f09da58e9f
2 changed files with 18 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

17
_sass/_layout.scss
View file

@ -10,15 +10,18 @@
}
// Cards styles
.mdl-card {
.mdl-card__title {
color: #fff;
height: 176px;
background: url('../img/welcome_card.jpg') center / cover;
}
.mdl-card__title {
color: #fff;
height: 176px;
background: url('../img/welcome_card.jpg') center / cover;
}
.mdl-card__supporting-text > span { color: #9F9F9F; }
.mdl-card__menu {
color: #fff;
.mdl-card__menu {
color: #fff;
}
}
.post-button{

22
index.html
View file

@ -15,7 +15,7 @@ layout: default
<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">
<h4>{{ post.title }}</h4>
{{ post.excerpt }}
<p>{{ post.excerpt }}</p>
</div>
<div class="mdl-card__actions">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">Read More</a>
@ -35,20 +35,16 @@ layout: default
{% else %}
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone">
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone">
<div class="mdl-card__title" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}>
<h2 class="mdl-card__title-text">{{ post.title }}</h2>
</div>
<div class="mdl-card__supporting-text">
{{ post.excerpt }}
<span>{{ post.date | date: "%b %-d, %Y" }}</span>
<p>{{ post.excerpt }}</p>
</div>
<button class="post-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" onclick="location.href='{{ post.url | prepend: site.baseurl }}'">
<i class="material-icons">keyboard_arrow_right</i>
</button>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">
{{ post.date | date: "%b %-d, %Y" }}
</a>
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">Read More</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" id="post-{{ post.id }}">
@ -73,14 +69,12 @@ layout: default
<h2 class="mdl-card__title-text">{{ post.title }}</h2>
</div>
<div class="mdl-card__supporting-text">
{{ post.excerpt }}
<span>{{ post.date | date: "%b %-d, %Y" }}</span>
<p>{{ post.excerpt }}</p>
</div>
<button class="post-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" onclick="location.href='{{ post.url | prepend: site.baseurl }}'">
<i class="material-icons">keyboard_arrow_right</i>
</button>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">
{{ post.date | date: "%b %-d, %Y" }}
Read More
</a>
</div>
<div class="mdl-card__menu">