Scrollable list of cities in small devices

Brugarolas · Jan 13, 2019 · 72519e4 · 72519e4
1 parent 346eafc
commit 72519e4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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);
+  }
 }