Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/206321
Change subject: Correctly display Flow in RTL interface and content
......................................................................
Correctly display Flow in RTL interface and content
There are two types of directionalities Flow should adhere to -
content language and interface language. CSSJanus flips directions
dependent on interface language, but some of those operatiosn are
not correct, since they are content-dependent. For instance, the
topic subject is content-dependent regardless of the interface.
For those content dependent casees, make sure the display flips
between content directionalities and add @noflip rules so that
CSSJanus does not touch those regardless of interface.
On top of that there are several elements that should flip for
interface values, like the flow-board-navigation elements. For
those to work properly we have to add LTR rules so CSSJanus flips
those in RTL.
Bug: T95717
Change-Id: I5e8112b2259cbc8badf2b3ce93b53b38b0ade319
---
M modules/styles/board/menu.less
M modules/styles/board/navigation.less
M modules/styles/board/terms-of-use.less
M modules/styles/board/topic/post.less
M modules/styles/board/topic/titlebar.less
M modules/styles/board/topic/watchlist.less
M modules/styles/common.less
7 files changed, 191 insertions(+), 44 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow
refs/changes/21/206321/1
diff --git a/modules/styles/board/menu.less b/modules/styles/board/menu.less
index 5aa8ce2..16ef1d2 100644
--- a/modules/styles/board/menu.less
+++ b/modules/styles/board/menu.less
@@ -8,7 +8,6 @@
top: 0;
clear: both;
position: static;
- right: 0;
bottom: 0;
ul {
@@ -31,6 +30,18 @@
.flow-menu-js-drop {
display: none;
}
+}
+
+// Correctly display positions based on content language
+div#content .mw-content-ltr .flow-menu {
+ /* @noflip */
+ right: 0;
+}
+
+// Correctly display positions based on content language
+div#content .mw-content-rtl .flow-menu {
+ /* @noflip */
+ left: 0;
}
div.flow-menu-inverted {
@@ -114,7 +125,6 @@
// This is the menu opener handler; it contains an anchor which
triggers the menu in touch devices, without JS
.flow-menu-js-drop {
display: block;
- text-align: right;
text-indent: 0;
cursor: pointer;
@@ -136,6 +146,19 @@
}
}
+// Correct positioning for ltr/rtl content direction
+div#content .mw-content-ltr div > .flow-menu .flow-menu-js-drop {
+ /* @noflip */
+ text-align: right;
+}
+
+// Correct positioning for ltr/rtl content direction
+div#content .mw-content-rtl div > .flow-menu .flow-menu-js-drop {
+ /* @noflip */
+ text-align: left;
+}
+
+
// @todo move this
div.flow-post > .flow-menu {
.flow-menu-js-drop {
diff --git a/modules/styles/board/navigation.less
b/modules/styles/board/navigation.less
index 9641992..784fbe0 100644
--- a/modules/styles/board/navigation.less
+++ b/modules/styles/board/navigation.less
@@ -15,11 +15,25 @@
padding: 0.2em 0.3em;
}
+ // We need these because CSSJanus will flip it in rtl
+ a.flow-board-navigator-first {
+ float: left;
+ position: static;
+ }
+
a.flow-board-navigator-last {
float: right;
position: static;
}
+ a.flow-board-navigator-first .wikiglyph {
+ float: left;
+ }
+
+ a.flow-board-navigator-last .wikiglyph {
+ float: right;
+ }
+
.flow-board-navigation-inner {
overflow: hidden;
border-bottom: 1px solid @colorGrayLight;
diff --git a/modules/styles/board/terms-of-use.less
b/modules/styles/board/terms-of-use.less
index 7aa0ef6..f1dbd19 100644
--- a/modules/styles/board/terms-of-use.less
+++ b/modules/styles/board/terms-of-use.less
@@ -13,6 +13,9 @@
color: @colorTextLight;
font-size: .75em;
line-height: 1.4;
+ // These two will flip in RTL inerface
+ text-align: left;
+ direction: ltr;
}
@media all and (min-width: @wgFlowDeviceWidthTablet) {
diff --git a/modules/styles/board/topic/post.less
b/modules/styles/board/topic/post.less
index aba5c5b..8afd0bb 100644
--- a/modules/styles/board/topic/post.less
+++ b/modules/styles/board/topic/post.less
@@ -18,47 +18,8 @@
.flow-post {
position: relative;
- margin: .5em 0 0 .75em;
- padding: 0 .5em 0 0;
color: @colorText;
word-wrap: break-word;
-
- // Nested comments (replies & reply forms)
- .flow-replies {
- margin-left: @topicIndent;
- padding-left: 0.5em;
- border-left: 1px dotted @colorGrayLighter;
- }
-
- &.flow-post-max-depth .flow-replies {
- margin-left: 0;
- padding-left: 0;
- border-left-width: 0;
-
- .flow-post-max-depth {
- margin-left: 0;
- }
- }
-
- .flow-post-main {
- margin-left: 0.1em;
- }
-
- // Highlights a post (no IE6 support, but acceptable degradation)
- &.flow-post-highlighted {
- > .flow-post-main {
- @highlightedIndent: @topicIndent - 0.75em;
- padding-left: @highlightedIndent;
- border-left: solid @highlightedIndent @colorHighlight;
- }
- }
-
- // Highlights all posts newer than a specific post
- &.flow-post-highlight-newer {
- .flow-post-content {
- border-left: solid @highlightedIndent
@colorHighlightNewer;
- }
- }
&.flow-post-highlight-newer {
.flow-post-content {
@@ -112,16 +73,137 @@
}
}
+
+div#content .mw-content-ltr .flow-post {
+ /* @noflip */
+ margin: .5em 0 0 .75em;
+ /* @noflip */
+ padding: 0 .5em 0 0;
+
+ // Nested comments (replies & reply forms)
+ /* @noflip */
+ .flow-replies {
+ margin-left: @topicIndent;
+ padding-left: 0.5em;
+ border-left: 1px dotted @colorGrayLighter;
+ }
+
+ /* @noflip */
+ &.flow-post-max-depth .flow-replies {
+ margin-left: 0;
+ padding-left: 0;
+ border-left-width: 0;
+
+ /* @noflip */
+ .flow-post-max-depth {
+ margin-left: 0;
+ }
+ }
+
+ /* @noflip */
+ .flow-post-main {
+ margin-left: 0.1em;
+ }
+
+ // Highlights a post (no IE6 support, but acceptable degradation)
+ &.flow-post-highlighted {
+ /* @noflip */
+ > .flow-post-main {
+ @highlightedIndent: @topicIndent - 0.75em;
+ padding-left: @highlightedIndent;
+ border-left: solid @highlightedIndent @colorHighlight;
+ }
+ }
+
+ // Highlights all posts newer than a specific post
+ &.flow-post-highlight-newer {
+ .flow-post-content {
+ /* @noflip */
+ border-left: solid @highlightedIndent
@colorHighlightNewer;
+ }
+ }
+}
+
+
+div#content .mw-content-rtl .flow-post {
+ /* @noflip */
+ margin: .5em 0.75em 0 0;
+ /* @noflip */
+ padding: 0 0 0 .5em;
+
+ // Nested comments (replies & reply forms)
+ /* @noflip */
+ .flow-replies {
+ margin-right: @topicIndent;
+ padding-right: 0.5em;
+ border-right: 1px dotted @colorGrayLighter;
+ }
+
+ /* @noflip */
+ &.flow-post-max-depth .flow-replies {
+ margin-right: 0;
+ padding-right: 0;
+ border-right-width: 0;
+
+ /* @noflip */
+ .flow-post-max-depth {
+ margin-right: 0;
+ }
+ }
+
+ /* @noflip */
+ .flow-post-main {
+ margin-right: 0.1em;
+ }
+
+ // Highlights a post (no IE6 support, but acceptable degradation)
+ &.flow-post-highlighted {
+ /* @noflip */
+ > .flow-post-main {
+ @highlightedIndent: @topicIndent - 0.75em;
+ padding-right: @highlightedIndent;
+ border-right: solid @highlightedIndent @colorHighlight;
+ }
+ }
+
+ // Highlights all posts newer than a specific post
+ &.flow-post-highlight-newer {
+ .flow-post-content {
+ /* @noflip */
+ border-right: solid @highlightedIndent
@colorHighlightNewer;
+ }
+ }
+}
+
+
// Comment metadata
.flow-post-meta {
// @todo needs overflow: hidden but crops button border at bottom
color: @colorGrayDark;
font-size: .875em;
+}
+
+div#content .mw-content-ltr .flow-post-meta {
+ /* @noflip */
text-align: right;
}
-.flow-post-meta-actions {
+div#content .mw-content-rtl .flow-post-meta {
+ /* @noflip */
+ text-align: left;
+}
+
+div#content .mw-content-ltr .flow-post-meta-actions {
+ /* @noflip */
float: left;
+}
+
+div#content .mw-content-rtl .flow-post-meta-actions {
+ /* @noflip */
+ float: right;
+}
+
+.flow-post-meta-actions {
a {
&::after {
content: "\2022";
diff --git a/modules/styles/board/topic/titlebar.less
b/modules/styles/board/topic/titlebar.less
index 018a41c..acecca1 100644
--- a/modules/styles/board/topic/titlebar.less
+++ b/modules/styles/board/topic/titlebar.less
@@ -21,7 +21,6 @@
div#content .flow-topic-title {
padding: 0;
border-bottom: none;
- margin: 0 2.5em .15em 0;
font-family: sans-serif;
font-weight: bold;
word-break: break-word;
@@ -29,6 +28,18 @@
overflow: visible;
}
+// Correct positioning for ltr/rtl content direction
+div#content .mw-content-ltr .flow-topic-title {
+ /* @noflip */
+ margin: 0 2.5em .15em 0;
+}
+
+// Correct positioning for ltr/rtl content direction
+div#content .mw-content-rtl .flow-topic-title {
+ /* @noflip */
+ margin: 0 0 .15em 2.5em;
+}
+
.flow-moderated-topic-title {
margin-bottom: .33em;
color: @colorTextLight;
diff --git a/modules/styles/board/topic/watchlist.less
b/modules/styles/board/topic/watchlist.less
index 95081b0..108393c 100644
--- a/modules/styles/board/topic/watchlist.less
+++ b/modules/styles/board/topic/watchlist.less
@@ -6,7 +6,6 @@
.flow-watch-link {
position: absolute;
top: 0;
- right: 0;
&.flow-board-watch-link {
font-size: 1.5em;
@@ -50,6 +49,18 @@
}
}
+// Correct positioning for ltr/rtl content direction
+div#content .mw-content-ltr .flow-watch-link {
+ /* @noflip */
+ right: 0;
+}
+
+// Correct positioning for ltr/rtl content direction
+div#content .mw-content-rtl .flow-watch-link {
+ /* @noflip */
+ left: 0;
+}
+
.flow-topic-watchlist {
a {
font-size: 1.8em;
diff --git a/modules/styles/common.less b/modules/styles/common.less
index b7022af..0ccf185 100644
--- a/modules/styles/common.less
+++ b/modules/styles/common.less
@@ -55,6 +55,9 @@
.flow-undo {
font-size: .875em;
color: #777777;
+ // These two will flip in RTL interface
+ text-align: left;
+ direction: ltr;
}
.flow-topic-meta {
--
To view, visit https://gerrit.wikimedia.org/r/206321
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I5e8112b2259cbc8badf2b3ce93b53b38b0ade319
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
