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"