From 1723fe86c5dbc976e70d68447ec42db40ef840de Mon Sep 17 00:00:00 2001
From: jjaffeux <j.jaffeux@gmail.com>
Date: Thu, 30 Apr 2020 14:11:27 +0200
Subject: [PATCH] UI: ensures status and creator are perfectly aligned

---
 .../widgets/discourse-post-event.js.es6       |  3 ++-
 .../common/discourse-post-event.scss          | 20 +++++++++++++++----
 config/locales/client.en.yml                  |  1 +
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/assets/javascripts/discourse/widgets/discourse-post-event.js.es6 b/assets/javascripts/discourse/widgets/discourse-post-event.js.es6
index 56fe4022..4f60781d 100644
--- a/assets/javascripts/discourse/widgets/discourse-post-event.js.es6
+++ b/assets/javascripts/discourse/widgets/discourse-post-event.js.es6
@@ -142,7 +142,8 @@ export default createWidget("discourse-post-event", {
               <span class="separator">·</span>
             {{/unless}}
             <span class="creators">
-              Created by {{attach widget="discourse-post-event-creator" attrs=(hash user=state.eventModel.creator)}}
+              <span>{{i18n "discourse_post_event.event_ui.created_by"}}</span>
+              {{attach widget="discourse-post-event-creator" attrs=(hash user=state.eventModel.creator)}}
             </span>
           </div>
         </div>
diff --git a/assets/stylesheets/common/discourse-post-event.scss b/assets/stylesheets/common/discourse-post-event.scss
index 2981e801..21c7709e 100644
--- a/assets/stylesheets/common/discourse-post-event.scss
+++ b/assets/stylesheets/common/discourse-post-event.scss
@@ -88,18 +88,30 @@
       max-width: 45vw;
     }
     .status-and-creators {
-      display: inline-flex;
+      display: flex;
       align-items: center;
-      margin-bottom: 0.25em;
-    }
-    .status-and-creators {
       color: $primary-medium;
       font-size: $font-down-1;
+      margin: 0.25em 0;
 
       .separator {
         margin: 0 0.25em;
       }
 
+      .creators {
+        display: flex;
+        align-items: center;
+
+        .event-creator {
+          margin-left: 0.25em;
+
+          .topic-invitee-avatar {
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+
       .status {
         &.expired {
           color: $danger-medium;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 84f1f0c7..e38d391d 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -48,6 +48,7 @@ en:
         add_to_calendar: Add to calendar
         send_pm_to_creator: Send PM to %{username}
         edit_event: Edit event
+        created_by: Created by
       invitees_modal:
         title_invited: "List of invited users"
         title_participated: "List of users who participated"