basic horizontal cards

Dogfalo · Jul 20, 2016 · d93533e · d93533e
1 parent b9e279b
commit d93533e
Show file tree

Hide file tree

Showing 6 changed files with 345 additions and 3 deletions.
diff --git a/bin/materialize.css b/bin/materialize.css
@@ -4548,8 +4548,12 @@ small {
   overflow: hidden;
 }
 
-.card.small .card-content, .card.medium .card-content, .card.large .card-content {
+.card.small .card-image + .card-content, .card.medium .card-image + .card-content, .card.large .card-image + .card-content {
   max-height: 40%;
+}
+
+.card.small .card-content, .card.medium .card-content, .card.large .card-content {
+  max-height: 100%;
   overflow: hidden;
 }
 
@@ -4572,6 +4576,50 @@ small {
   height: 500px;
 }
 
+.card.horizontal {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.card.horizontal.small .card-image, .card.horizontal.medium .card-image, .card.horizontal.large .card-image {
+  height: 100%;
+  max-height: none;
+  overflow: visible;
+}
+
+.card.horizontal.small .card-image img, .card.horizontal.medium .card-image img, .card.horizontal.large .card-image img {
+  height: 100%;
+}
+
+.card.horizontal .card-image {
+  max-width: 50%;
+}
+
+.card.horizontal .card-image img {
+  max-width: 100%;
+  width: auto;
+}
+
+.card.horizontal .card-stacked {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  position: relative;
+}
+
+.card.horizontal .card-stacked .card-content {
+  -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}
+
 .card.sticky-action .card-action {
   z-index: 2;
 }

diff --git a/cards.html b/cards.html
@@ -207,6 +207,56 @@ <h2 class="header">Image Card</h2>
         </div>
       </div>
 
+      <div id="horizontal" class="section scrollspy">
+        <div class="row">
+          <!-- Horizontal Card -->
+          <div class="col s12 m7">
+            <h2 class="header">Horizontal Card</h2>
+            <div class="card horizontal">
+              <div class="card-image">
+                <img src="http://lorempixel.com/100/190/nature/10">
+              </div>
+              <div class="card-stacked">
+                <div class="card-content">
+                  <p>I am a very simple card. I am good at containing small bits of information.</p>
+                </div>
+                <div class="card-action">
+                  <a href="#">This is a link</a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col s12 m5">
+            <br><br><br><br>
+            <p class="caption">
+             Here is the standard card with a horizontal image.
+            </p>
+          </div>
+          <div class="col s12">
+            <br>
+            <pre><code class="language-markup">
+  &lt;div class="col s12 m7">
+    &lt;h2 class="header">Horizontal Card&lt;/h2>
+    &lt;div class="card horizontal">
+      &lt;div class="card-image">
+        &lt;img src="http://lorempixel.com/100/190/nature/10">
+      &lt;/div>
+      &lt;div class="card-stacked">
+        &lt;div class="card-content">
+          &lt;p>I am a very simple card. I am good at containing small bits of information.&lt;/p>
+        &lt;/div>
+        &lt;div class="card-action">
+          &lt;a href="#">This is a link&lt;/a>
+        &lt;/div>
+      &lt;/div>
+    &lt;/div>
+  &lt;/div>
+            </code></pre>
+            <br>
+          </div>
+        </div>
+      </div>
+
       <div id="reveal" class="section scrollspy">
         <div class="row">
           <!-- Pullup Card -->
@@ -460,6 +510,7 @@ <h2 class="header">Card Panel</h2>
           <ul class="section table-of-contents">
             <li><a href="#basic">Basic Card</a></li>
             <li><a href="#image">Image Card</a></li>
+            <li><a href="#horizontal">Horizontal Card</a></li>
             <li><a href="#reveal">Card Reveal</a></li>
             <li><a href="#sizes">Card Sizes</a></li>
             <li><a href="#panel">Card Panel</a></li>

diff --git a/css/ghpages-materialize.css b/css/ghpages-materialize.css
diff --git a/jade/page-contents/cards_content.html b/jade/page-contents/cards_content.html
@@ -96,6 +96,56 @@ <h2 class="header">Image Card</h2>
         </div>
       </div>
 
+      <div id="horizontal" class="section scrollspy">
+        <div class="row">
+          <!-- Horizontal Card -->
+          <div class="col s12 m7">
+            <h2 class="header">Horizontal Card</h2>
+            <div class="card horizontal">
+              <div class="card-image">
+                <img src="http://lorempixel.com/100/190/nature/10">
+              </div>
+              <div class="card-stacked">
+                <div class="card-content">
+                  <p>I am a very simple card. I am good at containing small bits of information.</p>
+                </div>
+                <div class="card-action">
+                  <a href="#">This is a link</a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col s12 m5">
+            <br><br><br><br>
+            <p class="caption">
+             Here is the standard card with a horizontal image.
+            </p>
+          </div>
+          <div class="col s12">
+            <br>
+            <pre><code class="language-markup">
+  &lt;div class="col s12 m7">
+    &lt;h2 class="header">Horizontal Card&lt;/h2>
+    &lt;div class="card horizontal">
+      &lt;div class="card-image">
+        &lt;img src="http://lorempixel.com/100/190/nature/10">
+      &lt;/div>
+      &lt;div class="card-stacked">
+        &lt;div class="card-content">
+          &lt;p>I am a very simple card. I am good at containing small bits of information.&lt;/p>
+        &lt;/div>
+        &lt;div class="card-action">
+          &lt;a href="#">This is a link&lt;/a>
+        &lt;/div>
+      &lt;/div>
+    &lt;/div>
+  &lt;/div>
+            </code></pre>
+            <br>
+          </div>
+        </div>
+      </div>
+
       <div id="reveal" class="section scrollspy">
         <div class="row">
           <!-- Pullup Card -->
@@ -349,6 +399,7 @@ <h2 class="header">Card Panel</h2>
           <ul class="section table-of-contents">
             <li><a href="#basic">Basic Card</a></li>
             <li><a href="#image">Image Card</a></li>
+            <li><a href="#horizontal">Horizontal Card</a></li>
             <li><a href="#reveal">Card Reveal</a></li>
             <li><a href="#sizes">Card Sizes</a></li>
             <li><a href="#panel">Card Panel</a></li>

diff --git a/sass/components/_cards.scss b/sass/components/_cards.scss
@@ -34,8 +34,11 @@
       max-height: 60%;
       overflow: hidden;
     }
-    .card-content {
+    .card-image + .card-content {
       max-height: 40%;
+    }
+    .card-content {
+      max-height: 100%;
       overflow: hidden;
     }
     .card-action {
@@ -58,6 +61,43 @@
     height: 500px;
   }
 
+  // Horizontal Cards
+  &.horizontal {
+    &.small, &.medium, &.large {
+      .card-image {
+        height: 100%;
+        max-height: none;
+        overflow: visible;
+
+        img {
+          height: 100%;
+        }
+      }
+    }
+
+    display: flex;
+
+    .card-image {
+      max-width: 50%;
+      img {
+        max-width: 100%;
+        width: auto;
+      }
+    }
+
+    .card-stacked {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      position: relative;
+
+      .card-content {
+        flex-grow: 1;
+      }
+    }
+  }
+
+  // Sticky Action Section
   &.sticky-action {
     .card-action {
       z-index: 2;
@@ -70,6 +110,8 @@
   }
 
 
+
+
   .card-image {
     position: relative;