feat: DES-2806 cms breadcrumbs (#1268)

* feat: DES-2903 add id to app listing headings

* feat: DES-2631 cms breadcrumbs

- added link state mixin
- added link state styles
- moved CSS variables
- added CSS variables
- added CMS breadcrumbs template
- included CMS breadcrumbs template
- changed DjangoCMS breadcrumb template

* fix: DES-2631 font size & distance from nav

* fix: DES-2809 lighter 2nd-level breadcrumb text

* fix: DES-2809 only add breadcrumbs on app page

* feat: DES-2809 load CSS sooner

* refactor: DES-2806 no new breadcrumb classes

I.e. skin Bootstrap's.

* chore: DES-2806 remove outdated vars

Added in DES-2806, but then not used after later commits for DES-2806.

* fix: DES-2806 incorrect margin ref. thus spacing

* fix: DES-2806 font size should match feat/Tapis-v3

* feat: DES-2806 move bs3 breadcrumb style to .css

* fix: DES-2806 core-styles update & match workspace

* fix: DES-2806 match workspace top padding

* feat: DES-2806 improve cms focus ui

* fix: DES-2806 match workspace colors

* fix: DES-2806 use `.breadcrumb-item` not `li`

Bootstrap uses `.breadcrumb-item`.

* Revert "fix: DES-2806 use `.breadcrumb-item` not `li`"

This reverts commit b58cc96.

Bootstrap 4 uses `.breadcrumb-item`, but not Bootstrap 3.

* chore(cms): update core-styles breadcrumb

* chore(cms): use core-styles breadcrumb at v2.27.0

designsafe/apps/workspace/templates/designsafe/apps/workspace/app_listing_plugin.html

@@ -1,4 +1,6 @@
-<h2>{{instance.app_category}}</h2>
+<h2 id="{{instance.app_category|slugify }}">
+    {{instance.app_category}}
+</h2>
 <section class="o-app-grid">
     {% for app in listing %}
     {% include "designsafe/apps/workspace/app_card.html" with app=app %}

designsafe/static/styles/_mixins/_link.scss

@@ -0,0 +1,6 @@
+@mixin link {
+  text-underline-offset: 0.2em;
+}
+@mixin link--active {
+  text-decoration-style: dotted;
+}

designsafe/static/styles/base.scss

@@ -1,3 +1,16 @@
+/* ELEMENTS */
+
+@import '_mixins/link';
+
+a {
+  @include link;
+}
+a:active {
+  @include link--active;
+}
+
+/* MODULES */
+
 .row-flex {
     display: flex;
     flex-direction: row;

designsafe/static/styles/bootstrap3.breadcrumb.css

@@ -0,0 +1,51 @@
+@import url("https://cdn.jsdelivr.net/gh/TACC/[email protected]/dist/components/bootstrap3.breadcrumb.css");
+
+/* To negate `.navbar-ds` padding bottom */
+/* https://github.com/DesignSafe-CI/portal/blob/v7.0.0--tapis-v3-20240607/designsafe/static/vendor/bootstrap-ds/css/bootstrap.css#L4769 */
+/* NOTE: Use only after Workspace breadcrumbs are updated to match design */
+/*
+div:has(.navbar-ds) + main .breadcrumb {
+  margin-top: -20px;
+}
+*/
+
+/* To "disable" ineffectual links */
+.breadcrumb a:not([href]) {
+  /* https://github.com/TACC/Core-Styles/blob/v2.26.0/dist/elements/links.css */
+  pointer-events: none;
+
+  /* https://github.com/TACC/tup-ui/blob/v1.1.10/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/trumps/s-breadcrumbs.css */
+  opacity: 0.75;
+  color: unset;
+}
+
+/* To improve focus UI */
+.breadcrumb a:focus {
+  /* https://github.com/DesignSafe-CI/portal/blob/v7.0.0--tapis-v3-20240607/designsafe/static/vendor/bootstrap-ds/css/bootstrap.css#L1134 */
+  outline-offset: 2px;
+}
+
+/* To match workspace breadcrumbs until they are updated to match design */
+/* NOTE: Workspace breadcrumbs use Ant not Bootstrap */
+.breadcrumb {
+  --text-color: rgba(0, 0, 0, 0.45);
+  --text-color-dark: rgba(0, 0, 0, 0.88);
+
+  color: var(--text-color);
+
+  /* https://github.com/DesignSafe-CI/portal/blob/v7.0.0--tapis-v3-20240607/client/modules/workspace/src/AppsBreadcrumb/AppsBreadcrumb.module.css#L3 */
+  font-size: 1.6rem;
+}
+.breadcrumb:where(.breadcrumb-major) {
+  padding-top: unset;
+}
+.breadcrumb:where(ol,ul),
+.breadcrumb:where(.breadcrumb-major) li:last-child {
+  font-weight: 400;
+}
+.breadcrumb li:last-child {
+  color: var(--text-color-dark);
+}
+.breadcrumb li + li:last-child::before {
+  color: var(--text-color);
+}

designsafe/static/styles/main.css

@@ -1,7 +1,4 @@
-:root {
-  --ds-accent-color: #47a59d;
-  --ds-active-color: #337AB7;
-}
+@import url("./variables.css");
 
 body, html {
   background-color: #ffffff;

designsafe/static/styles/variables.css

@@ -0,0 +1,20 @@
+:root {
+  --ds-accent-color: #47a59d;
+  --ds-active-color: #337AB7;
+
+  /* Primary (Text, Layout) */
+  --global-color-primary--xx-light: #ffffff;
+  --global-color-primary--x-light: #f4f4f4;
+  --global-color-primary--light: #c6c6c6;
+  --global-color-primary--normal: #afafaf;
+  --global-color-primary--dark: #707070;
+  --global-color-primary--x-dark: #484848; /* ¹ */
+  --global-color-primary--xx-dark: #222222; /* ¹ */
+
+  /* Space */
+  --global-space--above-breadcrumbs: 35px;
+  --global-space--under-breadcrumbs: 20px;
+
+  /* Common */
+  --global-color-background--app: var(--global-color-primary--xx-light);
+}

designsafe/templates/cms_breadcrumbs.html

@@ -0,0 +1,28 @@
+{# @var className #}
+{% load static menu_tags sekizai_tags %}
+
+{% addtoblock "css" %}
+<link href="{% static 'styles/bootstrap3.breadcrumb.css' %}" rel="stylesheet">
+{% endaddtoblock %}
+
+<nav class="{{className}}" id="cms-breadcrumbs">
+  <ol class="breadcrumb breadcrumb-major" itemscope itemtype="https://schema.org/BreadcrumbList">
+
+    {# To include pages marked to not show in menu, attributes are added #}
+    {# SEE: https://docs.django-cms.org/en/release-3.6.x/reference/navigation.html#show-breadcrumb #}
+    {% show_breadcrumb 0 "menu/breadcrumb.html" 0 %}
+
+  </ol>
+</nav>
+
+{# To disable 2nd-level breadcrumb #}
+{# NOTE: Not using `block`, so markup is loaded first #}
+{# NOTE: Not using `block` nor `type="module"`, so effect is quicker #}
+<script>
+  {# FAQ: Attempts to do this server-side failed cuz useful props are blank #}
+  {# https://docs.django-cms.org/en/release-3.11.x/reference/navigation.html#properties-of-navigation-nodes-in-templates #}
+  document
+    .getElementById('cms-breadcrumbs')
+    .querySelector('li:nth-of-type(2) > a')
+    .removeAttribute('href');
+</script>

designsafe/templates/cms_page_for_app.html

@@ -2,6 +2,9 @@
 {% load cms_tags static sekizai_tags %}
 {% block page_class %}s-app-page{% endblock page_class %}
 
+{% block breadcrumb %}
+    {% include "cms_breadcrumbs.html" with className="container-fluid" %}
+{% endblock %}
 {% block styles %}
     {% addtoblock "css" %}
     <link href="{% static 'styles/app-page.css' %}" rel="stylesheet" />

designsafe/templates/menu/breadcrumb.html

@@ -0,0 +1,24 @@
+{# https://github.com/django-cms/django-cms/blob/release/3.11.x/menus/templates/menu/breadcrumb.html #}
+{% for ance in ancestors %}
+
+  <li itemscope itemprop="itemListElement"
+      itemtype="https://schema.org/ListItem"
+      {% if not forloop.last %}
+      class="active"
+      {% endif %}>
+  {% if not forloop.last %}
+
+    <a href="{{ ance.get_absolute_url }}" itemprop="item">
+      <span itemprop="name">{{ ance.get_menu_title }}</span>
+    </a>
+
+  {% else %}
+
+    <span itemprop="name">{{ ance.get_menu_title }}</span>
+
+  {% endif %}
+
+    <meta itemprop="position" content="{{ forloop.counter }}" />
+  </li>
+
+{% endfor %}