fix(alerts): mobile styles

Satellite-im · Jun 29, 2022 · ec6c836 · ec6c836
1 parent f169deb
commit ec6c836
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 125 deletions.
diff --git a/components/ui/FloatingContainer/FloatingContainer.html b/components/ui/FloatingContainer/FloatingContainer.html
diff --git a/components/ui/FloatingContainer/FloatingContainer.less b/components/ui/FloatingContainer/FloatingContainer.less
diff --git a/components/ui/FloatingContainer/FloatingContainer.vue b/components/ui/FloatingContainer/FloatingContainer.vue
diff --git a/components/views/navigation/toolbar/Toolbar.html b/components/views/navigation/toolbar/Toolbar.html
@@ -39,8 +39,15 @@
         @click="toggleAlerts"
         v-tooltip.bottom="$t('pages.chat.alerts')"
       />
-      <ToolbarAlerts v-if="showAlerts" v-click-outside="toggleAlerts" />
+      <ToolbarAlerts
+        v-if="showAlerts && $device.isDesktop"
+        v-click-outside="toggleAlerts"
+      />
     </div>
+    <ToolbarAlerts
+      v-if="showAlerts && !$device.isDesktop"
+      v-click-outside="toggleAlerts"
+    />
     <div
       :class="`control-button ${!enableRTC || webrtc.activeCall ? 'disabled' : ''}`"
       v-tooltip.bottom="callTooltipText"

diff --git a/components/views/navigation/toolbar/Toolbar.less b/components/views/navigation/toolbar/Toolbar.less
@@ -76,13 +76,6 @@
       &:extend(.ellipsis);
     }
   }
-
-  .alerts-floating-container {
-    &:extend(.fourth-layer);
-    &.side-open {
-      margin-right: 1.2rem;
-    }
-  }
 }
 
 @media only screen and (max-width: @mobile-breakpoint) {
@@ -119,11 +112,6 @@
       }
     }
   }
-  .alerts-floating-container {
-    top: calc(@toolbar-height - @light-spacing);
-    right: @light-spacing !important;
-    left: @light-spacing !important;
-  }
 }
 
 /* Only for Safari to fix lack resolution of svgs */

diff --git a/components/views/navigation/toolbar/alerts/Alerts.less b/components/views/navigation/toolbar/alerts/Alerts.less
@@ -5,9 +5,9 @@
   gap: @light-spacing;
 
   top: 45px;
-  left: -8px;
+  left: 0;
   max-height: 50vh;
-  width: 27rem;
+  width: 25rem;
   padding: @light-spacing @xlight-spacing;
   cursor: default;
   overflow-y: scroll;
@@ -30,3 +30,10 @@
     width: fit-content;
   }
 }
+
+@media only screen and (max-width: @mobile-breakpoint) {
+  #alerts {
+    top: @toolbar-height;
+    width: 100%;
+  }
+}