UX: more compact local-dates preview (#7305)

app/assets/stylesheets/common/base/d-popover.scss

@@ -22,7 +22,7 @@ $d-popover-border: $primary-medium;
 #d-popover {
   background-color: $d-popover-background;
   position: absolute;
-  z-index: z("tooltip");
+  z-index: z("modal", "tooltip");
   border-color: $d-popover-border;
   border-style: solid;
   border-width: 1px;

plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6

@@ -43,7 +43,6 @@ export default Ember.Component.extend({
     if (markup) {
       cookAsync(markup).then(result => {
         this.set("currentPreview", result);
-
         Ember.run.schedule("afterRender", () =>
           this.$(".preview .discourse-local-date").applyLocalDates()
         );

plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs

@@ -1,18 +1,17 @@
 {{#d-modal-body
   title="discourse_local_dates.create.modal_title"
-  subtitle="discourse_local_dates.create.modal_subtitle"
   class="discourse-local-dates-create-modal"
   style="overflow: auto"}}
 
   <div class="form">
     {{#unless isValid}}
-      <div class="alert alert-error">
+      <div class="validation-error alert alert-error">
         {{i18n "discourse_local_dates.create.form.invalid_date"}}
       </div>
     {{else}}
       <div class="preview alert alert-info">
         <b>{{i18n "discourse_local_dates.create.form.preview_for" timezone=currentUserTimezone}}</b>
-        <span>{{currentPreview}}</span>
+        {{currentPreview}}
       </div>
     {{/unless}}
 
@@ -87,7 +86,6 @@
               onSelect=(action (mut timezone))}}
           </div>
         </div>
-
       </div>
     </div>
 

plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss

@@ -57,9 +57,10 @@
 }
 
 .discourse-local-dates-create-modal {
-  min-height: 200px;
+  min-height: 250px;
   display: flex;
   flex-direction: row;
+  padding: 0.5em;
 
   .form {
     flex: 1 0 0px;
@@ -94,7 +95,7 @@
           display: flex;
           flex-direction: row;
           padding-top: 0.5em;
-          margin: 0 1em;
+          margin: 0 0.5em;
           font-size: $font-up-2;
         }
       }
@@ -115,13 +116,13 @@
       .timezone {
         margin-left: 1em;
         .timezone-input {
-          width: 180px;
+          width: 160px;
         }
       }
 
       .time {
         .time-input {
-          width: 80px;
+          width: auto;
           margin: 0;
           padding: 0;
           text-align: center;
@@ -132,11 +133,20 @@
     .preview {
       text-align: center;
       margin-top: 0;
-      margin-bottom: 1em;
-    }
+      margin-bottom: 0.5em;
+      display: flex;
+      align-items: center;
+      padding: 0.5em;
+      flex-wrap: wrap;
 
-    .validation-error {
-      color: $danger;
+      b {
+        margin-right: 0.5em;
+      }
+
+      b + p {
+        margin: 0;
+        display: inline-block;
+      }
     }
 
     .recurrence {
@@ -146,6 +156,10 @@
     }
   }
 
+  .validation-error {
+    margin-bottom: 0.5em;
+  }
+
   .format {
     .format-input {
       width: 280px;
@@ -176,6 +190,11 @@
 
 @media (max-width: 700px) {
   .discourse-local-dates-create-modal {
+    .from,
+    .to {
+      width: 100%;
+    }
+
     .form {
       .date-time-configuration {
         flex-direction: column;
@@ -191,7 +210,19 @@
           }
 
           .to-indicator {
-            margin: 0.5em 1em;
+            margin: 0 0.5em;
+            padding: 0;
+          }
+        }
+
+        .date {
+          .date-input {
+            width: 100%;
+          }
+        }
+        .time {
+          .time-input {
+            width: 100%;
           }
         }
 

plugins/discourse-local-dates/config/locales/client.en.yml

@@ -8,7 +8,6 @@ en:
       title: Insert date
       create:
         modal_title: Insert date
-        modal_subtitle: "We will automatically convert the date and time to the viewer’s local time zone."
         form:
           insert: Insert
           advanced_mode: Advanced mode