feat: improve layout on desktop/tablets

revoltchat · Jan 15, 2024 · 8f9e525 · 8f9e525
1 parent aa10098
commit 8f9e525
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 19 deletions.
diff --git a/App.tsx b/App.tsx
@@ -348,23 +348,41 @@ class MainView extends React.Component {
       <View style={styles.app}>
         {this.state.status === 'loggedIn' ? (
           <>
-            <SideMenuBase
-              openMenuOffset={Dimensions.get('window').width - 50}
-              overlayColor={'#00000040'}
-              edgeHitWidth={Dimensions.get('window').width}
-              isOpen={this.state.leftMenuOpen}
-              onChange={open => this.setState({leftMenuOpen: open})}
-              menu={
-                <SideMenu
-                  onChannelClick={this.setChannel.bind(this)}
-                  currentChannel={this.state.currentChannel}
-                  orderedServers={this.state.orderedServers}
-                />
-              }
-              style={styles.app}
-              bounceBackOnOverdraw={false}>
-              <ChannelView state={this} channel={this.state.currentChannel} />
-            </SideMenuBase>
+            {Dimensions.get('window').width >
+            Dimensions.get('window').height ? (
+              <View style={{flex: 1, flexDirection: 'row'}}>
+                <View
+                  style={{
+                    width: '20%',
+                    flexDirection: 'column',
+                  }}>
+                  <SideMenu
+                    onChannelClick={this.setChannel.bind(this)}
+                    currentChannel={this.state.currentChannel}
+                    orderedServers={this.state.orderedServers}
+                  />
+                </View>
+                <ChannelView state={this} channel={this.state.currentChannel} />
+              </View>
+            ) : (
+              <SideMenuBase
+                openMenuOffset={Dimensions.get('window').width - 50}
+                overlayColor={'#00000040'}
+                edgeHitWidth={Dimensions.get('window').width}
+                isOpen={this.state.leftMenuOpen}
+                onChange={open => this.setState({leftMenuOpen: open})}
+                menu={
+                  <SideMenu
+                    onChannelClick={this.setChannel.bind(this)}
+                    currentChannel={this.state.currentChannel}
+                    orderedServers={this.state.orderedServers}
+                  />
+                }
+                style={styles.app}
+                bounceBackOnOverdraw={false}>
+                <ChannelView state={this} channel={this.state.currentChannel} />
+              </SideMenuBase>
+            )}
             <Modals />
             <NetworkIndicator client={client} />
             <View

diff --git a/src/components/common/BottomSheet.tsx b/src/components/common/BottomSheet.tsx
@@ -20,6 +20,7 @@ export const BottomSheet = observer(
         snapPoints={snapPoints}
         enablePanDownToClose
         backdropComponent={BottomSheetBackdrop}
+        style={{margin: 'auto', maxWidth: 800}}
         backgroundStyle={{
           backgroundColor: currentTheme.backgroundSecondary,
         }}

diff --git a/src/components/sheets/ProfileSheet.tsx b/src/components/sheets/ProfileSheet.tsx
@@ -147,7 +147,8 @@ export const ProfileSheet = observer(() => {
           </>
         ) : (
           <>
-            <View style={{flexDirection: 'row', width: '80%'}}>
+            <View
+              style={{flexDirection: 'row', justifyContent: 'space-between'}}>
               <Avatar
                 size={80}
                 user={user}
@@ -158,7 +159,6 @@ export const ProfileSheet = observer(() => {
               />
               <View
                 style={{
-                  marginLeft: '90%',
                   justifyContent: 'center',
                   alignItems: 'center',
                 }}>