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