Jhernandez has uploaded a new change for review.
https://gerrit.wikimedia.org/r/205834
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, 30 insertions(+), 17 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Gather
refs/changes/34/205834/1
diff --git a/resources/ext.gather.watchstar/contentOverlay.less
b/resources/ext.gather.watchstar/contentOverlay.less
index e9f83bb..c8ed526 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: @headerHeight * 1.2;
+ bottom: @headerHeight * 1.2;
+ left: 2em;
+ right: 2em;
+ 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;
- 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;
}
}
+
+/**
+ * Phone styles
+ */
+
+@media all and (max-width: @wgMFDeviceWidthTablet) {
+ .overlay.collection-overlay.content-overlay {
+ top: 5%;
+ bottom: 5%;
+ left: 3%;
+ right: 3%;
+ }
+}
--
To view, visit https://gerrit.wikimedia.org/r/205834
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I50bf8200fc462d4508f79400833c6bb932b65e27
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Gather
Gerrit-Branch: master
Gerrit-Owner: Jhernandez <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
