Kaldari has uploaded a new change for review.
https://gerrit.wikimedia.org/r/111374
Change subject: WIP: Story 1643: Improve typography for overlays
......................................................................
WIP: Story 1643: Improve typography for overlays
Improve typography for the following overlays:
* Notifications
* Talk
* Issues
Change-Id: I3bb1af2dca1d0c39dc1d80bac8801bc0acb1c2f2
---
M less/common/OverlayNew.less
M less/modules/NotificationsOverlay.less
M less/modules/issues.less
M less/modules/talk.less
M templates/talkSection.html
5 files changed, 76 insertions(+), 10 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/74/111374/1
diff --git a/less/common/OverlayNew.less b/less/common/OverlayNew.less
index 9394669..089239a 100644
--- a/less/common/OverlayNew.less
+++ b/less/common/OverlayNew.less
@@ -278,8 +278,9 @@
}
.mw-mf-overlay-header {
+ font-family: @fontFamily;
font-weight: normal;
- font-size: .9em;
+ font-size: 1em;
padding: .3em @contentMargin;
background-color: @grayLightest;
color: @grayMedium;
diff --git a/less/modules/NotificationsOverlay.less
b/less/modules/NotificationsOverlay.less
index 78b8786..1d64244 100644
--- a/less/modules/NotificationsOverlay.less
+++ b/less/modules/NotificationsOverlay.less
@@ -13,17 +13,27 @@
float: left;
margin-right: 10px;
}
+ .mw-echo-title {
+ font-size: 1em;
+ line-height: 1.4;
+ }
.mw-echo-content {
+ font-size: 0.9em;
+ line-height: 1.4;
margin-left: 40px;
}
+ .mw-echo-payload {
+ margin-top: 0.4em
+ }
.mw-echo-notification-footer {
- font-size: 0.75em;
+ margin-top: .6em;
+ font-size: .9em;
}
.mw-echo-notification-primary-link {
display: none;
}
.mw-echo-notification {
- padding: 1.2em 1em 1em;
+ padding: 1.75em 2.75em;
border-bottom: 1px solid #eee;
}
.mw-echo-notification:hover {
diff --git a/less/modules/issues.less b/less/modules/issues.less
index 16c1057..eca14d7 100644
--- a/less/modules/issues.less
+++ b/less/modules/issues.less
@@ -40,7 +40,8 @@
margin: 0 @headerMargin;
li {
padding: @iconSize * 2.5 @headerMargin @iconSize
@headerMargin;
- background-position: center @iconSize;
+ padding: 2em @headerMargin 2em 6em;
+ background-position: 3.5em center;
background-image: url(images/issues/gray-triangle.png);
border-bottom: solid 1px @grayLight;
}
diff --git a/less/modules/talk.less b/less/modules/talk.less
index 9f449b9..7526836 100644
--- a/less/modules/talk.less
+++ b/less/modules/talk.less
@@ -18,4 +18,56 @@
.error {
border: solid 1px @redBase;
}
+ input, textarea {
+ width: 96%;
+ margin-top: 1em;
+ }
+}
+
+.content {
+ margin: 0.8em 58px 0px 58px;
+}
+
+.alpha, .beta {
+ .overlay {
+ .content {
+ margin: 0 auto 0 0 !important;
+ }
+ }
+}
+
+.comment {
+ margin: 40px 0 10px 0;
+
+ .comment-content {
+ margin: 0 @contentMargin;
+ }
+
+ .disclaimers {
+ font-style: italic;
+ font-size: .8em;
+ color: @grayMedium;
+ }
+
+ button {
+ padding: 0.8em 2.4em;
+ }
+}
+
+.content-header {
+ .button, button, input[type="submit"] {
+ padding: 0px 5em;
+ margin-top: 14px;
+ }
+}
+
+@media all and (min-width: @wgMFDeviceWidthTablet) {
+ .page-list {
+ li {
+ padding: 1.75em 2.75em 1.75em 3.75em;
+ }
+ }
+ .content-header {
+ padding-left: 3.75em !important;
+ }
}
diff --git a/templates/talkSection.html b/templates/talkSection.html
index 0e7e460..d026c65 100644
--- a/templates/talkSection.html
+++ b/templates/talkSection.html
@@ -5,11 +5,13 @@
<div class="loading"></div>
<div class="comment">
<h3 class="mw-mf-overlay-header">{{reply}}</h3>
- <p>
- <em>{{info}}</em>
- <em>{{{licenseMsg}}}</em>
- </p>
- <textarea></textarea>
- <button>{{confirmMsg}}</button>
+ <div class="comment-content">
+ <textarea></textarea>
+ <p class="disclaimers">
+ {{info}}
+ {{{licenseMsg}}}
+ </p>
+ <button>{{confirmMsg}}</button>
+ </div>
</div>
</div>
--
To view, visit https://gerrit.wikimedia.org/r/111374
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3bb1af2dca1d0c39dc1d80bac8801bc0acb1c2f2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Kaldari <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
