From ad8309419e262ebbacbdb381dac895a969c89330 Mon Sep 17 00:00:00 2001 From: Neil Dewhurst Date: Thu, 25 Jul 2024 14:53:34 +0100 Subject: [PATCH] Add labels to cards, allow mixed card type in a section --- preview-src/docs-ndl.adoc | 2 ++ preview-src/docs-sub-hub.adoc | 10 +++++- src/css/docs-ndl.css | 64 +++++++++++++++++++++++++++++++---- src/css/labels.css | 9 +++++ src/css/vars.css | 3 ++ src/js/70-docs-ndl.js | 20 ++++++++++- src/js/data/rolesData.json | 17 ++++++++++ 7 files changed, 116 insertions(+), 9 deletions(-) diff --git a/preview-src/docs-ndl.adoc b/preview-src/docs-ndl.adoc index b7c1ef72..2f3558a5 100644 --- a/preview-src/docs-ndl.adoc +++ b/preview-src/docs-ndl.adoc @@ -9,6 +9,8 @@ [.cards.icon-l] == CTA cards + +[.featured.label--featured] === Deployment options [.icon] diff --git a/preview-src/docs-sub-hub.adoc b/preview-src/docs-sub-hub.adoc index ac696a53..a74e1839 100644 --- a/preview-src/docs-sub-hub.adoc +++ b/preview-src/docs-sub-hub.adoc @@ -23,6 +23,8 @@ 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. + +[role=label--new-5.12] === `LOAD CSV` [.icon] image:icons/ndl/icon-import.svg[] @@ -34,6 +36,7 @@ Use Cypher for importing bulk data into Neo4j. Suited for non-admin users. link:{docs-home}/cypher-manual/current/clauses/load-csv/[] +[.labs.label--labs] === From relational into graph [.icon] @@ -46,6 +49,7 @@ Learn how to translate and migrate tabular data and relational datasets into a g link:{docs-home}/data-import/relational-to-graph-import/[] +[.not-selectable] === Neo4j Connectors [.icon] @@ -57,7 +61,9 @@ Learn how to use connectors to connect data from various sources into Neo4j. [.link] link:{docs-home}/connectors/[] -=== Neo4j Data Importer + +[.label--graph-academy.label--featured] +=== Graph Academy [.icon] image:icons/ndl/icon-neo4j.svg[] @@ -94,6 +100,8 @@ link:{docs-home}/apoc/current/import/[*Import data using APOC Core*] [.cards.selectable] == Keep exploring + +[.graph-academy.label--graph-academy.label--featured] === GraphAcademy [.icon] diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css index da245ef3..21fd55fb 100644 --- a/src/css/docs-ndl.css +++ b/src/css/docs-ndl.css @@ -373,20 +373,21 @@ body.docs-ndl .paragraph.footer-link { /* selectable cards */ -body.docs-ndl .cards.selectable .sect2 { +body.docs-ndl .cards .sect2.selectable { cursor: pointer; } -body.docs-ndl .cards.selectable .sect2 a { +body.docs-ndl .cards .sect2.selectable a { text-decoration: none; } -body.docs-ndl .cards.selectable .sect2:hover { - transform: translateY(-0.25rem); - transition: 0.2s linear; +body.docs-ndl .cards .sect2.selectable a:hover { + transform: scale(1.02); + transition: 0.1s linear; + box-shadow: 0 4px 8px 0 rgba(12, 26, 37, 0.08); } -body.docs-ndl .cards.selectable .sect2:hover div.description { +body.docs-ndl .cards .sect2.selectable:hover div.description { text-decoration: underline; } @@ -474,6 +475,7 @@ body.docs-ndl.explainer .sectionbody > div.sect2 { } 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; @@ -490,7 +492,40 @@ body.docs-ndl .lists .sect2 { background: var(--color-white); } +/* styles for specific types of cards: +- featured - for new and exciting items +- labs +- graph-academy +*/ + +/* 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) { + background: #fff url(../img/ad-blob.svg) no-repeat 100% 100%; + border: 1px solid var(--success-color); + box-shadow: 0 2px 4px 0 rgba(63, 120, 36, 0.5), 0 1px 2px 0 rgba(63, 120, 36, 0.2); +} + +body.docs-ndl .cards .sectionbody > div.sect2.labs > a, +body.docs-ndl .cards .sectionbody > div.sect2.labs:not(.selectable) { + border: 1px solid var(--color-labs); + box-shadow: 0 2px 4px 0 rgba(90, 52, 170, 0.5), 0 1px 2px 0 rgba(90, 52, 170, 0.2); +} + +body.docs-ndl .cards .sectionbody > div.sect2.featured > a, +body.docs-ndl .cards .sectionbody > div.sect2.featured:not(.selectable) { + border: 1px solid var(--success-color); + box-shadow: 0 2px 4px 0 rgba(63, 120, 36, 0.5), 0 1px 2px 0 rgba(63, 120, 36, 0.2); +} + +/* add a labs label to a title in a card */ +body.docs-ndl .header-label-container > div.labels { + display: inline-flex; + margin-left: auto; +} + body.docs-ndl .cards .sect2 > a, +body.docs-ndl .cards .sect2.not-selectable, body.docs-ndl .cards:not(.selectable) .sect2, body.docs-ndl .widget:not(.video) { /* box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06); */ @@ -539,6 +574,20 @@ body.docs-ndl .widget .icon { order: 1; padding: 0; margin: 0; + width: 100%; +} + +body.docs-ndl .cards .sect2 .icon p { + display: flex; + width: -webkit-fill-available; + justify-content: space-between; +} + +body.docs-ndl .cards .sect2 .icon p div.labels { + display: flex; + flex-direction: row; + gap: 0.25rem; + height: min-content; } body.docs-ndl .cards .icon span { @@ -578,6 +627,7 @@ body.docs-ndl .lists .sect2 h3 { order: 2; margin: 0; font-weight: var(--font-weight-semibold); + width: -webkit-fill-available; } body.docs-ndl .cards .sect2 h3 .anchor::before { @@ -601,7 +651,7 @@ body.docs-ndl .cards .sect2 .paragraph:not(.icon) { /* flex-grow: 1; */ } -body.docs-ndl .cards.selectable .sect2 .paragraph.link { +body.docs-ndl .cards .sect2.selectable .paragraph.link { display: none; } diff --git a/src/css/labels.css b/src/css/labels.css index a70b71b4..6b507b57 100644 --- a/src/css/labels.css +++ b/src/css/labels.css @@ -158,6 +158,7 @@ span.label--recommended { span.label--added, span.label--changed, span.label--new, +span.label--featured, span.label--renamed, span.label--updated, span.label--yes { @@ -224,3 +225,11 @@ span.label--cluster-member-single { background: rgba(var(--colors-lemon-10)); background: rgba(var(--colors-lemon-60)); } + +span.label--labs { + background: var(--color-labs); +} + +span.label--graph-academy { + background: var(--success-color); +} diff --git a/src/css/vars.css b/src/css/vars.css index 55ac668d..76b4208f 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -239,6 +239,9 @@ NB: admonitions are dark text on light background to use the same colors on labels, reverse the background and color */ + --featured-color: rgba(var(--colors-hibiscus-70)); + --featured-border-color: rgba(var(--colors-lavender-50)); + --featured-background-color: rgba(var(--colors-hibiscus-10)); --caution-color: rgba(var(--colors-marigold-70)); --caution-border-color: rgba(var(--colors-marigold-50)); --caution-background-color: rgba(var(--colors-marigold-10)); diff --git a/src/js/70-docs-ndl.js b/src/js/70-docs-ndl.js index 2ed9eda7..f971273c 100644 --- a/src/js/70-docs-ndl.js +++ b/src/js/70-docs-ndl.js @@ -8,10 +8,11 @@ document.addEventListener('DOMContentLoaded', function () { } var makeClickable = function (card) { - var links = card.querySelectorAll('div.link') + var links = card.querySelectorAll('div.sect2:not(.not-selectable) div.link') links.forEach(function (link) { var target = link.querySelector('a').getAttribute('href') var card = link.parentElement + card.classList.add('selectable') const cardLink = createElement('a', 'link') cardLink.setAttribute('href', target) moveElements(card, cardLink) @@ -23,6 +24,18 @@ document.addEventListener('DOMContentLoaded', function () { }) } + var moveLabels = function (section) { + var cards = section.querySelectorAll('div.sect2') + cards.forEach(function (card) { + // do we have any labels to move? + var labels = card.querySelector('div.labels') + if (labels) { + var icon = card.querySelector('div.icon p') + icon.append(labels) + } + }) + } + // Remove anchor tags from h3 elements on selectable cards in docs-ndl pages // the card is already wrapped in an anchor tag so we don't need an anchor inside the h3 // and it introduces an unwanted ::after pseudo-element @@ -33,4 +46,9 @@ document.addEventListener('DOMContentLoaded', function () { // Add links to cards document.querySelectorAll('.cards.selectable') .forEach(makeClickable) + + // Move labels to the icon div to position them + // in the top-right corner of the card + document.querySelectorAll('.cards') + .forEach(moveLabels) }) diff --git a/src/js/data/rolesData.json b/src/js/data/rolesData.json index d2b45a72..1fd9ac78 100644 --- a/src/js/data/rolesData.json +++ b/src/js/data/rolesData.json @@ -1,4 +1,21 @@ { + "featured": { + "description": "Featured cards", + "labelCategory": "content", + "displayText": "NEW" + }, + "labs":{ + "description": "Neo4j Labs project", + "labelCategory": "content", + "product": "Labs", + "displayText": "Labs" + }, + "graph-academy":{ + "description": "Neo4j Graph Academy", + "labelCategory": "content", + "product": "Graph Academy", + "displayText": "Graph Academy" + }, "enterprise":{ "description": "Function available in Enterprise Edition only", "labelCategory": "product",