Make dialogs look better on mobile (#908)
* Standardize mobile media query * Refactor & add mobile support to dialogs * back & close iconspull/942/head
parent
c85315650f
commit
668f8ec4a6
@ -0,0 +1 @@
|
||||
$media-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
|
@ -0,0 +1,49 @@
|
||||
@import "../_variables";
|
||||
|
||||
.Dialog__title {
|
||||
--metric: calc(var(--space-factor) * 4);
|
||||
display: grid;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
grid-template-columns: 1fr calc(var(--space-factor) * 7);
|
||||
grid-gap: var(--metric);
|
||||
}
|
||||
|
||||
.Dialog__titleContent {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.Dialog .Modal__close {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media #{$media-query} {
|
||||
.Dialog__title {
|
||||
grid-template-columns: calc(var(--space-factor) * 7) 1fr calc(
|
||||
var(--space-factor) * 7
|
||||
);
|
||||
position: sticky;
|
||||
top: calc(-1 * var(--metric));
|
||||
margin: calc(-1 * var(--metric));
|
||||
margin-bottom: var(--metric);
|
||||
padding: calc(var(--space-factor) * 2) var(--metric);
|
||||
background: white;
|
||||
font-size: 1.25em;
|
||||
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #ccc;
|
||||
z-index: 1;
|
||||
}
|
||||
.Dialog__titleContent {
|
||||
text-align: center;
|
||||
}
|
||||
.Dialog .Island {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.Dialog .Modal__close {
|
||||
order: -1;
|
||||
}
|
||||
}
|
@ -0,0 +1,41 @@
|
||||
import React from "react";
|
||||
import { Modal } from "./Modal";
|
||||
import { Island } from "./Island";
|
||||
import { t } from "../i18n";
|
||||
import useIsMobile from "../is-mobile";
|
||||
import { back, close } from "./icons";
|
||||
|
||||
import "./Dialog.scss";
|
||||
|
||||
export function Dialog(props: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
maxWidth?: number;
|
||||
onCloseRequest(): void;
|
||||
closeButtonRef?: React.Ref<HTMLButtonElement>;
|
||||
title: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Modal
|
||||
className={`${props.className ?? ""} Dialog`}
|
||||
labelledBy="dialog-title"
|
||||
maxWidth={props.maxWidth}
|
||||
onCloseRequest={props.onCloseRequest}
|
||||
>
|
||||
<Island padding={4}>
|
||||
<h2 id="dialog-title" className="Dialog__title">
|
||||
<span className="Dialog__titleContent">{props.title}</span>
|
||||
<button
|
||||
className="Modal__close"
|
||||
onClick={props.onCloseRequest}
|
||||
aria-label={t("buttons.close")}
|
||||
ref={props.closeButtonRef}
|
||||
>
|
||||
{useIsMobile() ? back : close}
|
||||
</button>
|
||||
</h2>
|
||||
{props.children}
|
||||
</Island>
|
||||
</Modal>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue