Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GH-101/FP-1458: Header Redesign #222

Draft
wants to merge 142 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
142 commits
Select commit Hold shift + click to select a range
3e4a501
GH-101: Branding Bar
wesleyboar May 11, 2021
03a9482
Merge pull request #221 from TACC/task/GH-101-header-redesign--env-va…
wesleyboar May 12, 2021
4533c5f
Merge branch 'task/GH-101-header-redesign' into task/GH-101-header-re…
wesleyboar May 13, 2021
80ed3c0
Merge pull request #220 from TACC/task/GH-101-header-redesign--brandi…
wesleyboar May 13, 2021
b2cec49
GH-101: Navigation Bar (Partially Complete)
wesleyboar May 13, 2021
a9ec66a
GH-101: Navigation Bar (Fix CMS Nav Bug in Docs)
wesleyboar May 14, 2021
23e3db2
GH-101: Navigation Bar (Fix Color Bug/s in Docs)
wesleyboar May 14, 2021
c988a7b
GH-101: Navigation Bar (Fix More Bugs in Docs)
wesleyboar May 14, 2021
290e27b
GH-101: Navigation Bar (Fix Img Max-Width in Docs)
wesleyboar May 14, 2021
d3361d7
GH-101: Navigation Bar (Fix & Doc Height Bugs)
wesleyboar May 14, 2021
ccfc596
GH-101: Navigation Bar (Set Dropdown Font Size)
wesleyboar May 14, 2021
ea43ec9
GH-101: Navigation Bar (Use Constants for Header)
wesleyboar May 14, 2021
538369a
GH-101: Navigation Bar (Logo Width, CMS Nav Align)
wesleyboar May 17, 2021
f257c63
GH-101: Navigation Bar (Remove Redundant Style)
wesleyboar May 17, 2021
29ebba2
Merge pull request #224 from TACC/task/GH-101-header-redesign--env-va…
wesleyboar May 17, 2021
4692aaf
GH-101: Navigation Bar (Dropdowns & Constants)
wesleyboar May 17, 2021
d6c59ca
GH-191: Add prewatch (same task as prebuild).
wesleyboar May 17, 2021
4865c2d
GH-101: Navigation Bar (Fix Branding Bar Bug)
wesleyboar May 17, 2021
2ab97e8
GH-101: Navigation Bar (Avoid Dropdown Bug)
wesleyboar May 17, 2021
80fb36c
GH-101: Navigation Bar (Fix `.s-header` Usage)
wesleyboar May 17, 2021
bde4dc5
GH-101: Navigation Bar (Fix Portal Menu Item Hue)
wesleyboar May 17, 2021
7c8846c
GH-101: Navigation Bar (Use Fallbacks for Vars)
wesleyboar May 17, 2021
5f83e6a
GH-101: Navigation Bar (Consistent Line-Height)
wesleyboar May 18, 2021
315ac1d
GH-101: Navigation Bar (Responsive Nav Item Width)
wesleyboar May 18, 2021
8936201
Merge branch 'task/GH-101-header-redesign' into task/GH-101-header-re…
wesleyboar May 18, 2021
9012318
Merge pull request #225 from TACC/task/GH-101-header-redesign--naviga…
wesleyboar May 18, 2021
42fdfe4
GH-101: taccsite_custom: Frontera: Navigation Bar
wesleyboar May 18, 2021
96c8a84
Quick: GH-101: Fix font env vars
wesleyboar May 19, 2021
45c0661
GH-101: taccsite_custom: Mostly Revert its 64a5d03
wesleyboar May 19, 2021
fcf2e82
GH-101: Portal Nav
wesleyboar May 20, 2021
8ec39d0
Merge pull request #226 from TACC/task/GH-101-header-redesign--portal…
wesleyboar May 20, 2021
4bf0bc1
Quick: GH-101: Fix border color. Drop unused var.
wesleyboar May 20, 2021
ee94ed4
Quick: GH-101: Add "nav state" media queries vars
wesleyboar May 20, 2021
28515e6
GH-101: Header (Use .c-logo for Brand Bar Images)
wesleyboar May 21, 2021
c6bff3c
GH-101: Navigation Bar (Responsive Design)
wesleyboar May 21, 2021
c42d666
Merge pull request #227 from TACC/task/GH-101-header-redesign--mobile…
wesleyboar May 21, 2021
b8691d6
GH-101: Navigation Bar (Mobile Menus & Toggle)
wesleyboar May 24, 2021
a4558b6
Merge pull request #228 from TACC/task/GH-101-header-redesign--mobile…
wesleyboar May 24, 2021
4a918cd
Quick: GH-101: Fix mobile navbar toggle visibility
wesleyboar May 24, 2021
71d1abe
Hack: GH-101: Mobile navbar to act like dropdown
wesleyboar May 24, 2021
82eb57c
Quick: GH-101: Comments on mobile nav padding vars
wesleyboar May 24, 2021
bd4686f
Hack: GH-101: Use Cortal icons sans markup change
wesleyboar May 24, 2021
2c60868
Merge pull request #229 from TACC/task/GH-101-header-redesign--portal…
wesleyboar May 24, 2021
d07d69b
GH-101: Mobile (Search & Portal): Drop `ml-auto`
wesleyboar May 26, 2021
96e9490
GH-101: Quick: Use custom selector for consistency
wesleyboar May 26, 2021
997a31c
GH-101: Quick: Fix navbar toggle color
wesleyboar May 26, 2021
e8593f7
GH-101: Mobile (Search & Portal): New Layout
wesleyboar May 27, 2021
ecf3253
GH-101: Quick: Fix dropdown toggle size
wesleyboar May 27, 2021
397b43c
GH-101: Quick: Swap "Log Out" & "My Account" icons
wesleyboar May 27, 2021
722c5ee
GH-101: Quick: Icon Text for Portal/Docs Markup
wesleyboar May 27, 2021
0c4574d
Merge pull request #232 from TACC/task/GH-101-header-redesign--mobile…
wesleyboar May 27, 2021
15c8f63
GH-101: Quick: Fix CMS Sel., Align Portal Nav Menu
wesleyboar May 27, 2021
f7c6fe6
GH-101: Quick: Ensure Footer is Behind Mobile Menu
wesleyboar May 27, 2021
0a40b90
Quick: Latest taccsite_custom code (frontera home)
wesleyboar May 28, 2021
93ffdf2
GH-101: Hotfix: Padding Right for Portal Nav Link
wesleyboar May 28, 2021
c59dde5
GH-101: Hotfix: Prevent Portal Nav Link Underline
wesleyboar May 28, 2021
d8825fe
Merge branch 'main' into task/GH-101-header-redesign
wesleyboar May 28, 2021
aff4cb9
GH-101: Hotfix: Accurate Portal Nav Icons & Sizes
wesleyboar May 28, 2021
ac358b2
GH-101: Quick: Isolate Navbar Shrink & Truncate
wesleyboar May 28, 2021
812a9cc
GH-101: Hotfix: Title case all nav link text
wesleyboar May 28, 2021
e700b0a
Revert "GH-101: Hotfix: Title case all nav link text"
wesleyboar May 28, 2021
313f9ac
GH-101: Hotfix: Title case on "Log in" link text
wesleyboar May 28, 2021
a17df6b
GH-101: Quick: Fix unrealized specificity bug
wesleyboar May 28, 2021
2dab985
GH-101: Portal Nav Transition / Animation Load
wesleyboar May 28, 2021
75106d3
GH-101: Portal Nav Transition / Animation Comments
wesleyboar May 28, 2021
ffb69c9
GH-101: Portal Nav Transition / Animation Migrate
wesleyboar May 28, 2021
6776560
Merge pull request #237 from TACC/task/GH-101-header-redesign--portal…
wesleyboar May 28, 2021
766a244
GH-101: Portal Nav Transition / Animation Fixes
wesleyboar May 28, 2021
670ca74
Merge pull request #238 from TACC/task/GH-101-header-redesign--portal…
wesleyboar May 28, 2021
e38594d
Hotfix: GH-101: Portal Nav Visible Sans #101 Code
wesleyboar Jun 2, 2021
1cb3cca
GH-101: Portal Nav Mobile - Link Style
wesleyboar Jun 2, 2021
9b39ed8
Quick: Fix inaccurate CSS test case
wesleyboar Jun 2, 2021
ebeebe5
GH-101: Portal Nav Mobile - Use Mixin
wesleyboar Jun 2, 2021
82bcdbf
Merge pull request #239 from TACC/task/GH-101-header-redesign--portal…
wesleyboar Jun 2, 2021
b266a00
Quick: GH-101: More accurate comment
wesleyboar Jun 2, 2021
c123c86
GH-101: Portal Nav Mobile - Layout (Flex to Grid)
wesleyboar Jun 2, 2021
25412c2
Hotfix: GH-101: Portal Nav Mobile (Grid Button)
wesleyboar Jun 2, 2021
1ba0152
GH-101: Portal Nav Mobile - Layout (Menu Pushdown)
wesleyboar Jun 2, 2021
4e9fc7e
Merge pull request #241 from TACC/task/GH-101-header-redesign--portal…
wesleyboar Jun 3, 2021
99961d4
GH-101: Cleanup
wesleyboar Jun 3, 2021
ec99140
Merge pull request #242 from TACC/task/GH-101-header-redesign--cleanup
wesleyboar Jun 3, 2021
faab92b
GH-101: Search (Initial Commit)
wesleyboar Jun 3, 2021
4b0fbe8
GH-101: Search (Frontera Cleanup)
wesleyboar Jun 4, 2021
ab6d670
Merge pull request #244 from TACC/task/GH-101-header-redesign--search…
wesleyboar Jun 4, 2021
0f161f9
Merge branch 'main' into task/GH-101-header-redesign
wesleyboar Jun 4, 2021
80d4bd4
Quick: GH-101: New Test: Custom Selector Constant
wesleyboar Jun 4, 2021
8eb65c4
Hotfix: GH-101: Match Portal+Docs Nav Breakpoint
wesleyboar Jun 4, 2021
135ae8d
Merge pull request #247 from TACC/hotfix/GH-101-header-redesign--medi…
wesleyboar Jun 4, 2021
3a28cb1
GH-101: Docs Side Nav to not cover Head Mobile Nav
wesleyboar Jun 4, 2021
a35f0f7
GH-101: Must Not Apply CMS-Only CSS to Portal+Docs
wesleyboar Jun 4, 2021
48cfe06
GH-101: Fix Portal Nav Width Issues
wesleyboar Jun 4, 2021
12a5b33
GH-101: Fix Nav & Dropdown Spacing
wesleyboar Jun 4, 2021
a428009
GH-101: Fix Nav Item Color When Dropdown is Shown
wesleyboar Jun 4, 2021
e2dac14
GH-101: Add Top Space for Mobile Navbar & CMS Nav
wesleyboar Jun 4, 2021
0e088fd
GH-101: Fix Left & Right Spacing for Navbar
wesleyboar Jun 4, 2021
2c23cfb
GH-101: Improve Portal Nav Dropdown Icon Position
wesleyboar Jun 4, 2021
dc4f7db
GH-101: Add Fallback for `backdrop-filter`
wesleyboar Jun 4, 2021
758e2ff
GH-101: Fix login link. Polish username link.
wesleyboar Jun 4, 2021
6d24071
Merge pull request #248 from TACC/bugfix/GH-101-header-redesign--misc
wesleyboar Jun 4, 2021
a438758
Merge branch 'main' into task/GH-101-header-redesign
wesleyboar Jun 10, 2021
4ad61eb
Quick: FP-526 (complete) → FP-636 (someday)
wesleyboar Jun 10, 2021
4eae6a6
GH-101: Remove pre-FP-526 Portal Nav icon styles
wesleyboar Jun 11, 2021
e9afa98
Merge branch 'task/GH-191-support-light-navbar-for-dark-logos' into t…
wesleyboar Jun 11, 2021
dddd850
GH-101: Add post-FP-526 Portal Nav icon styles
wesleyboar Jun 11, 2021
a57f89a
GH-101: Prevent wrap "Log In" as Portal Nav slides
wesleyboar Jun 11, 2021
a3afef9
GH-101: Narrow Portal Nav as Dropdown not Pushdown
wesleyboar Jun 11, 2021
7d494c7
GH-101: Portal Nav Layout Only Expanded or Compressed
wesleyboar Jun 11, 2021
c570489
GH-101: Portal Nav Align with Screen not Parent
wesleyboar Jun 11, 2021
043742f
GH-101: Portal Nav Width Always Matches Parent
wesleyboar Jun 11, 2021
5bcf328
GH-101: Fix CMS Dropdown Font-Size Too Small
wesleyboar Jun 11, 2021
da27bb1
GH-101: Equal Size Icons. Fix Dropdown Item Height
wesleyboar Jun 11, 2021
7dce3fa
GH-101: Fix Docs Image Overwrites
wesleyboar Jun 11, 2021
f3aab4c
GH-101: Fix Docs Icon Font Styling
wesleyboar Jun 11, 2021
59a97d3
GH-101: Portal & Docs Narrow Screen Header Fixes
wesleyboar Jun 11, 2021
2f085fe
GH-101: Fix Unfocusable Search
wesleyboar Jun 11, 2021
4ac83fe
GH-101: Add Space to Right of Standalone CMS Nav
wesleyboar Jun 11, 2021
ee3922e
GH-101: Do not install plugin already within other
wesleyboar Jun 14, 2021
fff0a3d
GH-101: Use `:not` selector w/ multiple selectors
wesleyboar Jun 14, 2021
54635b6
GH-101: Delete file unsued since faab92b
wesleyboar Jun 14, 2021
9c38ceb
GH-101: Use x-hide's for u-hide's. Rename one.
wesleyboar Jun 14, 2021
3b4435f
GH-101: Prevent wrap of portal nav toggle
wesleyboar Jun 15, 2021
97c062a
GH-101: Rename --navbar-button to --navbar-toggle
wesleyboar Jun 15, 2021
8b59765
GH-101: Prevent css nano from removing units
wesleyboar Jun 15, 2021
86da15a
GH-101: Add note about when some Docs code can die
wesleyboar Jun 15, 2021
9b72c53
Merge branch 'main' into task/GH-101-header-redesign
wesleyboar Jun 17, 2021
8bff932
GH-101: Update submodule to merge of main
wesleyboar Jun 17, 2021
3a6d891
Merge branch 'main' into task/GH-101-header-redesign
wesleyboar Jun 19, 2021
e08b64f
Merge branch 'main' into task/GH-101-header-redesign
wesleyboar Jul 13, 2021
f335655
Quick: Update taccsite_custom to latest
wesleyboar Jul 30, 2021
b669659
Merge branch 'main' into task/GH-101-header-redesign
wesleyboar Aug 16, 2021
e69b89b
Merge branch 'task/GH-191-support-light-navbar-for-dark-logos' into t…
wesleyboar Aug 17, 2021
29dbee6
GH-101: Noop: Update comment to be consistent
wesleyboar Aug 17, 2021
deec8d9
Merge branch 'main' into task/GH-101-header-redesign
wesleyboar Aug 17, 2021
e165cc2
Merge branch 'main' into task/GH-101-header-redesign
wesleyboar Aug 20, 2021
c31b7e6
Merge branch 'task/GH-191-support-light-navbar-for-dark-logos' into t…
wesleyboar Aug 23, 2021
a0fa1e3
Quick: Update submod to last commit on its branch
wesleyboar Sep 2, 2021
fe9de08
GH-101: Build settings.json before CSS
wesleyboar Sep 2, 2021
6401683
Merge branch 'main' into task/GH-101-header-redesign
wesleyboar Sep 2, 2021
2e4c19f
Merge branch 'task/GH-191-support-light-navbar-for-dark-logos' into t…
wesleyboar Sep 21, 2021
b786c3c
Merge branch 'main' into task/GH-101-header-redesign
wesleyboar Sep 23, 2021
73e6190
Merge branch 'main' into task/GH-101-header-redesign
wesleyboar Sep 27, 2021
9d5c68a
Merge branch 'main' into task/GH-101-header-redesign
wesleyboar Nov 4, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions conf/css/.postcssrc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@ plugins:
features:
custom-media-queries: true
media-query-ranges: true
not-pseudo-class: true
nesting-rules: true
# RFE: Fix bug on the Internet so we can use these reliably
# SEE: https://github.com/postcss/postcss-custom-selectors/issues/40
custom-selectors: true
cssnano:
preset:
- 'default'
Expand All @@ -27,3 +32,7 @@ plugins:
exclude: true
mergeRules:
exclude: true
# This breaks values like `clamp(0px, 15%, 48px)` by stripping 0's unit
# SEE: https://github.com/cssnano/cssnano/issues/286
convertValues:
exclude: true
8 changes: 0 additions & 8 deletions conf/css/freeze_variables/.postcssrc.yml

