mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improved aside styles

Browse source
This commit is contained in:
Alejandro Celaya 2018-07-20 22:20:58 +02:00
parent 168b24344e
commit f0c20a2d1a
2 changed files with 41 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/common/AsideMenu.js
View file

@ -6,44 +6,41 @@ import { NavLink } from 'react-router-dom';
import DeleteServerButton from '../servers/DeleteServerButton'; import DeleteServerButton from '../servers/DeleteServerButton';
import './AsideMenu.scss'; import './AsideMenu.scss';
export default class AsideMenu extends React.Component { export default function AsideMenu({ selectedServer, history }) {
render() { const serverId = selectedServer ? selectedServer.id : '';
const { selectedServer, history } = this.props; const isListShortUrlsActive = (match, { pathname }) => {
const serverId = selectedServer ? selectedServer.id : ''; // FIXME. Should use the 'match' params, but they are not being properly resolved. Investigate
const isListShortUrlsActive = (match, { pathname }) => { const serverIdFromPathname = pathname.split('/')[2];
// FIXME. Should use the 'match' params, but they are not being properly resolved. Investigate return serverIdFromPathname === serverId && pathname.indexOf('list-short-urls') !== -1;
const serverIdFromPathname = pathname.split('/')[2]; };
return serverIdFromPathname === serverId && pathname.indexOf('list-short-urls') !== -1;
};
return ( return (
<aside className="aside-menu col-md-2 col-sm-2"> <aside className="aside-menu col-md-2 col-sm-2">
<nav className="nav flex-column aside-menu__nav"> <nav className="nav flex-column aside-menu__nav">
<NavLink <NavLink
className="aside-menu__item" className="aside-menu__item"
activeClassName="aside-menu__item--selected" activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/list-short-urls/1`} to={`/server/${serverId}/list-short-urls/1`}
isActive={isListShortUrlsActive} isActive={isListShortUrlsActive}
> >
<FontAwesomeIcon icon={listIcon} /> <FontAwesomeIcon icon={listIcon} />
<span className="aside-menu__item-text">List short URLs</span> <span className="aside-menu__item-text">List short URLs</span>
</NavLink> </NavLink>
<NavLink <NavLink
className="aside-menu__item" className="aside-menu__item"
activeClassName="aside-menu__item--selected" activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/create-short-url`} to={`/server/${serverId}/create-short-url`}
> >
<FontAwesomeIcon icon={createIcon} /> <FontAwesomeIcon icon={createIcon} />
<span className="aside-menu__item-text">Create short code</span> <span className="aside-menu__item-text">Create short code</span>
</NavLink> </NavLink>
<span className="aside-menu__item--divider" />
<DeleteServerButton <DeleteServerButton
className="aside-menu__item aside-menu__item--danger" className="aside-menu__item aside-menu__item--danger"
history={history} history={history}
server={selectedServer} server={selectedServer}
/> />
</nav> </nav>
</aside> </aside>
); );
}
} }

7
src/common/AsideMenu.scss
View file

@ -8,7 +8,7 @@
left: 0; left: 0;
z-index: 1000; z-index: 1000;
display: block; display: block;
padding: 20px; padding: 30px 20px 20px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
background-color: #f7f7f7; background-color: #f7f7f7;
@ -16,7 +16,9 @@
} }
.aside-menu__nav { .aside-menu__nav {
margin-top: 10px; @media(min-width: $smMin) {
height: 100%;
}
} }
.aside-menu__item { .aside-menu__item {
@ -46,6 +48,7 @@
.aside-menu__item--danger { .aside-menu__item--danger {
color: $dangerColor; color: $dangerColor;
margin: 0; margin: 0;
margin-top: auto;
@include border-radius(4px); @include border-radius(4px);
} }
.aside-menu__item--danger:hover { .aside-menu__item--danger:hover {