fix(theme): fix aside layout styles, fix koishijs#175, fix koishijs#182

CyanForks · May 29, 2023 · 131fa62 · 131fa62
1 parent c18601a
commit 131fa62
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/packages/client/app/layout/layout.vue b/packages/client/app/layout/layout.vue
@@ -121,11 +121,6 @@ const styles = computed(() => ({
       opacity: 0;
       z-index: 300;
       transition: opacity 0.3s ease;
-
-      .is-left-aside-open & {
-        opacity: 0.25;
-        pointer-events: auto;
-      }
     }
   }
 }
@@ -146,17 +141,24 @@ const styles = computed(() => ({
       width: 100vw;
       bottom: 0;
     }
-  }
 
-  .layout-container.is-left-aside-open.has-left-aside {
-    .main-container {
-      left: calc(var(--aside-width) + var(--activity-width));
-    }
-  }
+    &.is-left-aside-open {
+      &.has-left-aside {
+        .main-container {
+          left: calc(var(--aside-width) + var(--activity-width));
+        }
+      }
 
-  .layout-container.is-left-aside-open:not(.has-left-aside) {
-    .main-container {
-      left: var(--activity-width);
+      &:not(.has-left-aside) {
+        .main-container {
+          left: var(--activity-width);
+        }
+      }
+
+      .aside-mask {
+        opacity: 0.25;
+        pointer-events: auto;
+      }
     }
   }
 }

diff --git a/packages/client/app/styles/layout.scss b/packages/client/app/styles/layout.scss
@@ -10,6 +10,7 @@
   --card-padding-horizontal: 1.5rem;
 
   @media screen and (max-width: 768px) {
+    --aside-width: 17rem;
     --activity-width: 3.5rem;
     --activity-icon-size: 1.375rem;
     --card-margin: 1.5rem;
@@ -22,6 +23,10 @@
     --card-padding-vertical: 0.75rem;
     --card-padding-horizontal: 0.875rem;
   }
+
+  @media screen and (max-width: 384px) {
+    --aside-width: calc(100vw - 2 * var(--activity-width));
+  }
 }
 
 .layout-left {