Vertically aligning skill summary blocks

Francismb · May 19, 2016 · d6aaef3 · d6aaef3
1 parent 59e8a0e
commit d6aaef3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/app/assets/javascripts/skills.js b/app/assets/javascripts/skills.js
@@ -3,12 +3,19 @@
  */
 "use strict";
 $(window).load(function () {
+
     /**
      * The skills collection.
      * @type {*|jQuery|HTMLElement}
      */
     var skills = $('.skills > section');
 
+    /**
+     * The summaries collection.
+     * @type {*|jQuery|HTMLElement}
+     */
+    var summaries = $('.skills > section p');
+
     /**
      * Calculate the maximum height for the skill boxes and
      * set the skill boxes to all have the maximum height.
@@ -19,4 +26,15 @@ $(window).load(function () {
         max_height = Math.max(max_height, $(this).height());
     });
     skills.height(max_height);
+
+    /**
+     * Calculate and set the maximum height for each of
+     * the summaries in the skill boxes.
+     * @type {number}
+     */
+    max_height = 0;
+    summaries.each(function () {
+        max_height = Math.max(max_height, $(this).height());
+    });
+    summaries.height(max_height);
 });
diff --git a/app/assets/stylesheets/skills.css.erb b/app/assets/stylesheets/skills.css.erb
@@ -45,5 +45,7 @@ a.edit-skill {
 }
 .skills > .third p
 {
+	display: table-cell;
+	vertical-align: middle;
 	margin-bottom: 0;
 }