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

7
src/common/AsideMenu.js
View file

@ -6,9 +6,7 @@ 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 { selectedServer, history } = this.props;
const serverId = selectedServer ? selectedServer.id : ''; const serverId = selectedServer ? selectedServer.id : '';
const isListShortUrlsActive = (match, { pathname }) => { const isListShortUrlsActive = (match, { pathname }) => {
// FIXME. Should use the 'match' params, but they are not being properly resolved. Investigate // FIXME. Should use the 'match' params, but they are not being properly resolved. Investigate
@ -36,7 +34,7 @@ export default class AsideMenu extends React.Component {
<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}
@ -46,4 +44,3 @@ export default class AsideMenu extends React.Component {
</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 {