From 28515e667b1b54cdc118f37a0ba51aec04275740 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 21 May 2021 16:11:03 -0500 Subject: [PATCH 1/2] GH-101: Header (Use .c-logo for Brand Bar Images) - Remove branding images style that is made redundant. - Allow logo height less than 100% (for navbar). - Ensure navbar logo styles do not affect brand bar. - Give limited flexibility to navbar logo. - Use c-logo for branding images. --- .../src/_imports/components/c-branding.css | 4 ---- .../css/src/_imports/components/c-logo.css | 5 ++--- .../css/src/_imports/trumps/s-header.css | 22 ++++++++++++++----- taccsite_cms/templates/header_branding.html | 4 ++-- 4 files changed, 20 insertions(+), 15 deletions(-) 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 index 73cf68e8a..8be6109f4 100644 --- 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 @@ -61,10 +61,6 @@ Styleguide Components.Branding width: 0; overflow: hidden; } -.c-branding__image { - /* To match parent height */ - height: 100%; -} /* Specific brands */ .c-branding__nsf-link { --height: 35px; } 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 index 994da211d..902ca73d6 100644 --- 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 @@ -23,8 +23,7 @@ Styleguide Components.Logo /* Elements */ .c-logo__image { - /* To delegate height control to base/container */ - height: 100%; - /* To prevent length wider than (but allow narrower than) base/container */ + /* Of base i.e. container */ + max-height: 100%; max-width: 100%; } 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 589766b84..6995f6526 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 @@ -81,7 +81,7 @@ Styleguide Trumps.Scopes.Header /* To prevent extra height from FOUC during Portal/Docs AJAX content load */ /* To set nav height, but not constrain height of opened mobile nav */ /* FAQ: Set height of descendants, but not of CMS and Portal and mobile navs */ -.s-header .c-logo, +#header-logo, .s-header .navbar-toggler, .s-header tacc-search-bar { height: env(--header-navbar-height); @@ -112,7 +112,13 @@ Styleguide Trumps.Scopes.Header /* Logo */ -.s-header .c-logo { +#header-logo { + display: flex; + align-items: center; + + /* To prevent wide image from forcing `.navbar-toggler` to be wrapped */ + min-width: calc(215px - 25px); + /* To prevent zero-width element as it is loaded */ /* To align position of first CMS nav link with Portal section headers */ min-width: calc(190px - 25px); /* CAVEAT: Only works on narrow-enough logos */ @@ -124,16 +130,20 @@ Styleguide Trumps.Scopes.Header /* FAQ: In case image does not load and browser shows alt text */ color: env(--header-text-color); } -/* To overwrite bootstrap */ -.s-header .c-logo.navbar-brand { +/* To overwrite Bootstrap */ +#header-logo.navbar-brand { padding-top: unset; padding-bottom: unset; - display: unset; } -.s-header .c-logo__image { +#header-logo .c-logo__image { padding-top: 5px; padding-bottom: 5px; + + /* Of base i.e. container */ + /* To avoid a project shrinking logo beyond legibility */ + min-height: 50%; + min-width: 50%; } diff --git a/taccsite_cms/templates/header_branding.html b/taccsite_cms/templates/header_branding.html index 7e059fe17..2bedf0b21 100644 --- a/taccsite_cms/templates/header_branding.html +++ b/taccsite_cms/templates/header_branding.html @@ -13,10 +13,10 @@ {{ accessibility }} Date: Fri, 21 May 2021 16:20:30 -0500 Subject: [PATCH 2/2] GH-101: Navigation Bar (Responsive Design) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add compressed and expanded styles in two files. - Increase body min-width (to prevent wrap of navbar toggle). - Remove condition for navbar breakpoint; now it's always 992px. - Migrate some `s-header` CSS to `[…].expanded` and `[…].compressed`. - Use `top` to position arrows isntead of `margin`. - Truncate nav links. - Style dropdowns. - Add nav link text span wrappers (to prevent truncation of menu arrows). --- .../src/_imports/elements/html-elements.css | 2 +- .../css/src/_imports/tools/media-queries.css | 16 +- .../_imports/trumps/s-header.compressed.css | 144 ++++++++++++++++ .../css/src/_imports/trumps/s-header.css | 154 +++++++++--------- .../src/_imports/trumps/s-header.expanded.css | 154 ++++++++++++++++++ .../static/site_cms/css/src/site.header.css | 2 + taccsite_cms/templates/cms_menu.html | 6 +- taccsite_cms/templates/header.html | 4 +- 8 files changed, 389 insertions(+), 93 deletions(-) create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.compressed.css create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.expanded.css diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css index 1703df123..4b8dc8a00 100755 --- a/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css @@ -30,7 +30,7 @@ body { body { /* To avoid negative whitespace at right on horz scroll on tiny screen */ - min-width: 290px; /* developer-decided value */ + min-width: 320px; /* developer-decided value */ font-family: var(--global-font-family); diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/media-queries.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/media-queries.css index 76f364a2a..09367030c 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/tools/media-queries.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/media-queries.css @@ -51,12 +51,10 @@ Styleguide Tools.CustomMediaQueries.Breakpoints /* Header Navbar State (Compressed/Expanded) */ -/* I.e. --medium-and-below */ -@custom-media --nav-compressed--sans-portal (width < 992px); -/* I.e. --medium-and-below */ -@custom-media --nav-expanded--sans-portal (width >= 992px); - -/* I.e. --wide-and-below */ -@custom-media --nav-compressed--with-portal (width < 1200px); -/* I.e. --wide-and-above */ -@custom-media --nav-expanded--with-portal (width >= 1200px); +/* Map `s-header.html`'s `navbar-expand-*` to `--*-and-below|above`: + - `...-xl` → `--wide-and-...` + - `...-lg` → `--medium-and-...` + - `...-md` → `--narrow-and-...` + - `...-sm` → `--x-narrow-and-...` */ +@custom-media --nav-compressed (width < 992px); +@custom-media --nav-expanded (width >= 992px); diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.compressed.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.compressed.css new file mode 100644 index 000000000..74c0839cd --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.compressed.css @@ -0,0 +1,144 @@ +/* +Header (Compressed Navigation) + +Styles for when navigation is compressed. + +Styleguide Trumps.Scopes.Header.Compressed +*/ + + + + + +/* COMPARABLE (to Expanded Styles) */ + +@media (--nav-compressed) { + + /* Nav */ + + + + /* Container */ + + .s-header .navbar-nav { + /* --nav-link-horz-pad: … *//* set within different media queries */ + --nav-line-color: env(--header-accent-color); + } + + + + /* Nav Links */ + + .s-header .nav-link { + height: auto; + + /* To overwrite Bootstrap */ + padding-top: 0.8em; + padding-bottom: 0.8em; + + font-size: 2em; + } + + /* NOTE: Design may want hover .s-header active background color with alpha */ + /* SEE: `./s-header.css` */ + + /* NOTE: Design may want hover/focus/active styles to differ per nav state */ + .s-header .nav-link:hover, + .s-header .nav-link:focus, + .s-header .nav-link:active, + .s-header .nav-item.active .nav-link, + .s-header .nav-item.dropdown.show .nav-link { + /* border-top: none *//* to mirror props on `s-header.compressed.css` */ + /* border-bottom: none *//* to mirror props on `s-header.compressed.css` */ + } + + + + + + /* Dropdowns */ + + + + /* Container */ + + .s-header .dropdown { + --menu-link-horz-pad: 26px; + --menu-line-color: transparent; + } + + + + /* Menu */ + + /* To overwrite Bootstrap */ + .s-header .dropdown-menu { + padding: 0; + + background-color: transparent; + border: none; + + font-size: 20px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ + } + + + + /* Item */ + + /* FAQ: Selector specificty trumps Bootstrap, so no need for `:hover` (etc.) */ + .s-header .dropdown-item { + /* To overwrite Bootstrap */ + padding-top: 1em; + padding-bottom: 1em; + } + + + /* Search */ + + /* GH-101: Retain search design until Wes works on it */ + .s-header .s-search-bar, + .s-header .s-search-bar::part(input), + .s-header .s-search-bar::part(button) { + font-size: 12px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ + } + + /* Create space between search bar and login (only if both elements exist) */ + .s-header .s-search-bar ~ .s-portal-nav { + margin-left: 2px; + } + + + + + + /* Icons */ + + .s-header .s-portal-nav .nav-link .nav-icon { + margin-right: 0.5em; + } + +} + + + + + +/* UNIQUE (to Compressed Styles) */ + +@media (--nav-compressed) { + .s-header .navbar-nav { + --nav-link-horz-pad: calc( + env(--portal-sidebar-padding) + env(--portal-navlink-padding) + ); + + margin-left: calc(-1 * var(--nav-link-horz-pad)); + } + + .s-header .s-cms-nav .dropdown-menu { + --menu-link-horz-pad: calc( + env(--portal-sidebar-padding) + env(--portal-navlink-padding) + ); + + margin-left: var(--menu-link-horz-pad); + } +} 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 6995f6526..3bc71c2a4 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 @@ -22,6 +22,7 @@ Styleguide Trumps.Scopes.Header */ @import url("_imports/tools/selectors.css"); @import url("_imports/tools/x-arrow.css"); +@import url("_imports/tools/x-truncate.css"); /* RFE: Make Portal & Docs markup match CMS (see "Portal & Docs Selectors") */ /* RFE: Load Bootstrap before CMS stylesheets (see "Portal & Docs Selectors") */ @@ -150,47 +151,59 @@ Styleguide Trumps.Scopes.Header +/* Nav */ + + + +/* Container */ + +.s-header .navbar-nav { + /* + --nav-link-horz-pad: … + --nav-line-color: … + */ +} + + + /* Nav Links */ /* RFE: Fix bug on the Internet so we can use these reliably */ /* SEE: https://github.com/postcss/postcss-custom-selectors/issues/40 */ /* -@custom-selector :--nav-link-hover .s-header .nav-link:hover; -@custom-selector :--nav-link-focus .s-header .nav-link:focus; -@custom-selector :--nav-link-active .s-header .nav-link:active; +@custom-selector :--nav-link-hover .nav-link:hover; +@custom-selector :--nav-link-focus .nav-link:focus; +@custom-selector :--nav-link-active .nav-link:active; @custom-selector :--nav-link-current - .s-header .nav-item.active .nav-link, - .s-header .nav-item.dropdown.show .nav-link; + .nav-item.active .nav-link, + .nav-item.dropdown.show .nav-link; */ .s-header .nav-link { - height: 100%; - + /* To support truncation */ + /* To vertically center text and icons (if any) */ display: flex; align-items: center; - /* FAQ: If link text uses 2 lines, header grows taller, but it must not */ - white-space: nowrap; } + +/* To truncate link text */ +/* SEE: https://css-tricks.com/flexbox-truncated-text/ */ +.s-header .s-cms-nav, +.s-header .nav-item { min-width: 0; } +.s-header .nav-text { @extend .x-truncate--one-line; } + +/* NOTE: Design may want hover & active background color with alpha */ .s-header .nav-link:hover, .s-header .nav-link:active, .s-header .nav-item.active .nav-link, .s-header .nav-item.dropdown.show .nav-link { background-color: env(--header-link-bkgd-color); } -.s-header .nav-link:hover, -.s-header .nav-link:focus, -.s-header .nav-link:active, -.s-header .nav-item.active .nav-link, -.s-header .nav-item.dropdown.show .nav-link { - border-top: env(--border-width--xx-thick) solid transparent; - border-bottom: env(--border-width--xx-thick) solid env(--header-accent-color); -} -/* To overwrite Bootstrap */ -.s-header .nav-link { - padding-top: unset; - padding-bottom: unset; -} +/* NOTE: Design may want hover/focus/active styles the same for any nav state */ +/* SEE: `./s-header.compressed.css` */ +/* SEE: `./s-header.expanded.css` */ + /* FAQ: Comment out `.navbar-dark` to obviate "Portal & Docs Selectors" here */ /* FAQ: On CMS, the `.navbar-dark` is a descendant of `.s-header` */ .s-header/* .navbar-dark */ .nav-link, @@ -199,44 +212,25 @@ Styleguide Trumps.Scopes.Header color: env(--header-text-color) !important; } - - -/* Responsive Design */ - /* FAQ: The overspecific `.navbar-nav` selector allows overwrite of Bootstrap */ .s-header .navbar-nav .nav-link, /* To overwrite Bootstrap (see "Portal & Docs Selectors") */ :--for-portal .s-header .navbar-nav .nav-link { - padding-right: var(--space-between-horz, 0); - padding-left: var(--space-between-horz, 0); + padding-right: var(--nav-link-horz-pad, 0); + padding-left: var(--nav-link-horz-pad, 0); } -/* To reduce space between nav links when space is limited */ -/* " (sans Portal) */ -@media (--nav-expanded--sans-portal) { - /* To have 15px of space for 12px font */ - .s-header:not(.is-on-portal) .nav-link { --space-between-horz: 1.25em; } -} -@media (--nav-compressed--sans-portal) { - /* To have "narrower" space (designed by dev) */ - .s-header:not(.is-on-portal) .nav-link { --space-between-horz: 0.5em; } -} -/* " (with Portal) */ -@media (--nav-expanded--with-portal) { - /* To have 15px of space for 12px font */ - .s-header.is-on-portal .nav-link, - /* To apply style to old markup (see "Portal & Docs Selectors") */ - /* TODO: Hardcode `is-on-portal` in Portal & Docs markup */ - :--for-docs .s-header .nav-link, - :--for-portal .s-header .nav-link { --space-between-horz: 1.25em; } -} -@media (--nav-compressed--with-portal) { - /* To have "narrower" space (designed by dev) */ - .s-header.is-on-portal .nav-link, - /* To apply style to old markup (see "Portal & Docs Selectors") */ - /* TODO: Hardcode `is-on-portal` in Portal & Docs markup */ - :--for-docs .s-header .nav-link, - :--for-portal .s-header .nav-link { --space-between-horz: 0.5em; } +/* To create line between each item */ +.s-header .nav-item + .nav-item .nav-link { + /* To ensure any background color does not cover box-shadow */ + position: relative; + + box-shadow: + /* x pos. */ calc(var(--nav-link-horz-pad) / 2) + /* y pos. */ calc(-1 * (2px + calc(var(--nav-link-horz-pad) / 2))) + /* blur */ 0 + /* spread */ calc(-1 * calc(var(--nav-link-horz-pad) / 2)) + /* color */ var(--nav-line-color, transparent); } @@ -247,23 +241,36 @@ Styleguide Trumps.Scopes.Header +/* Container */ + +.s-header .dropdown { + /* + --menu-link-horz-pad: … + --menu-line-color: … + */ +} + + + /* Toggle */ .s-header .dropdown-toggle::after { @extend %x-arrow; - --size: 4px; - --line: 1px; + --size: 0.5em; + --line: 0.1em; /* to get 1px at 12px text and 2px at 24px text */ --color: env(--header-text-color); - margin-left: 8px; + + margin-left: 0.6em; + position: relative; /* to allow use of `top` (to vertically align) */ } .s-header .dropdown-toggle[aria-expanded="true"]::after { @extend %x-arrow--up; - margin-top: 0.6em; + top: 0.35em; /* to vertically align with text */ } .s-header .dropdown-toggle[aria-expanded="false"]::after { @extend %x-arrow--down; - margin-top: -0.4em; + top: -0.35em; /* to vertically align with text */ } @@ -271,11 +278,8 @@ Styleguide Trumps.Scopes.Header /* Menu */ .s-header .dropdown-menu { - padding: 7px 0 0; margin: unset; /* undo Bootstrap */ - background-color: env(--header-link-bkgd-color); - border: env(--border-width--normal) solid env(--header-accent-color); border-radius: unset; /* undo Bootstrap */ } @@ -285,19 +289,20 @@ Styleguide Trumps.Scopes.Header /* FAQ: Selector specificty trumps Bootstrap, so no need for `:hover` (etc.) */ .s-header .dropdown-item { - --horz-pad: 11px; - padding: 5px var(--horz-pad) 6px; + padding-left: var(--menu-link-horz-pad); + padding-right: var(--menu-link-horz-pad); border-left: env(--border-width--x-thick) solid transparent; - font-size: 12px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ font-weight: env(--medium); } -/* To create line between each item */ .s-header .dropdown-item + .dropdown-item { box-shadow: - 0px calc(-1 * (1px + var(--horz-pad))) 0px calc(-1 * var(--horz-pad)) - env(--header-bkgd-color); + /* x pos. */ 0 + /* y pos. */ calc(-1 * (1px + var(--menu-link-horz-pad))) + /* blur */ 0 + /* spread */ calc(-1 * var(--menu-link-horz-pad)) + /* color */ var(--menu-line-color, transparent); } .s-header .dropdown-item.active, @@ -319,9 +324,6 @@ Styleguide Trumps.Scopes.Header } - - - /* Search */ /* GH-101: Retain search design until Wes works on it */ @@ -342,19 +344,13 @@ Styleguide Trumps.Scopes.Header /* Icons */ -.s-header .nav-icon { - margin-right: 1em; -} -.s-header .nav-link .nav-icon { - margin-right: 0.5em; -} .s-header .dropdown-item .nav-icon { margin-right: 0.5em; } + /* To overwrite Font Awesome & style via Font Awesome */ /* FP-636: Remove all `.fa` (Font Awesome) icons */ -/* FAQ: The `.nav-link` ensures dropdown icons are unaffected */ -.s-header .nav-link .nav-icon[class*="fa"] { +.s-portal-nav .nav-link .nav-icon[class*="fa"] { font-size: 26px; line-height: unset; vertical-align: unset; diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.expanded.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.expanded.css new file mode 100644 index 000000000..d321c828f --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.expanded.css @@ -0,0 +1,154 @@ +/* +Header (Expanded Navigation) + +Styles for when navigation is expanded. + +Styleguide Trumps.Scopes.Header.Expanded +*/ + + + + + +/* COMPARABLE (to Compressed Styles) */ + +@media (--nav-expanded) { + + /* Nav */ + + + + /* Container */ + + .s-header .navbar-nav { + /* --nav-link-horz-pad: … *//* set within different media queries */ + --nav-line-color: transparent; + } + + + + /* Nav Links */ + + .s-header .nav-link { + height: 100%; + + /* To overwrite Bootstrap */ + padding-top: unset; + padding-bottom: unset; + + /* font-size: 1em; *//* to mirror props on `s-header.compressed.css` */ + } + + /* NOTE: Design may want hover .s-header active background color with alpha */ + /* SEE: `./s-header.css` */ + + /* NOTE: Design may want hover/focus/active styles to differ per nav state */ + .s-header .nav-link:hover, + .s-header .nav-link:focus, + .s-header .nav-link:active, + .s-header .nav-item.active .nav-link, + .s-header .nav-item.dropdown.show .nav-link { + border-top: env(--border-width--xx-thick) solid transparent; + border-bottom: env(--border-width--xx-thick) solid env(--header-accent-color); + } + + + + + + /* Dropdowns */ + + + + /* Container */ + + .s-header .dropdown { + --menu-link-horz-pad: 11px; + --menu-line-color: env(--header-bkgd-color); + } + + + + /* Menu */ + + /* To overwrite Bootstrap */ + .s-header .dropdown-menu { + padding: 7px 0 0; + + background-color: env(--header-link-bkgd-color); + border: env(--border-width--normal) solid env(--header-accent-color); + + font-size: 12px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ + } + + + + /* Item */ + + /* FAQ: Selector specificty trumps Bootstrap, so no need for `:hover` (etc.) */ + .s-header .dropdown-item { + /* To overwrite Bootstrap */ + padding-top: 0.5em; + padding-bottom: 0.5em; + } + + + /* Search */ + + /* GH-101: Retain search design until Wes works on it */ + .s-header .s-search-bar, + .s-header .s-search-bar::part(input), + .s-header .s-search-bar::part(button) { + font-size: 12px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ + } + + /* Create space between search bar and login (only if both elements exist) */ + .s-header .s-search-bar ~ .s-portal-nav { + margin-left: 12px; + } + + + + + + /* Icons */ + + .s-header .s-portal-nav .nav-link .nav-icon { + margin-right: 0.5em; + } + +} + + + + + +/* UNIQUE (to Expanded Styles) */ + +/* To reduce space between nav links when space is limited */ +@media (--wide-and-below) and (--nav-expanded) { + /* To have "narrower" space (designed by dev) */ + .s-header:not(.is-on-portal) .navbar-nav { --nav-link-horz-pad: 1em; } +} +@media (--x-wide-and-below) and (--nav-expanded) { + /* To have "narrower" space (designed by dev) */ + .s-header.is-on-portal .navbar-nav, + /* To apply style to old markup (see "Portal & Docs Selectors") */ + /* TODO: Hardcode `is-on-portal` in Portal & Docs markup */ + :--for-docs .s-header .navbar-nav, + :--for-portal .s-header .navbar-nav { --nav-link-horz-pad: 1em; } +} + +/* To increase space between nav links when space is available */ +@media (--wide-and-above) and (--nav-expanded) { + /* To have 15px of space for 12px font */ + .s-header:not(.is-on-portal) .navbar-nav { --nav-link-horz-pad: 1.25em; } +} +@media (--x-wide-and-above) and (--nav-expanded) { + /* To have 15px of space for 12px font */ + .s-header.is-on-portal .navbar-nav, + /* To apply style to old markup (see "Portal & Docs Selectors") */ + /* TODO: Hardcode `is-on-portal` in Portal & Docs markup */ + :--for-docs .s-header .navbar-nav, + :--for-portal .s-header .navbar-nav { --nav-link-horz-pad: 1.25em; } +} 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 cda4e7132..2e87336d7 100644 --- a/taccsite_cms/static/site_cms/css/src/site.header.css +++ b/taccsite_cms/static/site_cms/css/src/site.header.css @@ -37,6 +37,8 @@ */ /* Unique to CMS */ @import url("_imports/trumps/s-header.css"); +@import url("_imports/trumps/s-header.compressed.css"); +@import url("_imports/trumps/s-header.expanded.css"); @import url("_imports/trumps/s-portal-nav.css"); @import url("_imports/trumps/s-cms-nav.css"); /* Specific to Subsites */ diff --git a/taccsite_cms/templates/cms_menu.html b/taccsite_cms/templates/cms_menu.html index ab751cf73..cce9d663f 100644 --- a/taccsite_cms/templates/cms_menu.html +++ b/taccsite_cms/templates/cms_menu.html @@ -14,7 +14,7 @@ aria-haspopup="true" aria-expanded="false" > - {{ child.get_menu_title|safe }} + {{ child.get_menu_title|safe }} {% if child.selected %}(current){% endif %} Toggle Dropdown @@ -29,7 +29,7 @@ href="{{ grandchild.attr.redirect_url|default:grandchild.get_absolute_url }}" role="menuitem" > - {{ grandchild.get_menu_title|safe }} + {{ grandchild.get_menu_title|safe }} {% if grandchild.selected %}(current){% endif %} {% endfor %} @@ -39,7 +39,7 @@ class="nav-link" href="{{ child.attr.redirect_url|default:child.get_absolute_url }}" > - {{ child.get_menu_title|safe }} + {{ child.get_menu_title|safe }} {% if child.selected %}(current){% endif %} {% endif %} diff --git a/taccsite_cms/templates/header.html b/taccsite_cms/templates/header.html index abbb253af..99cb6e184 100644 --- a/taccsite_cms/templates/header.html +++ b/taccsite_cms/templates/header.html @@ -6,7 +6,9 @@ {% include "header_branding.html" %} -