Santhosh has submitted this change and it was merged.
Change subject: Adjusted layout for side-by-side views
......................................................................
Adjusted layout for side-by-side views
Several changes to better fit short messages when displayed in a
side-by-side view such as page or proofread:
* Margins are used when width is more than 900px
* Style adjusted to make the list of messages look more like a document.
* Fixes in the buttons to switch views to make them look connected.
* By using a tux-view-switcher class, CSS rules for addign icons on toggle
buttons are smplified.
Change-Id: I39a36df9d76b10dad5c511be391d20345e84b663
---
M resources/css/ext.translate.messagetable.css
M resources/css/ext.translate.proofread.css
M utils/TuxMessageTable.php
3 files changed, 42 insertions(+), 27 deletions(-)
Approvals:
Santhosh: Verified; Looks good to me, approved
diff --git a/resources/css/ext.translate.messagetable.css
b/resources/css/ext.translate.messagetable.css
index 032499c..0ac40dd 100644
--- a/resources/css/ext.translate.messagetable.css
+++ b/resources/css/ext.translate.messagetable.css
@@ -54,7 +54,7 @@
/* Default colors */
.tux-messagelist {
color: #252525;
- background-color: #FFFFFF;
+ background-color: #F8F8F8;
max-width: 800px;
}
@@ -71,6 +71,7 @@
margin-left: 5px !important;
vertical-align: middle;
border-bottom: 1px solid #C9C9C9;
+ background: #FFFFFF;
}
.tux-message-item.translated,
@@ -209,24 +210,33 @@
text-shadow: none;
}
-.toggle.button:first-child {
- border-radius: 3px 0 0 3px;
-}
-
-.toggle.button:last-child {
- border-radius: 0 3px 3px 0;
+.tux-action-bar .tux-view-switcher {
+ padding: 0 5px;
}
.tux-action-bar .tux-view-switcher .toggle.button {
- width: 50%;
+ width: 33%;
}
-.tux-action-bar .translate-mode-button:before {
+.tux-action-bar .tux-view-switcher .toggle.button:first-child {
+ border-radius: 3px 0 0 3px;
+ border-right: none;
+}
+
+.tux-action-bar .tux-view-switcher .toggle.button:last-child {
+ border-radius: 0 3px 3px 0;
+ border-left: none;
+}
+
+.tux-action-bar .tux-view-switcher .toggle.button:before {
content: "";
height: 15px;
width: 25px;
display: inline-block;
vertical-align: bottom;
+}
+
+.tux-action-bar .translate-mode-button:before {
background: transparent url(../images/view-list.png) center center
no-repeat;
background-image: -webkit-linear-gradient(transparent, transparent),
url(../images/view-list.svg);
background-image: -moz-linear-gradient(transparent, transparent),
url(../images/view-list.svg);
@@ -241,11 +251,6 @@
}
.tux-action-bar .page-mode-button:before {
- content: "";
- height: 15px;
- width: 25px;
- display: inline-block;
- vertical-align: bottom;
background: transparent url(../images/view-page.png) center center
no-repeat;
background-image: -webkit-linear-gradient(transparent, transparent),
url(../images/view-page.svg);
background-image: -moz-linear-gradient(transparent, transparent),
url(../images/view-page.svg);
@@ -260,11 +265,6 @@
}
.tux-action-bar .tux-proofread-button:before {
- content: "";
- height: 15px;
- width: 25px;
- display: inline-block;
- vertical-align: bottom;
background: transparent url(../images/view-proofread.png) center center
no-repeat;
background-image: -webkit-linear-gradient(transparent, transparent),
url(../images/view-proofread.svg);
background-image: -moz-linear-gradient(transparent, transparent),
url(../images/view-proofread.svg);
diff --git a/resources/css/ext.translate.proofread.css
b/resources/css/ext.translate.proofread.css
index a304469..b016756 100644
--- a/resources/css/ext.translate.proofread.css
+++ b/resources/css/ext.translate.proofread.css
@@ -1,16 +1,30 @@
.ext-translate-container .tux-messagelist .tux-message-proofread {
height: auto;
min-height: 50px;
- padding: 20px 0 20px 0;
- margin: 0;
+ padding: 40px 0px;
+ margin: 0 auto;
vertical-align: middle;
- border-bottom: 1px solid #f8f8f8;
- border-left: 1px solid #f0f0f0;
- border-right: 1px solid #f0f0f0;
+ border-bottom: 1px solid #f0f0f0;
+ border-left: 1px solid #DDDDDD;
+ border-right: 1px solid #DDDDDD;
+ max-width: 900px;
+ background: #FFFFFF;
}
-.tux-message-proofread:hover {
- background: #fefefe;
+.ext-translate-container .tux-messagelist .tux-message-proofread:hover {
+ background: #FCFCFC;
+}
+
+.ext-translate-container .tux-messagelist .tux-message-proofread:first-child {
+ margin-top: 10px;
+ padding-top: 60px;
+ border-top: 1px solid #DDDDDD;
+}
+
+.ext-translate-container .tux-messagelist .tux-message-proofread:last-child {
+ margin-bottom: 10px;
+ padding-bottom: 60px;
+ border-bottom: 1px solid #DDDDDD;
}
.tux-message-proofread.open .tux-proofread-status,
@@ -25,6 +39,7 @@
font-size: 16px;
line-height: 1.5em;
padding-right: 25px;
+ padding-left: 25px;
}
.tux-messagelist .tux-message-proofread .tux-proofread-translation {
diff --git a/utils/TuxMessageTable.php b/utils/TuxMessageTable.php
index 40f1def..99b6f47 100644
--- a/utils/TuxMessageTable.php
+++ b/utils/TuxMessageTable.php
@@ -62,7 +62,7 @@
. '</button>'
. '</div>';
- $footer .= '<div class="six columns text-center">'
+ $footer .= '<div class="six columns tux-view-switcher
text-center">'
. '<button class="toggle button down
translate-mode-button">'
. $this->msg( 'tux-editor-translate-mode'
)->escaped()
. '</button>'
--
To view, visit https://gerrit.wikimedia.org/r/52378
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I39a36df9d76b10dad5c511be391d20345e84b663
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Translate
Gerrit-Branch: master
Gerrit-Owner: Pginer <[email protected]>
Gerrit-Reviewer: Amire80 <[email protected]>
Gerrit-Reviewer: Santhosh <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
