mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Minor style improvements in overview page
This commit is contained in:
parent
8d5f7e942d
commit
20a9259109
5 changed files with 17 additions and 10 deletions
|
@ -1,4 +1,6 @@
|
||||||
@import './utils/base';
|
@import './utils/base';
|
||||||
|
@import 'node_modules/bootstrap/scss/bootstrap.scss';
|
||||||
|
@import './common/react-tagsinput.scss';
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body,
|
body,
|
||||||
|
|
|
@ -5,10 +5,8 @@ import { homepage } from '../package.json';
|
||||||
import container from './container';
|
import container from './container';
|
||||||
import store from './container/store';
|
import store from './container/store';
|
||||||
import { fixLeafletIcons } from './utils/helpers/leaflet';
|
import { fixLeafletIcons } from './utils/helpers/leaflet';
|
||||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
||||||
import 'react-datepicker/dist/react-datepicker.css';
|
import 'react-datepicker/dist/react-datepicker.css';
|
||||||
import 'leaflet/dist/leaflet.css';
|
import 'leaflet/dist/leaflet.css';
|
||||||
import './common/react-tagsinput.scss';
|
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
|
||||||
// This overwrites icons used for leaflet maps, fixing some issues caused by webpack while processing the CSS
|
// This overwrites icons used for leaflet maps, fixing some issues caused by webpack while processing the CSS
|
||||||
|
|
|
@ -37,7 +37,7 @@ export const Overview = (
|
||||||
const { loading, shortUrls } = shortUrlsList;
|
const { loading, shortUrls } = shortUrlsList;
|
||||||
const { loading: loadingTags } = tagsList;
|
const { loading: loadingTags } = tagsList;
|
||||||
const { loading: loadingVisits, visitsCount } = visitsOverview;
|
const { loading: loadingVisits, visitsCount } = visitsOverview;
|
||||||
const serverId = !isServerWithId(selectedServer) ? '' : selectedServer.id;
|
const serverId = isServerWithId(selectedServer) ? selectedServer.id : '';
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
listShortUrls({ itemsPerPage: 5, orderBy: { dateCreated: 'DESC' } });
|
listShortUrls({ itemsPerPage: 5, orderBy: { dateCreated: 'DESC' } });
|
||||||
|
@ -49,13 +49,13 @@ export const Overview = (
|
||||||
<>
|
<>
|
||||||
<div className="row mb-3">
|
<div className="row mb-3">
|
||||||
<div className="col-sm-4">
|
<div className="col-sm-4">
|
||||||
<Card className="overview__card mb-2" body>
|
<Card className="overview__card mb-2" body color="light">
|
||||||
<CardTitle tag="h5" className="overview__card-title">Visits</CardTitle>
|
<CardTitle tag="h5" className="overview__card-title">Visits</CardTitle>
|
||||||
<CardText tag="h2">{loadingVisits ? 'Loading...' : prettify(visitsCount)}</CardText>
|
<CardText tag="h2">{loadingVisits ? 'Loading...' : prettify(visitsCount)}</CardText>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-sm-4">
|
<div className="col-sm-4">
|
||||||
<Card className="overview__card mb-2" body>
|
<Card className="overview__card mb-2" body color="light">
|
||||||
<CardTitle tag="h5" className="overview__card-title">Short URLs</CardTitle>
|
<CardTitle tag="h5" className="overview__card-title">Short URLs</CardTitle>
|
||||||
<CardText tag="h2">
|
<CardText tag="h2">
|
||||||
{loading ? 'Loading...' : prettify(shortUrls?.pagination.totalItems ?? 0)}
|
{loading ? 'Loading...' : prettify(shortUrls?.pagination.totalItems ?? 0)}
|
||||||
|
@ -63,7 +63,7 @@ export const Overview = (
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-sm-4">
|
<div className="col-sm-4">
|
||||||
<Card className="overview__card mb-2" body>
|
<Card className="overview__card mb-2" body color="light">
|
||||||
<CardTitle tag="h5" className="overview__card-title">Tags</CardTitle>
|
<CardTitle tag="h5" className="overview__card-title">Tags</CardTitle>
|
||||||
<CardText tag="h2">{loadingTags ? 'Loading...' : prettify(tagsList.tags.length)}</CardText>
|
<CardText tag="h2">{loadingTags ? 'Loading...' : prettify(tagsList.tags.length)}</CardText>
|
||||||
</Card>
|
</Card>
|
||||||
|
@ -71,7 +71,8 @@ export const Overview = (
|
||||||
</div>
|
</div>
|
||||||
<Card className="mb-4">
|
<Card className="mb-4">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
Create a short URL
|
<span className="d-sm-none">Create a short URL</span>
|
||||||
|
<h5 className="d-none d-sm-inline">Create a short URL</h5>
|
||||||
<Link className="float-right" to={`/server/${serverId}/create-short-url`}>Advanced options »</Link>
|
<Link className="float-right" to={`/server/${serverId}/create-short-url`}>Advanced options »</Link>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
@ -80,7 +81,8 @@ export const Overview = (
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
Recently created URLs
|
<span className="d-sm-none">Recently created URLs</span>
|
||||||
|
<h5 className="d-none d-sm-inline">Recently created URLs</h5>
|
||||||
<Link className="float-right" to={`/server/${serverId}/list-short-urls/1`}>See all »</Link>
|
<Link className="float-right" to={`/server/${serverId}/list-short-urls/1`}>See all »</Link>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
|
|
@ -106,7 +106,7 @@ const CreateShortUrl = (
|
||||||
<Input
|
<Input
|
||||||
bsSize="lg"
|
bsSize="lg"
|
||||||
type="url"
|
type="url"
|
||||||
placeholder="Insert the URL to be shortened"
|
placeholder="URL to be shortened"
|
||||||
required
|
required
|
||||||
value={shortUrlCreation.longUrl}
|
value={shortUrlCreation.longUrl}
|
||||||
onChange={(e) => setShortUrlCreation({ ...shortUrlCreation, longUrl: e.target.value })}
|
onChange={(e) => setShortUrlCreation({ ...shortUrlCreation, longUrl: e.target.value })}
|
||||||
|
|
|
@ -19,3 +19,8 @@ $mediumGrey: #dee2e6;
|
||||||
$headerHeight: 57px;
|
$headerHeight: 57px;
|
||||||
$footer-height: 2.3rem;
|
$footer-height: 2.3rem;
|
||||||
$footer-margin: .8rem;
|
$footer-margin: .8rem;
|
||||||
|
|
||||||
|
// Bootstrap overwrites
|
||||||
|
//$theme-colors: (
|
||||||
|
// 'primary': $mainColor
|
||||||
|
//);
|
||||||
|
|
Loading…
Reference in a new issue