Initial mobile improvements, including chat/list switch

.github/workflows/main.yml

@@ -0,0 +1,41 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+  workflow_dispatch:
+
+jobs:
+  page_build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Build
+      run: |
+        sudo apt update
+        sudo apt install -y node npm
+        sudo npm install -g yarn
+        cd matrix-js-sdk
+        yarn link
+        yarn install
+        cd ..
+        cd matrix-react-sdk
+        yarn link
+        yarn link matrix-js-sdk
+        yarn install
+        cd ..
+        cd element-web
+        yarn link matrix-js-sdk
+        yarn link matrix-react-sdk
+        yarn install
+        yarn build
+
+    - name: Deploy
+      uses: JamesIves/github-pages-deploy-action@v4
+      with:
+        folder: element-web/webapp

element-web/src/components/views/auth/VectorAuthPage.tsx

@@ -23,7 +23,7 @@ export default class VectorAuthPage extends React.PureComponent {
     private static welcomeBackgroundUrl?: string;
 
     // cache the url as a static to prevent it changing without refreshing
-    private static getWelcomeBackgroundUrl(): string {
+    /*private static getWelcomeBackgroundUrl(): string {
         if (VectorAuthPage.welcomeBackgroundUrl) return VectorAuthPage.welcomeBackgroundUrl;
 
         const brandingConfig = SdkConfig.getObject("branding");
@@ -40,11 +40,11 @@ export default class VectorAuthPage extends React.PureComponent {
         }
 
         return VectorAuthPage.welcomeBackgroundUrl;
-    }
+    }*/
 
     public render(): React.ReactElement {
         const pageStyle = {
-            background: `center/cover fixed url(${VectorAuthPage.getWelcomeBackgroundUrl()})`,
+            //background: `center/cover fixed url(${VectorAuthPage.getWelcomeBackgroundUrl()})`,
         };
 
         const modalStyle: React.CSSProperties = {

matrix-react-sdk/res/css/_common.pcss

@@ -321,7 +321,7 @@ legend {
     font-size: $font-15px;
     position: relative;
     padding: 24px;
-    max-height: 80%;
+    //max-height: 80%;
     box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
     border-radius: 8px;
     overflow-y: auto;
@@ -417,6 +417,10 @@ legend {
     max-width: 704px;
 }
 
+//.mx_LargeDialog {
+//    height: 100vh;
+//}
+
 .mx_Dialog_background {
     position: fixed;
     top: 0;

matrix-react-sdk/res/css/structures/_LeftPanel.pcss

@@ -24,7 +24,8 @@ limitations under the License.
 .mx_LeftPanel_outerWrapper {
     display: flex;
     flex-direction: column;
-    max-width: 50%;
+    //max-width: 50%;
+    width: 100vw;
     position: relative;
 
     /* Contain the amount of layers rendered by constraining what actually needs re-layering via css */
@@ -47,6 +48,7 @@ limitations under the License.
         display: flex;
         overflow: hidden;
         position: relative;
+        width: 100% !important;
 
         &[data-collapsed] {
             max-width: var(--collapsedWidth);

matrix-react-sdk/res/css/structures/_MatrixChat.pcss

@@ -48,6 +48,10 @@ limitations under the License.
 
     flex: 1;
     min-height: 0;
+
+    .mx_ResizeHandle {
+        display: none;
+    }
 }
 
 .mx_MatrixChat_syncError {

matrix-react-sdk/res/css/views/auth/_CompleteSecurityBody.pcss

@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 .mx_CompleteSecurityBody {
-    width: 600px;
+    //width: 600px;
     color: $authpage-primary-color;
     background-color: $background;
     border-radius: 4px;

matrix-react-sdk/res/css/views/dialogs/_SettingsDialog.pcss

@@ -22,7 +22,8 @@ limitations under the License.
     width: 90vw;
     max-width: 1000px;
     /* set the height too since tabbed view scrolls itself. */
-    height: 80vh;
+    //height: 80vh;
+    height: 100vh;
 
     .mx_TabbedView {
         top: 65px;

matrix-react-sdk/src/components/structures/HomePage.tsx

@@ -119,7 +119,7 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
         );
     }
 
-    return (
+    return (<div/>/*
         <AutoHideScrollbar className="mx_HomePage mx_HomePage_default" element="main">
             <div className="mx_HomePage_default_wrapper">
                 {introSection}
@@ -136,7 +136,7 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
                 </div>
             </div>
         </AutoHideScrollbar>
-    );
+    */);
 };
 
 export default HomePage;

matrix-react-sdk/src/components/structures/TabbedView.tsx

@@ -20,6 +20,7 @@ import * as React from "react";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
 
+import AccessibleButton from "../views/elements/AccessibleButton";
 import { _t, TranslationKey } from "../../languageHandler";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import { PosthogScreenTracker, ScreenName } from "../../PosthogTrackers";
@@ -139,6 +140,9 @@ export default class TabbedView<T extends string> extends React.Component<IProps
         const id = this.getTabId(tab);
         return (
             <div className="mx_TabbedView_tabPanel" key={id} id={id} aria-labelledby={`${id}_label`}>
+                <AccessibleButton
+                    className="mx_BaseCard_back"
+                />
                 <AutoHideScrollbar className="mx_TabbedView_tabPanelContent">{tab.body}</AutoHideScrollbar>
             </div>
         );

matrix-react-sdk/src/components/views/auth/AuthHeader.tsx

@@ -26,11 +26,11 @@ interface IProps {
 
 export default class AuthHeader extends React.Component<IProps> {
     public render(): React.ReactNode {
-        return (
+        return (<div/>) /*(
             <div className="mx_AuthHeader">
                 <AuthHeaderLogo />
                 <LanguageSelector disabled={this.props.disableLanguageSelector} />
             </div>
-        );
+        )*/;
     }
 }

matrix-react-sdk/src/components/views/dialogs/UserSettingsDialog.tsx

@@ -31,6 +31,7 @@ import HelpUserSettingsTab from "../settings/tabs/user/HelpUserSettingsTab";
 import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab";
 import { UIFeature } from "../../../settings/UIFeature";
 import BaseDialog from "./BaseDialog";
+//import LargeDialog from "./LargeDialog";
 import SidebarUserSettingsTab from "../settings/tabs/user/SidebarUserSettingsTab";
 import KeyboardUserSettingsTab from "../settings/tabs/user/KeyboardUserSettingsTab";
 import SessionManagerTab from "../settings/tabs/user/SessionManagerTab";

matrix-react-sdk/src/components/views/rooms/LegacyRoomHeader.tsx

@@ -841,6 +841,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
                 action: Action.ViewUserSettings,
                 initialTabId: UserTab.Labs,
             });
+
         const betaPill = isVideoRoom ? (
             <BetaPill onClick={viewLabs} tooltipTitle={_t("labs|video_rooms_beta")} />
         ) : null;
@@ -851,6 +852,15 @@ export default class RoomHeader extends React.Component<IProps, IState> {
                     className="mx_LegacyRoomHeader_wrapper"
                     aria-owns={this.state.rightPanelOpen ? "mx_RightPanel" : undefined}
                 >
+                    <AccessibleButton
+                        className="mx_LegacyRoomHeader_button mx_BaseCard_back"
+                        onClick={()=>{
+                        	document.getElementsByClassName('mx_LeftPanel_outerWrapper')[0].style.display="";
+                        	defaultDispatcher.dispatch<ViewRoomPayload>({
+								action: Action.ViewHomePage,
+							});
+                        }}
+                    />
                     <div className="mx_LegacyRoomHeader_avatar">{roomAvatar}</div>
                     {icon}
                     {name}

matrix-react-sdk/src/components/views/rooms/RoomTile.tsx

@@ -246,6 +246,7 @@ export class RoomTile extends React.PureComponent<ClassProps, State> {
             metricsTrigger: "RoomList",
             metricsViaKeyboard: ev.type !== "click",
         });
+        document.getElementsByClassName('mx_LeftPanel_outerWrapper')[0].style.display="none";
     };
 
     private onActiveRoomUpdate = (isActive: boolean): void => {