mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-05 15:57:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fixed left menu responsiveness

Browse source
This commit is contained in:
Alejandro Celaya 2018-08-05 08:28:16 +02:00
parent 9575107848
commit c1880125b3
5 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common/AsideMenu.js
View file

@ -15,7 +15,7 @@ export default function AsideMenu({ selectedServer, history }) {
}; };
return ( return (
<aside className="aside-menu col-md-2 col-sm-2"> <aside className="aside-menu col-lg-2 col-md-3">
<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"

10
src/common/AsideMenu.scss
View file

@ -1,7 +1,11 @@
@import "../utils/base"; @import "../utils/base";
@import "../utils/mixins/border-radius";
.aside-menu { .aside-menu {
background-color: #f7f7f7;
padding-top: 10px;
padding-bottom: 10px;
@media (min-width: $mdMin) {
position: fixed !important; position: fixed !important;
top: $headerHeight; top: $headerHeight;
bottom: 0; bottom: 0;
@ -11,8 +15,8 @@
padding: 30px 15px 15px; padding: 30px 15px 15px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
background-color: #f7f7f7;
border-right: 1px solid #eee; border-right: 1px solid #eee;
}
} }
.aside-menu__nav { .aside-menu__nav {
@ -47,9 +51,7 @@
.aside-menu__item--danger { .aside-menu__item--danger {
color: $dangerColor; color: $dangerColor;
margin: 0;
margin-top: auto; margin-top: auto;
@include border-radius(4px);
} }
.aside-menu__item--danger:hover { .aside-menu__item--danger:hover {
color: #fff; color: #fff;

2
src/common/DateInput.js
View file

@ -2,7 +2,7 @@ import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import React from 'react'; import React from 'react';
import DatePicker from 'react-datepicker'; import DatePicker from 'react-datepicker';
import './DateContainer.scss'; import './DateInput.scss';
export default class DateInput extends React.Component { export default class DateInput extends React.Component {
constructor(props) { constructor(props) {

0
src/common/DateContainer.scss → src/common/DateInput.scss
View file

2
src/common/MenuLayout.js
View file

@ -19,7 +19,7 @@ export class MenuLayout extends React.Component {
return ( return (
<div className="row"> <div className="row">
<AsideMenu {...this.props} /> <AsideMenu {...this.props} />
<div className="col-md-10 offset-md-2 col-sm-9 offset-sm-3"> <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3">
<Switch> <Switch>
<Route <Route
exact exact