[Glitch] Improve display of statuses in admin panel

Port ddfb3d1 to glitch-soc (CSS only) Signed-off-by: Claire <[email protected]>
glitch-soc · Nov 15, 2024 · 0e9ab53 · 0e9ab53
1 parent 18aa0d8
commit 0e9ab53
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss
@@ -1943,3 +1943,31 @@ a.sparkline {
     }
   }
 }
+
+.status__card {
+  padding: 15px;
+  border-radius: 4px;
+  background: $ui-base-color;
+  font-size: 15px;
+  line-height: 20px;
+  word-wrap: break-word;
+  font-weight: 400;
+  border: 1px solid lighten($ui-base-color, 4%);
+  color: $primary-text-color;
+  box-sizing: border-box;
+  min-height: 100%;
+
+  .status__prepend {
+    padding: 0 0 15px;
+    gap: 4px;
+    align-items: center;
+  }
+
+  .status__content {
+    padding-top: 0;
+
+    summary {
+      display: list-item;
+    }
+  }
+}
diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss
@@ -339,12 +339,12 @@ a.table-action-link {
     }
   }
 
-  .status__content {
-    padding-top: 0;
-
-    strong {
-      font-weight: 700;
-    }
+  // Reset the status card to not have borders, background or padding when
+  // inline in the table of statuses
+  .status__card {
+    border: none;
+    background: none;
+    padding: 0;
   }
 
   .nothing-here {