diff --git a/webapp/html-templates/page.ejs b/webapp/html-templates/page.ejs index 8c9756838..d81d8839a 100644 --- a/webapp/html-templates/page.ejs +++ b/webapp/html-templates/page.ejs @@ -3,7 +3,9 @@ - <%= htmlWebpackPlugin.options.title %> + + + <%= htmlWebpackPlugin.options.title %> diff --git a/webapp/src/components/dialog.scss b/webapp/src/components/dialog.scss index 9e909f03b..cb8f34234 100644 --- a/webapp/src/components/dialog.scss +++ b/webapp/src/components/dialog.scss @@ -17,13 +17,24 @@ background-color: rgb(var(--main-bg)); border-radius: 3px; box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px; - margin: 72px auto; padding: 0; - max-width: 975px; - height: calc(100% - 144px); overflow-x: hidden; overflow-y: auto; + + @media not screen and (max-width: 975px) { + margin: 72px auto; + max-width: 975px; + height: calc(100% - 144px); + } + @media screen and (max-width: 975px) { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + > .banner { background-color: rgba(230, 220, 192, 0.9); text-align: center; @@ -33,13 +44,26 @@ display: flex; flex-direction: row; height: 30px; - margin: 10px + margin: 10px; + + > .IconButton:first-child { + /* Hide close button on larger screens */ + @media not screen and (max-width: 975px) { + display: none; + } + } } > .content { display: flex; flex-direction: column; align-items: flex-start; - padding: 10px 126px 10px 126px; + + @media not screen and (max-width: 975px) { + padding: 10px 126px; + } + @media screen and (max-width: 975px) { + padding: 10px 10px; + } } > .content.fullwidth { padding: 10px 0 10px 0; diff --git a/webapp/src/components/dialog.tsx b/webapp/src/components/dialog.tsx index 85a26205c..4c5371177 100644 --- a/webapp/src/components/dialog.tsx +++ b/webapp/src/components/dialog.tsx @@ -2,10 +2,10 @@ // See LICENSE.txt for license information. import React from 'react' -import MenuWrapper from '../widgets/menuWrapper' -import OptionsIcon from '../widgets/icons/options' import IconButton from '../widgets/buttons/iconButton' - +import CloseIcon from '../widgets/icons/close' +import OptionsIcon from '../widgets/icons/options' +import MenuWrapper from '../widgets/menuWrapper' import './dialog.scss' type Props = { @@ -23,17 +23,13 @@ export default class Dialog extends React.PureComponent { document.removeEventListener('keydown', this.keydownHandler) } - private close(): void { - this.props.onClose() - } - private keydownHandler = (e: KeyboardEvent): void => { if (e.target !== document.body) { return } if (e.keyCode === 27) { - this.close() + this.closeClicked() e.stopPropagation() } } @@ -46,13 +42,18 @@ export default class Dialog extends React.PureComponent { className='Dialog dialog-back' onMouseDown={(e) => { if (e.target === e.currentTarget) { - this.close() + this.closeClicked() } }} >
{toolsMenu &&
+ } + title={'Close dialog'} + />
}/> @@ -64,4 +65,8 @@ export default class Dialog extends React.PureComponent {
) } + + private closeClicked = () => { + this.props.onClose() + } } diff --git a/webapp/src/components/sidebar.scss b/webapp/src/components/sidebar.scss index 9df4a3ed8..d2fdd0352 100644 --- a/webapp/src/components/sidebar.scss +++ b/webapp/src/components/sidebar.scss @@ -13,7 +13,7 @@ position: absolute; top: 0; left: 0; - z-index: 15; + z-index: 5; min-height: 0; height: 50px; width: 50px; diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss index 0f1a5bab3..63160fd39 100644 --- a/webapp/src/styles/main.scss +++ b/webapp/src/styles/main.scss @@ -99,7 +99,11 @@ hr { flex-direction: column; overflow: scroll; - padding: 10px 95px 50px 95px; + padding: 10px 95px 50px 95px; + + @media screen and (max-width: 768px) { + padding: 10px 10px 50px 10px; + } } .dragover { @@ -189,7 +193,13 @@ hr { align-items: flex-start; width: 100%; - padding-right: 126px; + + @media not screen and (max-width: 768px) { + padding-right: 126px; + } + @media screen and (max-width: 768px) { + padding-right: 10px; + } > * { flex: 1 1 auto; @@ -207,5 +217,7 @@ hr { padding-top: 10px; padding-right: 10px; - width: 126px; + @media not screen and (max-width: 768px) { + width: 126px; + } } diff --git a/webapp/src/widgets/buttons/iconButton.tsx b/webapp/src/widgets/buttons/iconButton.tsx index 2c10cdef4..53d21b93f 100644 --- a/webapp/src/widgets/buttons/iconButton.tsx +++ b/webapp/src/widgets/buttons/iconButton.tsx @@ -10,7 +10,7 @@ type Props = { icon?: React.ReactNode } -export default class Button extends React.PureComponent { +export default class IconButton extends React.PureComponent { render(): JSX.Element { return (
+ + + + ) +}