From 169aa752d8290a6d4363f82e6cc7579369f2f5b9 Mon Sep 17 00:00:00 2001 From: Kristina Lim Date: Sun, 26 Aug 2018 22:01:24 +0800 Subject: [PATCH] Enlarge potential size of modals for large screens Change modals for large screens from 10% position from top and 80% max height, to 5% position from top and 90% max height. This is to accommodate the taller cookies policy modal. It seems that it is not easy to apply a custom position and height to a specific modal only. This doesn't seem to be supported by the modal library currently being used. Before the recent changes, most modals were rendering at 10px top position (not the originally planned 10%), so changing this to 5% doesn't seem to be much of a compromise. --- app/assets/stylesheets/darkswarm/animations.scss | 6 +++--- app/assets/stylesheets/darkswarm/modals.css.scss | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/animations.scss b/app/assets/stylesheets/darkswarm/animations.scss index 8a6efdc161..b3848777ba 100644 --- a/app/assets/stylesheets/darkswarm/animations.scss +++ b/app/assets/stylesheets/darkswarm/animations.scss @@ -125,9 +125,9 @@ transition: transform 0.2s ease-out; @media only screen and (min-width: 641px) { - -webkit-transform: translate(0, -10%); - -ms-transform: translate(0, -10%); - transform: translate(0, -10%); + -webkit-transform: translate(0, -5%); + -ms-transform: translate(0, -5%); + transform: translate(0, -5%); } } diff --git a/app/assets/stylesheets/darkswarm/modals.css.scss b/app/assets/stylesheets/darkswarm/modals.css.scss index 30b66eeb2b..3358848aca 100644 --- a/app/assets/stylesheets/darkswarm/modals.css.scss +++ b/app/assets/stylesheets/darkswarm/modals.css.scss @@ -29,8 +29,8 @@ dialog // Medium and up - when modal IS NOT full screen @media only screen and (min-width: 641px) { - top: 10%; - max-height: 80%; + top: 5%; + max-height: 90%; } }