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 index 61017f0d6..3024fdef0 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css @@ -11,21 +11,27 @@ /* Branding Selectors */ .branding-header { - margin: 0; - padding: 6.4px 0 6.4px; /* NO-R/EM: 0.4rem 0 0.4rem */ - text-align: center; + --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: rgb(51, 51, 51); color: #fff; border-bottom: 1px solid #aaa; } -.branding-header a { - display: inline-block; -} - .branding-seperator { width: 1px; height: 100%; + max-height: var(--branding-logo-height); border-left: solid 1px #fff; margin: 0 15px; vertical-align: middle; @@ -45,13 +51,11 @@ } .branding-tacc { - height: 24px; - margin: 3px 0 0 0; + height: var(--branding-logo-height); } .branding-utaustin { - height: 24px; - margin: 3px 0 0 0; + height: var(--branding-logo-height); } /* Logo Selectors */ 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 16032028c..590cd03c6 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 @@ -41,7 +41,7 @@ Styleguide Trumps.Scopes.Header /* Affiliation */ -/* (none) */ +/* SEE: taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css */ @@ -62,6 +62,14 @@ Styleguide Trumps.Scopes.Header /* Navigation */ +/* On wide viewport, prevent header resize from dynamic content */ +/* CAVEAT: This is only for Portal and Docs which dynamically load content */ +@media only screen and (min-width: 1201px) { + .s-header.navbar { + height: 50px; + } +} + .s-header.navbar { /* Make horizontal padding match the horizontal content buffer in Portal */ /* FAQ: The `calc()` keeps track of disparate source of space values */ diff --git a/taccsite_cms/static/site_cms/js/modules/importHTML.js b/taccsite_cms/static/site_cms/js/modules/importHTML.js index 3984f6755..ca1aae4bc 100644 --- a/taccsite_cms/static/site_cms/js/modules/importHTML.js +++ b/taccsite_cms/static/site_cms/js/modules/importHTML.js @@ -1,3 +1,28 @@ +/** + * Create element from HTML string + * @param {String} - HTML representing a single element + * @return {Element} + * @see https://stackoverflow.com/a/35385518 + */ +export function htmlToElement(html) { + var template = document.createElement('template'); + html = html.trim(); // Never return a text node of whitespace as the result + template.innerHTML = html; + return template.content.firstChild; +} + +/** + * Create elements from HTML string + * @param {String} - HTML representing any number of sibling elements + * @return {NodeList} + * @see https://stackoverflow.com/a/35385518 + */ +export function htmlToElements(html) { + var template = document.createElement('template'); + template.innerHTML = html; + return template.content.childNodes; +} + /** * Return markup from an endpoint * @param {string} markupURL - The URL from which to get the markup @@ -17,7 +42,7 @@ export function getFromURL(markupURL) { } /** - * Insert markup from an endpoint into a specific element + * Insert markup into a specific element from an endpoint * @param {string} markupURL - The URL from which to get the markup * @param {HTMLElement} container - The element into which to place the markup * @returns {Promise} Promise that returns the container @@ -29,6 +54,24 @@ export function insertFromURL(markupURL, container) { return container; }); } else { - return Promise.reject(new Error('Invalid `container` provided')); + return Promise.reject(new Error('No `markupURL` provided')); + } +} + +/** + * Replace a specific element with markup from an endpoint + * @param {string} markupURL - The URL from which to get the markup + * @param {HTMLElement} placeholder - The element to replace with the markup + * @returns {Promise} Promise that returns the new element + */ +export function replaceFromURL(markupURL, placeholder) { + if (markupURL) { + return getFromURL(markupURL).then(markup => { + const newElement = htmlToElement(markup); + placeholder.replaceWith(newElement); + return placeholder; + }); + } else { + return Promise.reject(new Error('No `markupURL` provided')); } } diff --git a/taccsite_cms/templates/base.html b/taccsite_cms/templates/base.html index 93c3623fa..0bf5a26b0 100755 --- a/taccsite_cms/templates/base.html +++ b/taccsite_cms/templates/base.html @@ -58,7 +58,7 @@
- {% include "branding.html" %} + {% include "header.html" %}
diff --git a/taccsite_cms/templates/branding.html b/taccsite_cms/templates/branding.html deleted file mode 100644 index f9e643cf1..000000000 --- a/taccsite_cms/templates/branding.html +++ /dev/null @@ -1,63 +0,0 @@ -{% load i18n cache static custom_portal_settings %} - -{# WARNING: Some markup is duplicated in other repositories #} -{# SEE: https://confluence.tacc.utexas.edu/x/LoCnCQ #} - -{% with settings.BRANDING as branding %} - -
- {# DEBUG: #}{# {{ branding|first }} #} - {% for brand in branding %} - {% 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 %} - {% if visibility == "True" %} - {% if brand == branding|first %} - - - - {% elif brand != branding|first %} - {# RFE: Use CSS to remove the need for `.branding-seperator` and `if` logic #} - - - - - {% endif %} - {% endif %} - {% endwith %} - {% endfor %} -
-{% endwith %} - -{% with settings.LOGO as logo %} - - -{% endwith %} diff --git a/taccsite_cms/templates/header.html b/taccsite_cms/templates/header.html new file mode 100644 index 000000000..d02a41c53 --- /dev/null +++ b/taccsite_cms/templates/header.html @@ -0,0 +1,33 @@ +{# WARNING: Some markup is duplicated in other repositories #} +{# SEE: https://confluence.tacc.utexas.edu/x/LoCnCQ #} +{# FAQ: Extra lines exist to ease CMS/Portal/Guide template comparison #} + + +{% include "header_branding.html" %} + + + diff --git a/taccsite_cms/templates/header_branding.html b/taccsite_cms/templates/header_branding.html new file mode 100644 index 000000000..7ec95cf2b --- /dev/null +++ b/taccsite_cms/templates/header_branding.html @@ -0,0 +1,25 @@ +{# @var brands, className #} +{% 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 %} + {% if visibility == "True" %} + {% if brand == brands|first %} + + + + {% elif brand != brands|first %} + {# RFE: Use CSS to remove the need for `.branding-seperator` and `if` logic #} + + + + + {% endif %} + {% endif %} + {% endwith %} + {% endfor %} +
+{% endwith %} diff --git a/taccsite_cms/templates/header_logo.html b/taccsite_cms/templates/header_logo.html new file mode 100644 index 000000000..a3a00c5f9 --- /dev/null +++ b/taccsite_cms/templates/header_logo.html @@ -0,0 +1,12 @@ +{# @var logo, className #} +{% load staticfiles custom_portal_settings %} + +{% 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 %} +{% endwith %} diff --git a/taccsite_cms/urls.py b/taccsite_cms/urls.py index 054d0c541..c406a3aac 100755 --- a/taccsite_cms/urls.py +++ b/taccsite_cms/urls.py @@ -25,6 +25,8 @@ # FAQ: Allow direct access to markup for Portal and User Guide to render url(r'^cms/nav/search/markup/$', TemplateView.as_view(template_name='nav_search.raw.html'), name='search_bar_markup'), url(r'^cms/nav/pages/markup/$', TemplateView.as_view(template_name='nav_cms.raw.html'), name='menu_pages_markup'), + url(r'^cms/header/branding/markup/$', TemplateView.as_view(template_name='header_branding.html'), name='header_branding_markup'), + url(r'^cms/header/logo/markup/$', TemplateView.as_view(template_name='header_logo.html'), name='header_logo_markup'), ] if settings.FEATURES['blog']: