UX: move and restyle bulk select on desktop (#65)

2025-03-20 08:42:11 -04:00
parent 274e5f7a1f
commit 7f6b0df5bf
3 changed files with 75 additions and 7 deletions
@@ -0,0 +1,65 @@
+.bulk-select-enabled {
+  .topic-list-header .topic-list-data.default {
+    position: sticky;
+    top: 10em;
+  }
+  .topic-author-avatar-data {
+    display: none;
+  }
+
+  .bulk-select.topic-list-data {
+    grid-area: avatar;
+    margin-left: -0.5em;
+    padding: 0;
+    margin-top: 2.5em;
+
+    @media screen and (max-width: 576px) {
+      margin-top: 0;
+      label {
+        padding-block: 0.345em;
+      }
+    }
+
+    input {
+      transform: scale(1.5);
+    }
+  }
+}
+
+.topic-list-header {
+  tr {
+    border: none;
+  }
+
+  .topic-list-data {
+    padding: 0;
+
+    &:not(.default) {
+      display: none;
+    }
+
+    &.default {
+      position: absolute;
+      right: 0;
+      .bulk-select,
+      span:not(.bulk-select-topics, .d-button-label) {
+        display: none;
+      }
+    }
+  }
+
+  .bulk-select-topics {
+    position: absolute;
+    right: -1em;
+    @media screen and (max-width: 1048px) {
+      right: 0;
+    }
+
+    background: var(--secondary);
+    border-radius: 0 0 0 var(--d-border-radius);
+    padding: 1em;
+    button {
+      white-space: nowrap;
+    }
+  }
+}