r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Increase hit area of dashboard switcher tabs

Browse source
This commit is contained in:
Andrew Nicolaou 2019-10-21 00:46:22 +02:00
parent 7e5613b2b4
commit 7137c7bd73
2 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/modules/User/components/DashboardTabSwitcher.jsx
View file

@ -12,7 +12,7 @@ const Tab = ({ children, isSelected, to }) => {
const selectedClassName = 'dashboard-header__tab--selected'; const selectedClassName = 'dashboard-header__tab--selected';
const location = { pathname: to, state: { skipSavingPath: true } }; const location = { pathname: to, state: { skipSavingPath: true } };
const content = isSelected ? children : <Link to={location}>{children}</Link>; const content = isSelected ? <span>{children}</span> : <Link to={location}>{children}</Link>;
return ( return (
<li className={`dashboard-header__tab ${isSelected && selectedClassName}`}> <li className={`dashboard-header__tab ${isSelected && selectedClassName}`}>
<h4 className="dashboard-header__tab__title"> <h4 className="dashboard-header__tab__title">

9
client/styles/components/_dashboard-header.scss
View file

@ -33,7 +33,7 @@
color: getThemifyVariable('inactive-text-color'); color: getThemifyVariable('inactive-text-color');
border-bottom: #{4 / $base-font-size}rem solid transparent; border-bottom: #{4 / $base-font-size}rem solid transparent;
padding: 0 0 #{8 / $base-font-size}rem 0; padding: 0;
margin-right: #{26 / $base-font-size}rem; margin-right: #{26 / $base-font-size}rem;
&:hover, &:focus, &.dashboard-header__tab--selected { &:hover, &:focus, &.dashboard-header__tab--selected {
@ -56,7 +56,12 @@
.dashboard-header__tab__title { .dashboard-header__tab__title {
margin: 0; margin: 0;
padding: 0 #{5 /$base-font-size}rem; padding: 0;
}
.dashboard-header__tab__title > * {
display: inline-block;
padding: 0 #{5 /$base-font-size}rem #{5 /$base-font-size}rem;
} }
.dashboard-header__nav { .dashboard-header__nav {