UX: Restyle bookmark reminder modal

discourse · Apr 4, 2020 · a8002ba · a8002ba
1 parent 751f229
commit a8002ba
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 66 deletions.
diff --git a/app/assets/javascripts/discourse/templates/modal/bookmark.hbs b/app/assets/javascripts/discourse/templates/modal/bookmark.hbs
@@ -22,62 +22,69 @@
         {{#tap-tile-grid activeTile=selectedReminderType as |grid|}}
           {{#if showAtDesktop}}
             {{#tap-tile icon="desktop" tileId=reminderTypes.AT_DESKTOP activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-              {{i18n "bookmarks.reminders.at_desktop"}}
+              <div class="tap-tile-title">{{i18n "bookmarks.reminders.at_desktop"}}</div>
             {{/tap-tile}}
           {{/if}}
 
           {{#if showLaterToday}}
             {{#tap-tile icon="far-moon" tileId=reminderTypes.LATER_TODAY activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-              {{i18n "bookmarks.reminders.later_today"}}<br>
-              {{laterTodayFormatted}}
+              <div class="tap-tile-title">{{i18n "bookmarks.reminders.later_today"}}</div>
+              <div class="tap-tile-date">{{laterTodayFormatted}}</div>
             {{/tap-tile}}
           {{/if}}
           {{#tap-tile icon="far-sun" tileId=reminderTypes.TOMORROW activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-            {{i18n "bookmarks.reminders.tomorrow"}}<br>
-            {{tomorrowFormatted}}
+            <div class="tap-tile-title">{{i18n "bookmarks.reminders.tomorrow"}}</div>
+            <div class="tap-tile-date">{{tomorrowFormatted}}</div>
           {{/tap-tile}}
           {{#if showLaterThisWeek}}
             {{#tap-tile icon="angle-double-right" tileId=reminderTypes.LATER_THIS_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-              {{i18n "bookmarks.reminders.later_this_week"}}<br>
-              {{laterThisWeekFormatted}}
+              <div class="tap-tile-title">{{i18n "bookmarks.reminders.later_this_week"}}</div>
+              <div class="tap-tile-date">{{laterThisWeekFormatted}}</div>
             {{/tap-tile}}
           {{/if}}
           {{#tap-tile icon="briefcase" tileId=reminderTypes.START_OF_NEXT_BUSINESS_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-            {{i18n "bookmarks.reminders.start_of_next_business_week"}}<br>
-            {{startNextBusinessWeekFormatted}}
+            <div class="tap-tile-title">{{i18n "bookmarks.reminders.start_of_next_business_week"}}</div>
+            <div class="tap-tile-date">{{startNextBusinessWeekFormatted}}</div>
           {{/tap-tile}}
           {{#tap-tile icon="far-clock" tileId=reminderTypes.NEXT_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-            {{i18n "bookmarks.reminders.next_week"}}<br>
-            {{nextWeekFormatted}}
+            <div class="tap-tile-title">{{i18n "bookmarks.reminders.next_week"}}</div>
+            <div class="tap-tile-date">{{nextWeekFormatted}}</div>
           {{/tap-tile}}
           {{#tap-tile icon="far-calendar-plus" tileId=reminderTypes.NEXT_MONTH activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-            {{i18n "bookmarks.reminders.next_month"}}<br>
-            {{nextMonthFormatted}}
+            <div class="tap-tile-title">{{i18n "bookmarks.reminders.next_month"}}</div>
+            <div class="tap-tile-date">{{nextMonthFormatted}}</div>
           {{/tap-tile}}
           {{#tap-tile icon="calendar-alt" tileId=reminderTypes.CUSTOM activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-            {{i18n "bookmarks.reminders.custom"}}
+            <div class="tap-tile-title">{{i18n "bookmarks.reminders.custom"}}</div>
           {{/tap-tile}}
+
+          {{#if customDateTimeSelected}}
+            <div class="control-group custom-date-time-wrap">
+              <div class="tap-tile-date-input">
+                {{d-icon "calendar-alt"}}
+                {{date-picker-future
+                  value=customReminderDate
+                  onSelect=(action (mut customReminderDate))
+                }}
+              </div>
+              <div class="tap-tile-time-input">
+                {{d-icon "far-clock"}}
+                {{input placeholder="--:--" type="time" class="time-input" value=customReminderTime}}
+              </div>
+            </div>
+          {{/if}}
+
           {{#if showLastCustom}}
             {{#tap-tile icon="undo" tileId=reminderTypes.LAST_CUSTOM activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-              {{i18n "bookmarks.reminders.last_custom"}}<br>
-              {{lastCustomFormatted}}
+              <div class="tap-tile-title">{{i18n "bookmarks.reminders.last_custom"}}</div>
+              <div class="tap-tile-date">{{lastCustomFormatted}}</div>
             {{/tap-tile}}
           {{/if}}
+
           {{#tap-tile icon="ban" tileId=reminderTypes.NONE activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-            {{i18n "bookmarks.reminders.none"}}
+            <div class="tap-tile-title">{{i18n "bookmarks.reminders.none"}}</div>
           {{/tap-tile}}
         {{/tap-tile-grid}}
-        {{#if customDateTimeSelected}}
-          <div class="control-group custom-date-time-wrap">
-            {{d-icon "calendar-alt"}}
-            {{date-picker-future
-              value=customReminderDate
-              onSelect=(action (mut customReminderDate))
-            }}
-            {{d-icon "far-clock"}}
-            {{input placeholder="--:--" type="time" class="time-input" value=customReminderTime}}
-          </div>
-        {{/if}}
 
       {{else}}
         <div class="alert alert-info">{{html-safe (i18n "bookmarks.no_timezone" basePath=basePath)}}</div>

diff --git a/app/assets/stylesheets/common/components/bookmark-modal.scss b/app/assets/stylesheets/common/components/bookmark-modal.scss
@@ -1,9 +1,8 @@
 .bookmark-with-reminder.modal {
   .modal-inner-container {
-    max-width: 95%;
+    box-sizing: border-box;
   }
   .modal-body {
-    max-width: 410px;
     width: 100%;
     box-sizing: border-box;
 
@@ -17,24 +16,36 @@
   }
 
   .custom-date-time-wrap {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-
-    .svg-icon {
-      padding: 0 5px;
+    padding: 1em 1em 0.5em;
+    border: 1px solid $primary-low;
+    border-top: none;
+    margin-top: -0.667em;
+    background: $primary-very-low;
+    .d-icon {
+      padding: 0 0.75em 0 0;
+      color: $primary-high;
+      margin-top: -0.5em;
     }
 
-    .date-picker-wrapper {
-      flex: 1;
-
-      .date-picker {
+    .tap-tile-date-input,
+    .tap-tile-time-input {
+      display: flex;
+      align-items: center;
+      input {
         width: 100%;
+        min-width: unset;
       }
     }
 
+    .date-picker,
     .time-input {
-      flex: 1;
+      text-align: left;
+      padding-top: 5px;
+    }
+
+    .time-input,
+    .date-picker-wrapper {
+      flex: 1 1 auto;
     }
   }
 }
diff --git a/app/assets/stylesheets/common/components/tap-tile.scss b/app/assets/stylesheets/common/components/tap-tile.scss
@@ -1,28 +1,17 @@
 .tap-tile-grid {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
   justify-content: space-between;
-  $tile-width: 100px;
-  $horizontal-tile-padding: 5px;
+  margin: 0.5em 0 1em 0;
 
   .tap-tile {
     color: $primary-high;
-    padding: 10px $horizontal-tile-padding;
+    padding: 0.75em;
     display: flex;
-    flex-direction: column;
-    text-align: center;
+    flex-wrap: wrap;
     align-items: center;
-    border: 1px solid $primary-medium;
-    margin: 0 0 20px;
-    width: $tile-width;
-    font-size: $font-down-2;
+    border: 1px solid $primary-low;
+    margin: 0 0 0.5em;
     cursor: pointer;
 
-    @media screen and (max-width: 360px) {
-      width: $tile-width - 10;
-    }
-
     &:hover {
       background-color: $tertiary-low;
     }
@@ -31,16 +20,18 @@
       background-color: $highlight-medium;
     }
 
-    .svg-icon,
-    .svg-icon-title {
-      width: 2.5em;
-      height: 2.5em;
-      margin-bottom: 10px;
+    .d-icon {
+      color: $primary-medium;
+      margin: 0 0.5em 0 0;
     }
-  }
 
-  &::after {
-    content: "";
-    width: $tile-width + ($horizontal-tile-padding * 3);
+    .tap-tile-title {
+      font-weight: bold;
+      margin-right: auto;
+    }
+
+    .tap-tile-date {
+      margin-left: 1em;
+    }
   }
 }