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>
<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">
</head>

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

@ -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;

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

@ -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<Props> {
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<Props> {
className='Dialog dialog-back'
onMouseDown={(e) => {
if (e.target === e.currentTarget) {
this.close()
this.closeClicked()
}
}}
>
<div className='dialog' >
{toolsMenu &&
<div className='toolbar'>
<IconButton
onClick={this.closeClicked}
icon={<CloseIcon/>}
title={'Close dialog'}
/>
<div className='octo-spacer'/>
<MenuWrapper>
<IconButton icon={<OptionsIcon/>}/>
@ -64,4 +65,8 @@ export default class Dialog extends React.PureComponent<Props> {
</div>
)
}
private closeClicked = () => {
this.props.onClose()
}
}

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

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

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

@ -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;
}
}

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

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