Minor style improvements in overview page

This commit is contained in:
Alejandro Celaya 2020-12-08 11:39:16 +01:00
parent 8d5f7e942d
commit 20a9259109
5 changed files with 17 additions and 10 deletions

View file

@ -1,4 +1,6 @@
@import './utils/base';
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import './common/react-tagsinput.scss';
html,
body,

View file

@ -5,10 +5,8 @@ import { homepage } from '../package.json';
import container from './container';
import store from './container/store';
import { fixLeafletIcons } from './utils/helpers/leaflet';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css';
import 'leaflet/dist/leaflet.css';
import './common/react-tagsinput.scss';
import './index.scss';
// This overwrites icons used for leaflet maps, fixing some issues caused by webpack while processing the CSS

View file

@ -37,7 +37,7 @@ export const Overview = (
const { loading, shortUrls } = shortUrlsList;
const { loading: loadingTags } = tagsList;
const { loading: loadingVisits, visitsCount } = visitsOverview;
const serverId = !isServerWithId(selectedServer) ? '' : selectedServer.id;
const serverId = isServerWithId(selectedServer) ? selectedServer.id : '';
useEffect(() => {
listShortUrls({ itemsPerPage: 5, orderBy: { dateCreated: 'DESC' } });
@ -49,13 +49,13 @@ export const Overview = (
<>
<div className="row mb-3">
<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>
<CardText tag="h2">{loadingVisits ? 'Loading...' : prettify(visitsCount)}</CardText>
</Card>
</div>
<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>
<CardText tag="h2">
{loading ? 'Loading...' : prettify(shortUrls?.pagination.totalItems ?? 0)}
@ -63,7 +63,7 @@ export const Overview = (
</Card>
</div>
<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>
<CardText tag="h2">{loadingTags ? 'Loading...' : prettify(tagsList.tags.length)}</CardText>
</Card>
@ -71,7 +71,8 @@ export const Overview = (
</div>
<Card className="mb-4">
<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 &raquo;</Link>
</CardHeader>
<CardBody>
@ -80,7 +81,8 @@ export const Overview = (
</Card>
<Card>
<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 &raquo;</Link>
</CardHeader>
<CardBody>

View file

@ -106,7 +106,7 @@ const CreateShortUrl = (
<Input
bsSize="lg"
type="url"
placeholder="Insert the URL to be shortened"
placeholder="URL to be shortened"
required
value={shortUrlCreation.longUrl}
onChange={(e) => setShortUrlCreation({ ...shortUrlCreation, longUrl: e.target.value })}

View file

@ -19,3 +19,8 @@ $mediumGrey: #dee2e6;
$headerHeight: 57px;
$footer-height: 2.3rem;
$footer-margin: .8rem;
// Bootstrap overwrites
//$theme-colors: (
// 'primary': $mainColor
//);