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 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 (
<li className={`dashboard-header__tab ${isSelected && selectedClassName}`}>
<h4 className="dashboard-header__tab__title">

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

@ -33,7 +33,7 @@
color: getThemifyVariable('inactive-text-color');
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;
&:hover, &:focus, &.dashboard-header__tab--selected {
@ -56,7 +56,12 @@
.dashboard-header__tab__title {
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 {