Mobile: Topic list and topic (#19)

common/common.scss

@@ -11,3 +11,4 @@
 @import "box-view";
 @import "chat";
 @import "misc";
+@import "mobile-stuff";

scss/box-view.scss

@@ -22,6 +22,9 @@
 }
 
 .experimental-screen {
+  @include breakpoint(medium) {
+    display: none;
+  }
   max-width: unset !important;
   .has-full-page-chat & {
     display: none;

scss/buttons.scss

@@ -34,8 +34,20 @@
   }
 }
 
-.btn-default.sidebar-new-topic-button {
+.discourse-no-touch .btn-default.sidebar-new-topic-button {
   border: none;
+  &:hover {
+    border: none;
+  }
+}
+
+.discourse-no-touch .btn-default.topic-drafts-menu-trigger {
+  border: none;
+  margin-left: 2px;
+  &:hover {
+    border: none;
+    box-shadow: none;
+  }
 }
 
 .btn-default {

scss/header.scss

@@ -1,7 +1,9 @@
 .d-header {
   box-shadow: none;
   background: var(--background-color);
-  padding-bottom: 1.5em;
+  @include breakpoint(extra-large, $rule: min-width) {
+    padding-bottom: 1.5em;
+  }
 }
 
 .has-full-page-chat .d-header {

scss/hiddenstuff.scss

@@ -3,6 +3,8 @@
 .list-controls #create-topic,
 .notifications-button-footer .reason .text,
 .pinned-button .reason .text,
-.more-topics__browse-more {
+.more-topics__browse-more,
+//footer-message might cause issues, not sure what possible stuff can be in there, but the general idea is to hide it bcs having an ugly H3 (what?) CTA at the bottom is just… ugly imo
+.footer-message {
   display: none;
 }

scss/main.scss

@@ -1,11 +1,17 @@
 html:not(:has(.has-full-page-chat)) {
+  // @include breakpoint(extra-large, $rule: min-width) {
   background-color: var(--background-color);
+  // }
 }
 
 :root {
   --main-grid-gap: 2em;
 }
 
+#main-outlet-wrapper {
+  gap: var(--main-grid-gap);
+}
+
 body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
   grid-column-gap: var(--main-grid-gap);
 }
@@ -18,13 +24,16 @@ body.has-sidebar-page #main-outlet-wrapper {
 }
 
 body:not(.has-full-page-chat) {
-  background-color: var(--background-color);
+  @include breakpoint(extra-large, $rule: min-width) {
+    background-color: var(--background-color);
+  }
   #main-outlet-wrapper {
-    // margin-top: 1.5rem;
+    @include breakpoint(medium) {
-    @media screen and (max-width: 485px) {
       --main-grid-gap: 0;
     }
-    gap: var(--main-grid-gap);
+    @include breakpoint(tablet, $rule: min-width) {
+      gap: var(--main-grid-gap);
+    }
     // height: calc(100vh - var(--header-offset) - 4rem);
     // box-sizing: border-box;
     // > * {
@@ -57,15 +66,16 @@ body:not(.has-full-page-chat) {
       .container.groups-index,
       .body-page,
       .container.badges,
-      .topic-above-footer-buttons-outlet .presence-users {
+      .topic-above-footer-buttons-outlet .presence-users,
+      .global-notice {
         max-width: 1000px;
         margin-inline: auto;
         padding-inline: 1.5em;
-        @media screen and (max-width: 425px) {
-          padding-inline: 0.5em;
-        }
       }
       border-radius: var(--d-border-radius-large);
+      @include breakpoint(medium) {
+        border-radius: 0px;
+      }
       border-radius: 1.25rem;
       // box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
       background-color: var(--d-content-background);

scss/mobile-stuff.scss

@@ -0,0 +1,147 @@
+//temp sepeate file to avoid merge hell… to be distributed later
+@include breakpoint(medium) {
+  html,
+  .d-header {
+    background-color: var(--secondary);
+  }
+}
+#main-outlet-wrapper {
+  .navigation-topics & {
+    @include breakpoint(mobile-extra-large) {
+      padding: 0;
+    }
+  }
+}
+#main-outlet {
+  @include breakpoint(mobile-extra-large) {
+    padding-top: var(--spacing-block-sm);
+  }
+
+  .list-controls {
+    @include breakpoint(mobile-extra-large) {
+      padding-inline: var(
+        --spacing-inline-m
+      ) !important; //override will be fixed when the whole chat page shenanigans is resolved
+      padding-block: var(--spacing-block-s);
+      border-bottom: 1px solid var(--primary-200);
+    }
+    .navigation-container {
+      @include breakpoint(mobile-extra-large) {
+        gap: var(--spacing-inline-s);
+        //dont know why we even hide this crucial navigation on mobile
+        .category-breadcrumb.hidden,
+        .category-breadcrumb {
+          display: flex !important;
+          gap: var(--spacing-inline-sm);
+          .select-kit-header {
+            padding-block: var(--spacing-block-s);
+            padding-inline: 0;
+            border: 0;
+          }
+        }
+        .btn-default {
+          border: 0;
+          margin-right: 0;
+          .d-icon {
+            font-size: var(--font-up-1);
+          }
+        }
+        .fk-d-button-tooltip {
+          margin-right: 0;
+          margin-left: var(
+            --spacing-inline-xs
+          ); //pure visual correction for horitzontal alignment
+          &:has(#create-topic) {
+            order: 1;
+          }
+        }
+      }
+      #navigation-bar,
+      .navigation-controls,
+      .category-breadcrumb {
+        @include breakpoint(mobile-extra-large) {
+          margin-bottom: 0;
+        }
+      }
+      .navigation-controls {
+        gap: var(--spacing-inline-s);
+      }
+    }
+  }
+
+  .list-container {
+    @include breakpoint(mobile-extra-large) {
+      padding-inline: 0 !important;
+    }
+
+    .topic-list-body {
+      @include breakpoint(mobile-extra-large) {
+        border-top: 0;
+        padding-top: 0;
+      }
+    }
+
+    .topic-list-item {
+      @include breakpoint(mobile-extra-large) {
+        box-shadow: none;
+        border-radius: 0;
+        //to be moved to topic card segment for general use
+        // .navigation-category & {
+        //   .badge-category__wrapper {
+        //     display: none;
+        //   }
+        // }
+      }
+    }
+  }
+
+  #topic-title {
+    @include breakpoint(mobile-extra-large) {
+      padding-inline: var(--spacing-inline-m) !important;
+      .topic-category {
+        order: -1;
+      }
+      //make mixin of this
+      //   .badge-category__wrapper {
+      //     border-radius: var(--d-border-radius);
+      //     padding: var(--spacing-inline-xs) var(--spacing-inline-s);
+      //     background-color: light-dark(
+      //       oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
+      //       oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
+      //     );
+      //   }
+
+      //   .badge-category__name {
+      //     color: light-dark(
+      //       oklch(from var(--category-badge-color) 20% calc(c * 1) h),
+      //       oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
+      //     );
+      //   }
+    }
+  }
+  .container.posts {
+    @include breakpoint(mobile-extra-large) {
+      padding-inline: var(--spacing-inline-m) !important;
+
+      .main-avatar .avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: var(--d-border-radius);
+      }
+
+      .topic-body {
+        .topic-meta-data {
+          .username {
+            font-size: var(--font-0-rem);
+          }
+        }
+        .contents {
+          padding-top: var(--spacing-block-m);
+          p {
+            line-height: 1.65;
+          }
+        }
+      }
+    }
+  }
+}

scss/sidebar.scss

@@ -1,4 +1,10 @@
 .sidebar-wrapper {
+  @include breakpoint(medium) {
+    background: var(--secondary);
+    .sidebar-footer-wrapper {
+      background: var(--secondary);
+    }
+  }
   .has-full-page-chat &,
   .has-full-page-chat & .sidebar-footer-wrapper {
     background: transparent;

scss/topic-cards.scss

@@ -24,7 +24,7 @@ $extra-large: 1280px;
   display: flex;
   flex-direction: column;
   gap: 1em;
-  @media screen and (max-width: $extra-small) {
+  @include breakpoint(medium) {
     gap: 0.5em;
   }
 }
@@ -122,7 +122,7 @@ body.user-messages-page .topic-list-item {
       "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
       "avatar author . . . . . likes-replies";
   }
-  @media screen and (max-width: $extra-small) {
+  @include breakpoint(medium) {
     border: none;
     border-bottom: 1px solid var(--primary-200);
   }

scss/topic.scss

@@ -47,6 +47,14 @@
 }
 
 #topic-title {
+  @include breakpoint(extra-large, $rule: min-width) {
+    z-index: 999;
+    padding: var(--spacing-block-l) var(--spacing-inline-xl);
+    position: sticky;
+    margin-bottom: 0;
+    top: var(--header-offset);
+    background: var(--d-content-background);
+  }
   z-index: z("composer", "content") - 1;
   padding: var(--spacing-block-l) var(--spacing-inline-xl);
   position: sticky;
@@ -55,7 +63,6 @@
   background: var(--d-content-background);
   border-radius: var(--d-border-radius-large);
 }
-
 .container.posts,
 .more-topics__container,
 #topic-footer-buttons {