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

Secondary Nav: refactor into new design #8011

Merged
merged 8 commits into from
Nov 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@
aria-label="Section navigation">
<button class="o-secondary-nav_header" type="button" aria-expanded="false">
<span class="o-secondary-nav_label">
{{ _('In this section') }}
{{ _('Navigate this section') }}
</span>
<span class="o-secondary-nav_cues">
<span class="o-secondary-nav_cue-open" aria-label="Show">
{{ svg_icon('plus-round') }}
{{ svg_icon('down') }}
</span>
<span class="o-secondary-nav_cue-close" aria-label="Hide">
{{ svg_icon('minus-round') }}
{{ svg_icon('up') }}
</span>
</span>
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@
</span>
<span class="o-expandable_cues">
<span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
{{ svg_icon('plus-round') }}
{{ svg_icon('down') }}
</span>
<span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
{{ svg_icon('minus-round') }}
{{ svg_icon('up') }}
</span>
</span>
</button>
Expand Down
7 changes: 4 additions & 3 deletions cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
33 changes: 16 additions & 17 deletions cfgov/unprocessed/css/breadcrumbs.less
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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);
});
}
19 changes: 19 additions & 0 deletions cfgov/unprocessed/css/enhancements/layout-1-3.less
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
19 changes: 10 additions & 9 deletions cfgov/unprocessed/css/organisms/secondary-nav.less
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@
<nav class="o-secondary-nav">
<button class="o-secondary-nav_header">
<span class="o-secondary-nav_label">
In this section
Navigate this section
</span>
<span class="o-secondary-nav_cues">
<span class="o-secondary-nav_cue-open" aria-label="Show">
{{ svg_icon('plus-round') }}
{{ svg_icon('down') }}
</span>
<span class="o-secondary-nav_cue-close" aria-label="Hide">
{{ svg_icon('minus-round') }}
{{ svg_icon('up') }}
</span>
</span>
</button>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -193,6 +196,9 @@
background: @gray-5;
border-bottom: 1px solid @gray-40;

// Add drop-shadow.
box-shadow: 0 5px 5px rgba(0, 0, 0, .2);

&__no-children {
display: none;
}
Expand All @@ -202,11 +208,6 @@
display: none;
}
}

.o-secondary-nav {
border-top: 1px solid @gray-40;
border-bottom: 1px solid @gray-40;
}
} );

// Desktop
Expand Down
55 changes: 31 additions & 24 deletions cfgov/v1/jinja2/v1/includes/molecules/breadcrumbs.html
Original file line number Diff line number Diff line change
@@ -1,36 +1,43 @@
{# ==========================================================================

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 ) %}
<nav class="m-breadcrumbs" aria-label="{{ _('Breadcrumbs') }}">

