JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/94466
Change subject: Update progressive action button in new overlays
......................................................................
Update progressive action button in new overlays
Per Kaity's request.
Change-Id: Id30660468929fcde6a9bd87872f8240b26e27ba0
---
M less/common/OverlayNew.less
A less/common/images/check.png
D less/modules/images/upload.png
M less/modules/uploadsNew/PhotoUploadOverlay.less
M templates/OverlayNew.html
5 files changed, 32 insertions(+), 17 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/66/94466/1
diff --git a/less/common/OverlayNew.less b/less/common/OverlayNew.less
index 040f65b..8aef893 100644
--- a/less/common/OverlayNew.less
+++ b/less/common/OverlayNew.less
@@ -4,7 +4,7 @@
@headerMargin: .4em;
@headingMarginV: 1em;
@headingFontSize: 1em;
-@buttonSize: @headingFontSize + @headingMarginV * 2;
+@buttonSize: @headingFontSize + @headingMarginV * 2 + @headerMargin;
.overlay-enabled {
.overlay {
@@ -29,8 +29,9 @@
width: 100%;
.box-sizing(border-box);
- > div, h2 {
+ > ul, h2 {
display: table-cell;
+ vertical-align: bottom;
border-bottom: 1px solid #cacaca;
}
@@ -41,32 +42,42 @@
font-size: @headingFontSize;
}
- > div, button {
- width: @buttonSize;
+ > ul, button {
+ width: @buttonSize - @headerMargin;
white-space: nowrap;
}
button {
+ width: @buttonSize;
border-radius: 0;
min-height: @buttonSize;
font-weight: bold;
+ margin-top: -@headerMargin;
&.cancel {
color: #d11d13;
}
}
- > div:first-child button {
+ > ul:first-child li:first-child {
border-right: 1px solid #cacaca;
+
+ button {
+ margin-left: -@headerMargin;
+ }
}
- > div:last-child button:last-child {
+ > ul:last-child li:last-child {
border-left: 1px solid #cacaca;
+
+ button {
+ margin-right: -@headerMargin;
+ }
}
.icon {
text-indent: -9999px;
- background-position: 50% .5em;
+ background-position: 50%;
background-repeat: no-repeat;
.background-size( 24px, auto );
@@ -77,6 +88,14 @@
&.cancel {
background-image: url(images/cancel.png);
}
+
+ &.submit {
+ // following 2 rules to hide the border
+ margin-left: -1px;
+ margin-bottom: -1px;
+ background-image: url(images/check.png);
+ background-color: #00af8b;
+ }
}
}
diff --git a/less/common/images/check.png b/less/common/images/check.png
new file mode 100644
index 0000000..50ad8e8
--- /dev/null
+++ b/less/common/images/check.png
Binary files differ
diff --git a/less/modules/images/upload.png b/less/modules/images/upload.png
deleted file mode 100644
index f070263..0000000
--- a/less/modules/images/upload.png
+++ /dev/null
Binary files differ
diff --git a/less/modules/uploadsNew/PhotoUploadOverlay.less
b/less/modules/uploadsNew/PhotoUploadOverlay.less
index 71d886a..8b69a8a 100644
--- a/less/modules/uploadsNew/PhotoUploadOverlay.less
+++ b/less/modules/uploadsNew/PhotoUploadOverlay.less
@@ -18,10 +18,6 @@
height: @height !important;
}
- .submit {
- background-image: url(../images/upload.png);
- }
-
textarea {
.box-sizing( border-box );
width: 100%;
diff --git a/templates/OverlayNew.html b/templates/OverlayNew.html
index 481b607..58ecea0 100644
--- a/templates/OverlayNew.html
+++ b/templates/OverlayNew.html
@@ -1,12 +1,12 @@
<div class="overlay-header">
- <div>
- <button class="cancel icon">{{closeMsg}}</button>
- </div>
+ <ul>
+ <li><button class="cancel icon">{{closeMsg}}</button></li>
+ </ul>
<h2>{{{heading}}}</h2>
- <div>
+ <ul>
{{#headerButtons}}
- <button class="{{className}}">{{msg}}</button>
+ <li><button class="{{className}}">{{msg}}</button></li>
{{/headerButtons}}
- </div>
+ </ul>
</div>
{{>content}}
--
To view, visit https://gerrit.wikimedia.org/r/94466
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id30660468929fcde6a9bd87872f8240b26e27ba0
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
