diff --git a/app/public/index.html b/app/public/index.html
index adc6b0b..b10bad3 100644
--- a/app/public/index.html
+++ b/app/public/index.html
@@ -7,7 +7,7 @@
Am I Rent Stabilized?
-
+
diff --git a/app/src/components/addressSearchForm.js b/app/src/components/addressSearchForm.js
index c71ade1..4405f53 100644
--- a/app/src/components/addressSearchForm.js
+++ b/app/src/components/addressSearchForm.js
@@ -20,6 +20,18 @@ import {
const INPUT_THROTTLE_MS = 350;
const MIN_SEARCH_TEXT_LENGTH = 1;
+// NOTE: this fixes a bug (#131) caused by the virtual keyboard on mobile devices
+const hideOrRevealNonActiveSlides = (hide) => {
+ const slides = [...document.querySelectorAll(".slide")];
+ slides.forEach((slide) => {
+ if (!slide.classList.contains("active")) {
+ // hide all non-active slides so that the address input remains in the visual viewport when the virtual keyboard appears
+ // unhide all non-active slides when ready to resume slide navigation so that things work as normally
+ hide ? slide.classList.add("hidden") : slide.classList.remove("hidden");
+ }
+ });
+};
+
export class AddressSearchForm extends Component {
constructor(props) {
super(props);
@@ -46,6 +58,7 @@ export class AddressSearchForm extends Component {
INPUT_THROTTLE_MS,
{ leading: true }
);
+ this.handleFocus = this.handleFocus.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleAGChange = this.handleAGChange.bind(this);
this.handleRSChange = this.handleRSChange.bind(this);
@@ -72,17 +85,24 @@ export class AddressSearchForm extends Component {
bindEvents() {
this.element.addEventListener("submit", this.handleSubmit);
this.inputAddress.addEventListener("input", this.handleInputChange);
+ this.inputAddress.addEventListener("focus", this.handleFocus);
}
removeEvents() {
this.element.removeEventListener("submit", this.handleSubmit);
this.inputAddress.removeEventListener("input", this.handleInputChange);
+ this.inputAddress.removeEventListener("focus", this.handleFocus);
+ }
+
+ handleFocus() {
+ hideOrRevealNonActiveSlides(true);
}
handleSubmit(event) {
event.preventDefault();
this.handleInputChange.cancel();
this.clearCachedSearchResult();
+ hideOrRevealNonActiveSlides(false);
if (this.inputAddress.value.length) {
this.searchRentStabilized(this.inputAddress.value);
diff --git a/app/src/scss/_address_form.scss b/app/src/scss/_address_form.scss
index 558e9cb..f49ed33 100644
--- a/app/src/scss/_address_form.scss
+++ b/app/src/scss/_address_form.scss
@@ -26,10 +26,6 @@
position: center 90%;
}
- &.es {
- font-size: 0.75em;
- }
-
&.invalid {
border: 3px dashed $valError;
}
@@ -62,10 +58,7 @@
input {
&.address-input {
height: 60px;
-
- &.es {
- font-size: 0.85em;
- }
+ font-size: 16px;
}
}
diff --git a/app/src/scss/_slides.scss b/app/src/scss/_slides.scss
index 9f3084e..61975fd 100644
--- a/app/src/scss/_slides.scss
+++ b/app/src/scss/_slides.scss
@@ -1,10 +1,12 @@
.slides {
- position: absolute;
- top: 60px;
+ position: fixed;
+ top: $nav-main-height;
+ bottom: 0;
width: 960px;
- left: 53.776041666667%;
- margin-left: -516.25px;
- height: calc(100% - #{$nav-main-height});
+ left: 0;
+ right: 0;
+ margin-left: auto;
+ margin-right: auto;
overflow: hidden;
z-index: 10;
background-color: #fff;
@@ -15,12 +17,6 @@
margin: 0;
}
- @include responsive(small-screens) {
- width: 100%;
- left: 0;
- margin: 0;
- }
-
@include responsive_mobile_landscape() {
display: none;
}