{# Change slash direction in RTL languages. #}
{% if language == 'ar' %}
{% set crumb_divider = ' \\ ' %}
{% else %}
{% set crumb_divider = ' / ' %}
{% endif %}

{% for crumb in breadcrumbs %}

{{ crumb_divider }}

{% macro render( breadcrumbs ) %}
<nav class="breadcrumbs" aria-label="{{ _('Breadcrumbs') }}">
{{ svg_icon('left') }}
{% for crumb in breadcrumbs %}
{% if crumb.href or crumb.live %}
<a href="{{ crumb.href if crumb.href else pageurl(crumb) }}">
{{ crumb.title | e }}
<a class="m-breadcrumbs_crumb"
href="{{ crumb.href if crumb.href else pageurl(crumb) }}">
{{ crumb.title }}
</a>
{% else %}
<span class="breadcrumbs_text">{{ crumb.title | e }}</span>
{% endif %}
{% if not loop.last %}
{% if language == 'ar' %}
\
{% else %}
/
{% endif %}
<span class="m-breadcrumbs_crumb">
{{ crumb.title }}
</span>
{% endif %}
{% endfor %}
</nav>
{% endmacro %}

{% endfor %}
</nav>
{% endmacro %}
4 changes: 2 additions & 2 deletions cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@ <h3>Table of contents</h3>
</span>
<span class="o-secondary-nav_cues">
<span class="o-secondary-nav_cue-open" aria-label="Show">
{{ svg_icon('plus-round') }}
{{ svg_icon('down') }}
</span>
<span class="o-secondary-nav_cue-close" aria-label="Hide">
{{ svg_icon('minus-round') }}
{{ svg_icon('up') }}
</span>
</span>
</button>
Expand Down
6 changes: 3 additions & 3 deletions cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@

<button class="o-secondary-nav_header" type="button" aria-expanded="false">
<span class="o-secondary-nav_label">
{{ _('In this section') }}
{{ _('Navigate this section') }}
</span>
<span class="o-secondary-nav_cues">
<span class="o-secondary-nav_cue-open" aria-label="Show">
{{ svg_icon('plus-round') }}
{{ svg_icon('down') }}
</span>
<span class="o-secondary-nav_cue-close" aria-label="Hide">
{{ svg_icon('minus-round') }}
{{ svg_icon('up') }}
</span>
</span>
</button>
Expand Down
Binary file modified cfgov/v1/locale/ar/LC_MESSAGES/django.mo
Binary file not shown.
4 changes: 2 additions & 2 deletions cfgov/v1/locale/ar/LC_MESSAGES/django.po
Original file line number Diff line number Diff line change
Expand Up @@ -202,8 +202,8 @@ msgid "Section navigation"
msgstr ""

#: v1/jinja2/v1/includes/organisms/secondary-nav.html:18
msgid "In this section"
msgstr "في هذا القسم"
msgid "Navigate this section"
msgstr "انتقل إلى هذا القسم"

#: v1/jinja2/v1/includes/organisms/video-player.html:60
msgid "Close video"
Expand Down
Binary file modified cfgov/v1/locale/es/LC_MESSAGES/django.mo
Binary file not shown.
4 changes: 2 additions & 2 deletions cfgov/v1/locale/es/LC_MESSAGES/django.po
Original file line number Diff line number Diff line change
Expand Up @@ -209,8 +209,8 @@ msgid "Section navigation"
msgstr "Navegación de la sección"

#: v1/jinja2/v1/includes/organisms/secondary-nav.html:18
msgid "In this section"
msgstr "En esta sección"
msgid "Navigate this section"
msgstr "Navegue por esta sección"

#: v1/jinja2/v1/includes/organisms/video-player.html:60
msgid "Close video"
Expand Down
Binary file modified cfgov/v1/locale/ht/LC_MESSAGES/django.mo
Binary file not shown.
4 changes: 2 additions & 2 deletions cfgov/v1/locale/ht/LC_MESSAGES/django.po
Original file line number Diff line number Diff line change
Expand Up @@ -193,8 +193,8 @@ msgid "Section navigation"
msgstr ""

#: v1/jinja2/v1/includes/organisms/secondary-nav.html:18
msgid "In this section"
msgstr "Nan seksyon sa a"
msgid "Navigate this section"
msgstr "Vizite seksyon sa a"

#: v1/jinja2/v1/includes/organisms/video-player.html:60
msgid "Close video"
Expand Down
Binary file modified cfgov/v1/locale/ko/LC_MESSAGES/django.mo
Binary file not shown.
4 changes: 2 additions & 2 deletions cfgov/v1/locale/ko/LC_MESSAGES/django.po
Original file line number Diff line number Diff line change
Expand Up @@ -201,8 +201,8 @@ msgid "Section navigation"
msgstr ""

#: v1/jinja2/v1/includes/organisms/secondary-nav.html:18
msgid "In this section"
msgstr "이 섹션에서는"
msgid "Navigate this section"
msgstr "섹션 탐색하기"

#: v1/jinja2/v1/includes/organisms/video-player.html:60
msgid "Close video"
Expand Down
Binary file modified cfgov/v1/locale/ru/LC_MESSAGES/django.mo
Binary file not shown.
4 changes: 2 additions & 2 deletions cfgov/v1/locale/ru/LC_MESSAGES/django.po
Original file line number Diff line number Diff line change
Expand Up @@ -203,8 +203,8 @@ msgid "Section navigation"
msgstr ""

#: v1/jinja2/v1/includes/organisms/secondary-nav.html:18
msgid "In this section"
msgstr "В этом разделе"
msgid "Navigate this section"
msgstr "Навигация по этому разделу"

#: v1/jinja2/v1/includes/organisms/video-player.html:60
msgid "Close video"
Expand Down
Binary file modified cfgov/v1/locale/tl/LC_MESSAGES/django.mo
Binary file not shown.
4 changes: 2 additions & 2 deletions cfgov/v1/locale/tl/LC_MESSAGES/django.po
Original file line number Diff line number Diff line change
Expand Up @@ -193,8 +193,8 @@ msgid "Section navigation"
msgstr ""

#: v1/jinja2/v1/includes/organisms/secondary-nav.html:18
msgid "In this section"
msgstr "Sa seksyong ito"
msgid "Navigate this section"
msgstr "Galugarin ang seksyong ito"

#: v1/jinja2/v1/includes/organisms/video-player.html:60
msgid "Close video"
Expand Down
Binary file modified cfgov/v1/locale/vi/LC_MESSAGES/django.mo
Binary file not shown.
4 changes: 2 additions & 2 deletions cfgov/v1/locale/vi/LC_MESSAGES/django.po
Original file line number Diff line number Diff line change
Expand Up @@ -193,8 +193,8 @@ msgid "Section navigation"
msgstr ""

#: v1/jinja2/v1/includes/organisms/secondary-nav.html:18
msgid "In this section"
msgstr "Trong phần này"
msgid "Navigate this section"
msgstr "Điều hướng phần này"

#: v1/jinja2/v1/includes/organisms/video-player.html:60
msgid "Close video"
Expand Down
Binary file modified cfgov/v1/locale/zh_Hant/LC_MESSAGES/django.mo
Binary file not shown.
4 changes: 2 additions & 2 deletions cfgov/v1/locale/zh_Hant/LC_MESSAGES/django.po
Original file line number Diff line number Diff line change
Expand Up @@ -201,8 +201,8 @@ msgid "Section navigation"
msgstr ""

#: v1/jinja2/v1/includes/organisms/secondary-nav.html:18
msgid "In this section"
msgstr "本節概述"
msgid "Navigate this section"
msgstr "瀏覽本部分"

#: v1/jinja2/v1/includes/organisms/video-player.html:60
msgid "Close video"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,10 @@ export default `
<span class="o-secondary-nav_label"> Table of contents </span>
<span class="o-secondary-nav_cues">
<span class="o-secondary-nav_cue-open" aria-label="Show">
<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__plus-round" viewBox="0 0 17 20.4">
<path
d="M16.416 10.283A7.917 7.917 0 1 1 8.5 2.366a7.916 7.916 0 0 1 7.916 7.917zm-2.958.01a.792.792 0 0 0-.792-.792H9.284V6.12a.792.792 0 1 0-1.583 0V9.5H4.32a.792.792 0 0 0 0 1.584H7.7v3.382a.792.792 0 0 0 1.583 0v-3.382h3.382a.792.792 0 0 0 .792-.791z"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__down" viewBox="0 0 17 19"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg>
</span>
<span class="o-secondary-nav_cue-close" aria-label="Hide">
<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__minus-round" viewBox="0 0 17 20.4">
<path d="M16.416 10.283A7.917 7.917 0 1 1 8.5 2.366a7.916 7.916 0 0 1 7.916 7.917zm-2.958.01a.792.792 0 0 0-.792-.792H4.32a.792.792 0 0 0 0 1.583h8.346a.792.792 0 0 0 .792-.791z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__up" viewBox="0 0 17 19"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg>
</span>
</span>
</button>
Expand Down
Loading