mozilla
/
bedrock
зеркало из https://github.com/mozilla/bedrock.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Create mobile nav for pocket header (#10857) 

* Create mobile nav for certain pocket pages #10842

Currently on production, the hamburger menu button on mobile doesn't
do anything - so I tried to copy the react modal from
getpocket.com/explore. Still need to add javascript and fix styles
depending on how it looks on the local server

* Work on JS for mobile nav

* Finsh a11y for mobile nav

* Finished up mobile nav for /about (Fixes #10842)

- added transition to mobile nav
- updated scss on .nav to use protocol tokens
- updated html for better a11y
- solve rebase conflicts

* Added new lines for a few files

* fix files for tests

* update variable in scss to fix test

* PR changes + scroll update and rebase fixes

* Add aria-expanded on menu open/close

* change static bundle name for nav

* Change icons to css backgrounds and create svgs

* update back button as well

* Small PR changes
This commit is contained in:
Nathan Barrett 2021-12-06 11:18:21 -08:00 коммит произвёл GitHub
Родитель 08aeec8163
Коммит 5772823ccf
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
30 изменённых файлов: 482 добавлений и 40 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

3
bedrock/externalpages/templates/externalpages/pocket/about.html
Просмотреть файл

@ -63,3 +63,6 @@
{% endblock %}
{% block js %}
{{ js_bundle('pocket-nav') }}
{% endblock %}

17
bedrock/externalpages/templates/externalpages/pocket/base.html
Просмотреть файл

@ -34,17 +34,8 @@
<title>{% block page_title %}{% endblock page_title %} | Pocket</title>
</head>
<body>
{#
NOTE: These URLs cannot use the `url(..)` pattern as that will include the
"/external/pocket/" in the path, but since these are proxied from
getpocket.com, that would result in a 404.
#}
{# Lang: {{ LANG }} #}
{# <nav>
<a href="../">Home</a>
<a href="../about/">About</a>
<a href="../add/">How to Save</a>
<a href="../android/">Pocket for Android</a>
</nav> #}
<main class="main-container">{% block content %}{% endblock %}</main>
<main class="main-container">{% block content %}{% endblock %}</main>
{% block js %}{% endblock %}
</body>
</html>

45
bedrock/externalpages/templates/externalpages/pocket/includes/mobile-nav.html Normal file
Просмотреть файл

@ -0,0 +1,45 @@
{#
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
<div class="mobile-nav-wrapper" tabindex="-1">
<nav class="mobile-nav" role="dialog" aria-modal="true" aria-label="Pocket Mobile Menu">
<div class="mobile-nav-close">
<button class="mobile-nav-close-btn" data-tooltip="Close">Close the Pocket Mobile Menu</button>
</div>
<ul class="mobile-nav-list">
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link home" href="https://getpocket.com/home?src=navbar">Home<span class="beta">BETA</span></a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link my-list" href="https://getpocket.com/my-list?src=navbar">My List</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link discover" href="https://getpocket.com/explore?src=navbar">Discover</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link collections" href="https://getpocket.com/collections?src=navbar">Collections</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link archive" href="https://getpocket.com/my-list/archive">Archive</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link favorites" href="https://getpocket.com/my-list/favorites">Favorites</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link highlights" href="https://getpocket.com/my-list/highlights">Highlights</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link articles" href="https://getpocket.com/my-list/articles">Articles</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link videos" href="https://getpocket.com/my-list/videos">Videos</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link tags" href="https://getpocket.com/my-list/tags">All Tags</a>
</li>
</ul>
</nav>
</div>

23
bedrock/externalpages/templates/externalpages/pocket/includes/nav.html
Просмотреть файл

@ -1,13 +1,21 @@
{#
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
{% include 'externalpages/pocket/includes/mobile-nav.html' %}
<header class="pocket-header">
<nav class="global-nav-container">
<button class="global-nav-mobile-menu-btn inline">
<button class="global-nav-mobile-menu-btn inline" aria-labeledby="mobile-menu-icon-title" aria-describedby="mobile-menu-icon-description">
<svg
class="hamburger-btn"
aria-labelledby="mobile-menu-menu-icon-title mobile-menu-menu-icon-description"
aria-labelledby="mobile-menu-icon-description"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
@ -16,13 +24,13 @@
d="M2 5a1 1 0 011-1h18a1 1 0 110 2H3a1 1 0 01-1-1zM2 12a1 1 0 011-1h18a1 1 0 110 2H3a1 1 0 01-1-1zM2 19a1 1 0 011-1h18a1 1 0 110 2H3a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
<title id="mobile-menu-menu-icon-title">Open</title>
<desc id="mobile-menu-menu-icon-description">Open the Pocket mobile menu</desc>
<title id="mobile-menu-icon-title">Open</title>
<desc id="mobile-menu-icon-description">Open the Pocket mobile menu</desc>
</svg>
</button>
<a id="pocket-logo-nav" class="pocket-logo" href="https://getpocket.com/explore?src=navbar">
<div class="pocket-logo-svg logo">
<span class="sr-only">Pocket</span>
<span>Pocket</span>
</div>
</a>
<div class="page-navigation" aria-label="Page navigation">
@ -36,14 +44,15 @@
<a class="signup-link nav-link" href="https://getpocket.com/signup?src=navbar" id="global-nav-signup-link">
<span class="label">Sign up</span>
</a>
<span class="signup-icon">
<a id="global-nav-signup-link" href="https://getpocket.com/signup?src=navbar" class="signup-icon">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M12 11.125a5.067 5.067 0 01-5.06-5.063A5.067 5.067 0 0112 1c2.79 0 5.06 2.271 5.06 5.062A5.067 5.067 0 0112 11.125zM12 3a3.06 3.06 0 10.001 6.121A3.06 3.06 0 0012 3.001zM11.99 15.006c4.41 0 7.98 2.302 8.01 4.993H4v-.07c.12-2.741 3.63-4.923 7.99-4.923zm0-2c-5.44 0-9.85 3.071-9.99 6.883V20C2 21.1 2.9 22 4 22h16c1.09 0 1.98-.88 2-1.97-.04-3.883-4.5-7.025-10.01-7.025z"
>
</path>
</svg>
</span>
<span>Sign up</span>
</a>
</div>
</nav>
</header>

249
media/css/externalpages/pocket/components/_mobile-nav.scss Normal file
Просмотреть файл

@ -0,0 +1,249 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '../utils/variables';
$icon-path: '/media/img/externalpages/pocket/mobile-nav/';
// variables from pocket
$easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
$easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
// this class will be added to the body to disable scroll while the nav is open
.mobile-nav-open {
overflow: hidden;
}
.mobile-nav-wrapper {
background: rgba(26, 26, 26, 0.4) none repeat scroll 0 0;
bottom: 0;
display: none;
left: 0;
mix-blend-mode: normal;
opacity: 0;
pointer-events: none;
position: fixed;
right: 0;
transition: opacity 150ms $easing-accelerate, transform 75ms $easing-accelerate;
top: 0;
z-index: 20;
&.active {
display: block;
pointer-events: auto;
}
}
.mobile-nav {
background: $color-white;
border-radius: 0;
bottom: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
left: 0;
max-height: 100%;
max-width: 256px;
overflow-y: scroll;
position: absolute;
right: auto;
top: 0;
transform: translateX(-256px);
transition: all 250ms $easing-decelerate;
width: 100%;
&.active {
opacity: 1;
transform: translateX(0);
transition: all 250ms $easing-decelerate;
}
.mobile-nav-close {
align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border-bottom: 1px solid #d9d9d9;
display: flex;
height: 64px;
margin-bottom: 8px;
padding: 0;
&:focus,
&:focus-within {
border: 1px solid $color-action-primary;
}
.mobile-nav-close-btn {
@include image-replaced;
background: url('#{$icon-path}/back-btn.svg') no-repeat transparent;
border: none;
color: $color-text-primary;
height: $spacing-lg;
margin: 0 $spacing-sm;
outline: none;
width: $spacing-lg;
}
}
}
.mobile-nav-list {
background: $color-white;
display: flex;
flex-direction: column;
font-family: $font-sans;
font-size: 16px;
font-weight: 500;
list-style: none;
margin: 0;
padding: 0;
.mobile-nav-list-item {
margin: 0;
padding: 0;
width: 100%;
.mobile-nav-list-link {
align-items: center;
color: $color-text-primary;
fill: currentColor;
line-height: 24px;
display: inline-flex;
padding: 12px 16px;
position: relative;
text-decoration: none;
transition: background-color 100ms ease-out;
width: 100%;
&::before {
background-repeat: no-repeat;
content: '';
height: $spacing-lg;
width: $spacing-xl;
}
&.home {
&::before {
background-image: url('#{$icon-path}home-icon.svg');
}
&:hover::before {
background-image: url('#{$icon-path}home-icon-active.svg');
}
}
&.my-list {
&::before {
background-image: url('#{$icon-path}my-list-icon.svg');
}
&:hover::before {
background-image: url('#{$icon-path}my-list-icon-active.svg');
}
}
&.discover {
&::before {
background-image: url('#{$icon-path}discover-icon.svg');
}
&:hover::before {
background-image: url('#{$icon-path}discover-icon-active.svg');
}
}
&.collections {
&::before {
background-image: url('#{$icon-path}collections-icon.svg');
}
&:hover::before {
background-image: url('#{$icon-path}collections-icon-active.svg');
}
}
&.archive {
&::before {
background-image: url('#{$icon-path}archive-icon.svg');
}
&:hover::before {
background-image: url('#{$icon-path}archive-icon-active.svg');
}
}
&.favorites {
&::before {
background-image: url('#{$icon-path}favorites-icon.svg');
}
&:hover::before {
background-image: url('#{$icon-path}favorites-icon-active.svg');
}
}
&.highlights {
&::before {
background-image: url('#{$icon-path}highlights-icon.svg');
}
&:hover::before {
background-image: url('#{$icon-path}highlights-icon-active.svg');
}
}
&.articles {
&::before {
background-image: url('#{$icon-path}articles-icon.svg');
}
&:hover::before {
background-image: url('#{$icon-path}articles-icon-active.svg');
}
}
&.videos {
&::before {
background-image: url('#{$icon-path}videos-icon.svg');
}
&:hover::before {
background-image: url('#{$icon-path}videos-icon-active.svg');
}
}
&.tags {
&::before {
background-image: url('#{$icon-path}tags-icon.svg');
}
&:hover::before {
background-image: url('#{$icon-path}tags-icon-active.svg');
}
}
&:focus,
&:focus-within {
border: 1px solid $color-action-primary;
}
&:hover:not(.selected):not(.disabled) {
background-color: $color-action-primary;
color: $color-white;
}
&.selected {
background-color: $color-nav-current;
color: $color-action-primary;
}
.beta {
border: 1px solid #1eabf9;
border-radius: 4px;
color: #1eabf9;
font-size: 11px;
font-weight: 500;
margin-left: 8px;
padding: 0 5px;
}
}
}
}

54
media/css/externalpages/pocket/components/_nav.scss
Просмотреть файл

@ -3,6 +3,7 @@
// file, You can obtain one at https://mozilla.org/MPL/2.0/.
@import '../utils/variables';
@import './mobile-nav';
$image-path: '/media/img/externalpages/pocket';
@ -24,15 +25,20 @@ $image-path: '/media/img/externalpages/pocket';
.global-nav-mobile-menu-btn {
display: block;
margin-left: calc($spacing075 * -1);
width: 48px;
height: 48px;
margin-left: -$spacing-sm;
width: 36px;
height: 36px;
position: relative;
line-height: 110%;
border: none;
border-radius: 4px;
transition: all 0.15s ease-out;
&:focus,
&:focus-within {
border: 1px solid $color-action-primary;
}
&.inline {
background: none;
padding: 0;
@ -46,6 +52,7 @@ $image-path: '/media/img/externalpages/pocket';
margin-bottom: -2px;
display: inline-block;
margin-top: -4px;
pointer-events: none;
vertical-align: middle;
}
@ -57,9 +64,9 @@ $image-path: '/media/img/externalpages/pocket';
.pocket-logo {
display: inline-block;
position: relative;
margin-left: 8px;
margin-right: 0;
margin-left: calc($spacing075 * -1);
padding: $spacing050 $spacing050;
padding: 8px 0;
line-height: 1;
&:focus {
@ -89,6 +96,10 @@ $image-path: '/media/img/externalpages/pocket';
background-image: url('#{$image-path}/pocket-logo-light-mode.svg');
width: 94px;
height: 24px;
span {
@include visually-hidden;
}
}
&.logged-in .logo {
@ -128,10 +139,10 @@ $image-path: '/media/img/externalpages/pocket';
white-space: nowrap;
.page-navigation-list {
@include text-body-md;
margin: 0;
padding: 0;
list-style-type: none;
font-size: 16px;
display: none;
.page-navigation-list-item {
@ -148,7 +159,7 @@ $image-path: '/media/img/externalpages/pocket';
.page-navigation-list-item-link {
font-weight: 500;
line-height: 24px;
line-height: $spacing-lg;
text-decoration: none;
padding: 20px;
position: relative;
@ -161,12 +172,12 @@ $image-path: '/media/img/externalpages/pocket';
display: block;
box-sizing: border-box;
position: absolute;
left: $spacing025;
right: $spacing025;
top: $spacing050;
bottom: $spacing050;
left: $spacing-xs;
right: $spacing-xs;
top: $spacing-sm;
bottom: $spacing-sm;
border: 2px solid $color-action-primary;
border-radius: 4px;
border-radius: $border-radius-sm;
}
}
@ -189,7 +200,7 @@ $image-path: '/media/img/externalpages/pocket';
bottom: 0;
left: 10px;
right: 10px;
height: 4px;
height: $spacing-xs;
background-color: $color-action-primary;
}
@ -201,9 +212,7 @@ $image-path: '/media/img/externalpages/pocket';
.nav-link {
display: none;
position: relative;
padding: $spacing075 $spacing050;
vertical-align: middle;
line-height: 110%;
font-weight: 500;
text-decoration: none;
color: $color-text-primary;
@ -223,7 +232,7 @@ $image-path: '/media/img/externalpages/pocket';
top: -2px;
bottom: -2px;
border: 2px solid $color-action-primary;
border-radius: 4px;
border-radius: $border-radius-sm;
}
}
@ -237,11 +246,11 @@ $image-path: '/media/img/externalpages/pocket';
}
&.login-link {
margin-right: $spacing150;
margin-right: $spacing-lg;
}
&.signup-link {
border-radius: 4px;
border-radius: $border-radius-sm;
padding: 12px;
transition: all 0.15s ease-out;
cursor: pointer;
@ -264,14 +273,19 @@ $image-path: '/media/img/externalpages/pocket';
line-height: 0;
vertical-align: middle;
margin-top: 0;
height: 24px;
height: $spacing-lg;
color: $color-text-primary;
svg {
height: 100%;
}
span {
@include visually-hidden;
}
@media #{$mq-md} {
margin-top: -4px;
display: none;
margin-top: -$spacing-xs;
}
}

1
media/css/externalpages/pocket/utils/_variables.scss
Просмотреть файл

@ -13,6 +13,7 @@ $color-text-dark-grey: #333;
$color-button-red: #e7132f;
$color-text-cyan: #5dcfca;
$color-background-grey: #f0f0f0;
$color-nav-current: #e0f0ef;
$box-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.08);
$mq-md: '(min-width: 720px)';
$mq-lg: '(min-width: 1024px)';

1
media/img/externalpages/pocket/mobile-nav/archive-icon-active.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 4a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4Zm2 0v2h18V4H3Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V8Zm2 10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8H5v10Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.707 11.293a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 1 1 1.414-1.414L11 14.586l3.293-3.293a1 1 0 0 1 1.414 0Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 575 B

1
media/img/externalpages/pocket/mobile-nav/archive-icon.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#1a1a1a" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 4a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4Zm2 0v2h18V4H3Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V8Zm2 10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8H5v10Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.707 11.293a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 1 1 1.414-1.414L11 14.586l3.293-3.293a1 1 0 0 1 1.414 0Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 578 B

1
media/img/externalpages/pocket/mobile-nav/articles-icon-active.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 2a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4V6a4 4 0 0 0-4-4H7Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 8a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 497 B

1
media/img/externalpages/pocket/mobile-nav/articles-icon.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#1a1a1a" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 2a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4V6a4 4 0 0 0-4-4H7Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 8a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 500 B

1
media/img/externalpages/pocket/mobile-nav/back-btn.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#1a1a1a" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.707 4.293a1 1 0 0 1 0 1.414L8.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 272 B

1
media/img/externalpages/pocket/mobile-nav/collections-icon-active.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.052 2.13h-2.59c-.921 0-1.667.896-1.667 2v12c0 .204.025.401.073.587l-.023.09c-.32 1.269.215 2.579 1.239 3.298-1.663-.225-2.956-1.919-2.956-3.975v-12c0-2.209 1.492-4 3.333-4h8.334c1.606 0 2.948 1.365 3.263 3.18l-2.087-.596c-.3-.36-.717-.584-1.176-.584h-.865l-2.146-.614a2.888 2.888 0 0 0-2.732.614z"/><path fill-rule="evenodd" clip-rule="evenodd" d="m9.94 19.75-2.934.786c-.889.239-1.841-.433-2.127-1.5L1.773 7.445c-.286-1.067.203-2.125 1.092-2.363l2.263-.607V3.13c0-.271.054-.53.152-.766l-2.932.786C.57 3.626-.41 5.742.163 7.876L3.27 19.467c.572 2.134 2.477 3.478 4.255 3.001l6.278-1.682L9.94 19.75zm2.115-18.703a2.893 2.893 0 0 0-1.658-.054l-.512.137h1.994c.057-.03.116-.057.176-.083z"/><path fill-rule="evenodd" clip-rule="evenodd" d="m20.386 5.382-7.66-2.444c-.847-.27-1.779.388-2.083 1.47L7.342 16.17c-.304 1.083.136 2.179.982 2.449l7.66 2.444c.846.27 1.778-.388 2.082-1.47L21.368 7.83c.303-1.083-.136-2.179-.982-2.449zM13.276.978c-1.692-.54-3.557.777-4.165 2.942L5.81 15.68c-.608 2.165.271 4.358 1.963 4.898l7.66 2.444c1.693.54 3.557-.777 4.165-2.942L22.9 8.32c.607-2.165-.272-4.358-1.964-4.898L13.276.978z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.625 6.858c.152-.541.618-.87 1.041-.736l6.128 1.956c.423.135.643.683.491 1.224-.152.541-.618.87-1.04.736l-6.129-1.956c-.423-.135-.643-.683-.49-1.224zm-1.1 3.92c.152-.541.618-.87 1.04-.736l6.129 1.956c.423.135.643.683.49 1.224-.151.541-.617.87-1.04.736l-6.128-1.956c-.424-.135-.643-.683-.491-1.224zm-1.101 3.92c.152-.541.618-.87 1.041-.736l3.064.978c.423.135.643.683.491 1.225-.152.54-.618.87-1.04.735l-3.065-.978c-.423-.135-.643-.683-.49-1.224z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 1.7 KiB

1
media/img/externalpages/pocket/mobile-nav/collections-icon.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#1a1a1a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.052 2.13h-2.59c-.921 0-1.667.896-1.667 2v12c0 .204.025.401.073.587l-.023.09c-.32 1.269.215 2.579 1.239 3.298-1.663-.225-2.956-1.919-2.956-3.975v-12c0-2.209 1.492-4 3.333-4h8.334c1.606 0 2.948 1.365 3.263 3.18l-2.087-.596c-.3-.36-.717-.584-1.176-.584h-.865l-2.146-.614a2.888 2.888 0 0 0-2.732.614z"/><path fill-rule="evenodd" clip-rule="evenodd" d="m9.94 19.75-2.934.786c-.889.239-1.841-.433-2.127-1.5L1.773 7.445c-.286-1.067.203-2.125 1.092-2.363l2.263-.607V3.13c0-.271.054-.53.152-.766l-2.932.786C.57 3.626-.41 5.742.163 7.876L3.27 19.467c.572 2.134 2.477 3.478 4.255 3.001l6.278-1.682L9.94 19.75zm2.115-18.703a2.893 2.893 0 0 0-1.658-.054l-.512.137h1.994c.057-.03.116-.057.176-.083z"/><path fill-rule="evenodd" clip-rule="evenodd" d="m20.386 5.382-7.66-2.444c-.847-.27-1.779.388-2.083 1.47L7.342 16.17c-.304 1.083.136 2.179.982 2.449l7.66 2.444c.846.27 1.778-.388 2.082-1.47L21.368 7.83c.303-1.083-.136-2.179-.982-2.449zM13.276.978c-1.692-.54-3.557.777-4.165 2.942L5.81 15.68c-.608 2.165.271 4.358 1.963 4.898l7.66 2.444c1.693.54 3.557-.777 4.165-2.942L22.9 8.32c.607-2.165-.272-4.358-1.964-4.898L13.276.978z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.625 6.858c.152-.541.618-.87 1.041-.736l6.128 1.956c.423.135.643.683.491 1.224-.152.541-.618.87-1.04.736l-6.129-1.956c-.423-.135-.643-.683-.49-1.224zm-1.1 3.92c.152-.541.618-.87 1.04-.736l6.129 1.956c.423.135.643.683.49 1.224-.151.541-.617.87-1.04.736l-6.128-1.956c-.424-.135-.643-.683-.491-1.224zm-1.101 3.92c.152-.541.618-.87 1.041-.736l3.064.978c.423.135.643.683.491 1.225-.152.54-.618.87-1.04.735l-3.065-.978c-.423-.135-.643-.683-.49-1.224z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 1.7 KiB

1
media/img/externalpages/pocket/mobile-nav/discover-icon-active.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.422 6.122a1 1 0 0 0-1.3 1.3l2.828 7.07a1 1 0 0 0 .557.558l7.071 2.828a1 1 0 0 0 1.3-1.3l-2.828-7.07a1 1 0 0 0-.557-.558L7.422 6.122Zm3.226 7.23 4.507 1.803-1.803-4.507-2.704 2.704Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 2c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 491 B

1
media/img/externalpages/pocket/mobile-nav/discover-icon.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#1a1a1a" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.422 6.122a1 1 0 0 0-1.3 1.3l2.828 7.07a1 1 0 0 0 .557.558l7.071 2.828a1 1 0 0 0 1.3-1.3l-2.828-7.07a1 1 0 0 0-.557-.558L7.422 6.122Zm3.226 7.23 4.507 1.803-1.803-4.507-2.704 2.704Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 2c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 494 B

1
media/img/externalpages/pocket/mobile-nav/favorites-icon-active.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 1a1 1 0 0 1 .897.557l2.706 5.484 6.051.88a1 1 0 0 1 .555 1.705l-4.38 4.268 1.034 6.027a1 1 0 0 1-1.45 1.054L12 18.13l-5.413 2.845a1 1 0 0 1-1.45-1.054l1.033-6.027-4.379-4.268a1 1 0 0 1 .555-1.706l6.051-.88 2.706-5.483A1 1 0 0 1 12 1Zm0 3.26L9.958 8.397a1 1 0 0 1-.753.548l-4.567.663 3.305 3.221a1 1 0 0 1 .287.885l-.78 4.548 4.085-2.147a1 1 0 0 1 .93 0l4.085 2.147-.78-4.548a1 1 0 0 1 .287-.885l3.305-3.22-4.567-.664a1 1 0 0 1-.753-.548L12 4.26Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 598 B

1
media/img/externalpages/pocket/mobile-nav/favorites-icon.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#1a1a1a" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 1a1 1 0 0 1 .897.557l2.706 5.484 6.051.88a1 1 0 0 1 .555 1.705l-4.38 4.268 1.034 6.027a1 1 0 0 1-1.45 1.054L12 18.13l-5.413 2.845a1 1 0 0 1-1.45-1.054l1.033-6.027-4.379-4.268a1 1 0 0 1 .555-1.706l6.051-.88 2.706-5.483A1 1 0 0 1 12 1Zm0 3.26L9.958 8.397a1 1 0 0 1-.753.548l-4.567.663 3.305 3.221a1 1 0 0 1 .287.885l-.78 4.548 4.085-2.147a1 1 0 0 1 .93 0l4.085 2.147-.78-4.548a1 1 0 0 1 .287-.885l3.305-3.22-4.567-.664a1 1 0 0 1-.753-.548L12 4.26Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 601 B

1
media/img/externalpages/pocket/mobile-nav/highlights-icon-active.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.512 8.546a3 3 0 0 0-.51 4.195l-.724.723a3.001 3.001 0 0 0-.586 3.415L1.18 19.391a1 1 0 0 0 .39 1.656l4.243 1.414a1 1 0 0 0 1.023-.241l1.098-1.098a3.001 3.001 0 0 0 3.415-.586l.746-.746a3.001 3.001 0 0 0 4.133-.77l6.406-9.15a3 3 0 0 0-.337-3.842l-4.112-4.112a3 3 0 0 0-3.98-.233L5.512 8.546Zm9.932-5.294-8.693 6.863a1 1 0 0 0-.087 1.492l6.4 6.4a1 1 0 0 0 1.526-.134l6.405-9.15a1 1 0 0 0-.112-1.28L16.771 3.33a1 1 0 0 0-1.327-.078ZM6.4 14.172l-.707.707a1 1 0 0 0 0 1.414l2.829 2.828a1 1 0 0 0 1.414 0l.707-.707L6.4 14.172Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 672 B

1
media/img/externalpages/pocket/mobile-nav/highlights-icon.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#1a1a1a" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.512 8.546a3 3 0 0 0-.51 4.195l-.724.723a3.001 3.001 0 0 0-.586 3.415L1.18 19.391a1 1 0 0 0 .39 1.656l4.243 1.414a1 1 0 0 0 1.023-.241l1.098-1.098a3.001 3.001 0 0 0 3.415-.586l.746-.746a3.001 3.001 0 0 0 4.133-.77l6.406-9.15a3 3 0 0 0-.337-3.842l-4.112-4.112a3 3 0 0 0-3.98-.233L5.512 8.546Zm9.932-5.294-8.693 6.863a1 1 0 0 0-.087 1.492l6.4 6.4a1 1 0 0 0 1.526-.134l6.405-9.15a1 1 0 0 0-.112-1.28L16.771 3.33a1 1 0 0 0-1.327-.078ZM6.4 14.172l-.707.707a1 1 0 0 0 0 1.414l2.829 2.828a1 1 0 0 0 1.414 0l.707-.707L6.4 14.172Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 675 B

1
media/img/externalpages/pocket/mobile-nav/home-icon-active.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.671 1.442a2.004 2.004 0 0 1 2.658 0l8 7.09c.427.378.671.92.671 1.49v9.922a1.997 1.997 0 0 1-2 1.994h-3c-1.105 0-2-.893-2-1.994v-4.985c0-.275-.175-1.072-.689-1.789-.48-.67-1.201-1.203-2.311-1.203-1.11 0-1.831.533-2.311 1.203-.514.717-.689 1.514-.689 1.79v4.986a1.996 1.996 0 0 1-2 1.993H4c-1.105 0-2-.893-2-1.994v-9.922c0-.57.244-1.112.671-1.49l8-7.09ZM12 2.932l-8 7.09v9.922h3v-4.985c0-.723.325-1.92 1.061-2.948.77-1.074 2.049-2.038 3.939-2.038 1.89 0 3.169.963 3.939 2.038.736 1.028 1.061 2.225 1.061 2.948v4.985h3v-9.922l-8-7.09ZM7 19.944Zm.002 0H7h.002Zm0 0Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 714 B

1
media/img/externalpages/pocket/mobile-nav/home-icon.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#1a1a1a" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.671 1.442a2.004 2.004 0 0 1 2.658 0l8 7.09c.427.378.671.92.671 1.49v9.922a1.997 1.997 0 0 1-2 1.994h-3c-1.105 0-2-.893-2-1.994v-4.985c0-.275-.175-1.072-.689-1.789-.48-.67-1.201-1.203-2.311-1.203-1.11 0-1.831.533-2.311 1.203-.514.717-.689 1.514-.689 1.79v4.986a1.996 1.996 0 0 1-2 1.993H4c-1.105 0-2-.893-2-1.994v-9.922c0-.57.244-1.112.671-1.49l8-7.09ZM12 2.932l-8 7.09v9.922h3v-4.985c0-.723.325-1.92 1.061-2.948.77-1.074 2.049-2.038 3.939-2.038 1.89 0 3.169.963 3.939 2.038.736 1.028 1.061 2.225 1.061 2.948v4.985h3v-9.922l-8-7.09ZM7 19.944Zm.002 0H7h.002Zm0 0Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 717 B

1
media/img/externalpages/pocket/mobile-nav/my-list-icon-active.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M5 5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Zm0 7a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Zm0 7a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 440 B

1
media/img/externalpages/pocket/mobile-nav/my-list-icon.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#1a1a1a" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M5 5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Zm0 7a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Zm0 7a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 443 B

1
media/img/externalpages/pocket/mobile-nav/tags-icon-active.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 1.414.586L20 11.172a4 4 0 0 1 0 5.656L16.828 20a4 4 0 0 1-5.656 0l-8.586-8.586A2 2 0 0 1 2 10V4Zm8 0 8.586 8.586a2 2 0 0 1 0 2.828l-3.172 3.172a2 2 0 0 1-2.828 0L4 10V4h6Z"/><path d="M9 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 406 B

1
media/img/externalpages/pocket/mobile-nav/tags-icon.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg fill="#1a1a1a" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 1.414.586L20 11.172a4 4 0 0 1 0 5.656L16.828 20a4 4 0 0 1-5.656 0l-8.586-8.586A2 2 0 0 1 2 10V4Zm8 0 8.586 8.586a2 2 0 0 1 0 2.828l-3.172 3.172a2 2 0 0 1-2.828 0L4 10V4h6Z"/><path d="M9 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 409 B

1
media/img/externalpages/pocket/mobile-nav/videos-icon-active.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="18" x="3" y="3" stroke="#fff" fill="none" stroke-width="2" rx="3"/><path fill="#fff" d="M9 14.461V9.54a1 1 0 0 1 1.406-.914l5.538 2.461c.792.352.792 1.476 0 1.828l-5.538 2.461A1 1 0 0 1 9 14.461z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 308 B

1
media/img/externalpages/pocket/mobile-nav/videos-icon.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="18" x="3" y="3" stroke="#1a1a1a" fill="none" stroke-width="2" rx="3"/><path fill="#1a1a1a" d="M9 14.461V9.54a1 1 0 0 1 1.406-.914l5.538 2.461c.792.352.792 1.476 0 1.828l-5.538 2.461A1 1 0 0 1 9 14.461z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 314 B

103
media/js/externalpages/pocket/mobile-nav.es6.js Normal file
Просмотреть файл

@ -0,0 +1,103 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
const navOpenBtn = document.querySelector('.global-nav-mobile-menu-btn');
const mobileNavWrapper = document.querySelector('.mobile-nav-wrapper');
const mobileNav = document.querySelector('.mobile-nav');
const navCloseBtn = document.querySelector('.mobile-nav-close-btn');
const contentWrapper = document.querySelector('body');
const TAB = 9;
const ESC = 27;
function detectClickOutside(event) {
if (!mobileNav.contains(event.target) && event.target !== navOpenBtn) {
handleMenuClose();
}
}
function handleMenuOpen() {
mobileNavWrapper.classList.add('active');
mobileNav.setAttribute('aria-expanded', true);
contentWrapper.classList.add('mobile-nav-open');
document.addEventListener('click', detectClickOutside);
window.addEventListener('keydown', handleKeyDown);
// move focus to close button when modal is opened, need to use setTimeout to get the animation working correctly
setTimeout(function () {
mobileNavWrapper.style.opacity = 1;
mobileNav.classList.add('active');
navCloseBtn.focus();
}, 10);
}
function handleMenuClose() {
mobileNav.classList.remove('active');
mobileNav.setAttribute('aria-expanded', false);
mobileNavWrapper.style.opacity = 0;
document.removeEventListener('click', detectClickOutside);
window.removeEventListener('keydown', handleKeyDown);
// move focus to close button when modal is closed need to use setTimeout to get the animation working correctly
setTimeout(function () {
mobileNavWrapper.classList.remove('active');
contentWrapper.classList.remove('mobile-nav-open');
navCloseBtn.focus();
}, 250);
}
function handleKeyDown(e) {
const focusableElements = Array.prototype.slice.call(
mobileNav.querySelectorAll(
'a[href], button:not([disabled]), [tabindex="0"]'
)
);
function handleBackwardTab() {
if (document.activeElement === focusableElements[0]) {
e.preventDefault();
focusableElements[focusableElements.length - 1].focus();
} else {
e.preventDefault();
focusableElements[
focusableElements.indexOf(document.activeElement) - 1
].focus();
}
}
function handleForwardTab() {
if (
document.activeElement ===
focusableElements[focusableElements.length - 1]
) {
e.preventDefault();
focusableElements[0].focus();
} else {
e.preventDefault();
focusableElements[
focusableElements.indexOf(document.activeElement) + 1
].focus();
}
}
// function handleForwardTab(){}
switch (e.keyCode) {
case TAB:
if (e.shiftKey) {
handleBackwardTab();
} else {
handleForwardTab();
}
break;
case ESC:
handleMenuClose();
break;
default:
break;
}
}
navOpenBtn.addEventListener('click', handleMenuOpen, false);
navCloseBtn.addEventListener('click', handleMenuClose, false);

6
media/static-bundles.json
Просмотреть файл

@ -1558,6 +1558,12 @@
],
"name": "product_pocket"
},
{
"files": [
"js/externalpages/pocket/mobile-nav.es6.js"
],
"name": "pocket-nav"
},
{
"files": [
"js/firefox/enterprise/landing.js"