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
Open

Fix cards #288

Show file tree
Hide file tree
Changes from 7 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
28 changes: 23 additions & 5 deletions preview-src/docs-hub.adoc
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We now have cards that are selectable, but which also contain links. The first two cards on this page - the card shouldn't be clickable because it has two links and those are what you need to click on.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How do you separate the types of cards in the .adoc file? Like, the styling keeps on being applied after one card. I tried putting the card into -- separators, but it didn't work.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be possible now to add the role before the heading ie

[.selectable]
=== Neo4j Data Importer

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.selectable]

== Developer tools documentation

Use Neo4j tools to query and manage your databases, import data, and create graphical visualizations.
Expand Down Expand Up @@ -49,7 +50,7 @@ image:icons/ndl/icon-scientist.svg[]
[.description]
Learn how to model and import data to your Neo4j database.

[.link]
[.link.hide]
link:{docs-home}/data-importer[]

[.display.card.selectable]
Expand All @@ -65,7 +66,7 @@ image:icons/ndl/icon-scientist.svg[]
[.description]
Learn how to experience Neo4j on your local desktop.

[.link]
[.link.hide]
link:{docs-home}/desktop-manual[]

[.display.card.selectable]
Expand All @@ -81,5 +82,22 @@ Neo4j Ops Manager
[.description]
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.hide]
link:{docs-home}/ops-manager[]

[.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: 8 additions & 1 deletion src/css/docs-ndl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ body.docs-ndl .doc > .sect-header > h1.page:first-child {
}

body.docs-ndl.hub .doc div:not(.display) h2 {
display: none;
display: flex;
recrwplay marked this conversation as resolved.
Show resolved Hide resolved
}

body.landing .toc {
Expand Down Expand Up @@ -829,6 +829,13 @@ 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;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this intended to make the link invisible?

I don't think a card that is selectable should have a visible link, so so we can just use something like

body.docs-ndl .cards.selectable .sect2 .paragraph.link {
  display:none;
}

to hide all paragraphs that have the .link role in cards that have the .selectable role

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, it doesn't work without the .hide subclass. If I use your suggestion, it hides the links from the non-selectable cards too, even if I keep the following lines intact

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is fixed in the css now 👍🏻

}

body.docs-ndl .cards.selectable .sect2 .paragraph.link,
body.docs-ndl .cards:not(.selectable) .sect2 .paragraph.link {
box-sizing: border-box;
Expand Down
Loading