GH-101: Branding Bar

- Migrate `branding_logos` CSS to `c-branding` & `c-logo`.
- In `s-header` style `.c-logo` not `.navbar-brand`.
- Update and format markup for `header_branding` and `header_logo`.
- Comment on now-unused secrets values.

taccsite_cms/default_secrets.py

@@ -233,7 +233,7 @@
 _TACC_BRANDING = [
     "tacc",
     "site_cms/img/org_logos/tacc-white.png",
-    "branding-tacc",
+    "branding-tacc", # Unused but kept to retain index count # GH-59: Remove
     "https://www.tacc.utexas.edu/",
     "_blank",
     "TACC Logo",
@@ -244,7 +244,7 @@
 _UTEXAS_BRANDING = [
     "utexas",
     "site_cms/img/org_logos/utaustin-white.png",
-    "branding-utaustin",
+    "branding-utaustin", # Unused but kept to retain index count # GH-59: Remove
     "https://www.utexas.edu/",
     "_blank",
     "University of Texas at Austin Logo",
@@ -255,7 +255,7 @@
 _NSF_BRANDING = [
     "nsf",
     "site_cms/img/org_logos/nsf-white.png",
-    "branding-nsf",
+    "branding-nsf", # Unused but kept to retain index count # GH-59: Remove
     "https://www.nsf.gov/",
     "_blank",
     "NSF Logo",
@@ -272,7 +272,7 @@
 _PORTAL_LOGO = [
     "portal",
     "site_cms/img/org_logos/portal.png",
-    "",
+    "", # Unused, but kept to retain index count
     "/",
     "_self",
     "Portal Logo",

taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css

@@ -0,0 +1,91 @@
+/*
+Branding
+
+A list of linked images for funders and affiliates. Project customization should be minimal.
+
+Markup: c-branding.twig.html
+
+Styleguide Components.Branding
+*/
+@import url("_imports/tools/media-queries.css");
+
+/* IDEA: Use multi-column (`column-*`) to simplify border, margin, separator */
+
+
+
+/* Base */
+
+.c-branding {
+  --column-gap--side: 25px;
+  --column-gap--center: 35px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  /* This prevents header bar resize when branding is dynamically added */
+  /* CAVEAT: This is only for Portal and Docs which dynamically load content */
+  /* FAQ: Do not use `48.78px`, because Safari only accepts whole numbers */
+  height: 40px;
+
+  background-color: var(--global-color-primary--xx-dark);
+  color: var(--global-color-primary--xx-light);
+  border-bottom: 1px solid #aaa;
+}
+
+/* A responsive column gap */
+.c-branding__link:first-child .c-branding__image {
+  margin-right: var(--column-gap--side);
+}
+.c-branding__link:not(:first-child):not(:last-child) .c-branding__image {
+  margin-left: var(--column-gap--center);
+  margin-right: var(--column-gap--center);
+}
+.c-branding__link:last-child .c-branding__image {
+  margin-left: var(--column-gap--side);
+}
+@media (--x-narrow-and-below) {
+  .c-branding {
+    --column-gap--side: 10px;
+    --column-gap--center: 10px;
+  }
+}
+
+
+
+/* Elements */
+
+.c-branding__link {
+  --height: 90%;
+
+  height: var(--height);
+}
+.c-branding__separator {
+  /* To add border */
+  height: 25px;
+  border-left: solid 1px #fff;
+
+  /* To hide text */
+  width: 0;
+  overflow: hidden;
+}
+.c-branding__image {
+  /* To match parent height */
+  height: 100%;
+}
+
+/* Specific brands */
+.c-branding__nsf-link    { --height: 35px; }
+.c-branding__tacc-link   { --height: 30px; }
+.c-branding__utexas-link { --height: 26px; }
+
+
+
+/* Modifiers */
+
+/* Compact */
+.c-branding--compact {
+  --column-gap--side: 10px;
+  --column-gap--center: 10px;
+}

taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.twig.html

@@ -0,0 +1,22 @@
+<div class="c-branding">
+
+  <a class="c-branding__link" href="">
+    <img class="c-branding__image c-branding__nsf-image"
+      src="/static/site_cms/img/org_logos/nsf-white.png" alt="…" />
+  </a>
+
+  <span class="c-branding__separator">|</span>
+
+  <a class="c-branding__link" href="">
+    <img class="c-branding__image c-branding__tacc-image"
+      src="/static/site_cms/img/org_logos/tacc-white.png" alt="…" />
+  </a>
+
+  <span class="c-branding__separator">|</span>
+
+  <a class="c-branding__link" href="">
+    <img class="c-branding__image c-branding__utexas-image"
+      src="/static/site_cms/img/org_logos/utaustin-white.png" alt="…" />
+  </a>
+
+</div>

taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css

@@ -0,0 +1,27 @@
+/*
+Logo
+
+The main website logo. Project customization should be minimal.
+
+Markup: c-logo.twig.html
+
+Styleguide Components.Logo
+*/
+/* NOTE: All styles here are currently handled by Bootstrap `.navbar-brand` */
+/* TODO: Abandon Bootstrap `.navbar-brand`. Implement minimum styles instead. */
+
+
+
+/* Base  */
+
+.c-logo {
+  /* … */
+}
+
+
+
+/* Elements  */
+
+.c-logo__image {
+  /* … */
+}

taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.twig.html

@@ -0,0 +1,4 @@
+<a class="c-logo" href="">
+  <img class="c-logo__image"
+    src="/static/site_cms/img/org_logos/anonorg-logo.png" alt="Logo" />
+</a>

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

@@ -47,15 +47,17 @@ Styleguide Trumps.Scopes.Header
 
 /* Logo */
 
-.s-header .navbar-brand {
-  /* If branding is short enough, then align position of first CMS nav link with Portal "Dashboard" header */
-  /* WARNING: This is a manual value; if Portal interface changes, then this may need to change */
+.s-header .c-logo {
+  /* To align position of first CMS nav link with Portal "Dashboard" header */
+  /* WARNING: If Portal UI changes, then these styles may need to change */
   min-width: 176px;
   margin-right: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.navbar-brand`) */
   padding: 0;
 
   color: var(--text-color);
-  /* text-decoration: none; *//* already provided by Bootstrap */
+}
+.s-header .c-logo__image {
+  height: 40px;
 }
 
 
@@ -75,8 +77,8 @@ Styleguide Trumps.Scopes.Header
   /* FAQ: The `calc()` keeps track of disparate source of space values */
   /* `16px` = `1rem` from Portal (via `#sidebar .nav-content`) */
   /* `20px` from Portal (via `.nav-link`) */
-  --nav-padding-vert: 5px;
   --nav-padding-horz: calc(16px + 20px);
+  --nav-padding-vert: 5px;
 
   background-color: var(--global-color-primary--xx-dark);
   padding: var(--nav-padding-vert) var(--nav-padding-horz);

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

@@ -14,6 +14,15 @@
          but the User Guides do not. This can be removed in Core-CMS PR #192 */
 @import url("_imports/settings/color.css");
 
+
+
+/* COMPONENTS */
+
+@import url("_imports/components/c-branding.css");
+@import url("_imports/components/c-logo.css");
+
+
+
 /* TRUMPS */
 
 /* Shared with Portal */
@@ -31,8 +40,3 @@
 @import url("_imports/trumps/s-header.css");
 @import url("_imports/trumps/s-portal-nav.css");
 @import url("_imports/trumps/s-cms-nav.css");
-
-/* UNORGANIZED */
-
-/* TODO: Convert to a component */
-@import url("_imports/branding_logos.css");

taccsite_cms/templates/header_branding.html

@@ -2,22 +2,26 @@
 {% load staticfiles custom_portal_settings %}
 
 {% with settings.BRANDING as brands %}
-<div id="header-branding" class="branding-header {{className}}">
+<div id="header-branding" class="c-branding  {{className}}">
   {# DEBUG: #}{# <code>{{ brands|first }}</code> #}
   {% for brand in brands %}
-    {% with filename=brand|index:1 selectors=brand|index:2 targeturl=brand|index:3 targetType=brand|index:4 accessibility=brand|index:5 corstype=brand|index:6 visibility=brand|index:7 %}
+    {% with name=brand|index:0 filename=brand|index:1 selectors=brand|index:2 targeturl=brand|index:3 targetType=brand|index:4 accessibility=brand|index:5 corstype=brand|index:6 visibility=brand|index:7 %}
       {% if visibility == "True" %}
-        {% if brand == brands|first %}
-        <a href="{{ targeturl }}" target="{{ targettype }}">
-          <img class="branding-logo {{ selectors }}" src="{% static filename %}" crossorigin="{{ corstype }}" alt="{{ accessibility }}" >
-        </a>
-        {% elif brand != brands|first %}
-        {# RFE: Use CSS to remove the need for `.branding-seperator` and `if` logic #}
-        <span class="branding-seperator"></span>
-        <a href="{{ targeturl }}" target="{{ targettype }}">
-          <img class="branding-logo {{ selectors }}" src="{% static filename %}" crossorigin="{{ corstype }}" alt="{{ accessibility }}" >
-        </a>
+        {% if brand != brands|first %}
+        <span class="c-branding__separator">|</span>
         {% endif %}
+        <a
+          href="{{ targeturl }}"
+          target="{{ targettype }}"
+          class="c-branding__link c-branding__{{ name }}-link"
+        >
+          <img
+            class="c-branding__image c-branding__{{ name }}-image"
+            src="{% static filename %}"
+            crossorigin="{{ corstype }}"
+            alt="{{ accessibility }}"
+          >
+        </a>
       {% endif %}
     {% endwith %}
   {% endfor %}

taccsite_cms/templates/header_logo.html

@@ -4,8 +4,20 @@
 {% with settings.LOGO as logo %}
   {% with filename=logo|index:1 selectors=logo|index:2 targeturl=logo|index:3 targetType=logo|index:4 accessibility=logo|index:5 corstype=logo|index:6 visibility=logo|index:7 %}
     {% if visibility == "True" %}
-    <a id="header-logo" class="navbar-brand {{className}}" href="{{ targeturl }}" target="{{ targettype }}">
-      <img class="portal-logo {{ selectors }}" src="{% static filename %}" crossorigin="{{ corstype }}" alt="{{ accessibility }}" >
+    <a
+      id="header-logo"
+      {# TODO: Remove `navbar-brand` or include via `className` #}
+      {# FAQ: Including class via `className` requires editing Portal & Docs #}
+      class="c-logo  {{className}}  navbar-brand"
+      href="{{ targeturl }}"
+      target="{{ targettype }}"
+    >
+      <img
+        class="c-logo__image"
+        src="{% static filename %}"
+        crossorigin="{{ corstype }}"
+        alt="{{ accessibility }}"
+      >
     </a>
     {% endif %}
   {% endwith %}