Merge pull request #560 from acelaya-forks/feature/logo-alignment

Feature/logo alignment
This commit is contained in:
Alejandro Celaya 2022-01-08 10:30:26 +01:00 committed by GitHub
commit 8d6e93ea4f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 3 deletions

View file

@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org). The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
## [Unreleased]
### Added
* *Nothing*
### Changed
* *Nothing*
### Deprecated
* *Nothing*
### Removed
* *Nothing*
### Fixed
* [#555](https://github.com/shlinkio/shlink-web-client/issues/555) Fixed vertical alignment in welcome screen logo.
## [3.5.0] - 2022-01-01 ## [3.5.0] - 2022-01-01
### Added ### Added
* [#407](https://github.com/shlinkio/shlink-web-client/pull/407) Improved how visits (short URLs, tags and orphan) are loaded, to avoid ending up in a page with "There are no visits matching current filter". * [#407](https://github.com/shlinkio/shlink-web-client/pull/407) Improved how visits (short URLs, tags and orphan) are loaded, to avoid ending up in a page with "There are no visits matching current filter".

View file

@ -12,8 +12,16 @@
} }
} }
.home__logo-wrapper {
padding: 1.5rem !important;
height: 100% !important;
min-height: 300px;
}
.home__logo { .home__logo {
@include vertical-align(); @include vertical-align();
width: calc(100% - 3rem);
} }
.home__main-card { .home__main-card {
@ -25,6 +33,11 @@
} }
} }
.home__title-wrapper {
padding: 1.5rem !important;
border-bottom: 1px solid var(--border-color);
}
.home__title { .home__title {
text-align: center; text-align: center;
font-size: 1.75rem; font-size: 1.75rem;

View file

@ -30,12 +30,14 @@ const Home = ({ servers, history }: HomeProps) => {
<Card className="home__main-card"> <Card className="home__main-card">
<Row noGutters> <Row noGutters>
<div className="col-md-5 d-none d-md-block"> <div className="col-md-5 d-none d-md-block">
<div className="p-4"> <div className="home__logo-wrapper">
<ShlinkLogo /> <div className="home__logo">
<ShlinkLogo />
</div>
</div> </div>
</div> </div>
<div className="col-md-7 home__servers-container"> <div className="col-md-7 home__servers-container">
<div className="p-4"> <div className="home__title-wrapper">
<h1 className="home__title">Welcome!</h1> <h1 className="home__title">Welcome!</h1>
</div> </div>
<ServersListGroup embedded servers={serversList}> <ServersListGroup embedded servers={serversList}>