Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
fix(card): add an md-card-content container inside md-card for content
Browse files Browse the repository at this point in the history
Closes #265.

BREAKING CHANGE: md-card now requires a separate `md-card-content` element
containing the card's content.  This was done to fix padding problems
with the content.

Change your code from this:

```html
<md-card>
  <img src="img/washedout.png" alt="Washed Out">
  <h2>Paracosm</h2>
  <p>
    The titles of Washed Out's breakthrough song and the first single from Paracosm share the
    two most important words in Ernest Greene's musical language: feel it.
  </p>
</md-card>
```

To this:

```html
<md-card>
  <img src="img/washedout.png" alt="Washed Out">
  <md-card-content>
    <h2>Paracosm</h2>
    <p>
      The titles of Washed Out's breakthrough song and the first single from Paracosm share the
      two most important words in Ernest Greene's musical language: feel it.
    </p>
  </md-card-content>
</md-card>
```
  • Loading branch information
ajoslin committed Jan 6, 2015
1 parent d6bd69a commit 28a4f8f
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 24 deletions.
15 changes: 9 additions & 6 deletions src/components/card/card.scss
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
$card-padding: 8px;
$card-margin: 8px;
$card-box-shadow: $whiteframe-shadow-z1;

md-card {
display: block;
box-sizing: border-box;
display: flex;
flex-direction: column;

box-shadow: $card-box-shadow;
margin: $card-margin;

This comment has been minimized.

Copy link
@mzbyszynski

mzbyszynski Jan 7, 2015

Contributor

@ajoslin Did you really mean to get rid of the card margin? According to the spec it should have an 8dp margin and the card content should have 16dp padding:

Card gutters on mobile

Padding from edge of screen to card: 8dp
Gutters between cards: 8dp

Content padding

16dp

This comment has been minimized.

Copy link
@epelc

epelc Jan 8, 2015

Contributor

+1 for keeping the margin

padding: $card-padding;

.md-card-image {
display: block;
> img {
order: 0;
width: 100%;
}

md-card-content {
order: 1;
margin: $card-margin;
}
}
43 changes: 25 additions & 18 deletions src/components/card/demoBasicUsage/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,38 @@
<md-content>

<md-card>
<img src="img/washedout.png" class="md-card-image" alt="Washed Out">
<h2>Paracosm</h2>
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the
two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
</p>
<img src="img/washedout.png" alt="Washed Out">
<md-card-content>
<h2>Paracosm</h2>
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the
two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
</p>
</md-card-content>
</md-card>

<md-card>
<img src="img/washedout.png" class="md-card-image" alt="Washed Out">
<h2>Paracosm</h2>
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the
two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
</p>
<img src="img/washedout.png" alt="Washed Out">
<md-card-content>
<h2>Paracosm</h2>
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the
two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
</p>
</md-card-content>
</md-card>

<md-card>
<img src="img/washedout.png" class="md-card-image" alt="Washed Out">
<h2>Paracosm</h2>
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the
two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
</p>
<img src="img/washedout.png" alt="Washed Out">
<md-card-content>
<h2>Paracosm</h2>
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the
two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
</p>
</md-card-content>
</md-card>


</md-content>
</div>

0 comments on commit 28a4f8f

Please sign in to comment.