From ab1f3f507be9f2fb10689c3c7128535bc005a15e Mon Sep 17 00:00:00 2001 From: Ans Date: Thu, 26 Oct 2023 17:52:46 -0400 Subject: [PATCH 1/7] Refactor breadcrumb and secondary nav --- cfgov/unprocessed/css/breadcrumbs.less | 33 +++++----- .../css/enhancements/layout-1-3.less | 19 ++++++ .../css/organisms/secondary-nav.less | 13 ++-- .../v1/includes/molecules/breadcrumbs.html | 60 ++++++++++++------- .../v1/includes/organisms/secondary-nav.html | 6 +- 5 files changed, 82 insertions(+), 49 deletions(-) diff --git a/cfgov/unprocessed/css/breadcrumbs.less b/cfgov/unprocessed/css/breadcrumbs.less index 221e9c7b839..5d512e1b141 100644 --- a/cfgov/unprocessed/css/breadcrumbs.less +++ b/cfgov/unprocessed/css/breadcrumbs.less @@ -1,18 +1,22 @@ -.breadcrumbs { +.m-breadcrumbs { // Mobile size. + position: relative; display: flex; - flex-wrap: wrap; gap: unit(10px / @base-font-size-px, rem); align-items: center; + flex-wrap: wrap; + font-size: unit(14px / @base-font-size-px, rem); padding-top: unit(15px / @base-font-size-px, rem); padding-bottom: unit(15px / @base-font-size-px, rem); - margin-left: unit(20px / @base-font-size-px, rem); - margin-right: unit(20px / @base-font-size-px, rem); + min-height: 33px; + width: calc(100vw - 65px); - .cf-icon-svg { - fill: @pacific; - margin-left: unit(-20px / @base-font-size-px, rem); + &_crumbs { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: block; } // Desktop size. @@ -24,30 +28,25 @@ // Hide on print. .respond-to-print( { - .breadcrumbs { + .m-breadcrumbs { display: none; } } ); // Right-to-left (RTL) layout. html[lang='ar'] { - .breadcrumbs { + .m-breadcrumbs { margin-right: unit(20px / @base-font-size-px, rem); margin-left: unit(20px / @base-font-size-px, rem); - - .cf-icon-svg { - margin-right: unit(-20px / @base-font-size-px, rem); - margin-left: initial; - } } } // TODO: When the layout-2-1 template is converted to use `u-layout-grid_wrapper`, this can be removed. -.content_wrapper .breadcrumbs { - margin-left: unit(35px / @base-font-size-px, rem); +.content_wrapper .m-breadcrumbs { + margin-left: unit(15px / @base-font-size-px, rem); // Tablet size only. .respond-to-range(@bp-sm-min, @bp-sm-max, { - margin-left: unit(50px / @base-font-size-px, rem); + margin-left: unit(30px / @base-font-size-px, rem); }); } diff --git a/cfgov/unprocessed/css/enhancements/layout-1-3.less b/cfgov/unprocessed/css/enhancements/layout-1-3.less index 039c1c9d2ea..385b8417eba 100644 --- a/cfgov/unprocessed/css/enhancements/layout-1-3.less +++ b/cfgov/unprocessed/css/enhancements/layout-1-3.less @@ -10,9 +10,28 @@ } } + // Tablet and below. + .respond-to-max(@bp-sm-max, { + .u-layout-grid { + &_breadcrumbs { + padding-left: unit(30px / @base-font-size-px, rem); + padding-right: unit(30px / @base-font-size-px, rem); + margin-left: unit(-30px / @base-font-size-px, rem); + margin-right: unit(-30px / @base-font-size-px, rem); + background: @gray-5; + border-bottom: 1px solid @gray-40; + } + } + }); + // Tablet .respond-to-range( @bp-sm-min, @bp-sm-max, { .u-layout-grid { + &_breadcrumbs { + padding-left: unit(15px / @base-font-size-px, rem); + padding-right: unit(15px / @base-font-size-px, rem); + } + &_secondary-nav { margin-left: unit(-30px / @base-font-size-px, rem); margin-right: unit(-30px / @base-font-size-px, rem); diff --git a/cfgov/unprocessed/css/organisms/secondary-nav.less b/cfgov/unprocessed/css/organisms/secondary-nav.less index 4f944b212df..46369ee929f 100644 --- a/cfgov/unprocessed/css/organisms/secondary-nav.less +++ b/cfgov/unprocessed/css/organisms/secondary-nav.less @@ -110,7 +110,10 @@ // Grow to available width. flex-grow: 1; - .h5(); + font-size: unit(16px / @base-font-size-px, rem); + font-weight: 600; + letter-spacing: 1px; + color: @pacific; line-height: unit((22 / @size-v)); margin-bottom: 0; @@ -193,6 +196,9 @@ background: @gray-5; border-bottom: 1px solid @gray-40; + // Add drop-shadow. + box-shadow: 0 5px 5px rgb(0 0 0 / 20%); + &__no-children { display: none; } @@ -202,11 +208,6 @@ display: none; } } - - .o-secondary-nav { - border-top: 1px solid @gray-40; - border-bottom: 1px solid @gray-40; - } } ); // Desktop diff --git a/cfgov/v1/jinja2/v1/includes/molecules/breadcrumbs.html b/cfgov/v1/jinja2/v1/includes/molecules/breadcrumbs.html index 75e75730cb2..dcdb989e56f 100644 --- a/cfgov/v1/jinja2/v1/includes/molecules/breadcrumbs.html +++ b/cfgov/v1/jinja2/v1/includes/molecules/breadcrumbs.html @@ -1,36 +1,50 @@ {# ========================================================================== - breadcrumbs.render() + breadcrumbs.render() - ========================================================================== + ========================================================================== - Description: + Description: - Create breadcrumb markup when given: + Create breadcrumb markup when given: - breadcrumbs: An array of tuples used to display nav items. - Format: (href, live, title) + breadcrumbs: An array of tuples used to display nav items. + Format: (href, live, title) - ========================================================================== #} + ========================================================================== #} + + {% macro render( breadcrumbs ) %} + + {% endmacro %} diff --git a/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html b/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html index 5b04a496208..baabfd3c20e 100644 --- a/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html +++ b/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html @@ -21,14 +21,14 @@ From 99ecdef658dd26f28c3a974986aa5afbdc5d02a1 Mon Sep 17 00:00:00 2001 From: Ans Date: Tue, 7 Nov 2023 09:08:21 -0500 Subject: [PATCH 2/7] Add translations for Navigate this Section --- .../macros/secondary-nav.html | 2 +- .../css/organisms/secondary-nav.less | 2 +- cfgov/v1/locale/ar/LC_MESSAGES/django.mo | Bin 923 -> 942 bytes cfgov/v1/locale/ar/LC_MESSAGES/django.po | 4 ++-- cfgov/v1/locale/es/LC_MESSAGES/django.mo | Bin 3249 -> 3264 bytes cfgov/v1/locale/es/LC_MESSAGES/django.po | 4 ++-- cfgov/v1/locale/ht/LC_MESSAGES/django.mo | Bin 677 -> 686 bytes cfgov/v1/locale/ht/LC_MESSAGES/django.po | 4 ++-- cfgov/v1/locale/ko/LC_MESSAGES/django.mo | Bin 778 -> 784 bytes cfgov/v1/locale/ko/LC_MESSAGES/django.po | 4 ++-- cfgov/v1/locale/ru/LC_MESSAGES/django.mo | Bin 1077 -> 1106 bytes cfgov/v1/locale/ru/LC_MESSAGES/django.po | 4 ++-- cfgov/v1/locale/tl/LC_MESSAGES/django.mo | Bin 669 -> 686 bytes cfgov/v1/locale/tl/LC_MESSAGES/django.po | 4 ++-- cfgov/v1/locale/vi/LC_MESSAGES/django.mo | Bin 731 -> 748 bytes cfgov/v1/locale/vi/LC_MESSAGES/django.po | 4 ++-- cfgov/v1/locale/zh_Hant/LC_MESSAGES/django.mo | Bin 768 -> 777 bytes cfgov/v1/locale/zh_Hant/LC_MESSAGES/django.po | 4 ++-- 18 files changed, 18 insertions(+), 18 deletions(-) diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html index 119bbccc6bb..b9337525aed 100644 --- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html +++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html @@ -17,7 +17,7 @@ aria-label="Section navigation"> diff --git a/cfgov/unprocessed/css/organisms/secondary-nav.less b/cfgov/unprocessed/css/organisms/secondary-nav.less index 7a6b9d6756f..6cc59acf000 100644 --- a/cfgov/unprocessed/css/organisms/secondary-nav.less +++ b/cfgov/unprocessed/css/organisms/secondary-nav.less @@ -16,10 +16,10 @@ - {{ svg_icon('plus-round') }} + {{ svg_icon('down') }} - {{ svg_icon('minus-round') }} + {{ svg_icon('up') }} diff --git a/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html b/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html index 748aff2ad81..ea1b6ca7e5b 100644 --- a/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html +++ b/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html @@ -41,10 +41,10 @@

Table of contents

- {{ svg_icon('plus-round') }} + {{ svg_icon('down') }} - {{ svg_icon('minus-round') }} + {{ svg_icon('up') }} diff --git a/test/unit_tests/apps/filing-instruction-guide/fixtures/sample-fig-page.js b/test/unit_tests/apps/filing-instruction-guide/fixtures/sample-fig-page.js index d25d7b7b728..918dbb6715f 100644 --- a/test/unit_tests/apps/filing-instruction-guide/fixtures/sample-fig-page.js +++ b/test/unit_tests/apps/filing-instruction-guide/fixtures/sample-fig-page.js @@ -20,16 +20,10 @@ export default ` Table of contents - - - + - - - + From 089d05a1a6b1d08cf7f4b3097682cb932258b9c1 Mon Sep 17 00:00:00 2001 From: Ans Date: Wed, 8 Nov 2023 11:37:09 -0500 Subject: [PATCH 7/7] Restyle regs --- .../jinja2/regulations3k/regulations3k-secondary-nav.html | 4 ++-- .../unprocessed/apps/regulations3k/css/reg-navigation.less | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html index e5060a4c8be..a45babfbd4c 100644 --- a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html +++ b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html @@ -21,10 +21,10 @@ - {{ svg_icon('plus-round') }} + {{ svg_icon('down') }} - {{ svg_icon('minus-round') }} + {{ svg_icon('up') }} diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less index 450d912f87d..3df707b5273 100644 --- a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less +++ b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less @@ -13,9 +13,10 @@ .respond-to-max( @bp-sm-max, { background-color: @gray-5; - border-bottom: 1px solid @gray-40; - border-top: 1px solid @gray-40; - margin-bottom: unit( @grid_gutter-width / 2 / @base-font-size-px, em ); + margin-bottom: unit( @grid_gutter-width / @base-font-size-px, em ); + + // Add drop-shadow. + box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); } ); // TODO - this will be updated to data-open='true' in newer expandables.