From 33fb3b7ec8249f43eaef80dfd10968988f9ef763 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Fri, 10 Sep 2021 15:13:45 -0400
Subject: [PATCH] UX: Fix date input display in iOS (#14307)

---
 .../app/templates/components/date-time-input-range.hbs    | 2 ++
 .../app/templates/components/date-time-input.hbs          | 2 ++
 .../javascripts/discourse/app/templates/review-index.hbs  | 1 +
 app/assets/stylesheets/common/components/date-input.scss  | 8 +++++++-
 app/assets/stylesheets/mobile/reviewables.scss            | 2 --
 config/locales/client.en.yml                              | 3 +++
 6 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/components/date-time-input-range.hbs b/app/assets/javascripts/discourse/app/templates/components/date-time-input-range.hbs
index a8e1786acec..6953677d092 100644
--- a/app/assets/javascripts/discourse/app/templates/components/date-time-input-range.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/date-time-input-range.hbs
@@ -3,6 +3,7 @@
   onChange=(action "onChangeRanges" (hash prop="from"))
   showTime=showFromTime
   class="from"
+  placeholder=(i18n "dates.from_placeholder")
 }}
 
 {{date-time-input
@@ -13,4 +14,5 @@
   showTime=showToTime
   clearable=clearable
   class="to"
+  placeholder=(i18n "dates.to_placeholder")
 }}
diff --git a/app/assets/javascripts/discourse/app/templates/components/date-time-input.hbs b/app/assets/javascripts/discourse/app/templates/components/date-time-input.hbs
index 912e85951f6..3101e3b8f27 100644
--- a/app/assets/javascripts/discourse/app/templates/components/date-time-input.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/date-time-input.hbs
@@ -1,6 +1,7 @@
 {{#unless timeFirst}}
   {{date-input
     date=date
+    placeholder=placeholder
     relativeDate=relativeDate
     onChange=(action "onChangeDate")
     useGlobalPickerContainer=useGlobalPickerContainer
@@ -18,6 +19,7 @@
 {{#if timeFirst}}
   {{date-input
     date=date
+    placeholder=placeholder
     relativeDate=relativeDate
     onChange=(action "onChangeDate")
     useGlobalPickerContainer=useGlobalPickerContainer
diff --git a/app/assets/javascripts/discourse/app/templates/review-index.hbs b/app/assets/javascripts/discourse/app/templates/review-index.hbs
index 488c0dbc1da..e7e32f2f1b2 100644
--- a/app/assets/javascripts/discourse/app/templates/review-index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/review-index.hbs
@@ -93,6 +93,7 @@
       {{/if}}
 
       <div class="reviewable-filter date-range">
+        {{i18n "review.date_filter"}}
         {{date-time-input-range
           from=filterFromDate
           to=filterToDate
diff --git a/app/assets/stylesheets/common/components/date-input.scss b/app/assets/stylesheets/common/components/date-input.scss
index 372f4792bd6..29b76e57410 100644
--- a/app/assets/stylesheets/common/components/date-input.scss
+++ b/app/assets/stylesheets/common/components/date-input.scss
@@ -30,8 +30,14 @@
     &:focus {
       @include default-focus;
     }
-  }
 
+    // iOS doesn't display the placeholder attribute for date inputs
+    .ios-device &:after {
+      font-size: var(--font-0);
+      color: var(--primary-medium);
+      content: attr(placeholder);
+    }
+  }
   .pika-single {
     margin-left: -1px;
     margin-top: 1px;
diff --git a/app/assets/stylesheets/mobile/reviewables.scss b/app/assets/stylesheets/mobile/reviewables.scss
index 7b088643ab2..847037fa6f4 100644
--- a/app/assets/stylesheets/mobile/reviewables.scss
+++ b/app/assets/stylesheets/mobile/reviewables.scss
@@ -36,8 +36,6 @@
   }
 
   .reviewable-filter {
-    margin: 0 0 0.5em 0;
-
     .filter-label {
       margin: 0;
     }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index b3e537218f7..ae1294b14cf 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -132,6 +132,8 @@ en:
       previous_month: "Previous Month"
       next_month: "Next Month"
       placeholder: date
+      from_placeholder: "from date"
+      to_placeholder: "to date"
     share:
       topic_html: 'Topic: <span class="topic-title">%{topicTitle}</span>'
       post: "post #%{postNumber}"
@@ -411,6 +413,7 @@ en:
 
     review:
       order_by: "Order by"
+      date_filter: "Posted between"
       in_reply_to: "in reply to"
       explain:
         why: "explain why this item ended up in the queue"