This file was deleted.

13 changes: 13 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"async": "^3.2.0",
"cssnano": "^4.1.10",
"dotenv": "^8.2.0",
"merge-lite": "^1.0.2",
"npm-watch": "^0.7.0",
"postcss-cli": "^7.1.2",
"postcss-css-variables": "^0.17.0",
Expand Down
28 changes: 6 additions & 22 deletions postcss.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,20 +35,12 @@ function parallelCallback(err, results) {
// SEE: https://www.npmjs.com/package/postcss#js-api
/**
* Build styles for the Core CMS
* @param {boolean} [shouldFreezeVariables=false] - Whether to freeze values of custom properties
*/
function buildStylesCore({shouldFreezeVariables = false} = {}) {
function buildStylesCore() {
let command;
let sourceDir;
let configDir;

if (shouldFreezeVariables === true) {
sourceDir = 'freeze_variables/';
configDir = 'conf/css/freeze_variables/';
} else {
sourceDir = '';
configDir = standardConfigDir;
}
const sourceDir = '';
const configDir = standardConfigDir;

// Quote globbed paths to prevent OS from parsing them
// SEE: https://github.com/postcss/postcss-cli/issues/142#issuecomment-310681302
Expand All @@ -69,20 +61,12 @@ function buildStylesCustom() {
exec(command, execCallback);
}

// The confusing is worth explaining (and fixing if we know how)
console.warn('The commands are run in parallel so the output may be out of order.' + "\n");
// To explain why output is not sequiential
console.warn('The output may be out of order because the commands are run in parallel.' + "\n");

// Build process for styles may be run in parallel because they are independent
// SEE: https://stackoverflow.com/a/10776939/11817077
parallel([
// Always build Core assets
buildStylesCore,

// Build custom assets, except for Core
() => { if (env.CUSTOM_ASSET_DIR !== 'core-cms') buildStylesCustom() },

// Temporarily build "frozen variables" from Core
// FAQ: This is an advanced solution to a problem that should not exist
() => { buildStylesCore({shouldFreezeVariables: true}) },
// NOTE: Do NOT support freezing variables for custom projects
buildStylesCustom
], parallelCallback);
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ Styleguide _Test.Extend
/*! Class & Placeholder Selector, Use Placeholder Selector */

/*! Goal: */
._test_4{color:blue}
._test_4,._test_mixin_4{color:blue}

/*! Test: */
%_test_mixin_4,
Expand All @@ -78,3 +78,21 @@ Styleguide _Test.Extend
._test_5 {
@extend _test_mixin_5;
}


/*! Nested Extends */

/*! Goal: */
._test_6{color:#000}._test_6{background-color:#fff}

/*! Test: */
%_test_mixin_6a {
color: black;
}
%_test_mixin_6b {
@extend %_test_mixin_6a;
background-color: white;
}
._test_6 {
@extend %_test_mixin_6b;
}
Original file line number Diff line number Diff line change
Expand Up @@ -73,3 +73,82 @@ Styleguide _Test.PresetEnv
@media (--wide-window) {
._test{ background-color:red; }
}

/*! Custom Selectors */
/* SEE: https://preset-env.cssdb.org/features#custom-selectors */

/*! Goal: */
article h1+p,article h2+p,article h3+p{color: #000;}

/*! Test: */
@custom-selector :--heading h1, h2, h3;

article :--heading + p {
color: #000;
}

/*! Goal: */
.nav-link:hover,.nav-link:focus,.nav-link:active{color:red;}

/*! See: https://github.com/postcss/postcss-custom-selectors/issues/40 */

/*! Test: */
@custom-selector :--nav-link-hover .nav-link:hover;
@custom-selector :--nav-link-focus .nav-link:focus;
@custom-selector :--nav-link-active .nav-link:active;

:--nav-link-hover,
:--nav-link-focus,
:--nav-link-active {
color: red;
}

/*! Goal: */
h4,h5,h6{color: lime;}h4,h5,h6{color: magenta;}

/*! Test: */
@custom-selector :--test h1, h2, h3;

:--test {
color: lime;
}

@custom-selector :--test h4, h5, h6;

:--test {
color: magenta;
}

/*! `:not` Pseudo Class */
/* SEE: https://preset-env.cssdb.org/features#not-pseudo-class */

/*! Goal: */
._test>:not(._test--x):not(._test--y){align-items:center}

/*! Test: */
._test > *:not(._test--x, ._test--y) {
align-items: center;
}

/*! Nesting Rules */
/* SEE: https://preset-env.cssdb.org/features#nesting-rules */

/*! Goal: */
.foo { display: grid; }

@media (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
}

/*! Test: */
.foo {
display: grid;

@media (orientation: landscape) {
& {
grid-auto-flow: column;
}
}
}
71 changes: 0 additions & 71 deletions taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/*
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/selectors.css");
@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;
}


/* A responsive column gap */
.c-branding__link:first-child .c-branding__image {
margin-right: var(--column-gap--side);
}
.c-branding__link:not(:first-child, :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 (--nav-compressed) {
.c-branding {
--column-gap--side: 10px;
--column-gap--center: 10px;
}
}



/* Elements */

.c-branding__link {
/* To center image (in case other styles shrink the image) */
display: flex;
align-items: center;
justify-content: center;

/* FAQ: Percentage-based math adapts to container height */
height: var(--height, 90%);
}
.c-branding__separator {
/* To add border */
/* FAQ: Percentage-based math adapts to container height */
height: calc(100% - 35%);
border-left: env(--border-width--normal) solid var(--global-color-primary--xx-light);

/* To hide text */
width: 0;
overflow: hidden;
}

/* Specific brands */
/* FAQ: Percentage-based math adapts to container height */

.c-branding__nsf-link
.c-branding__tall-link, { --height: 87.5%; }
.c-branding__tacc-link { --height: 75%; }
.c-branding__utexas-link { --height: 65%; }



/* Modifiers */

/* Compact */
.c-branding--compact {
--column-gap--side: 10px;
--column-gap--center: 10px;
}
Loading