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

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

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