Fix waste of space of collapsed left panel

Signed-off-by: Anton Zuenko <anton@zuenko.ru>
matrix-org · Aug 5, 2019 · a3eb45e · a3eb45e
1 parent ab05d8c
commit a3eb45e
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 8 deletions.
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
@@ -24,13 +24,13 @@ limitations under the License.
 
 .mx_LeftPanel_container.collapsed {
     min-width: unset;
-    /* Collapsed LeftPanel 70px */
-    flex: 0 0 70px;
+    /* Collapsed LeftPanel 50px */
+    flex: 0 0 50px;
 }
 
 .mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
-    /* TagPanel 70px + Collapsed LeftPanel 70px */
-    flex: 0 0 140px;
+    /* TagPanel 70px + Collapsed LeftPanel 50px */
+    flex: 0 0 120px;
 }
 
 .mx_LeftPanel_tagPanelContainer {

diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
@@ -143,7 +143,7 @@ limitations under the License.
     }
 
     .mx_RoomSubList_labelContainer {
-        margin-right: 14px;
+        margin-right: 8px;
         margin-left: 2px;
     }
 

diff --git a/res/css/structures/_TopLeftMenuButton.scss b/res/css/structures/_TopLeftMenuButton.scss
@@ -22,7 +22,7 @@ limitations under the License.
     display: flex;
     align-items: center;
     min-width: 0;
-    padding: 0 7px;
+    padding: 0 4px;
     overflow: hidden;
 }
 

diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
@@ -117,7 +117,7 @@ limitations under the License.
 
 .collapsed {
     .mx_RoomTile {
-        margin: 0 2px;
+        margin: 0 6px;
         padding: 0 2px;
         position: relative;
         justify-content: center;

diff --git a/src/components/structures/TopLeftMenuButton.js b/src/components/structures/TopLeftMenuButton.js
@@ -98,10 +98,12 @@ export default class TopLeftMenuButton extends React.Component {
     render() {
         const name = this._getDisplayName();
         let nameElement;
+        let chevronElement;
         if (!this.props.collapsed) {
             nameElement = <div className="mx_TopLeftMenuButton_name">
                 { name }
             </div>;
+            chevronElement = <span className="mx_TopLeftMenuButton_chevron" />;
         }
 
         return (
@@ -121,7 +123,7 @@ export default class TopLeftMenuButton extends React.Component {
                     resizeMethod="crop"
                 />
                 { nameElement }
-                <span className="mx_TopLeftMenuButton_chevron" />
+                { chevronElement }
             </AccessibleButton>
         );
     }