UX: centralise DMenu mobile styling + fixes (#28469)

app/assets/javascripts/discourse/app/components/navigation-bar.gjs

@@ -53,7 +53,6 @@ export default class NavigationBarComponent extends Component {
                 {{#each @navItems as |navItem|}}
                   <dropdown.item>
                     <NavigationItem
-                      @tagName="div"
                       @content={{navItem}}
                       @filterMode={{@filterMode}}
                       @category={{@category}}

app/assets/javascripts/discourse/app/components/topic-map/topic-map-summary.gjs

@@ -341,42 +341,35 @@ export default class TopicMapSummary extends Component {
           </:trigger>
           <:content>
             <h3>{{i18n "topic_map.links_title"}}</h3>
-            <table class="topic-links">
+            <ul class="topic-links">
-              <tbody>
+              {{#each this.linksToShow as |link|}}
-                {{#each this.linksToShow as |link|}}
+                <li>
-                  <tr>
+                  <span
-                    <td>
+                    class="badge badge-notification clicks"
-                      <span
+                    title={{i18n "topic_map.clicks" count=link.clicks}}
-                        class="badge badge-notification clicks"
+                  >
-                        title={{i18n "topic_map.clicks" count=link.clicks}}
+                    {{link.clicks}}
-                      >
+                  </span>
-                        {{link.clicks}}
+
-                      </span>
+                  <TopicMapLink
-                    </td>
+                    @attachment={{link.attachment}}
-                    <td>
+                    @title={{link.title}}
-                      <TopicMapLink
+                    @rootDomain={{link.root_domain}}
-                        @attachment={{link.attachment}}
+                    @url={{link.url}}
-                        @title={{link.title}}
+                    @userId={{link.user_id}}
-                        @rootDomain={{link.root_domain}}
-                        @url={{link.url}}
-                        @userId={{link.user_id}}
-                      />
-                    </td>
-                  </tr>
-                {{/each}}
-              </tbody>
-            </table>
-            {{#if this.hasMoreLinks}}
-              <div class="link-summary">
-                <span>
-                  <DButton
-                    @action={{this.showAllLinks}}
-                    @title="topic_map.links_shown"
-                    @icon="chevron-down"
-                    class="btn-flat"
                   />
-                </span>
+                </li>
-              </div>
+              {{/each}}
+
+            </ul>
+            {{#if this.hasMoreLinks}}
+              <DButton
+                @action={{this.showAllLinks}}
+                @title="topic_map.links_shown"
+                @icon="chevron-down"
+                class="link-summary btn-flat"
+              />
+
             {{/if}}
           </:content>
         </DMenu>

app/assets/javascripts/discourse/tests/integration/components/float-kit/d-menu-test.js

@@ -263,7 +263,7 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
 
     await getOwner(this).lookup("service:menu").close("test");
 
-    assert.dom(".fk-d-menu__content.test-content").doesNotExist();
+    assert.dom(".fk-d-menu.test-content").doesNotExist();
   });
 
   test("get a menu by identifier", async function (assert) {
@@ -276,7 +276,7 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
 
     await activeMenu.close();
 
-    assert.dom(".fk-d-menu__content.test-content").doesNotExist();
+    assert.dom(".fk-d-menu.test-content").doesNotExist();
   });
 
   test("opening a menu with the same identifier", async function (assert) {
@@ -302,13 +302,13 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
 
     await click(".first.fk-d-menu__trigger");
 
-    assert.dom(".fk-d-menu__content.first").exists();
+    assert.dom(".fk-d-menu.first").exists();
-    assert.dom(".fk-d-menu__content.second").doesNotExist();
+    assert.dom(".fk-d-menu.second").doesNotExist();
 
     await click(".second.fk-d-menu__trigger");
 
-    assert.dom(".fk-d-menu__content.first").doesNotExist();
+    assert.dom(".fk-d-menu.first").doesNotExist();
-    assert.dom(".fk-d-menu__content.second").exists();
+    assert.dom(".fk-d-menu.second").exists();
   });
 
   test("empty @identifier/@groupIdentifier", async function (assert) {
@@ -318,13 +318,13 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
 
     await click(".first.fk-d-menu__trigger");
 
-    assert.dom(".fk-d-menu__content.first").exists();
+    assert.dom(".fk-d-menu.first").exists();
-    assert.dom(".fk-d-menu__content.second").doesNotExist();
+    assert.dom(".fk-d-menu.second").doesNotExist();
 
     await click(".second.fk-d-menu__trigger");
 
-    assert.dom(".fk-d-menu__content.first").exists("it doesn’t autoclose");
+    assert.dom(".fk-d-menu.first").exists("it doesn’t autoclose");
-    assert.dom(".fk-d-menu__content.second").exists();
+    assert.dom(".fk-d-menu.second").exists();
   });
 
   test("@class", async function (assert) {
@@ -333,7 +333,7 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
     await open();
 
     assert.dom(".fk-d-menu__trigger.first").exists();
-    assert.dom(".fk-d-menu__content.first").exists();
+    assert.dom(".fk-d-menu.first").exists();
   });
 
   test("@triggerClass", async function (assert) {
@@ -342,7 +342,7 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
     await open();
 
     assert.dom(".fk-d-menu__trigger.first").exists();
-    assert.dom(".fk-d-menu__content.first").doesNotExist();
+    assert.dom(".fk-d-menu.first").doesNotExist();
   });
 
   test("@contentClass", async function (assert) {
@@ -351,6 +351,6 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
     await open();
 
     assert.dom(".fk-d-menu__trigger.first").doesNotExist();
-    assert.dom(".fk-d-menu__content.first").exists();
+    assert.dom(".fk-d-menu.first").exists();
   });
 });

app/assets/javascripts/discourse/tests/integration/components/widgets/post-test.js

@@ -880,7 +880,7 @@ module("Integration | Component | Widget | post", function (hooks) {
     await click(".topic-map__links-trigger");
     assert.dom(".topic-map__links-content").exists({ count: 1 });
     assert.dom(".topic-map__links-content .topic-link").exists({ count: 5 });
-    await click(".link-summary button");
+    await click(".link-summary");
     assert.dom(".topic-map__links-content .topic-link").exists({ count: 6 });
   });
 

app/assets/javascripts/float-kit/addon/components/d-menu.gjs

@@ -110,7 +110,6 @@ export default class DMenu extends Component {
           @trapTab={{this.options.trapTab}}
           @mainClass={{concatClass
             "fk-d-menu"
-            "fk-d-menu__content"
             (concat this.options.identifier "-content")
             @class
             @contentClass

app/assets/stylesheets/common/components/topic-map.scss

@@ -90,40 +90,6 @@ body:not(.archetype-private_message) {
     overflow-wrap: anywhere;
   }
 
-  .fk-d-menu__content {
-    .fk-d-menu__inner-content,
-    .d-modal__container {
-      box-sizing: border-box;
-      max-height: 80dvh;
-      min-width: 20em;
-      width: 100%;
-      overflow: auto;
-      align-items: start;
-      overscroll-behavior: contain;
-      padding: 1rem 1.5rem;
-      width: 100%;
-      flex-direction: column;
-      .desktop-view & {
-        @include breakpoint(mobile-large) {
-          min-width: unset;
-          max-width: 90dvw;
-        }
-      }
-    }
-
-    .loading-container {
-      width: 100%;
-    }
-
-    h3 {
-      font-weight: bold;
-      font-size: var(--font-up-1);
-      margin-top: -0.35em;
-      margin-bottom: 0.5em;
-      width: 100%;
-    }
-  }
-
   &__contents {
     padding-block: 0.5em;
     flex-grow: 1;
@@ -272,7 +238,6 @@ body:not(.archetype-private_message) {
   .view-explainer {
     color: var(--primary-700);
     font-size: var(--font-down-1);
-    margin-top: 1em;
   }
 
   .estimated-read-time {
@@ -296,14 +261,13 @@ body:not(.archetype-private_message) {
 
 .mobile-view {
   .d-modal[class*="topic-map__"] {
-    .d-modal__body {
+    h3 {
-      padding: 1em 1em 2em 1em;
+      font-size: var(--font-up-2);
+      padding-inline: 1rem;
+    }
 
-      h3 {
+    p {
-        width: 100%;
+      overflow-wrap: break-word;
-        font-weight: bold;
-        font-size: var(--font-up-2);
-      }
     }
   }
 
@@ -313,84 +277,145 @@ body:not(.archetype-private_message) {
 }
 
 // DMenu popups
+.fk-d-menu,
+.fk-d-menu-modal {
+  //shared
+  &__inner-content {
+    .topic-map__likes-content &,
+    .topic-map__links-content &,
+    .topic-map__users-content &,
+    .topic-map__views-content & {
+      flex-direction: column;
+      padding-block: 0.75em;
+    }
+  }
 
-.topic-map__likes-content.fk-d-menu__content {
+  h3 {
-  .fk-d-menu__inner-content,
+    padding-inline: 1rem;
-  .d-modal__body {
     padding-bottom: 0.5em;
+    font-size: var(--font-up-1);
+    border-bottom: 1px solid var(--primary-low);
+  }
+
+  .loading-container {
+    width: 100%;
+  }
+
+  &.topic-map__likes-content,
+  &.topic-map__links-content {
     ul {
       margin: 0;
       padding: 0;
       list-style-type: none;
+    }
+  }
 
-      li > a {
+  //per type
-        display: grid;
+  &.topic-map__likes-content {
-        grid-template-areas: "user likes" "post post";
+    li > a {
-        grid-template-columns: auto 1fr;
+      display: grid;
-        border-top: 1px solid var(--primary-low);
+      grid-template-areas: "user likes" "post post";
-        padding: 1em 0;
+      grid-template-columns: auto 1fr;
-        gap: 0.25em;
+      gap: 0.25em;
+      padding: 0.75em 1rem;
 
-        .discourse-no-touch & {
+      .discourse-no-touch & {
-          &:hover {
+        &:hover {
-            background: var(--primary-very-low);
+          background: var(--d-hover);
-            box-shadow: -1em 0px 0px 0px var(--primary-very-low),
-              1em 0px 0px 0px var(--primary-very-low);
-          }
         }
       }
+    }
 
-      .like-section__user {
+    li:not(:last-of-type) {
+      a {
+        border-bottom: 1px solid var(--primary-low);
+      }
+    }
+
+    .like-section {
+      &__user {
         grid-area: user;
-
         color: var(--primary-high);
-        justify-content: start;
         display: flex;
-        align-items: start;
+        align-items: center;
         font-weight: bold;
         gap: 0.5em;
-        img {
-          position: relative;
-          top: 0.2em;
-        }
       }
 
-      .like-section__likes {
+      &__likes {
         grid-area: likes;
         display: flex;
-        align-items: start;
-
         gap: 0.25em;
         color: var(--primary-medium);
         justify-content: end;
-        font-size: var(--font-0);
+        align-items: center;
+
         .d-icon {
           font-size: var(--font-down-1);
           color: var(--love);
           position: relative;
-          top: 0.28em;
         }
       }
+    }
 
-      p {
+    p {
-        grid-area: post;
+      grid-area: post;
-        overflow-wrap: anywhere;
+      overflow-wrap: anywhere;
+      color: var(--primary-high);
+      text-align: left;
+      margin: 0;
+      padding-left: 2em;
+    }
+  }
+
+  &.topic-map__links-content {
+    li {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-template-areas:
+        "counter link"
+        ". domain";
+      padding: 0.75em 1rem;
+      gap: 0.25em;
+
+      &:not(:last-of-type) {
+        border-bottom: 1px solid var(--primary-low);
+      }
+
+      .discourse-no-touch & {
+        &:hover {
+          background: var(--d-hover);
+        }
+      }
+    }
+    .badge {
+      grid-area: counter;
+      align-self: start;
+      top: 0.2em;
+    }
+    .topic-link {
+      grid-area: link;
+    }
+    .domain {
+      grid-area: domain;
+      font-size: var(--font-down-2);
+      color: var(--primary-medium);
+    }
+
+    .link-summary {
+      width: 100%;
+      .d-icon {
         color: var(--primary-high);
-        text-align: left;
-        margin: 0;
-        padding-left: 2em;
       }
     }
   }
-}
 
-.topic-map__users-content {
+  &.topic-map__users-content {
-  .fk-d-menu__inner-content,
-  .d-modal__body {
     .topic-map__users-list {
       display: flex;
       flex-wrap: wrap;
       gap: 0.5em;
+      padding: 0.75em 1rem;
     }
     .poster {
       display: block;
@@ -425,73 +450,17 @@ body:not(.archetype-private_message) {
       background-size: contain;
     }
   }
-}
 
-.topic-map__links-content {
+  &.topic-map__views-content {
-  .fk-d-menu__inner-content,
-  .d-modal__body {
-    .topic-links {
-      width: 100%;
-
-      tbody {
-        border: none;
-      }
-      tr {
-        border-top: 1px solid var(--primary-low);
-        border-bottom: none;
-        td:nth-of-type(2) {
-          padding-left: 0.5em;
-        }
-      }
-    }
-
-    a {
-      display: inline-block;
-      line-height: var(--line-height-medium);
-    }
-
-    td {
-      vertical-align: top;
-      padding: 0.5em 0;
-    }
-
-    span.domain {
-      font-size: var(--font-down-2);
-      color: var(--primary-medium);
-    }
-
-    .link-summary {
-      width: 100%;
-
-      .btn {
-        width: 100%;
-        .d-icon {
-          color: var(--primary-high);
-        }
-        .discourse-no-touch & {
-          &:hover {
-            background: var(--primary-low);
-          }
-        }
-      }
-    }
-  }
-}
-
-.topic-map__views-content {
-  .fk-d-menu__inner-content,
-  .d-modal__body {
     .topic-views {
       display: flex;
       flex-direction: column;
       align-items: center;
-      flex: 1 1 auto;
-      padding: 0.5em 1em 0;
 
       &__wrapper {
         display: flex;
-        width: 100%;
+        justify-content: center;
-        align-items: space-between;
+        padding: 0 1rem;
       }
       &__count {
         font-size: var(--font-up-4);
@@ -504,12 +473,16 @@ body:not(.archetype-private_message) {
       }
     }
 
+    canvas {
+      padding: 0.75em 1rem;
+    }
+
+    .view-explainer {
+      padding: 0 1rem;
+    }
+
     &:has(.topic-views) {
       min-width: unset;
-
-      h3 {
-        text-align: center;
-      }
     }
   }
 }

app/assets/stylesheets/common/float-kit/d-menu.scss

@@ -53,6 +53,7 @@
     background-color: var(--secondary);
     border: 1px solid var(--primary-low);
     box-shadow: var(--shadow-menu-panel);
+    overscroll-behavior: contain;
   }
 
   .arrow {

app/assets/stylesheets/mobile/components/_index.scss

@@ -1,6 +1,6 @@
+@import "bookmark-menu";
+@import "more-topics";
 @import "topic-footer-mobile-dropdown";
+@import "topic-map";
 @import "user-card";
 @import "user-stream-item";
-@import "more-topics";
-@import "bookmark-menu";
-@import "dropdown-menu";

app/assets/stylesheets/mobile/components/dropdown-menu.scss

@@ -1,7 +0,0 @@
-.dropdown-menu {
-  &__item {
-    .btn {
-      padding: 0.75rem 1rem;
-    }
-  }
-}

app/assets/stylesheets/mobile/components/topic-map.scss

@@ -0,0 +1,9 @@
+.fk-d-menu-modal {
+  &.topic-map__links-content {
+    li {
+      a {
+        padding: 0;
+      }
+    }
+  }
+}

app/assets/stylesheets/mobile/float-kit/d-menu.scss

@@ -1,5 +1,18 @@
 .fk-d-menu-modal {
   .d-modal__body {
-    padding: 0.5rem 0;
+    padding: 0.5em 0;
+  }
+
+  h3 {
+    padding-top: 0.25em;
+  }
+
+  li > .btn,
+  li > a {
+    padding: 0.75em 1rem;
+  }
+
+  li > a {
+    display: block;
   }
 }

app/assets/stylesheets/mobile/list-controls.scss

@@ -75,7 +75,6 @@
       a {
         display: block;
         color: var(--primary);
-        padding: 0.5em 1rem;
 
         &.active {
           background: var(--d-selected);

app/assets/stylesheets/mobile/modal.scss

@@ -40,6 +40,9 @@ html:not(.keyboard-visible.mobile-view) {
     padding: 0.5rem;
   }
 
+  &__footer {
+    margin-top: auto;
+  }
   .ios-device & {
     &__footer {
       margin-top: auto;