diff --git a/taccsite_cms/default_secrets.py b/taccsite_cms/default_secrets.py index 05d877122..a00b01e69 100644 --- a/taccsite_cms/default_secrets.py +++ b/taccsite_cms/default_secrets.py @@ -244,7 +244,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", @@ -255,7 +255,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", @@ -266,7 +266,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", @@ -283,7 +283,7 @@ _PORTAL_LOGO = [ "portal", "site_cms/img/org_logos/portal.png", - "", + "", # Unused, but kept to retain index count "/", "_self", "Portal Logo", diff --git a/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css b/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css deleted file mode 100644 index bdffadf1e..000000000 --- a/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css +++ /dev/null @@ -1,68 +0,0 @@ -/* BRANDING & LOGO CLASS SELECTORS */ -/* TODO: Convert to a component */ - -/* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)… - No `em` nor `rem` allowed, because they aren't consitently reliable. - - On Frontera CMS, `1rem` = `10px` and `body { font-size: 15px }` - - On any other CMS, `1rem` = `16px` (browser default). */ - -/* Shared by All Templates */ - -/* Branding Selectors */ - -.branding-header { - --branding-logo-height: 24px; - - display: flex; - align-items: center; - justify-content: 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: 49px; - - background-color: var(--global-color-primary--xx-dark); - color: var(--global-color-primary--xx-light); - border-bottom: 1px solid var(--global-color-primary--normal); -} - -.branding-seperator { - width: 1px; - height: 100%; - max-height: var(--branding-logo-height); - border-left: solid 1px var(--global-color-primary--xx-light); - margin: 0 15px; - vertical-align: middle; -} - -.branding-logo { - height: 30px; - margin: 0; - padding: 0; - border: none; -} - -/* Specific Brand Logo Selectors */ - -.branding-nsf { - height: 35px; -} - -.branding-tacc { - height: var(--branding-logo-height); -} - -.branding-utaustin { - height: var(--branding-logo-height); -} - -/* Logo Selectors */ - -.portal-logo { - float: left; - height: 40px; - margin: 0; - padding: 0; - border: none; -} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css new file mode 100644 index 000000000..a259b213c --- /dev/null +++ b/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 var(--global-color-primary--normal); +} + +/* 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 var(--global-color-primary--xx-light); + + /* 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; +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.twig.html b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.twig.html new file mode 100644 index 000000000..32731f22b --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.twig.html @@ -0,0 +1,22 @@ +
+ + + … + + + | + + + … + + + | + + + … + + +
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css new file mode 100644 index 000000000..01333bb85 --- /dev/null +++ b/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 { + /* … */ +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.twig.html b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.twig.html new file mode 100644 index 000000000..710c26a39 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.twig.html @@ -0,0 +1,4 @@ + diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css index d160af342..814ef7609 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css @@ -47,9 +47,9 @@ 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; @@ -57,6 +57,9 @@ Styleguide Trumps.Scopes.Header color: env(--header-text-color); /* text-decoration: none; *//* already provided by Bootstrap */ } +.s-header .c-logo__image { + height: 40px; +} @@ -75,8 +78,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: env(--header-bkgd-color); padding: var(--nav-padding-vert) var(--nav-padding-horz); diff --git a/taccsite_cms/static/site_cms/css/src/site.header.css b/taccsite_cms/static/site_cms/css/src/site.header.css index 081db9b71..0d19409d1 100644 --- a/taccsite_cms/static/site_cms/css/src/site.header.css +++ b/taccsite_cms/static/site_cms/css/src/site.header.css @@ -13,6 +13,15 @@ /* TODO: Find a way to be modular, but not redundant; perhaps `env()` vars */ @import url("_imports/settings/font.css"); + + +/* COMPONENTS */ + +@import url("_imports/components/c-branding.css"); +@import url("_imports/components/c-logo.css"); + + + /* TRUMPS */ /* Shared with Portal */ @@ -30,8 +39,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"); diff --git a/taccsite_cms/templates/header_branding.html b/taccsite_cms/templates/header_branding.html index 7ec95cf2b..8bee4ca4e 100644 --- a/taccsite_cms/templates/header_branding.html +++ b/taccsite_cms/templates/header_branding.html @@ -2,22 +2,26 @@ {% load staticfiles custom_portal_settings %} {% with settings.BRANDING as brands %} -
+
{# DEBUG: #}{# {{ brands|first }} #} {% 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 %} - - - - {% elif brand != brands|first %} - {# RFE: Use CSS to remove the need for `.branding-seperator` and `if` logic #} - - - - + {% if brand != brands|first %} + | {% endif %} + + {{ accessibility }} + {% endif %} {% endwith %} {% endfor %} diff --git a/taccsite_cms/templates/header_logo.html b/taccsite_cms/templates/header_logo.html index a3a00c5f9..95bc9062e 100644 --- a/taccsite_cms/templates/header_logo.html +++ b/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" %} - {% endif %} {% endwith %}