Merge branch 'task/GH-101-header-redesign' into task/GH-101-header-re…

…design--mobile-nav-layout-2

taccsite_cms/default_secrets.py

@@ -61,10 +61,15 @@
     # FAQ: First template is default template
     # REF: http://docs.django-cms.org/en/latest/how_to/install.html#templates
 
-    # Default template with standard and custom (per-project) choices
-    # NOTE: To have per-project styles, the custom default template is required
+    # For standard pages (has Container and Breadcrumbs)
+    ('standard.html', 'Standard'),
+    # For content that spans full window width (no Container nor Breadcrumbs)
     ('fullwidth.html', 'Fullwidth'),
-    ('example-cms/templates/fullwidth.html', 'Fullwidth (Custom Example)'),
+
+    # Any project that needs per-project styles must have a custom template
+    # FAQ: This is a tedious solution until a cleaner solution is devised
+    # TODO: Automate per-project asset load and update exisitng sites as needed
+    # ('name-of-project/templates/fullwidth.html', 'Fullwidth (Custom)'),
     # NOTE: If project later uses custom template, then for that project:
     #       1. Rename standard default template to "DEPRECATED […]".
     #       2. Update all pages to use the custom default template.

taccsite_cms/static/site_cms/css/src/_imports/trumps/README.css

@@ -3,7 +3,7 @@
 /*
 Trumps
 
-Trump styles exist to overwrite other styles. They are added as necessary. Examples use cases are third-party styles, styles used only by JavaScript, modules that are not meant to extended as desired.
+Trump styles exist to overwrite other styles. They are added as necessary. Examples use cases are third-party styles, styles used only by JavaScript, modules that are not meant to be extended.
 
 Reference:
 
@@ -25,15 +25,24 @@ Styleguide Trumps
 /*
 Scopes
 
-Scope styles are overrides and styles that are scoped to a specific area. These are meant to be used sparingly. Examples of scopes are styles for third-party markup, WYSIWIG editor tags, form elements, components with a forced relationship.
+Scope styles are overrides and styles that are scoped to a specific area. These are meant to be used sparingly. Examples of scopes are styles for:
+- third-party markup, e.g.:
+    - social media widget
+    - external authentication form
+    - internal Bootstrap-dependent markup
+- enforcing internal markup (e.g. breadcrumbs, form elements, document pages)
+- WYSIWIG editor tags (e.g. CMS WYSIWIG content entry)
+- coupled components (i.e. components interwoven in unique situations), e.g.:
+    - Frontera homepage before all styling used plugins
+    - article previews within an article list
 
 Reference:
 
 - [BEM with Namespaces: Scope Namespaces](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/#scope-namespaces-s-)
 
 Guidelines:
 
-- Scopes are pretty rare, evaluate before creating.
+- Scopes should be rare; evaluate before creating.
 - A consistent way to author these in nested inside `.s-* {}`.
 
 Rules:

taccsite_cms/static/site_cms/css/src/_imports/trumps/s-breadcrumbs.css

@@ -0,0 +1,69 @@
+/*
+Breadcrumbs
+
+A list of links to ancestor navigation (pages or sections that are a parent, grandparent, et cetera of the current page or section) and the current page or section itself.
+
+Notice: A scope class is used to enforce appropriate semantic HTML.
+
+Markup:
+<!-- Major Navigation -->
+<!-- FAQ: Use this major navigation markup for global breadcrumbs -->
+<!-- SEE: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#usage_notes -->
+<nav class="s-breadcrumbs">
+  <ol>
+      <li><a href="/"><span>Home</span></a></li>
+      <li><a href="/"><span>Science</span></a></li>
+      <li><span>Publications</span></li>
+  </ol>
+</nav>
+<!-- Minor Navigation -->
+<ol class="s-breadcrumbs">
+    <li><a href="/"><span>Home</span></a></li>
+    <li><a href="/"><span>Science</span></a></li>
+    <li><span>Publications</span></li>
+</ol>
+
+Styleguide Trumps.Scopes.Breadcrumbs
+*/
+@import url("_imports/tools/x-truncate.css");
+
+
+
+
+
+/* Base i.e. Container */
+
+nav.s-breadcrumbs {
+  padding-top: 15px;
+
+  font-size: var(--global-font-size--x-small);
+
+  text-transform: uppercase;
+}
+
+
+
+/* Elements i.e. Content */
+
+/* To undo default list styles ONLY for major breadcrumbs */
+/* FAQ: Minor breadcrumbs have not been designed, so we should not unstyle it */
+nav.s-breadcrumbs ol {
+  list-style: none; /* overwrite browser styles */
+  padding-left: 0; /* overwrite html-elements.css */
+
+  font-weight: var(--global-font-weight--medium);
+}
+
+ol.s-breadcrumbs li,
+nav.s-breadcrumbs ol li {
+  display: inline-block;
+}
+
+ol.s-breadcrumbs li + li::before,
+nav.s-breadcrumbs ol li + li::before {
+  content: ' > ';
+}
+
+nav.s-breadcrumbs ol li:last-child span {
+  font-weight: var(--bold);
+}

taccsite_cms/static/site_cms/css/src/site.css

@@ -36,5 +36,6 @@
 @import url("_imports/components/bootstrap.container.css");
 
 /* TRUMPS */
+@import url("_imports/trumps/s-breadcrumbs.css");
 @import url("_imports/trumps/s-footer.css");
 @import url("_imports/trumps/u-empty.css");

taccsite_cms/templates/base.html

@@ -67,6 +67,7 @@
       <!-- This block used regardless. -->
       {% block content %}
       <div class="container">
+        {% include "nav_cms_breadcrumbs.html" %}
         {% placeholder "content" %}
       </div>
       {% endblock content %}

taccsite_cms/templates/menu/breadcrumb.html

@@ -0,0 +1,24 @@
+{# SEE: https://github.com/django-cms/django-cms/blob/release/3.6.x/menus/templates/menu/breadcrumb.html #}
+{% for ance in ancestors %}
+
+  {# To support structured data, item* attributes are used #}
+  {# SEE: https://confluence.tacc.utexas.edu/x/5yMFDg #}
+  <li itemscope itemprop="itemListElement"
+      itemtype="https://schema.org/ListItem">
+
+  {% 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 %}

taccsite_cms/templates/nav_cms_breadcrumbs.html

@@ -0,0 +1,16 @@
+{# @var className #}
+{% load menu_tags %}
+
+<nav class="s-breadcrumbs  {{className}}">
+
+  {# To support structured data, item* attributes are used #}
+  {# SEE: https://confluence.tacc.utexas.edu/x/5yMFDg #}
+  <ol 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>

taccsite_cms/templates/standard.html

@@ -0,0 +1,4 @@
+{% extends "base.html" %}
+{% load cms_tags %}
+
+{% block title %}{% page_attribute "page_title" %}{% endblock title %}