Adapt to different device widths (#401)

* Now adapting to small screen sizes, needs improvements

* Fix that site only gets into mobile mode when resized

* - Added navigation event triggered if user requests to return to navigation on compact screens
- People drawer wont be shown on compact screens
  - Still accessible using settings
  - would be duplicated UI
- mobileSize is now compactSize

* Put threshold for collapsing the base UI in a shared file

* Switch to a more simple solution using CSS media queries over JS
- Move back button to the left a bit so it doesnt get in touch with room icon

* switch from component-individual-thresholds to device-type thresholds
- <750px: Mobile
- <900px: Tablet
- >900px: Desktop

* Make Settings drawer component collapse on mobile

* Fix EmojiBoard not showing up and messing up UI when screen is smaller than 360px

* Improve code quality; allow passing classNames to IconButton
- remove unnessesary div wrappers
- use dir.side where appropriate
- rename threshold and its mixins to more descriptive names
- Rename "OPEN_NAVIGATION" to "NAVIGATION_OPENED"

* - follow BEM methology
- remove ROOM_SELECTED listener
- rename NAVIGATION_OPENED to OPEN_NAVIGATION where appropriate
- this does NOT changes that ref should be used for changing visability

* Use ref to change visability to avoid re-rendering

* Use ref to change visability to avoid re-rendering

* Fix that room component is not hidden by default.
This resulted in a broken view when application is viewed in mobile size without having selected a room since loading.

* fix: leaving a room should bring one back to navigation

Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>

src/app/organisms/emoji-board/EmojiBoard.scss

@@ -6,6 +6,8 @@
   --emoji-board-height: 390px;
   --emoji-board-width: 286px;
   display: flex;
+  max-width: 90vw;
+  max-height: 90vh;
   
   &__content {
     @extend .cp-fx__item-one;

src/app/organisms/invite-list/InviteList.jsx

@@ -5,7 +5,7 @@ import './InviteList.scss';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import * as roomActions from '../../../client/action/room';
-import { selectRoom, selectTab } from '../../../client/action/navigation';
+import { selectRoom, selectTab, openNavigation } from '../../../client/action/navigation';
 
 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
@@ -28,6 +28,7 @@ function InviteList({ isOpen, onRequestClose }) {
     procInvite.add(roomId);
     changeProcInvite(new Set(Array.from(procInvite)));
     roomActions.leave(roomId, isDM);
+    openNavigation();
   }
   function updateInviteList(roomId) {
     if (procInvite.has(roomId)) procInvite.delete(roomId);

src/app/organisms/room/Room.jsx

@@ -3,9 +3,9 @@ import './Room.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
 import settings from '../../../client/state/settings';
 import RoomTimeline from '../../../client/state/RoomTimeline';
+import navigation from '../../../client/state/navigation';
 
 import Welcome from '../welcome/Welcome';
 import RoomView from './RoomView';
@@ -61,7 +61,7 @@ function Room() {
         <RoomSettings roomId={roomTimeline.roomId} />
         <RoomView roomTimeline={roomTimeline} eventId={eventId} />
       </div>
-      { isDrawer && <PeopleDrawer roomId={roomTimeline.roomId} />}
+      {isDrawer && <PeopleDrawer roomId={roomTimeline.roomId} />}
     </div>
   );
 }

src/app/organisms/room/Room.scss

@@ -1,4 +1,5 @@
 @use '../../partials/flex';
+@use '../../partials/screen';
 
 .room {
   @extend .cp-fx__row;
@@ -9,4 +10,10 @@
     position: relative;
     overflow: hidden;
   }
-}
+}
+
+.room .people-drawer {
+  @include screen.smallerThan(tabletBreakpoint) {
+    display: none;
+  }
+}

src/app/organisms/room/RoomSettings.jsx

@@ -7,7 +7,7 @@ import { blurOnBubbling } from '../../atoms/button/script';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import { openInviteUser, toggleRoomSettings } from '../../../client/action/navigation';
+import { openInviteUser, toggleRoomSettings, openNavigation } from '../../../client/action/navigation';
 import * as roomActions from '../../../client/action/room';
 
 import Text from '../../atoms/text/Text';
@@ -88,6 +88,7 @@ function GeneralSettings({ roomId }) {
           onClick={() => {
             if (confirm('Are you sure that you want to leave this room?')) {
               roomActions.leave(roomId);
+              openNavigation();
             }
           }}
           iconSrc={LeaveArrowIC}

src/app/organisms/room/RoomViewCmdBar.jsx

@@ -14,6 +14,7 @@ import {
   openCreateRoom,
   openPublicRooms,
   openInviteUser,
+  openNavigation,
 } from '../../../client/action/navigation';
 import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
 import AsyncSearch from '../../../util/AsyncSearch';
@@ -44,7 +45,10 @@ const commands = [{
 }, {
   name: 'leave',
   description: 'Leave current room',
-  exe: (roomId) => roomActions.leave(roomId),
+  exe: (roomId) => {
+    roomActions.leave(roomId);
+    openNavigation();
+  },
 }, {
   name: 'invite',
   isOptions: true,

src/app/organisms/room/RoomViewHeader.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import './RoomViewHeader.scss';
 
@@ -25,6 +25,7 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
+import BackArrowIC from '../../../../public/res/ic/outlined/chevron-left.svg';
 
 import { useForceUpdate } from '../../hooks/useForceUpdate';
 
@@ -73,6 +74,12 @@ function RoomViewHeader({ roomId }) {
 
   return (
     <Header>
+      <IconButton
+        src={BackArrowIC}
+        className="room-header__back-btn"
+        tooltip="Return to navigation"
+        onClick={() => navigation.emit(cons.events.navigation.NAVIGATION_OPENED)}
+      />
       <button
         ref={roomHeaderBtnRef}
         className="room-header__btn"
@@ -87,7 +94,7 @@ function RoomViewHeader({ roomId }) {
         <RawIcon src={ChevronBottomIC} />
       </button>
       <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />
-      <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
+      <IconButton className="room-header__drawer-btn" onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
       <IconButton
         onClick={openRoomOptions}
         tooltip="Options"

src/app/organisms/room/RoomViewHeader.scss

@@ -1,5 +1,6 @@
 @use '../../partials/flex';
 @use '../../partials/dir';
+@use '../../partials/screen';
 
 .room-header__btn {
   min-width: 0;
@@ -24,4 +25,18 @@
     box-shadow: var(--bs-surface-outline);
     outline: none;
   }
-}
+}
+
+.header .room-header__drawer-btn {
+  @include screen.smallerThan(tabletBreakpoint) {
+    display: none;
+  }
+}
+
+.header .room-header__back-btn {
+  @include dir.side(margin, 0, 5px);
+
+  @include screen.biggerThan(mobileBreakpoint) {
+    display: none;
+  }
+}

src/app/organisms/settings/Settings.scss

@@ -1,5 +1,6 @@
 @use '../../partials/flex';
 @use '../../partials/dir';
+@use '../../partials/screen';
 
 .settings-window {
   & .pw {
@@ -86,4 +87,17 @@
       margin: var(--sp-extra-tight) 0;
     }
   }
-}
+}
+
+.settings-window {
+  @include screen.smallerThan(mobileBreakpoint) {
+    .pw__drawer p, .pw__drawer .header h4 {
+      display: none;
+      width: 0;
+    }
+
+    .pw__drawer {
+      width: fit-content;
+    }
+  }
+}