Add labels and styling to cards, allow mixed card type in a section (#248)

Author: recrwplay

preview-src/docs-ndl.adoc

@@ -9,6 +9,8 @@
 [.cards.icon-l]
 == CTA cards
 
+
+[.featured.label--featured]
 === Deployment options
 
 [.icon]

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]

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;
 }
 

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);
+}

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));

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 <a> 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)
 })

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",