mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Renamed home-container CSS class to just home

Browse source
This commit is contained in:
Alejandro Celaya 2018-08-12 08:01:35 +02:00
parent f9773dbebe
commit 49f0109d20
2 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/common/Home.js
View file

@ -18,19 +18,19 @@ export class Home extends React.Component {
const hasServers = !isEmpty(servers); const hasServers = !isEmpty(servers);
return ( return (
<div className="home-container"> <div className="home">
<h1 className="home-container__title">Welcome to Shlink</h1> <h1 className="home__title">Welcome to Shlink</h1>
<h5 className="home-container__intro"> <h5 className="home__intro">
{hasServers && <span>Please, select a server.</span>} {hasServers && <span>Please, select a server.</span>}
{!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>} {!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
</h5> </h5>
{hasServers && ( {hasServers && (
<ListGroup className="home-container__servers-list"> <ListGroup className="home__servers-list">
{servers.map(({ name, id }) => ( {servers.map(({ name, id }) => (
<ListGroupItem tag={Link} to={`/server/${id}/list-short-urls/1`} className="home-container__servers-item"> <ListGroupItem tag={Link} to={`/server/${id}/list-short-urls/1`} className="home__servers-item">
{name} {name}
<FontAwesomeIcon icon={chevronIcon} className="home-container__servers-item-icon" /> <FontAwesomeIcon icon={chevronIcon} className="home__servers-item-icon" />
</ListGroupItem> </ListGroupItem>
))} ))}
</ListGroup> </ListGroup>

10
src/common/Home.scss
View file

@ -1,7 +1,7 @@
@import '../utils/base'; @import '../utils/base';
@import '../utils/mixins/vertical-align'; @import '../utils/mixins/vertical-align';
.home-container { .home {
text-align: center; text-align: center;
height: calc(100vh - #{$headerHeight}); height: calc(100vh - #{$headerHeight});
display: flex; display: flex;
@ -10,23 +10,23 @@
flex-flow: column; flex-flow: column;
} }
.home-container__title { .home__title {
font-size: 36px; font-size: 36px;
} }
.home-container__servers-list { .home__servers-list {
margin-top: 1rem; margin-top: 1rem;
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
} }
.home-container__servers-item.home-container__servers-item { .home__servers-item.home__servers-item {
text-align: left; text-align: left;
position: relative; position: relative;
padding: .75rem 2.5rem 0.75rem 1rem; padding: .75rem 2.5rem 0.75rem 1rem;
} }
.home-container__servers-item-icon { .home__servers-item-icon {
@include vertical-align(); @include vertical-align();
right: 1rem; right: 1rem;
} }