Fix cards (#288)

Co-authored-by: Neil Dewhurst <[email protected]>

Author: lidiazuin

preview-src/docs-hub.adoc

@@ -7,7 +7,8 @@
 // :page-disablefeedback: true
 :page-toclevels: -1
 
-[.cards.not-selectable]
+[.cards]
+
 == Developer tools documentation
 
 Use Neo4j tools to query and manage your databases, import data, and create graphical visualizations. 
@@ -36,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
 
@@ -51,8 +52,9 @@ Learn how to model and import data to your Neo4j database.
 
 [.link]
 link:{docs-home}/data-importer[]
+link:{docs-home}/data-importer[]
 
-[.display.card.selectable]
+[.selectable]
 
 === Neo4j Desktop
 
@@ -68,7 +70,7 @@ Learn how to experience Neo4j on your local desktop.
 [.link]
 link:{docs-home}/desktop-manual[]
 
-[.display.card.selectable]
+[.selectable]
 
 === Neo4j Ops Manager
 
@@ -82,4 +84,21 @@ Neo4j Ops Manager
 Learn how to monitor, administer, and operate all of the Neo4j DBMSs in an Enterprise with Neo4j Ops Manager.
 
 [.link]
-link:{docs-home}/ops-manager[]
+link:{docs-home}/ops-manager[]
+
+[.display.next-steps]
+== Keep exploring
+
+Here are some recommended resources to get started with data visualization:
+
+. link:https://neo4j.com/developer-blog/15-tools-for-visualizing-your-neo4j-graph-database/[*15 Tools for Visualizing Your Neo4j Graph Database*]
++
+Read an overview of the graph visualization landscape.
+
+. link:https://medium.com/neo4j/showing-charts-for-neo4j-query-results-using-amcharts-and-structr-efae0b7a04f0[*Showing Charts for Neo4j Query Results using amCharts and Structr*]
++ 
+Learn how to render a bar chart based upon the example movies graph.
+
+. link:https://medium.com/neo4j/working-with-neo4j-date-and-spatial-types-in-a-react-js-app-5475b5042b50[*Working With Neo4j Date And Spatial Types In A React.js App*]
++
+Learn how to build a dashboard app with Neo4j, Mapbox, React, and Nivo Charts.

src/css/docs-ndl.css

@@ -635,8 +635,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;
@@ -651,7 +651,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);
@@ -825,7 +826,7 @@ body.docs-ndl .cards .sect2 .paragraph:not(.icon) {
 }
 
 body.docs-ndl .cards .sect2.selectable .paragraph.link {
-  display: flex;
+  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