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.

Sign up for GitHub

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

Issues/38 prefers reduced motion #39

Merged
merged 4 commits into from
Oct 28, 2020
+100 −49
Merged

Issues/38 prefers reduced motion #39

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
18cdbd5
Disabling animation for users who disable web animations
jasonrundell Oct 28, 2020
b46264e
Optimized scss
jasonrundell Oct 28, 2020
733e612
Links in menu reload page
jasonrundell Oct 28, 2020
1145822
Styling refinements
jasonrundell Oct 28, 2020
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
42 changes: 23 additions & 19 deletions src/components/GlobalTopNav/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -174,7 +174,7 @@ const GlobalTopNav = () => {
>
<MainList id="menubar-main" ariaLabel="Main Menu">
<MainNavItem role="none" id="nav-home">
<MainNavItemLink id="menuitem-home" role="menuitem" href="/#home">
<MainNavItemLink id="menuitem-home" role="menuitem" href="/">
Home
</MainNavItemLink>
</MainNavItem>
@@ -183,7 +183,7 @@ const GlobalTopNav = () => {
<MainNavItemLink
role="menuitem"
id="menuitem-Mega-Menu"
href="/#mega-menu"
href="/?page=mega-menu"
isForward
isActive={activeMenus.includes('menu-Mega-Menu') ? true : false}
onClick={(e) => toggleSubMenu(e, 'menu-Mega-Menu')}
@@ -204,7 +204,7 @@ const GlobalTopNav = () => {
<NavItem id="nav-Mega-Menu-back" isHeading={true}>
<NavItemLink
id="menuitem-Mega-Menu-back"
href="/#mega-menu"
href="/?page=mega-menu"
onClick={(e) => toggleSubMenu(e, 'menu-Mega-Menu')}
onKeyDown={(e) =>
a11yClick(e) && toggleSubMenu(e, 'menu-Mega-Menu')
@@ -219,7 +219,8 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-1"
role="menuitem"
href="/#sub-menu-item-1"
href="/?page=sub-menu-item-1"
isHeading
>
Sub menu item 1
</NavItemLink>
@@ -231,7 +232,8 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-2"
role="menuitem"
href="/#sub-menu-item-2"
href="/?page=sub-menu-item-2"
isHeading
>
Sub menu item 2
</NavItemLink>
@@ -244,7 +246,8 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-3"
role="menuitem"
href="/#sub-menu-item-3"
href="/?page=sub-menu-item-3"
isHeading
isForward
onClick={(e) =>
toggleSubSubMenu(e, 'menu-Mega-Menu-Sub-menu-item-3')
@@ -283,7 +286,7 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-3-back"
role="menuitem"
href="/#sub-menu-item-3"
href="/?page=sub-menu-item-3"
isBack
onClick={(e) =>
toggleSubSubMenu(e, 'menu-Mega-Menu-Sub-menu-item-3')
@@ -302,7 +305,7 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-3.1"
role="menuitem"
href="/#sub-menu-item-3.1"
href="/?page=sub-menu-item-3.1"
>
Sub menu item 3.1
</NavItemLink>
@@ -314,7 +317,7 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-3.2"
role="menuitem"
href="/#sub-menu-item-3.2"
href="/?page=sub-menu-item-3.2"
>
Sub menu item 3.2
</NavItemLink>
@@ -327,7 +330,7 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-3.3"
role="menuitem"
href="/#sub-menu-item-3.3"
href="/?page=sub-menu-item-3.3"
>
Sub menu item 3.3
</NavItemLink>
@@ -344,7 +347,8 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-4"
role="menuitem"
href="/#sub-menu-item-4"
href="/?page=sub-menu-item-4"
isHeading
isForward
onClick={(e) =>
toggleSubSubMenu(e, 'menu-Mega-Menu-Sub-menu-item-4')
@@ -383,7 +387,7 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-4-back"
role="menuitem"
href="/#sub-menu-item-4"
href="/?page=sub-menu-item-4"
isBack
onClick={(e) =>
toggleSubSubMenu(e, 'menu-Mega-Menu-Sub-menu-item-4')
@@ -402,7 +406,7 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-4.1"
role="menuitem"
href="/#sub-menu-item-4.1"
href="/?page=sub-menu-item-4.1"
>
Sub menu item 4.1
</NavItemLink>
@@ -411,7 +415,7 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-4.2"
role="menuitem"
href="/#sub-menu-item-4.2"
href="/?page=sub-menu-item-4.2"
>
Sub menu item 4.2
</NavItemLink>
@@ -420,7 +424,7 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-4.3"
role="menuitem"
href="/#sub-menu-item-4.3"
href="/?page=sub-menu-item-4.3"
>
Sub menu item 4.3
</NavItemLink>
@@ -429,7 +433,7 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-4.4"
role="menuitem"
href="/#sub-menu-item-4.4"
href="/?page=sub-menu-item-4.4"
>
Sub menu item 4.4
</NavItemLink>
@@ -438,7 +442,7 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-4.5"
role="menuitem"
href="/#sub-menu-item-4.5"
href="/?page=sub-menu-item-4.5"
>
Sub menu item 4.5
</NavItemLink>
@@ -447,7 +451,7 @@ const GlobalTopNav = () => {
<NavItemLink
id="menuitem-Mega-Menu-Sub-menu-item-4.6"
role="menuitem"
href="/#sub-menu-item-4.6"
href="/?page=sub-menu-item-4.6"
>
Sub menu item 4.6
</NavItemLink>
@@ -460,7 +464,7 @@ const GlobalTopNav = () => {
<MainNavItemLink
id="menuitem-contact"
role="menuitem"
href="/#contact"
href="/?page=contact"
>
Contact
</MainNavItemLink>
18 changes: 16 additions & 2 deletions src/components/MegaList/index.module.scss
View file
Original file line number Diff line number Diff line change
@@ -37,21 +37,35 @@
}

.open {
@include open;
@include slideOpen;

@media (prefers-reduced-motion: reduce) {
transform: translate3d(100%, 0, 0);
}

@include respond-to('large') {
animation: none;
display: flex;
opacity: 1;
@media (prefers-reduced-motion: reduce) {
transform: none;
}
}
}

.closed {
@include closed;
@include slideClosed;

@media (prefers-reduced-motion: reduce) {
transform: translate3d(-100%, 0, 0);
}

@include respond-to('large') {
animation: none;
display: none;
opacity: 0;
@media (prefers-reduced-motion: reduce) {
transform: none;
}
}
}
18 changes: 16 additions & 2 deletions src/components/Nav/index.module.scss
View file
Original file line number Diff line number Diff line change
@@ -44,21 +44,35 @@
}

.open {
@include open;
@include slideOpen;

@media (prefers-reduced-motion: reduce) {
transform: translate3d(100%, 0, 0);
}

@include respond-to('large') {
animation: none;
display: flex;
opacity: 1;
@media (prefers-reduced-motion: reduce) {
transform: none;
}
}
}

.closed {
@include closed;
@include slideClosed;

@media (prefers-reduced-motion: reduce) {
transform: translate3d(-100%, 0, 0);
}

@include respond-to('large') {
animation: none;
display: none;
opacity: 0;
@media (prefers-reduced-motion: reduce) {
transform: none;
}
}
}
17 changes: 5 additions & 12 deletions src/components/NavItem/index.module.scss
View file
Original file line number Diff line number Diff line change
@@ -6,27 +6,20 @@
margin-right: 0;
margin-bottom: 1rem;
margin-left: 0;
padding: 0;

@include respond-to('large') {
display: flex;
flex-direction: row;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
height: auto;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 2rem;
align-items: center;
}

@include respond-to('large') {
display: block;
margin-left: 0;
padding-left: 1rem;
padding-right: 1rem;
}

@include respond-to('large') {
margin-left: 0;
}
}

.heading {
5 changes: 1 addition & 4 deletions src/components/NavItemDescription/index.module.scss
View file
Original file line number Diff line number Diff line change
@@ -3,8 +3,5 @@
.root {
color: #000;
font-size: 0.75rem;
@include respond-to('large') {
margin-top: 0;
margin-bottom: 0;
}
margin-bottom: 1rem;
}
4 changes: 4 additions & 0 deletions src/components/NavItemLink/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -12,6 +12,7 @@ const NavItemLink = ({
role,
href,
isBack,
isHeading,
isForward,
isActive,
className,
@@ -24,6 +25,7 @@ const NavItemLink = ({
const rootClasses = classNames(
styles['root'],
isBack && styles['back'],
isHeading && styles['heading'],
isForward && styles['forward'],
isActive && styles['active'],
className && className
@@ -47,6 +49,7 @@ const NavItemLink = ({
NavItemLink.defaultProps = {
role: 'menuitem',
isBack: false,
isHeading: false,
isForward: false,
isActive: false,
}
@@ -56,6 +59,7 @@ NavItemLink.propTypes = {
role: PropTypes.string,
href: PropTypes.string.isRequired,
isBack: PropTypes.bool,
isHeading: PropTypes.bool,
isForward: PropTypes.bool,
isActive: PropTypes.bool,
className: PropTypes.string,
8 changes: 6 additions & 2 deletions src/components/NavItemLink/index.module.scss
View file
Original file line number Diff line number Diff line change
@@ -3,10 +3,14 @@
.root {
width: 100%;
display: flex;
flex-direction: row;
position: relative;
margin-bottom: 1rem;
}

.heading {
@include respond-to('large') {
align-items: center;
height: 4rem;
height: 1rem;
}
}

19 changes: 17 additions & 2 deletions src/components/NavList/index.module.scss
View file
Original file line number Diff line number Diff line change
@@ -22,6 +22,7 @@
z-index: 1;

@include respond-to('large') {
padding-top: 0;
flex-direction: row;
height: 4rem;
}
@@ -67,17 +68,31 @@
}

.open {
@include open;
@include slideOpen;

@media (prefers-reduced-motion: reduce) {
transform: translate3d(100%, 0, 0);
}

@include respond-to('large') {
animation: none;
@media (prefers-reduced-motion: reduce) {
transform: none;
}
}
}

.closed {
@include closed;
@include slideClosed;

@media (prefers-reduced-motion: reduce) {
transform: translate3d(-100%, 0, 0);
}

@include respond-to('large') {
animation: none;
@media (prefers-reduced-motion: reduce) {
transform: none;
}
}
}
Loading