luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Very basic mobile support: viewport, padding, dialogs

Browse source
This commit is contained in:
Chen-I Lim 2020-11-19 14:50:17 -08:00
parent cc065ef869
commit f87c811fbc
8 changed files with 89 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webapp/html-templates/page.ejs
View file

@ -3,7 +3,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title> <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'>
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="/static/easymde.min.css"> <link rel="stylesheet" href="/static/easymde.min.css">
</head> </head>

34
webapp/src/components/dialog.scss
View file

@ -17,13 +17,24 @@
background-color: rgb(var(--main-bg)); background-color: rgb(var(--main-bg));
border-radius: 3px; border-radius: 3px;
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px; 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; padding: 0;
max-width: 975px;
height: calc(100% - 144px);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; 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 { > .banner {
background-color: rgba(230, 220, 192, 0.9); background-color: rgba(230, 220, 192, 0.9);
text-align: center; text-align: center;
@ -33,13 +44,26 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 30px; 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 { > .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; 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 { > .content.fullwidth {
padding: 10px 0 10px 0; padding: 10px 0 10px 0;

23
webapp/src/components/dialog.tsx
View file

@ -2,10 +2,10 @@
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React from 'react' import React from 'react'
import MenuWrapper from '../widgets/menuWrapper'
import OptionsIcon from '../widgets/icons/options'
import IconButton from '../widgets/buttons/iconButton' 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' import './dialog.scss'
type Props = { type Props = {
@ -23,17 +23,13 @@ export default class Dialog extends React.PureComponent<Props> {
document.removeEventListener('keydown', this.keydownHandler) document.removeEventListener('keydown', this.keydownHandler)
} }
private close(): void {
this.props.onClose()
}
private keydownHandler = (e: KeyboardEvent): void => { private keydownHandler = (e: KeyboardEvent): void => {
if (e.target !== document.body) { if (e.target !== document.body) {
return return
} }
if (e.keyCode === 27) { if (e.keyCode === 27) {
this.close() this.closeClicked()
e.stopPropagation() e.stopPropagation()
} }
} }
@ -46,13 +42,18 @@ export default class Dialog extends React.PureComponent<Props> {
className='Dialog dialog-back' className='Dialog dialog-back'
onMouseDown={(e) => { onMouseDown={(e) => {
if (e.target === e.currentTarget) { if (e.target === e.currentTarget) {
this.close() this.closeClicked()
} }
}} }}
> >
<div className='dialog' > <div className='dialog' >
{toolsMenu && {toolsMenu &&
<div className='toolbar'> <div className='toolbar'>
<IconButton
onClick={this.closeClicked}
icon={<CloseIcon/>}
title={'Close dialog'}
/>
<div className='octo-spacer'/> <div className='octo-spacer'/>
<MenuWrapper> <MenuWrapper>
<IconButton icon={<OptionsIcon/>}/> <IconButton icon={<OptionsIcon/>}/>
@ -64,4 +65,8 @@ export default class Dialog extends React.PureComponent<Props> {
</div> </div>
) )
} }
private closeClicked = () => {
this.props.onClose()
}
} }

2
webapp/src/components/sidebar.scss
View file

@ -13,7 +13,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 15; z-index: 5;
min-height: 0; min-height: 0;
height: 50px; height: 50px;
width: 50px; width: 50px;

18
webapp/src/styles/main.scss
View file

@ -99,7 +99,11 @@ hr {
flex-direction: column; flex-direction: column;
overflow: scroll; overflow: scroll;
padding: 10px 95px 50px 95px; padding: 10px 95px 50px 95px;
@media screen and (max-width: 768px) {
padding: 10px 10px 50px 10px;
}
} }
.dragover { .dragover {
@ -189,7 +193,13 @@ hr {
align-items: flex-start; align-items: flex-start;
width: 100%; 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; flex: 1 1 auto;
@ -207,5 +217,7 @@ hr {
padding-top: 10px; padding-top: 10px;
padding-right: 10px; padding-right: 10px;
width: 126px; @media not screen and (max-width: 768px) {
width: 126px;
}
} }

2
webapp/src/widgets/buttons/iconButton.tsx
View file

@ -10,7 +10,7 @@ type Props = {
icon?: React.ReactNode icon?: React.ReactNode
} }
export default class Button extends React.PureComponent<Props> { export default class IconButton extends React.PureComponent<Props> {
render(): JSX.Element { render(): JSX.Element {
return ( return (
<div <div

7
webapp/src/widgets/icons/close.scss Normal file
View file

@ -0,0 +1,7 @@
.CloseIcon {
stroke: rgb(var(--main-fg), 0.5);
stroke-width: 4px;
fill: none;
width: 24px;
height: 24px;
}

19
webapp/src/widgets/icons/close.tsx Normal file
View file

@ -0,0 +1,19 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import './close.scss'
export default function CloseIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='CloseIcon Icon'
viewBox='0 0 100 100'
>
<polyline points='30,30 70,70'/>
<polyline points='70,30 30,70'/>
</svg>
)
}