Skip to content

Commit

Permalink
pkp/pkp-lib#4684 HTML adjustments for default theme mobile nav menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@NateWr
NateWr committed Jul 16, 2019
1 parent 8575b8e commit e741ab2
Showing 1 changed file with 141 additions and 96 deletions.
237 changes: 141 additions & 96 deletions plugins/themes/default/styles/head.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,75 +9,94 @@
*
* @brief Classes for the page header structural elements
*/
@nav-menu-height: @quadruple;

// Structural components of the header layout
.pkp_structure_head {
background-color: @bg-base;
border-bottom: @bg-border;
}

.pkp_head_wrapper {
padding-top: @triple * 2; // Make room for the user nav at the top
}

// Mobile navigation menu
.pkp_site_name_wrapper {
height: @nav-menu-height;

.toggle, .pkp_site_name {
display: inline-block;
}

.pkp_site_name {
padding-left: @half;
@media (min-width: @screen-desktop) {
height: auto;
}

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019

Author Owner

I'll use this to fix the top bar height. This gives us a familiar UI, with a thin bar across the top, and lets us evenly position the hamburger menu button within it.
}

// Mobile navigation menu
.toggle {
@width: 20px;
@menu-colour: #ffffff;
@thickness: 4px;

@thickness: 3px;

position: absolute;
top: 0;
left: 0;
width: @nav-menu-height;
height: @nav-menu-height;

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019

Author Owner

This makes the toggle button take up all of the space in the left-hand side of the header. That way, if a user's tap is just slightly off, they'll still hit the button. There are no "gaps" around the button where they can tap without hitting it.
border: 0;
background: none;
outline: 0;
padding: 0;
margin-left: @half;

border-bottom: @thickness solid @menu-colour;
width: @width;
box-shadow: 1px 0 0 rgba(255,255,255,0.2), -1px 0 0 rgba(255,255,255,0.2);

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019

Author Owner

This just gives us some visual separation around the button, to further indicate to the user the tappable area.
z-index: 999;

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019

Author Owner

This makes sure the nav menus or site title don't cover up the button, preventing the ability to click it.

&:before {
content: "";
display: block;
border-bottom: @thickness solid @menu-colour;
width: 100%;
margin-bottom: 5px;
&:focus {
outline: 1px dotted @text-bg-base;

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019 •
edited
Loading

Author Owner

We need to indicate focus state clearly for a11y.
box-shadow: none;
}

&:after {
content: "";
display: block;
border-bottom: @thickness solid @menu-colour;
width: 100%;
margin-bottom: 5px;
> span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019

Author Owner

The four lines above vertically and horizontally centre the hamburger icon inside of the button.
width: 24px;
height: 19px;

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019 •
edited
Loading

Author Owner

These widths/heights are arbitrary. I chose them because I think they create the right proportions in the hamburger icon.
border-bottom: @thickness solid @text-bg-base;
text-indent: -9999px;

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019

Author Owner

This will hide our text visually, making it accessible to screen readers but not visible to sighted users.
overflow: hidden;

&:before,
&:after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: @thickness;
background: @text-bg-base;
}

&:before {
top: 0;
}

&:after {
top: 8px;
}
}
}

.menu {
display: none;
border-top: 1px solid rgba(255,255,255,0.2);

@media (min-width: @screen-desktop) {
border-top: none;
}

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019

Author Owner

Again I've just added a small border that shows between the header and the menu when the menu is open, to define the areas visually.
}

.menu--isOpen {
display: block;

.pkp_navigation_primary_row {

ul li {
list-style: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
display: block;
text-align: left;
display: block;
text-align: left;
}

.pkp_navigation_primary {
Expand All @@ -98,6 +117,10 @@

@media (min-width: @screen-desktop) {

.pkp_head_wrapper {
padding-top: @triple * 2; // Make room for the user nav at the top
}

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019

Author Owner

I've moved this padding to desktop-only, since we want our mobile header to be just a thin strip at the top.
.toggle {
display: none;
}
Expand All @@ -121,10 +144,19 @@

// Site logo/name
.pkp_site_name {
font-size: 2em; // Prevents extra vertical space after logos
position: absolute;
left: @nav-menu-height;
right: 0;

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019

Author Owner

Here I've positioned the name directly adjacent to the button and let it fill up the remaining space. Having a fixed width is important for the ellipsis stuff below.
margin-top: 0;
margin-bottom: 0;
text-align: center;
padding-left: @base;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019

Author Owner

These three properties (overflow, text-overflow, white-space) set up in this way, when the element has a fixed width, will automatically crop text and add an ellipsis (...).

This is just an easy way to keep our header's fixed height in place. If a journal title is too long it will just be hidden gracefully.
color: @text-bg-base;
font-family: @font-site-title;
font-size: @font-sml;

> a {
padding-top: @base;
Expand Down Expand Up @@ -153,11 +185,9 @@

.is_text {
font-family: @font-site-title;
display: inline-block;
position: relative;
font-size: @font-header;
font-size: @font-sml;
font-weight: @bold;
line-height: @line-header;
line-height: @nav-menu-height;

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019

Author Owner

This will ensure our journal title is vertically centred in the header.
color: @text-bg-base;
text-decoration: none;

Expand All @@ -166,8 +196,20 @@
}
}

@media(min-width: @screen-desktop) {
text-align: left;
@media (min-width: @screen-desktop) {
position: relative;
left: auto;
right: auto;
padding: 0;
white-space: normal;
font-size: 2em; // Prevents extra vertical space after logos
background: transparent;

.is_text {
font-family: @font-site-title;
font-size: @font-header;
line-height: @line-header;
}

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019

Author Owner

These were the old properties for .pkp_site_name and .is_text. I've moved them down to the desktop so that the desktop view is not disrupted.
}
}

Expand Down Expand Up @@ -447,71 +489,74 @@
}

// User-focused navigation menu with login/logout, tasks, etc
.pkp_navigation_user_wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
padding-left: @base;
padding-right: @base;
}

.pkp_navigation_user {
text-align: right;
font-size: @font-sml;
padding-right: @double;
@media (min-width: @screen-desktop) {

This comment has been minimized.

Sign in to view

Copy link
@NateWr

NateWr Jul 16, 2019

Author Owner

All of this below is just moving the user nav styles into desktop. The user nav still needs to be styled for hte mobile nav, but this should make it easier by getting those styles out of the way.

li {
text-align: left;
.pkp_navigation_user_wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
padding-left: @base;
padding-right: @base;
}

a {
padding-top: @half;
padding-bottom: @half;
line-height: @line-sml;
}
.pkp_navigation_user {
text-align: right;
font-size: @font-sml;
padding-right: @double;

> li > a:focus {
outline: 0;
}
li {
text-align: left;
}

ul {
width: 10em;
}
a {
padding-top: @half;
padding-bottom: @half;
line-height: @line-sml;
}

> li > a,
> li.in_focus > a,
> li > a:hover,
> li > a:focus {
color: @text-bg-base;
}
> li > a:focus {
outline: 0;
}

// Align to the right edge of the container
> li:last-child > a {
padding-right: 0;
}
ul {
width: 10em;
}

.task_count {
display: inline-block;
width: 20px;
height: 20px;
margin-left: 0.5em;
border-radius: 50%;
background: rgba(255,255,255,0.3);
line-height: 20px;
text-align: center;
font-size: 12px; // helps visually center the number
}
> li > a,
> li.in_focus > a,
> li > a:hover,
> li > a:focus {
color: @text-bg-base;
}

> li > ul a {
// Align to the right edge of the container
> li:last-child > a {
padding-right: 0;
}

.task_count {
background: #ddd;
display: inline-block;
width: 20px;
height: 20px;
margin-left: 0.5em;
border-radius: 50%;
background: rgba(255,255,255,0.3);
line-height: 20px;
text-align: center;
font-size: 12px; // helps visually center the number
}

&:hover .task_count,
&:focus .task_count {
background: #fff;
> li > ul a {

.task_count {
background: #ddd;
}

&:hover .task_count,
&:focus .task_count {
background: #fff;
}
}
}
}
Expand Down

0 comments on commit e741ab2

Please sign in to comment.