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; }