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

desktop/desktop.scss

@@ -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;
+    }
+  }
+}

javascripts/discourse/api-initializers/reposition-bulk-select.js

@@ -0,0 +1,7 @@
+import { apiInitializer } from "discourse/lib/api";
+
+export default apiInitializer("0.8.0", (api) => {
+  api.registerValueTransformer("bulk-select-in-nav-controls", () => {
+    return true;
+  });
+});

scss/topic-cards.scss

@@ -34,7 +34,7 @@ $extra-large: 1280px;
 
 .bulk-select-enabled .topic-list-item {
   grid-template-areas:
-    "bulk-select avatar author status status . activity"
+    "avatar author status status . activity"
     ". topic-title topic-title topic-title likes-replies likes-replies category";
   .bulk-select {
     grid-area: bulk-select;
@@ -50,7 +50,7 @@ $extra-large: 1280px;
     grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
     grid-template-rows: 22px minmax(22px, auto);
     grid-template-areas:
-      "bulk-select avatar author status status  . activity"
+      "avatar author status status  . activity"
       ". topic-title topic-title topic-title . . likes-replies"
       ". topic-title topic-title topic-title . . category";
   }
@@ -58,7 +58,7 @@ $extra-large: 1280px;
     grid-template-columns: 25px auto repeat(6, 1fr);
     grid-template-rows: auto auto auto;
     grid-template-areas:
-      "bulk-select category-status category-status . . . . activity"
+      "avatar category-status category-status . . . . activity"
       "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
       "avatar author . . . . . likes-replies";
   }
@@ -355,10 +355,6 @@ body.user-messages-page .topic-list-item {
   }
 }
 
-.topic-list-header {
-  display: none;
-}
-
 .topic-list-item {
   background: var(--d-content-background);
   box-shadow: 0px 0px 12px 1px var(--topic-card-shadow);