jenkins-bot has submitted this change and it was merged.

Change subject: Design: Improve spacing of content overlay on phones
......................................................................


Design: Improve spacing of content overlay on phones

Reduced spacing by making it percent based on phones instead of fixed em.
Result is better spacing on phones based on the screen size and even better
when phone keyboard is up with the overlay open (see bug for bad behavior).

See bug for screenshots of how this patch looks like.

Bug: T95628
Change-Id: I50bf8200fc462d4508f79400833c6bb932b65e27
---
M resources/ext.gather.watchstar/contentOverlay.less
1 file changed, 29 insertions(+), 16 deletions(-)

Approvals:
  Jdlrobson: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/resources/ext.gather.watchstar/contentOverlay.less 
b/resources/ext.gather.watchstar/contentOverlay.less
index e9f83bb..f5b092d 100644
--- a/resources/ext.gather.watchstar/contentOverlay.less
+++ b/resources/ext.gather.watchstar/contentOverlay.less
@@ -38,6 +38,23 @@
        background-repeat: no-repeat;
        .background-image('images/watchstar.svg');
 
+       &.content-overlay {
+               background-color: white;
+               color: @grayDark;
+               top: 5%;
+               bottom: 5%;
+               left: 3%;
+               right: 3%;
+               width: auto;
+               margin: auto;
+               max-width: 500px;
+
+               &.compact {
+                       top: 1px;
+                       bottom: 1px;
+               }
+       }
+
        .overlay-header-container .overlay-header {
                li {
                        // Make the heading row normal height
@@ -138,25 +155,21 @@
                margin: 32px 0 12px;
        }
 
-       &.content-overlay {
-               background-color: white;
-               color: @grayDark;
+       .more-collections {
+               margin: auto;
+               display: block;
+       }
+}
+
+/**
+ * Tablet/desktop styles
+ */
+
+@media all and (min-width: @wgMFDeviceWidthTablet) {
+       .overlay.collection-overlay.content-overlay {
                top: @headerHeight * 1.2;
                bottom: @headerHeight * 1.2;
                left: 2em;
                right: 2em;
-               width: auto;
-               margin: auto;
-               max-width: 500px;
-
-               &.compact {
-                       top: 1px;
-                       bottom: 1px;
-               }
-       }
-
-       .more-collections {
-               margin: auto;
-               display: block;
        }
 }

-- 
To view, visit https://gerrit.wikimedia.org/r/205834
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: I50bf8200fc462d4508f79400833c6bb932b65e27
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/Gather
Gerrit-Branch: master
Gerrit-Owner: Jhernandez <jhernan...@wikimedia.org>
Gerrit-Reviewer: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Jhernandez <jhernan...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to