Add paper-card title components

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Ember Paper Changelog
 
+#master
+
+- [#307](https://github.com/miguelcobain/ember-paper/pull/307) Add paper-card title components
+
 ### 0.2.11
 
 - [#253](https://github.com/miguelcobain/ember-paper/pull/253) Add `closeOnClick` to paper-sidenav

addon/components/paper-card-title-media.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+import FlexMixin from '../mixins/flex-mixin';
+
+export default Ember.Component.extend(FlexMixin, {
+  tagName: 'md-card-title-media',
+});

addon/components/paper-card-title-text.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+import FlexMixin from '../mixins/flex-mixin';
+
+export default Ember.Component.extend(FlexMixin, {
+  tagName: 'md-card-title-text',
+  classNames: ['paper-card-title-text']
+});

addon/components/paper-card-title.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+import FlexMixin from '../mixins/flex-mixin';
+
+export default Ember.Component.extend(FlexMixin, {
+  tagName: 'md-card-title',
+});

app/components/paper-card-title-media.js

@@ -0,0 +1,4 @@
+import PaperCardTitleMedia from 'ember-paper/components/paper-card-title-media';
+
+export default PaperCardTitleMedia;
+

app/components/paper-card-title-text.js

@@ -0,0 +1,3 @@
+import PaperCardTitleText from 'ember-paper/components/paper-card-title-text';
+
+export default PaperCardTitleText;

app/components/paper-card-title.js

@@ -0,0 +1,3 @@
+import PaperCardTitle from 'ember-paper/components/paper-card-title';
+
+export default PaperCardTitle;

app/styles/paper-card.scss

@@ -34,8 +34,67 @@ md-card {
     padding: $card-padding;
   }
 
-}
+  md-card-title {
+    padding: 3 * $card-padding / 2 $card-padding $card-padding;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: row;
+
+    & + md-card-content {
+      padding-top: 0;
+      display: block;
+
+      & > p {
+        &:first-child {
+          margin-top: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .md-media-xl {
+        height: 240px;
+        width: 240px;
+      }
+    }
+
+    md-card-title-text {
+      flex: 1;
+      flex-direction: column;
+      display: flex;
 
+      .md-subhead {
+        padding-top: 0;
+        font-size: 14px;
+      }
+
+      &:only-child {
+        .md-subhead {
+          padding-top: 3 * $card-padding / 4;
+        }
+      }
+    }
+
+    md-card-title-media {
+      margin-top: - $card-padding / 2;
+
+      .md-media-sm {
+        height: 80px;
+        width: 80px;
+      }
+      .md-media-md {
+        height: 112px;
+        width: 112px;
+      }
+      .md-media-lg {
+        height: 152px;
+        width: 152px;
+      }
+    }
+  }
+}
 // THEME
 
 $card-border-radius: 2px !default;

tests/dummy/app/styles/demo.scss

@@ -150,6 +150,12 @@ ul li:first-child {
 }
 
 /* DEMO PAGE STYLES */
+
+.card-lg-media-demo {
+    height: 236px;
+    width: 400px;
+}
+
 .doc-content {
   max-width: 864px;
   margin: 16px;

tests/dummy/app/templates/card.hbs

@@ -10,6 +10,22 @@
 {{#paper-content class="md-padding"}}
 <div class="doc-content">
   {{#paper-content class="md-whiteframe-z1 list-demo"}}
+    {{#paper-card class="card-lg-media-demo"}}
+      {{#paper-card-title}}
+        {{#paper-card-title-text}}
+          <h2>Paracosm</h2>
+          <p>The titles of Washed Out's breakthrough song and the first single from Paracosm share the...</p>
+        {{/paper-card-title-text}}
+        {{#paper-card-title-media}}
+          <img class="md-media-lg" src="washedout.png">
+        {{/paper-card-title-media}}
+      {{/paper-card-title}}
+      <div class="md-actions" layout="row" layout-align="end center">
+        {{#paper-button}}Action 1{{/paper-button}}
+        {{#paper-button}}Action 2{{/paper-button}}
+      </div>
+    {{/paper-card}}
+
     {{#paper-card}}
       <img src="washedout.png" alt="Washed Out">
       {{#paper-card-content}}
@@ -58,6 +74,23 @@
 
 
   <h3>Template</h3>
+  {{#code-block language='handlebars'}}
+  \{{#paper-card}}
+    \{{#paper-card-title}}
+      \{{#paper-card-title-text}}
+        &lt;h2&gt;Paracosm&lt;/h2&gt;
+        &lt;p&gt;The titles of Washed Out's breakthrough song and the first single from Paracosm share the...&lt;/p&gt;
+      \{{/paper-card-title-text}}
+      \{{#paper-card-title-media}}
+        &lt;img class="md-media-lg" src="washedout.png"&gt;
+    \{{/paper-card-title-media}}
+    \{{/paper-card-title}}
+    &lt;div class="md-actions" layout="row" layout-align="end center"&gt;
+      \{{#paper-button}}Action 1\{{/paper-button}}
+      \{{#paper-button}}Action 2\{{/paper-button}}
+    &lt;/div&gt;
+  \{{/paper-card}}{{/code-block}}
+
   {{#code-block language='handlebars'}}
   \{{#paper-card}}
     &lt;img src="washedout.png" alt="Washed Out"&gt;