fixing the selectables

preview-src/docs-hub.adoc

@@ -7,7 +7,7 @@
 // :page-disablefeedback: true
 :page-toclevels: -1
 
-[.cards.not.selectable]
+[.cards]
 
 == Developer tools documentation
 
@@ -37,7 +37,7 @@ Write and execute Cypher queries and visualize the results in nodes and relation
 link:{docs-home}/browser-manual/[Neo4j Browser] +
 link:{docs-home}/aura/preview/query/introduction/[Query (Aura)]
 
-[.display.card.selectable]
+[.selectable]
 
 === Neo4j Data Importer
 
@@ -50,10 +50,11 @@ image:icons/ndl/icon-scientist.svg[]
 [.description]
 Learn how to model and import data to your Neo4j database.
 
-[.link.hide]
+[.link]
+link:{docs-home}/data-importer[]
 link:{docs-home}/data-importer[]
 
-[.display.card.selectable]
+[.selectable]
 
 === Neo4j Desktop
 
@@ -66,10 +67,10 @@ image:icons/ndl/icon-scientist.svg[]
 [.description]
 Learn how to experience Neo4j on your local desktop.
 
-[.link.hide]
+[.link]
 link:{docs-home}/desktop-manual[]
 
-[.display.card.selectable]
+[.selectable]
 
 === Neo4j Ops Manager
 
@@ -82,7 +83,7 @@ Neo4j Ops Manager
 [.description]
 Learn how to monitor, administer, and operate all of the Neo4j DBMSs in an Enterprise with Neo4j Ops Manager.
 
-[.link.hide]
+[.link]
 link:{docs-home}/ops-manager[]
 
 [.display.next-steps]

src/css/docs-ndl.css

@@ -636,8 +636,8 @@ body.docs-ndl.explainer .sectionbody > div.sect2 {
   border: 1px solid var(--panel-border-color);
 }
 
-body.docs-ndl .cards .sect2 > a,
-body.docs-ndl .cards:not(.selectable) .sect2,
+body.docs-ndl .cards .sect2.selectable > a,
+body.docs-ndl .cards .sect2:not(.selectable),
 body.docs-ndl .lists .sect2 {
   overflow: hidden;
   display: flex;
@@ -652,7 +652,8 @@ body.docs-ndl .lists .sect2 {
   line-height: 2rem;
 }
 
-body.docs-ndl .cards.selectable .sect2:hover {
+body.docs-ndl .cards.selectable .sect2:hover,
+body.docs-ndl .cards .sect2.selectable:hover {
   transition: 0.1s linear;
   border: 1px solid var(--page-version-missing-font-color);
   box-shadow: 0 1px 2px 0 rgba(26, 27, 29, 0.18);
@@ -826,14 +827,7 @@ body.docs-ndl .cards .sect2 .paragraph:not(.icon) {
 }
 
 body.docs-ndl .cards .sect2.selectable .paragraph.link {
-  display: flex;
-}
-
-body.docs-ndl .cards.selectable .sect2 .paragraph.link.hide {
-  box-sizing: border-box;
-  padding-top: 0;
-  margin-top: auto;
-  font-size: 0;
+  display: none;
 }
 
 body.docs-ndl .cards.selectable .sect2 .paragraph.link,

src/js/70-docs-ndl.js

@@ -7,8 +7,12 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }
 
+  // if a card is 'selectable' then make it a click target
+  // by taking the link from the card and wrapping the whole card in an anchor tag with that link
+  // if the card contains more than one link, the first link is used
+  // css hides the link div in selectable cards
   var makeClickable = function (card) {
-    var links = card.querySelectorAll('div.sect2:not(.not-selectable) div.link')
+    var links = card.querySelectorAll('div.link')
     links.forEach(function (link) {
       var target = link.querySelector('a').getAttribute('href')
       var card = link.parentElement
@@ -43,8 +47,10 @@ document.addEventListener('DOMContentLoaded', function () {
     a.remove()
   })
 
-  // Add links to cards
-  document.querySelectorAll('.cards.selectable')
+  // Add links to selectable cards
+  // all cards in a cards.selectable container are clickable
+  // cards in a .cards container are clickable if the card has .selectable
+  document.querySelectorAll('.cards .selectable, .cards.selectable .sect2')
     .forEach(makeClickable)
 
   // Move labels to the icon div to position them