UX: Fix date input display in iOS (#14307)

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")
 }}

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

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

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;

app/assets/stylesheets/mobile/reviewables.scss

@@ -36,8 +36,6 @@
   }
 
   .reviewable-filter {
-    margin: 0 0 0.5em 0;
-
     .filter-label {
       margin: 0;
     }

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"