Merge pull request #424 from meirroth/master

Mobile Header UI Improvement
This commit is contained in:
Mike Cao 2021-01-04 15:58:14 -08:00 committed by GitHub
commit 3ca9f03ce6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 9 deletions

View File

@ -18,13 +18,13 @@ export default function Header() {
<header className="container">
{user?.is_admin && <UpdateNotice />}
<div className={classNames(styles.header, 'row align-items-center')}>
<div className="col-12 col-md-12 col-lg-3">
<div className="col-6 col-lg-3 order-1 order-lg-1">
<div className={styles.title}>
<Icon icon={<Logo />} size="large" className={styles.logo} />
<Link href={user ? '/' : 'https://umami.is'}>umami</Link>
</div>
</div>
<div className="col-12 col-md-12 col-lg-6">
<div className="col-12 col-lg-6 order-3 order-lg-2">
{user && (
<div className={styles.nav}>
<Link href="/dashboard">
@ -39,7 +39,7 @@ export default function Header() {
</div>
)}
</div>
<div className="col-12 col-md-12 col-lg-3">
<div className="col-6 col-lg-3 order-2 order-lg-3">
<div className={styles.buttons}>
<ThemeButton />
<LanguageButton menuAlign="right" />

View File

@ -33,17 +33,15 @@
}
@media only screen and (max-width: 992px) {
.title {
justify-content: center;
}
.nav {
font-size: var(--font-size-large);
justify-content: center;
padding: 20px 0;
}
}
.buttons {
justify-content: center;
@media only screen and (max-width: 576px) {
.header {
padding: 0 15px;
}
}