GH-Mobile banner css (#1326)

* mobile banner via css

* remove comment

* fix lint

* fix bad merge

webapp/src/pages/boardPage.scss

@@ -14,6 +14,32 @@
     > .WSConnection.error {
         background-color: rgba(230, 192, 192, 0.9);
     }
+
+    > .mobileWarning {
+        background-color: rgba(230, 192, 192, 0.9);
+        text-align: center;
+        padding: 10px;
+        display: none;
+
+        div {
+            width: 100%;
+        }
+
+        .IconButton {
+            float: right;
+            width: 16px;
+            min-width: 16px;
+            height: 100%;
+
+            i {
+                font-size: 16px;
+            }
+        }
+    }
+
+    @media screen and (max-width: 768px) { 
+        .mobileWarning {display: flex;}
+    }
 }
 
 .Dialog.dialog-back.workspaceSwitcherModal > div > .dialog {

webapp/src/pages/boardPage.tsx

@@ -28,6 +28,9 @@ import {initialLoad, initialReadOnlyLoad} from '../store/initialLoad'
 import {useAppSelector, useAppDispatch} from '../store/hooks'
 import {UserSettings} from '../userSettings'
 
+import IconButton from '../widgets/buttons/iconButton'
+import CloseIcon from '../widgets/icons/close'
+
 type Props = {
     readonly?: boolean
 }
@@ -44,6 +47,7 @@ const BoardPage = (props: Props): JSX.Element => {
     const history = useHistory()
     const match = useRouteMatch<{boardId: string, viewId: string, cardId?: string, workspaceId?: string}>()
     const [websocketClosed, setWebsocketClosed] = useState(false)
+    const [mobileWarningClosed, setMobileWarningClosed] = useState(UserSettings.mobileWarningClosed)
 
     let workspaceId = match.params.workspaceId || UserSettings.lastWorkspaceId || '0'
 
@@ -255,6 +259,26 @@ const BoardPage = (props: Props): JSX.Element => {
                         />
                     </a>
                 </div>}
+
+            {!mobileWarningClosed &&
+                <div className='mobileWarning'>
+                    <div>
+                        <FormattedMessage
+                            id='Error.mobileweb'
+                            defaultMessage='Mobile web support is currently in early beta. Not all functionality may be present.'
+                        />
+                    </div>
+                    <IconButton
+                        onClick={() => {
+                            UserSettings.mobileWarningClosed = true
+                            setMobileWarningClosed(true)
+                        }}
+                        icon={<CloseIcon/>}
+                        title='Close'
+                        className='margin-right'
+                    />
+                </div>}
+
             {props.readonly && board === undefined &&
                 <div className='error'>
                     {intl.formatMessage({id: 'BoardPage.syncFailed', defaultMessage: 'Board may be deleted or access revoked.'})}

webapp/src/userSettings.ts

@@ -15,6 +15,7 @@ enum UserSettingKey {
     EmojiMartLast = 'emoji-mart.last',
     EmojiMartFrequently = 'emoji-mart.frequently',
     RandomIcons = 'randomIcons',
+    MobileWarningClosed = 'mobileWarningClosed',
     WelcomePageViewed = 'welcomePageViewed'
 }
 
@@ -103,6 +104,14 @@ export class UserSettings {
         Utils.assert((Object as any).values(UserSettingKey).includes(prefixed))
         UserSettings.set(prefixed as UserSettingKey, JSON.stringify(value))
     }
+
+    static get mobileWarningClosed(): boolean {
+        return UserSettings.get(UserSettingKey.MobileWarningClosed) === 'true'
+    }
+
+    static set mobileWarningClosed(newValue: boolean) {
+        UserSettings.set(UserSettingKey.MobileWarningClosed, String(newValue))
+    }
 }
 
 export function exportUserSettingsBlob(): string {