m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-18 15:23:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #424 from meirroth/master

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/layout/Header.js
View File

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

10
components/layout/Header.module.css
View File

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