Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix cards #288

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
+38 −12
Open

Fix cards #288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3e81ea3
0.27.2
lidiazuin Dec 17, 2024
559a96d
0.27.3
lidiazuin Dec 17, 2024
e87fb2e
0.27.4
lidiazuin Dec 17, 2024
1bf6c75
Fixing selectable cards in hub subpages and keep exploring widget
lidiazuin Dec 17, 2024
31ad4f7
reverting some changes
lidiazuin Dec 17, 2024
c20fd69
reverting some changes
lidiazuin Dec 17, 2024
eeb9acb
reverting some changes
lidiazuin Dec 17, 2024
b3a0a9f
reverting changes and fixing keep learning class on hub page example
lidiazuin Dec 19, 2024
a2cb677
fixing not-selectable class in example page
lidiazuin Dec 19, 2024
b6e29b6
fixing the selectables
recrwplay Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 24 additions & 5 deletions preview-src/docs-hub.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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

Expand All @@ -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

Expand All @@ -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

Expand All @@ -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.
9 changes: 5 additions & 4 deletions src/css/docs-ndl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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,
Expand Down
12 changes: 9 additions & 3 deletions src/js/70-docs-ndl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
Loading