From 0673b723dc3f1e4d2abda3dba8ac436a4fe25b12 Mon Sep 17 00:00:00 2001
From: Seyi Adebajo <sadebajo@linkedin.com>
Date: Thu, 27 Apr 2017 23:13:42 -0700
Subject: [PATCH] updates feature-card to use non-fixed heights by leveraging
 an aspect ratio mixin

---
 .../app/styles/abstracts/_mixins.scss         | 23 +++++++++++++++
 .../feature-card/_feature-card.scss           |  6 +++-
 wherehows-web/app/templates/index.hbs         | 28 +++++++++++--------
 3 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/wherehows-web/app/styles/abstracts/_mixins.scss b/wherehows-web/app/styles/abstracts/_mixins.scss
index e7fde0a2c2..e750e719d2 100644
--- a/wherehows-web/app/styles/abstracts/_mixins.scss
+++ b/wherehows-web/app/styles/abstracts/_mixins.scss
@@ -98,3 +98,26 @@
 
   #{$property}: $value;
 }
+
+
+/// Maintains the aspect ratio for a wrapped element
+/// @param {Number} $width number value for the container's width ratio
+/// @param {Number} $height number value for the container's with ratio
+@mixin aspect-ratio($width, $height) {
+  position: relative;
+
+  &::before {
+    content: "";
+    display: block;
+    width: 100%;
+    padding-top: ($height / $width) * 100%;
+  }
+
+  > * {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+  }
+}
diff --git a/wherehows-web/app/styles/components/feature-card/_feature-card.scss b/wherehows-web/app/styles/components/feature-card/_feature-card.scss
index 8b7b6c9743..95627701a0 100644
--- a/wherehows-web/app/styles/components/feature-card/_feature-card.scss
+++ b/wherehows-web/app/styles/components/feature-card/_feature-card.scss
@@ -1,5 +1,4 @@
 .feature-card {
-  height: 160px;
   border-radius: 2px;
   margin: 30px 0;
   padding: 10px;
@@ -16,3 +15,8 @@
     color: set-color(black, dune);
   }
 }
+
+/// Wrap cards in containers with 1:1 ar
+.feature-container {
+  @include aspect-ratio(1, 1);
+}
diff --git a/wherehows-web/app/templates/index.hbs b/wherehows-web/app/templates/index.hbs
index c44c352273..c458ee7ac9 100644
--- a/wherehows-web/app/templates/index.hbs
+++ b/wherehows-web/app/templates/index.hbs
@@ -1,15 +1,21 @@
 <div class="row">
-  {{#each model as |featureCard|}}
-    <div class="col-sm-3">
-      <article class="feature-card">
-        {{#link-to featureCard.route}}
-          <span class="feature-card-icon" title={{featureCard.title}}></span>
-          <h3 class="feature-card__title">{{featureCard.title}}</h3>
-          <div class="feature-card__description">
-            {{featureCard.description}}
+  <div class="container">
+    <div class="row">
+      {{#each model as |featureCard|}}
+        <div class="col-md-3">
+          <div class="feature-container">
+            <article class="feature-card">
+              {{#link-to featureCard.route}}
+                <span class="feature-card-icon" title={{featureCard.title}}></span>
+                <h3 class="feature-card__title">{{featureCard.title}}</h3>
+                <div class="feature-card__description">
+                  {{featureCard.description}}
+                </div>
+              {{/link-to}}
+            </article>
           </div>
-        {{/link-to}}
-      </article>
+        </div>
+      {{/each}}
     </div>
-  {{/each}}
+  </div>
 </div>