mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 17:40:23 +03:00
Restyled cards, background and shadows
This commit is contained in:
parent
bf1b59c0d8
commit
143a05cab1
10 changed files with 26 additions and 14 deletions
|
@ -4,7 +4,8 @@
|
||||||
$asideMenuMobileWidth: 280px;
|
$asideMenuMobileWidth: 280px;
|
||||||
|
|
||||||
.aside-menu {
|
.aside-menu {
|
||||||
background-color: #f7f7f7;
|
background-color: white;
|
||||||
|
box-shadow: rgba(0, 0, 0, .05) 0 8px 15px;
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
padding-top: 13px;
|
padding-top: 13px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
|
|
|
@ -6,6 +6,7 @@ html,
|
||||||
body,
|
body,
|
||||||
#root {
|
#root {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background: #f5f6fe;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
@ -16,6 +17,18 @@ body,
|
||||||
background-color: $mainColor !important;
|
background-color: $mainColor !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-footer {
|
||||||
|
background-color: rgba(255, 255, 255, .5);
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown-item:not(:disabled) {
|
.dropdown-item:not(:disabled) {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 color="light">
|
<Card className="overview__card mb-2" body>
|
||||||
<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 color="light">
|
<Card className="overview__card mb-2" body>
|
||||||
<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 color="light">
|
<Card className="overview__card mb-2" body>
|
||||||
<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>
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
.servers-list__list-group {
|
.servers-list__list-group {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
|
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
|
||||||
}
|
}
|
||||||
|
|
||||||
.servers-list__server-item.servers-list__server-item {
|
.servers-list__server-item.servers-list__server-item {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.short-urls-paginator {
|
.short-urls-paginator {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background-color: rgba(white, .8);
|
background-color: rgba(255, 255, 255, .5);
|
||||||
padding: .75rem 0;
|
padding: .75rem 0;
|
||||||
border-top: 1px solid rgba(black, .125);
|
border-top: 1px solid rgba(black, .125);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { FC, useEffect, useState } from 'react';
|
import { FC, useEffect, useState } from 'react';
|
||||||
|
import { Card } from 'reactstrap';
|
||||||
import Paginator from './Paginator';
|
import Paginator from './Paginator';
|
||||||
import { ShortUrlsListProps } from './ShortUrlsList';
|
import { ShortUrlsListProps } from './ShortUrlsList';
|
||||||
|
|
||||||
|
@ -17,10 +18,10 @@ const ShortUrls = (SearchBar: FC, ShortUrlsList: FC<ShortUrlsListProps>) => (pro
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="form-group"><SearchBar /></div>
|
<div className="form-group"><SearchBar /></div>
|
||||||
<div>
|
<Card body className="pb-1">
|
||||||
<ShortUrlsList {...props} key={urlsListKey} />
|
<ShortUrlsList {...props} key={urlsListKey} />
|
||||||
<Paginator paginator={pagination} serverId={serverId} />
|
<Paginator paginator={pagination} serverId={serverId} />
|
||||||
</div>
|
</Card>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -30,7 +30,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
|
||||||
const orderableColumnsClasses = classNames('short-urls-table__header-cell', {
|
const orderableColumnsClasses = classNames('short-urls-table__header-cell', {
|
||||||
'short-urls-table__header-cell--with-action': !!orderByColumn,
|
'short-urls-table__header-cell--with-action': !!orderByColumn,
|
||||||
});
|
});
|
||||||
const tableClasses = classNames('table table-striped table-hover', className);
|
const tableClasses = classNames('table table-hover', className);
|
||||||
|
|
||||||
const renderShortUrls = () => {
|
const renderShortUrls = () => {
|
||||||
if (error) {
|
if (error) {
|
||||||
|
|
|
@ -2,10 +2,6 @@
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag-card__header.tag-card__header {
|
|
||||||
background-color: #eeeeee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-card__header.tag-card__header,
|
.tag-card__header.tag-card__header,
|
||||||
.tag-card__body.tag-card__body {
|
.tag-card__body.tag-card__body {
|
||||||
padding: .75rem;
|
padding: .75rem;
|
||||||
|
|
|
@ -30,7 +30,7 @@ interface MessageProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
const Message: FC<MessageProps> = ({ children, loading = false, noMargin = false, type = 'default' }) => {
|
const Message: FC<MessageProps> = ({ children, loading = false, noMargin = false, type = 'default' }) => {
|
||||||
const cardClasses = classNames('bg-light', getClassForType(type), { 'mt-4': !noMargin });
|
const cardClasses = classNames(getClassForType(type), { 'mt-4': !noMargin });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="col-md-10 offset-md-1">
|
<div className="col-md-10 offset-md-1">
|
||||||
|
|
|
@ -15,7 +15,7 @@ interface VisitsHeaderProps {
|
||||||
|
|
||||||
const VisitsHeader: FC<VisitsHeaderProps> = ({ visits, goBack, shortUrl, children, title }) => (
|
const VisitsHeader: FC<VisitsHeaderProps> = ({ visits, goBack, shortUrl, children, title }) => (
|
||||||
<header>
|
<header>
|
||||||
<Card className="bg-light" body>
|
<Card body>
|
||||||
<h2 className="d-flex justify-content-between align-items-center mb-0">
|
<h2 className="d-flex justify-content-between align-items-center mb-0">
|
||||||
<Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}>
|
<Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}>
|
||||||
<FontAwesomeIcon icon={faArrowLeft} />
|
<FontAwesomeIcon icon={faArrowLeft} />
|
||||||
|
|
Loading…
Reference in a new issue