mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-31 21:38:19 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improved responsiveness in visits page

Browse source
This commit is contained in:
Alejandro Celaya 2018-08-09 19:50:22 +02:00
parent c8e5dfad5a
commit 6f38538dea
2 changed files with 35 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/short-urls/ShortUrlVisits.js
View file

@ -1,15 +1,15 @@
import preloader from '@fortawesome/fontawesome-free-solid/faCircleNotch';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { isEmpty, mapObjIndexed, pick } from 'ramda';
import React from 'react';
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
import Moment from 'react-moment';
import { connect } from 'react-redux';
import { Card, CardBody, CardHeader, UncontrolledTooltip } from 'reactstrap';
import DateInput from '../common/DateInput';
import VisitsParser from '../visits/services/VisitsParser';
import { getShortUrlVisits } from './reducers/shortUrlVisits';
import './ShortUrlVisits.scss';
import preloader from '@fortawesome/fontawesome-free-solid/faCircleNotch'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { isEmpty, mapObjIndexed, pick } from 'ramda'
import React from 'react'
import { Doughnut, HorizontalBar } from 'react-chartjs-2'
import Moment from 'react-moment'
import { connect } from 'react-redux'
import { Card, CardBody, CardHeader, UncontrolledTooltip } from 'reactstrap'
import DateInput from '../common/DateInput'
import VisitsParser from '../visits/services/VisitsParser'
import { getShortUrlVisits } from './reducers/shortUrlVisits'
import './ShortUrlVisits.scss'
const MutedMessage = ({ children }) =>
<div className="col-md-10 offset-md-1">
@ -144,23 +144,24 @@ export class ShortUrlsVisits extends React.Component {
</Card>
</header>
<section>
<form onSubmit={e => e.preventDefault()} className="form-inline mt-4 float-md-right">
<label>Period</label>
<DateInput
selected={this.state.startDate}
placeholderText="Since"
onChange={date => this.setState({ startDate: date }, () => this.loadVisits())}
className="short-url-visits__date-input"
/>
<DateInput
selected={this.state.endDate}
placeholderText="Until"
onChange={date => this.setState({ endDate: date }, () => this.loadVisits())}
className="short-url-visits__date-input"
/>
</form>
<div className="clearfix" />
<section className="mt-4">
<div className="row">
<div className="col-xl-3 col-lg-4 col-md-6 offset-xl-6 offset-lg-4">
<DateInput
selected={this.state.startDate}
placeholderText="Since"
onChange={date => this.setState({ startDate: date }, () => this.loadVisits())}
/>
</div>
<div className="col-xl-3 col-lg-4 col-md-6">
<DateInput
selected={this.state.endDate}
placeholderText="Until"
onChange={date => this.setState({ endDate: date }, () => this.loadVisits())}
className="short-url-visits__date-input"
/>
</div>
</div>
</section>
<section>

6
src/short-urls/ShortUrlVisits.scss
View file

@ -1,3 +1,7 @@
@import '../utils/base';
.short-url-visits__date-input {
margin-left: 10px;
@media(max-width: $smMax) {
margin-top: 0.5rem;
}
}