Simplify styles in home page with flex utilities

This commit is contained in:
Alejandro Celaya 2024-10-19 14:14:31 +02:00
parent dcac312d86
commit 9094c1d23f
4 changed files with 26 additions and 65 deletions

View file

@ -66,7 +66,7 @@ const App: FCWithDeps<AppProps, AppDeps> = (
<MainHeader /> <MainHeader />
<div className="app"> <div className="app">
<div className={clsx('shlink-wrapper', { 'd-flex d-md-block align-items-center': isHome })}> <div className={clsx('shlink-wrapper', { 'd-flex align-items-center pt-3': isHome })}>
<Routes> <Routes>
<Route index element={<Home />} /> <Route index element={<Home />} />
<Route path="/settings/*" element={<Settings />} /> <Route path="/settings/*" element={<Settings />} />

View file

@ -1,50 +1,7 @@
@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/base'; @import 'node_modules/@shlinkio/shlink-frontend-kit/dist/base';
@import '../utils/mixins/vertical-align';
$mainCardWidth: 720px;
$fiveColumnsSize: .4167; // 12 / 5 -> Can't use "/" operator in latest dart-sass
.home {
position: relative;
padding-top: 15px;
width: 100%;
@media (min-width: $mdMin) {
padding-top: 0;
height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
}
}
.home__logo-wrapper {
padding: 1.5rem !important;
height: 100% !important;
min-height: 300px;
}
.home__logo {
@include vertical-align();
width: calc(#{$mainCardWidth * $fiveColumnsSize} - 3rem);
}
.home__main-card {
margin: 0 auto;
max-width: $mainCardWidth;
@media (min-width: $mdMin) {
@include vertical-align();
}
}
.home__title-wrapper {
padding: 1.5rem !important;
border-bottom: 1px solid var(--border-color);
}
.home__title { .home__title {
text-align: center;
font-size: 1.75rem; font-size: 1.75rem;
margin: 0;
@media (min-width: $mdMin) { @media (min-width: $mdMin) {
font-size: 2.2rem; font-size: 2.2rem;

View file

@ -1,9 +1,10 @@
import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons'; import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { clsx } from 'clsx';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { ExternalLink } from 'react-external-link'; import { ExternalLink } from 'react-external-link';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { Card, Row } from 'reactstrap'; import { Card } from 'reactstrap';
import type { ServersMap } from '../servers/data'; import type { ServersMap } from '../servers/data';
import { ServersListGroup } from '../servers/ServersListGroup'; import { ServersListGroup } from '../servers/ServersListGroup';
import { ShlinkLogo } from './img/ShlinkLogo'; import { ShlinkLogo } from './img/ShlinkLogo';
@ -27,33 +28,36 @@ export const Home = ({ servers }: HomeProps) => {
}, [serversList, navigate]); }, [serversList, navigate]);
return ( return (
<div className="home"> <div className="w-100">
<Card className="home__main-card"> <Card className="mx-auto" style={{ maxWidth: '720px' }}>
<Row className="g-0"> <div className="d-flex flex-column flex-md-row">
<div className="col-md-5 d-none d-md-block"> <div className="p-4 d-none d-md-flex align-items-center" style={{ width: '40%' }}>
<div className="home__logo-wrapper"> <div className="w-100">
<div className="home__logo">
<ShlinkLogo /> <ShlinkLogo />
</div> </div>
</div> </div>
</div>
<div className="col-md-7 home__servers-container"> <div className="home__servers-container flex-grow-1">
<div className="home__title-wrapper"> <h1
<h1 className="home__title">Welcome!</h1> className={clsx('home__title p-4 text-center m-0', { 'border-bottom': !hasServers })}
</div> style={{ borderColor: 'var(--border-color) !important' }}
>
Welcome!
</h1>
<ServersListGroup embedded servers={serversList}> <ServersListGroup embedded servers={serversList}>
{!hasServers && ( {!hasServers && (
<div className="p-4 text-center"> <div className="p-4 text-center d-flex flex-column gap-5">
<p className="mb-5">This application will help you manage your Shlink servers.</p> <p className="mb-0">This application will help you manage your Shlink servers.</p>
<p> <p className="mb-0">
<Link to="/server/create" className="btn btn-outline-primary btn-lg me-2"> <Link to="/server/create" className="btn btn-outline-primary btn-lg me-2">
<FontAwesomeIcon icon={faPlus} /> <span className="ms-1">Add a server</span> <FontAwesomeIcon icon={faPlus}/> <span className="ms-1">Add a server</span>
</Link> </Link>
</p> </p>
<p className="mb-0 mt-5"> <p className="mb-0">
<ExternalLink href="https://shlink.io/documentation"> <ExternalLink href="https://shlink.io/documentation">
<small> <small>
<span className="me-1">Learn more about Shlink</span> <FontAwesomeIcon icon={faExternalLinkAlt} /> <span className="me-2">Learn more about Shlink</span>
<FontAwesomeIcon icon={faExternalLinkAlt}/>
</small> </small>
</ExternalLink> </ExternalLink>
</p> </p>
@ -61,7 +65,7 @@ export const Home = ({ servers }: HomeProps) => {
)} )}
</ServersListGroup> </ServersListGroup>
</div> </div>
</Row> </div>
</Card> </Card>
</div> </div>
); );

View file

@ -56,7 +56,7 @@ describe('<App />', () => {
it.each([ it.each([
['/foo', 'shlink-wrapper'], ['/foo', 'shlink-wrapper'],
['/bar', 'shlink-wrapper'], ['/bar', 'shlink-wrapper'],
['/', 'shlink-wrapper d-flex d-md-block align-items-center'], ['/', 'shlink-wrapper d-flex align-items-center pt-3'],
])('renders expected classes on shlink-wrapper based on current pathname', async (pathname, expectedClasses) => { ])('renders expected classes on shlink-wrapper based on current pathname', async (pathname, expectedClasses) => {
const { container } = await setUp(pathname); const { container } = await setUp(pathname);
const shlinkWrapper = container.querySelector('.shlink-wrapper'); const shlinkWrapper = container.querySelector('.shlink-wrapper');