chore(UI): Fix friends buttons and group aside on mobile layout

Satellite-im · Sep 10, 2021 · 18639a3 · 18639a3
1 parent 8fd06be
commit 18639a3
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 11 deletions.
diff --git a/components/tailored/core/group/aside/Aside.less b/components/tailored/core/group/aside/Aside.less
@@ -30,6 +30,7 @@
     left: -5rem;
     top: 1.8rem;
     z-index: 999;
+    transition: visibility 0.1s;
   }
 
   #top-info {
@@ -89,3 +90,18 @@
     background: @light-gray;
   }
 }
+
+@media only screen and (max-width: 768px) {
+  #aside {
+    position: fixed;
+    right: 0px;
+    top: 0px;
+    z-index: 2;
+    background: @dark-gradient;
+  }
+  .is-open {
+    #aside {
+      transform: translateX(calc(@sidebar-size));
+    }
+  }
+}
diff --git a/components/tailored/core/mobile/nav/Nav.less b/components/tailored/core/mobile/nav/Nav.less
@@ -8,6 +8,7 @@
   justify-content: center;
   align-items: center;
   padding-bottom: @normal-spacing;
+  z-index: 2;
 
   svg {
     font-size: @small-icon-size;
@@ -18,4 +19,4 @@
   .active {
     color: @primary-color;
   }
-}
+}
diff --git a/components/tailored/core/sidebar/Sidebar.less b/components/tailored/core/sidebar/Sidebar.less
@@ -106,11 +106,14 @@
   }
 }
 
-
-
-
 .sidebar-nav {
   padding: 0 @normal-spacing;
   margin-bottom: @light-spacing;
 }
 
+@media only screen and (max-width: 768px) {
+  #sidebar {
+    z-index: 3;
+    background: @dark-gradient;
+  }
+}
diff --git a/components/tailored/friends/friend/Friend.less b/components/tailored/friends/friend/Friend.less
@@ -1,4 +1,3 @@
-
 .friend {
   position: relative;
   padding: @light-spacing @normal-spacing;
@@ -18,7 +17,8 @@
 
   .description {
     margin-left: @normal-spacing;
-    p, h1 {
+    p,
+    h1 {
       margin: 0;
       font-size: @mini-text-size;
     }
@@ -34,9 +34,9 @@
     justify-self: flex-end;
     align-self: center;
     float: right;
+    min-width: 4.8rem;
   }
 
-
   .spacer {
     flex: 1;
   }
@@ -67,4 +67,4 @@
   .friend {
     min-width: @viewport-width;
   }
-}
+}
diff --git a/layouts/chat/Chat.less b/layouts/chat/Chat.less
@@ -71,7 +71,7 @@
         height: 0;
       }
       #mediastream {
-        height: calc(100% -  @statusbar-height);
+        height: calc(100% - @statusbar-height);
       }
     }
   }
@@ -121,14 +121,14 @@
 
     &.direct {
       .info-toggle {
-        display: none !important;
+        visibility: hidden !important;
       }
     }
   }
 }
 
 &.is-open-aside {
   .info-toggle {
-    display: none !important;
+    visibility: hidden !important;
   }
 }