Fix #1454: Remove "Expand" button to improve usability.

Also, "Read" button works without JS code.

Author: exoego

_overviews/index.md

@@ -35,8 +35,7 @@ permalink: /overviews/:title.html
           </div>
         </div>      
         <div class="card-footer">
-          <div class="expand-btn"><i class="fa fa-plus" aria-hidden="true"></i> Expand</div>
-          <div class="go-btn" style="display: none;" href="{{ overview.url }}"><i class="fa fa-arrow-right" aria-hidden="true"></i> Read</div>          
+          <a class="go-btn" href="{{ overview.url }}"><i class="fa fa-arrow-right" aria-hidden="true"></i> Read</a>          
         </div>        
       </div>
     {% endfor %}  

_sass/layout/overviews.scss

@@ -19,7 +19,7 @@
     flex: 0 1 calc(50% - 1em);
     @include bp(medium) {
       flex: 0 1 calc(100% - 0.5em);
-    }    
+    }
   }
 }
 
@@ -47,12 +47,10 @@
       position: relative;
       flex: 0 1 calc(50% - 1em);
       margin-bottom: 2em;
-      transition: max-height .3s ease-out;
       text-decoration: none;
       border-radius: 2px;
       box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
       background: #fff;
-      max-height: 400px;
       overflow: hidden;
 
       @include bp(medium) {
@@ -76,7 +74,7 @@
         .card-content {
           padding: 20px;
           padding-top: 0px;
-          padding-bottom: 0px;
+          padding-bottom: 60px;
         }
 
         h2 {
@@ -160,25 +158,23 @@
       position: absolute;
       bottom: 0;
       width: 100%;
-      padding: 20px;
-      height: 66px;
-      background: #fff;
-      border-top: 1px solid lighten($base-font-color-light, 35%);
 
-      &:hover {
-        cursor: pointer;
-        background: $brand-primary;
-        .expand-btn,
-        .go-btn {
-          color: #fff;
-        }
-      }
-
-      .expand-btn,
       .go-btn {
-        color: lighten($base-font-color-light, 15%);
+        display: block;
+        padding: 20px;
+        height: 66px;
+        background: #fff;
+        border-top: 1px solid lighten($base-font-color-light, 35%);
+        color: lighten($base-font-color-light, 10%);
         font-weight: $font-regular;
         font-size: $font-regular;
+        text-decoration: none;
+
+        &:hover {
+          cursor: pointer;
+          background: $brand-primary;
+          color: #fff;
+        }
       }
     }
 }

resources/js/functions.js

@@ -133,30 +133,6 @@ $(document).ready(function() {
 
     return false;
   };
-
-  $('.white-card').each(function(index) {
-    if (!$(this).hasOverflow()) {
-      $(this).find(".expand-btn").hide();
-      $(this).find(".go-btn").show();
-    }
-  });
-
-  $(".card-footer").click(function() {
-    // if we clicked on the expand button, expand the box
-    if ($(this).find(".expand-btn").is(':visible')) {
-
-      // height mangling becasue flexbox align-self: self-end; doesn't work :(
-      $(this).parent().css('max-height', 'none');
-      var cardWrapHeight = $(this).parent().find(".card-wrap").outerHeight();
-      var cardFooterHeight = $(this).outerHeight()
-      $(this).parent().outerHeight(cardWrapHeight + cardFooterHeight);
-
-      $(this).find(".expand-btn").hide();
-      $(this).find(".go-btn").show();
-    } else {
-      window.location.href = $(this).find(".go-btn").attr("href");
-    }
-  });
 });
 
 
@@ -491,18 +467,18 @@ $('#filter-glossary-terms').focus();
 
 
 //Footer scroll to top button
-$(document).ready(function(){ 
-    $(window).scroll(function(){ 
-        if ($(this).scrollTop() > 100) { 
-            $('#scroll-to-top-btn').fadeIn(); 
-        } else { 
-            $('#scroll-to-top-btn').fadeOut(); 
-        } 
-    }); 
-    $('#scroll-to-top-btn').click(function(){ 
-        $("html, body").animate({ scrollTop: 0 }, 600); 
-        return false; 
-    }); 
+$(document).ready(function(){
+    $(window).scroll(function(){
+        if ($(this).scrollTop() > 100) {
+            $('#scroll-to-top-btn').fadeIn();
+        } else {
+            $('#scroll-to-top-btn').fadeOut();
+        }
+    });
+    $('#scroll-to-top-btn').click(function(){
+        $("html, body").animate({ scrollTop: 0 }, 600);
+        return false;
+    });
 });
 
 //Contributors widget
@@ -514,7 +490,7 @@ $(document).ready(function () {
    * - some files aren't prefixed with underscore, see rootFiles
    * - some files are placed in _overviews but rendered to its folder, see overviewsFolders
    */
-  
+
   let rootFiles = ['getting-started', 'learn', 'glossary'];
   let overviewsFolders = ['FAQ', 'cheatsheets', 'collections', 'compiler-options',
     'core', 'jdk-compatibility', 'macros', 'parallel-collections',
@@ -534,7 +510,7 @@ $(document).ready(function () {
   } else {
     thisPageUrl = '_' + thisPageUrl + '.md';
   }
-  
+
   let url = githubApiUrl + '?path=' + thisPageUrl;
   $.get(url, function (data, status) {
     if(!data || data.length < 1) {