CSS fixes for mobile.

This commit is contained in:
Mike Cao 2020-10-03 10:53:06 -07:00
parent 3d1dc08491
commit bba75fd67f
8 changed files with 35 additions and 11 deletions

View File

@ -12,6 +12,8 @@
.loading {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;

View File

@ -3,7 +3,7 @@
border: 1px solid var(--gray500);
border-radius: 4px;
overflow: hidden;
z-index: 2;
z-index: 100;
}
.option {

View File

@ -46,7 +46,7 @@ export default function MenuButton({
</Button>
{showMenu && (
<Menu
className={classNames(styles.menu, menuClassname)}
className={menuClassname}
options={options}
selectedOption={selectedOption}
onSelect={handleSelect}

View File

@ -9,10 +9,6 @@
border-radius: 4px;
}
.menu {
z-index: 100;
}
.text {
font-size: var(--font-size-small);
}

View File

@ -1,4 +1,5 @@
import React from 'react';
import classNames from 'classnames';
import { FormattedMessage } from 'react-intl';
import Link from 'components/common/Link';
import styles from './Footer.module.css';
@ -8,9 +9,9 @@ export default function Footer() {
const { current } = useVersion();
return (
<footer className="container">
<div className={styles.footer}>
<div />
<div>
<div className={classNames(styles.footer, 'row')}>
<div className="col-12 col-md-4" />
<div className="col-12 col-md-4">
<FormattedMessage
id="message.powered-by"
defaultMessage="Powered by {name}"
@ -23,7 +24,7 @@ export default function Footer() {
}}
/>
</div>
<div>{`v${current}`}</div>
<div className={classNames(styles.version, 'col-12 col-md-4')}>{`v${current}`}</div>
</div>
</footer>
);

View File

@ -4,4 +4,15 @@
align-items: center;
font-size: var(--font-size-small);
min-height: 100px;
text-align: center;
}
.version {
text-align: right;
}
@media only screen and (max-width: 768px) {
.version {
text-align: center;
}
}

View File

@ -1,6 +1,7 @@
.bar {
display: flex;
cursor: pointer;
min-height: 80px;
}
.bar > div + div {

View File

@ -8,5 +8,18 @@
.menu div {
border-radius: 5px;
min-width: 33%;
min-width: calc(100% / 3);
}
@media only screen and (max-width: 992px) {
.menu {
min-width: 90vw;
transform: translateX(calc(40vw));
}
}
@media only screen and (max-width: 768px) {
.menu div {
min-width: 50%;
}
}