diff --git a/preview-src/docs-hub.adoc b/preview-src/docs-hub.adoc index 7d07c22..792a443 100644 --- a/preview-src/docs-hub.adoc +++ b/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[] \ No newline at end of file +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. \ No newline at end of file diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css index 1b2c411..809315f 100644 --- a/src/css/docs-ndl.css +++ b/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,7 +827,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, diff --git a/src/js/70-docs-ndl.js b/src/js/70-docs-ndl.js index f971273..da6f6f0 100644 --- a/src/js/70-docs-ndl.js +++ b/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