From 8bf9fc3b828fa26b4f6156b11d682a901537e06c Mon Sep 17 00:00:00 2001 From: Neil Dewhurst Date: Wed, 9 Oct 2024 10:28:23 +0100 Subject: [PATCH 1/3] Add a dark background card for eg NODES promo --- preview-src/docs-ndl.adoc | 12 ++++++++++++ preview-src/docs-sub-hub.adoc | 14 ++++++++++++++ src/css/docs-ndl.css | 35 +++++++++++++++++++++++++++++++++-- src/js/70-docs-ndl.js | 12 +++++++++--- 4 files changed, 68 insertions(+), 5 deletions(-) diff --git a/preview-src/docs-ndl.adoc b/preview-src/docs-ndl.adoc index 2f3558a5..812eac04 100644 --- a/preview-src/docs-ndl.adoc +++ b/preview-src/docs-ndl.adoc @@ -9,6 +9,18 @@ [.cards.icon-l] == CTA cards +[.dark.nodes.selectable] +=== Neo4j Online Developer Conference + +[.icon] +image:https://dist.neo4j.com/wp-content/uploads/20240514071251/node-24-logo.svg[] + +[.description] +Join us on November 7 for live and unique tech talks over 24 hours across all timezones + +[.link] +link:https://neo4j.registration.goldcast.io/events/03805ea9-fe3a-4cac-8c15-aa622666531a?utm_source=neodocs&utm_medium=banner&utm_campaign=std[Register] + [.featured.label--featured] === Deployment options diff --git a/preview-src/docs-sub-hub.adoc b/preview-src/docs-sub-hub.adoc index a74e1839..ce33042f 100644 --- a/preview-src/docs-sub-hub.adoc +++ b/preview-src/docs-sub-hub.adoc @@ -24,6 +24,20 @@ endif::[] This section is designed to help you learn how to import various types of data into Neo4j. From JSON to APIs to another database, you can retrieve data from nearly any source and use it to populate your graph. +[.dark.nodes] +=== Neo4j Online Developer Conference + +[.icon] +image:https://dist.neo4j.com/wp-content/uploads/20240514071251/node-24-logo.svg[] + +[.description] +Join us on November 7 for live and unique tech talks over 24 hours across all timezones + +[.link] +link:https://neo4j.registration.goldcast.io/events/03805ea9-fe3a-4cac-8c15-aa622666531a?utm_source=neodocs&utm_medium=banner&utm_campaign=std[Register] + + + [role=label--new-5.12] === `LOAD CSV` [.icon] diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css index 21fd55fb..767d4adf 100644 --- a/src/css/docs-ndl.css +++ b/src/css/docs-ndl.css @@ -478,7 +478,7 @@ body.docs-ndl .cards .sect2 > a, body.docs-ndl .cards .sect2.not-selectable, body.docs-ndl .cards:not(.selectable) .sect2, body.docs-ndl .lists .sect2 { - overflow: hidden; + /* overflow: hidden; */ position: relative; display: flex; flex-direction: column; @@ -487,8 +487,21 @@ body.docs-ndl .lists .sect2 { /* justify-content: space-between; */ gap: 1rem; /* min-width: 30%; */ - padding: 1rem; + /* padding: 1rem; */ /* margin: 0 1rem 1rem 0; */ + /* background: var(--color-white); */ +} + +body.docs-ndl .cards .sect2.selectable > a, +body.docs-ndl .cards .sect2.not-selectable, +body.docs-ndl .cards:not(.selectable) .sect2:not(.selectable), +body.docs-ndl .lists .sect2 { + padding: 1rem; +} + +body.docs-ndl .cards .sect2.not-selectable:not(.dark), +body.docs-ndl .cards .sect2:not(.dark) a, +body.docs-ndl .cards:not(.selectable) .sect2:not(.dark) { background: var(--color-white); } @@ -498,6 +511,24 @@ body.docs-ndl .lists .sect2 { - graph-academy */ +body.docs-ndl .cards .sectionbody > div.sect2.dark a { + background-image: url(https://dist.neo4j.com/wp-content/uploads/20240514071252/nodes-patterns.svg); + background-position: center right; + background-repeat: no-repeat; + background-size: contain; + background-color: var(--color-black); + color: var(--color-white); + box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.2); +} + +body.docs-ndl .cards .sect2.dark h3 { + color: var(--color-white); +} + +body.docs-ndl .cards .sect2.nodes .icon img { + width: 12rem; +} + /* this would give a background image on cards marked with [.ga-promo] */ body.docs-ndl .cards .sectionbody > div.sect2.graph-academy > a, body.docs-ndl .cards .sectionbody > div.sect2.graph-academy:not(.selectable) { diff --git a/src/js/70-docs-ndl.js b/src/js/70-docs-ndl.js index f971273c..c90155f9 100644 --- a/src/js/70-docs-ndl.js +++ b/src/js/70-docs-ndl.js @@ -7,8 +7,14 @@ document.addEventListener('DOMContentLoaded', function () { } } - var makeClickable = function (card) { - var links = card.querySelectorAll('div.sect2:not(.not-selectable) div.link') + var makeClickable = function (cards) { + var links + if (cards.classList.contains('selectable')) { + links = cards.querySelectorAll('div.sect2:not(.not-selectable) div.link') + } else { + links = cards.querySelectorAll('div.sect2.selectable div.link') + } + links.forEach(function (link) { var target = link.querySelector('a').getAttribute('href') var card = link.parentElement @@ -44,7 +50,7 @@ document.addEventListener('DOMContentLoaded', function () { }) // Add links to cards - document.querySelectorAll('.cards.selectable') + document.querySelectorAll('.cards') .forEach(makeClickable) // Move labels to the icon div to position them From b2746455f8de3383924106fb8cf720df41600200 Mon Sep 17 00:00:00 2001 From: Neil Dewhurst Date: Wed, 9 Oct 2024 12:19:45 +0100 Subject: [PATCH 2/3] add icon-w and custom background image --- preview-src/docs-ndl.adoc | 2 +- preview-src/docs-sub-hub.adoc | 2 +- src/css/docs-ndl.css | 14 +++++++++----- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/preview-src/docs-ndl.adoc b/preview-src/docs-ndl.adoc index 812eac04..9387c9f6 100644 --- a/preview-src/docs-ndl.adoc +++ b/preview-src/docs-ndl.adoc @@ -9,7 +9,7 @@ [.cards.icon-l] == CTA cards -[.dark.nodes.selectable] +[.dark.icon-w.nodes-patterns.selectable] === Neo4j Online Developer Conference [.icon] diff --git a/preview-src/docs-sub-hub.adoc b/preview-src/docs-sub-hub.adoc index ce33042f..ae8d31f5 100644 --- a/preview-src/docs-sub-hub.adoc +++ b/preview-src/docs-sub-hub.adoc @@ -24,7 +24,7 @@ endif::[] This section is designed to help you learn how to import various types of data into Neo4j. From JSON to APIs to another database, you can retrieve data from nearly any source and use it to populate your graph. -[.dark.nodes] +[.dark.icon-w.nodes-patterns] === Neo4j Online Developer Conference [.icon] diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css index 767d4adf..ae03679f 100644 --- a/src/css/docs-ndl.css +++ b/src/css/docs-ndl.css @@ -512,10 +512,6 @@ body.docs-ndl .cards:not(.selectable) .sect2:not(.dark) { */ body.docs-ndl .cards .sectionbody > div.sect2.dark a { - background-image: url(https://dist.neo4j.com/wp-content/uploads/20240514071252/nodes-patterns.svg); - background-position: center right; - background-repeat: no-repeat; - background-size: contain; background-color: var(--color-black); color: var(--color-white); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.2); @@ -525,10 +521,18 @@ body.docs-ndl .cards .sect2.dark h3 { color: var(--color-white); } -body.docs-ndl .cards .sect2.nodes .icon img { +body.docs-ndl .cards .sect2.icon-w .icon img, +body.docs-ndl .cards.icon-l .sect2.icon-w .icon img { width: 12rem; } +body.docs-ndl .cards .sectionbody > div.sect2.nodes-patterns a { + background-image: url(https://dist.neo4j.com/wp-content/uploads/20240514071252/nodes-patterns.svg); + background-position: center right; + background-repeat: no-repeat; + background-size: contain; +} + /* this would give a background image on cards marked with [.ga-promo] */ body.docs-ndl .cards .sectionbody > div.sect2.graph-academy > a, body.docs-ndl .cards .sectionbody > div.sect2.graph-academy:not(.selectable) { From a4fc1a7f9c205069cda24cafb3f70e1ad114b245 Mon Sep 17 00:00:00 2001 From: Neil Dewhurst Date: Wed, 9 Oct 2024 14:22:53 +0100 Subject: [PATCH 3/3] Move the nodes promo --- preview-src/docs-ndl.adoc | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/preview-src/docs-ndl.adoc b/preview-src/docs-ndl.adoc index 9387c9f6..bd5cbf0a 100644 --- a/preview-src/docs-ndl.adoc +++ b/preview-src/docs-ndl.adoc @@ -9,18 +9,6 @@ [.cards.icon-l] == CTA cards -[.dark.icon-w.nodes-patterns.selectable] -=== Neo4j Online Developer Conference - -[.icon] -image:https://dist.neo4j.com/wp-content/uploads/20240514071251/node-24-logo.svg[] - -[.description] -Join us on November 7 for live and unique tech talks over 24 hours across all timezones - -[.link] -link:https://neo4j.registration.goldcast.io/events/03805ea9-fe3a-4cac-8c15-aa622666531a?utm_source=neodocs&utm_medium=banner&utm_campaign=std[Register] - [.featured.label--featured] === Deployment options @@ -68,6 +56,20 @@ Run graph algorithms and machine learning models to analyze your data at scale. [.link] xref:gds:index.adoc[Unlock insights from data] + +[.dark.icon-w.nodes-patterns.selectable] +=== Neo4j Online Developer Conference + +[.icon] +image:https://dist.neo4j.com/wp-content/uploads/20240514071251/node-24-logo.svg[] + +[.description] +Join us on November 7 for live and unique tech talks over 24 hours across all timezones + +[.link] +link:https://neo4j.registration.goldcast.io/events/03805ea9-fe3a-4cac-8c15-aa622666531a?utm_source=neodocs&utm_medium=banner&utm_campaign=std[Register] + + === Create applications [.icon]