UX: fixes display issues in split to existing topic modal

UX: fixes display issues in split to existing topic modal

From 94c724fb89109ed2e9f085260b5a8c11f0f0ec6d Mon Sep 17 00:00:00 2001
From: Joe <33972521+hnb-ku@users.noreply.github.com>
Date: Mon, 19 Nov 2018 13:12:42 +0800
Subject: [PATCH] UX: fixes display issues in split to existing topic modal


diff --git a/app/assets/javascripts/discourse/templates/components/choose-topic.hbs b/app/assets/javascripts/discourse/templates/components/choose-topic.hbs
index 52c772f..8ddf70f 100644
--- a/app/assets/javascripts/discourse/templates/components/choose-topic.hbs
+++ b/app/assets/javascripts/discourse/templates/components/choose-topic.hbs
@@ -9,13 +9,18 @@
     <p>{{i18n 'choose_topic.none_found'}}</p>
   {{else}}
     {{#each topics as |t|}}
-      <div class='controls'>
+      <div class='controls existing-topic'>
         <label class='radio'>
-        <input type='radio' id="choose-topic-{{unbound t.id}}" name='choose_topic_id' {{action "chooseTopic" t}}>{{t.title}}
-        {{#if t.category.parentCategory}}
-          {{bound-category-link t.category.parentCategory}}
-        {{/if}}
-        {{bound-category-link t.category}}
+        <input type='radio' id="choose-topic-{{unbound t.id}}" name='choose_topic_id' {{action "chooseTopic" t}}>
+        <span class="topic-title">
+          {{t.title}}
+        </span>
+        <span class="topic-categories">
+          {{#if t.category.parentCategory}}
+            {{bound-category-link t.category.parentCategory}}
+          {{/if}}
+          {{bound-category-link t.category}}
+       </span>
         </label>
       </div>
     {{/each}}
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 1831f6f..11fd050 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -569,6 +569,21 @@
   }
 }
 
+// split topic modal
+.split-modal {
+  // move to existing topic
+  .existing-topic {
+    .radio {
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    .topic-categories {
+      width: 100%;
+      margin-left: 5px;
+    }
+  }
+}
+
 .tabbed-modal {
   .modal-body {
     position: relative;

GitHub

1 Like