From 72519e4bb94341bbbeac7b681178f45c6219a55c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Brugarolas?= Date: Sun, 13 Jan 2019 20:19:12 +0100 Subject: [PATCH] Scrollable list of cities in small devices --- CHANGELOG.md | 3 +++ src/assets/styles/breakpoints.less | 4 ++++ src/ui/containers/modal/modal.less | 11 ++++++++++- 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index aa2d62c..c1f652e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +## v1.1.1 +Scrollable list of cities in small devices + ## v1.1.0 Responsive design Added local time diff --git a/src/assets/styles/breakpoints.less b/src/assets/styles/breakpoints.less index 04a6c4d..00e61a7 100644 --- a/src/assets/styles/breakpoints.less +++ b/src/assets/styles/breakpoints.less @@ -9,3 +9,7 @@ @tablet-above: ~'(min-width: @{tablet})'; @laptop-above: ~'(min-width: @{laptop})'; @desktop-above: ~'(min-width: @{desktop})'; + +@tall-device: 920px; + +@tall-above: ~"(min-height: @{tall-device})"; diff --git a/src/ui/containers/modal/modal.less b/src/ui/containers/modal/modal.less index 0a2ca04..aad60e6 100644 --- a/src/ui/containers/modal/modal.less +++ b/src/ui/containers/modal/modal.less @@ -8,15 +8,24 @@ background-color: @color-background; width: 90%; max-width: 520px; - margin: 200px auto; + margin: 120px auto 50px auto; padding: 20px 20px; text-align: center; box-shadow: 0 0 5px @color-shadow-darker; border-radius: 4px; overflow: hidden; + -webkit-overflow-scrolling: touch; + overflow-y: auto; + max-height: calc(100% - 170px); + @media @tablet-above { padding: 20px 50px; max-width: 580px; } + + @media @tall-above { + margin: 200px auto 130px auto; + max-height: calc(100% - 330px); + } }