Address hub page card issues

Author: Pat Mellon

_sass/hub.scss

@@ -175,6 +175,7 @@
 
 .hub .card-body {
   .hub-card-title-container {
+    width: 75%;
     display: inline-flex;
       .experimental-badge {
         text-transform: uppercase;
@@ -353,13 +354,15 @@
 }
 
 .hub .hub-card {
-  height: auto;
+  overflow: scroll;
   @include max-width-desktop {
     height: 150px;
+    overflow: inherit;
   }
 
   @include small-desktop {
     height: 170px;
+    overflow: inherit;
   }
 }
 

assets/hub-buttons.js

@@ -2,7 +2,7 @@ var numberOfCardsToShow = 3;
 
 $(".cards-left > .col-md-12, .cards-right > .col-md-12")
   .filter(function() {
-    return $(this).attr("data-item-count") > numberOfCardsToShow.toString();
+    return $(this).attr("data-item-count") > numberOfCardsToShow;
   })
   .hide();
 
@@ -34,7 +34,7 @@ function hideCards(buttonToHide, buttonToShow, cardsWrapper) {
   $(buttonToShow).show();
   $(cardsWrapper)
     .filter(function() {
-      return $(this).attr("data-item-count") !== numberOfCardsToShow.toString();
+      return $(this).attr("data-item-count") > numberOfCardsToShow;
     })
     .hide();
 }

hub.html

@@ -72,34 +72,34 @@ <h3 class="research-hub-sub-title">Explore and extend models<br> from the latest
 
           <hr>
 
-          <div class="row hub-cards-wrapper">
+          <div class="row hub-cards-wrapper cards-left">
             {% assign hub = site.hub | where: "category", "researchers" | sort: "order" %}
 
-            <div class="cards-left">
-              {% for item in hub %}
-                <div class="col-md-12 research-hub-card-wrapper" data-item-count="{{ forloop.index }}" data-tags="{{ item.tags | join: ',' }}">
-                  <div class="card hub-card">
-                    <a href="{{ site.baseurl }}{{ item.url }}">
-                      <div class="card-body">
-                        <div class="hub-card-title-container">
-                          <h4>{{ item.title }}</h4>
-                        </div>
-                        <p class="card-summary">{{ item.summary }}</p>
-                        <div class="hub-image">
-                          <img src="{{ site.baseurl }}/assets/images/{{ item.image }}">
-                        </div>
+            {% for item in hub %}
+              <div class="col-md-12 research-hub-card-wrapper" data-item-count="{{ forloop.index }}" data-tags="{{ item.tags | join: ',' }}">
+                <div class="card hub-card">
+                  <a href="{{ site.baseurl }}{{ item.url }}">
+                    <div class="card-body">
+                      <div class="hub-card-title-container">
+                        <h4>{{ item.title }}</h4>
                       </div>
-                    </a>
-                  </div>
+                      <p class="card-summary">{{ item.summary }}</p>
+                      <div class="hub-image">
+                        <img src="{{ site.baseurl }}/assets/images/{{ item.image }}">
+                      </div>
+                    </div>
+                  </a>
                 </div>
-              {% endfor %}
-            </div>
+              </div>
+            {% endfor %}
 
-            <div class="col-md-12">
+          </div>
+
+          <div class="row">
+            <div class="col-md-12 buttons-container">
               <button class="all-models-button" id="research-models">All Research Models ({{ hub | size}})</button>
               <button class="all-models-button" id="research-models-hide">Fewer Research Models</button>
             </div>
-
           </div>
         </div>
 
@@ -153,29 +153,30 @@ <h5 class="coming-soon">Coming Soon</h5>
 
           <hr>
 
-          <div class="row hub-cards-wrapper">
+          <div class="row hub-cards-wrapper cards-right">
             {% assign hub = site.hub | where: "category", "developers" | sort: "order" %}
 
-            <div class="cards-right">
-              {% for item in hub %}
-                <div class="col-md-12 hub-card-wrapper" data-item-count="{{ forloop.index }}" data-right-tags="{{ item.tags | join: ',' }}">
-                  <div class="card hub-card">
-                    <a href="{{ site.baseurl }}{{ item.url }}">
-                      <div class="card-body">
-                        <div class="hub-card-title-container">
-                          <h4>{{ item.title }} </h4>
-                        </div>
-                        <p class="card-summary">{{ item.summary }}</p>
-                        <div class="hub-image">
-                          <img src="{{ site.baseurl }}/assets/images/{{ item.image }}">
-                        </div>
+            {% for item in hub %}
+              <div class="col-md-12 hub-card-wrapper" data-item-count="{{ forloop.index }}" data-right-tags="{{ item.tags | join: ',' }}">
+                <div class="card hub-card">
+                  <a href="{{ site.baseurl }}{{ item.url }}">
+                    <div class="card-body">
+                      <div class="hub-card-title-container">
+                        <h4>{{ item.title }} </h4>
+                      </div>
+                      <p class="card-summary">{{ item.summary }}</p>
+                      <div class="hub-image">
+                        <img src="{{ site.baseurl }}/assets/images/{{ item.image }}">
                       </div>
-                    </a>
-                  </div>
+                    </div>
+                  </a>
                 </div>
-              {% endfor %}
-            </div>
+              </div>
+            {% endfor %}
 
+          </div>
+
+          <div class="row">
             <div class="col-md-12">
               <button class="all-models-button" id="development-models">All Development Models ({{ hub | size}})</button>
               <button class="all-models-button" id="development-models-hide">Fewer Development Models</button>