jenkins-bot has submitted this change and it was merged.
Change subject: (bug 58140) Multiple moderated topics in a row takes up too
much space
......................................................................
(bug 58140) Multiple moderated topics in a row takes up too much space
Use collapsed-one-line style for moderated topics
Bug: 58140
Change-Id: I570c47ae5a4b43a9b6292835c0ba783005e29a3e
---
M modules/discussion/styles/collapse.less
A modules/discussion/styles/mixins/collapse.less
M modules/discussion/styles/topic.less
3 files changed, 99 insertions(+), 91 deletions(-)
Approvals:
Matthias Mullie: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/discussion/styles/collapse.less
b/modules/discussion/styles/collapse.less
index d076b55..3de34fe 100644
--- a/modules/discussion/styles/collapse.less
+++ b/modules/discussion/styles/collapse.less
@@ -1,3 +1,4 @@
+@import 'mixins/collapse.less';
@import 'mediawiki.mixins.less';
.collapseButtonIcon(@icon-prefix; @dir: '') {
@@ -41,67 +42,13 @@
}
.flow-container {
- .flow-topic-posts-meta-minimal {
- display: none;
- margin: 0;
+ .flow-collapse-complete;
+
+ &.topic-collapsed-full .flow-topic-closed {
+ .flow-collapse-full;
}
&.topic-collapsed-one-line .flow-topic-closed {
- .flow-titlebar {
- height: 30px;
- }
- .flow-topic-title {
- overflow: hidden;
- white-space: nowrap;
- padding: 0;
-
- .flow-realtitle {
- text-overflow: ellipsis;
- }
- }
-
-
- .flow-topic-posts-meta,
- .flow-datestamp {
- display: none;
- }
-
- .flow-topic-posts-meta-minimal {
- display: block;
-
- // position in upper right hand corner
- position: absolute;
- right: 22px;
- top: 15px;
-
- font-weight: bold;
- color: #FFF;
- background-color: #CCC;
-
- // title height = 30px; this only 22, so add 4px margin
bottom & top
- line-height: 22px;
- height: 22px;
- margin: 4px 0;
- padding: 0 10px;
-
- // this creates the small bottom-right arrow
- &:after {
- // :after should have some content in order to
show up
- content: '.';
- text-indent: -9999px;
- display: block;
-
- width: 0;
- height: 0;
- border-top: 5px solid transparent;
- border-left: 5px solid #CCC;
-
- position: relative;
- bottom: 5px; // "icon" height - arrow height
- // calc's are LESS-escaped below because I want
CSS to do the
- // calc, not LESS (which incorrectly returns
110%)
- left: calc(~"100% + 10px"); // "icon" width +
"icon" padding-right
- }
- }
+ .flow-collapse-one-line;
}
}
diff --git a/modules/discussion/styles/mixins/collapse.less
b/modules/discussion/styles/mixins/collapse.less
new file mode 100644
index 0000000..1e36eb6
--- /dev/null
+++ b/modules/discussion/styles/mixins/collapse.less
@@ -0,0 +1,80 @@
+// complete view is default
+.flow-collapse-complete {
+ .flow-topic-posts-meta-minimal {
+ display: none;
+ margin: 0;
+ }
+}
+
+// medium-collapsed: children not visible, but full topic details
+.flow-collapse-full {
+ // also hide minimal meta info here
+ .flow-collapse-complete;
+
+ .flow-topic-children-container {
+// display: none; // hiding is done in JS, with slideUp effect
+ }
+}
+
+// max-collapsed: children not visible, condensed title
+.flow-collapse-one-line {
+ .flow-titlebar {
+ height: 30px;
+ }
+ .flow-topic-title {
+ overflow: hidden;
+ white-space: nowrap;
+ padding: 0 !important;
+
+ .flow-realtitle {
+ text-overflow: ellipsis;
+ }
+ }
+
+ .flow-topic-posts-meta,
+ .flow-datestamp {
+ display: none;
+ }
+
+ .flow-topic-posts-meta-minimal {
+ display: block;
+
+ // position in upper right hand corner
+ position: absolute;
+ right: 22px;
+ top: 15px;
+
+ font-weight: bold;
+ color: #FFF;
+ background-color: #CCC;
+
+ // title height = 30px; this only 22, so add 4px margin bottom
& top
+ line-height: 22px;
+ height: 22px;
+ margin: 4px 0;
+ padding: 0 10px;
+
+ // this creates the small bottom-right arrow
+ &:after {
+ // :after should have some content in order to show up
+ content: '.';
+ text-indent: -9999px;
+ display: block;
+
+ width: 0;
+ height: 0;
+ border-top: 5px solid transparent;
+ border-left: 5px solid #CCC;
+
+ position: relative;
+ bottom: 5px; // "icon" height - arrow height
+ // calc's are LESS-escaped below because I want CSS to
do the
+ // calc, not LESS (which incorrectly returns 110%)
+ left: calc(~"100% + 10px"); // "icon" width + "icon"
padding-right
+ }
+ }
+
+ .flow-topic-children-container {
+// display: none; // hiding is done in JS, with slideUp effect
+ }
+}
diff --git a/modules/discussion/styles/topic.less
b/modules/discussion/styles/topic.less
index b3165ed..35774c2 100644
--- a/modules/discussion/styles/topic.less
+++ b/modules/discussion/styles/topic.less
@@ -1,4 +1,5 @@
@import 'settings/colors.less';
+@import 'mixins/collapse.less';
@import 'mediawiki.mixins.less';
.flow-topic-container {
@@ -11,9 +12,9 @@
padding-bottom: 10px;
}
-
&.flow-topic-moderated {
- .flow-topic-title {
+ // Make space for moderation icon
+ .flow-element-container .flow-titlebar .flow-topic-title {
padding-left: 22px !important;
background-position: left;
@@ -22,9 +23,6 @@
}
&:not(.flow-topic-closed) {
- .flow-realtitle {
- display: block;
- }
// position moderated title even with the timestamp
.flow-titlebar {
padding-bottom: 10px;
@@ -39,41 +37,24 @@
}
&.flow-topic-closed {
- .flow-titlebar {
- height: 30px;
- .flow-topic-title {
- overflow: hidden;
- white-space: nowrap;
- padding: 0;
-
- .flow-moderated-title {
- overflow: ellipsis;
- }
- }
- }
-
+ .flow-collapse-one-line;
.flow-topic-children-container {
- display: none;
- }
- .flow-topic-posts-meta {
display: none;
}
.flow-realtitle {
display: none;
}
- .flow-moderated-title {
- display: block;
+ }
- // hide user links until hovered
+ .flow-moderated-title {
+ // hide user links until hovered
+ .mw-usertoollinks {
+ opacity: 0;
+ transition: opacity 0.2s;
+ }
+ &:hover {
.mw-usertoollinks {
- color: @post-title-color;
- opacity: 0;
- transition: opacity 0.2s;
- }
- &:hover {
- .mw-usertoollinks {
- opacity: 1;
- }
+ opacity: 1;
}
}
}
--
To view, visit https://gerrit.wikimedia.org/r/103357
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I570c47ae5a4b43a9b6292835c0ba783005e29a3e
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Matthias Mullie <mmul...@wikimedia.org>
Gerrit-Reviewer: EBernhardson <ebernhard...@wikimedia.org>
Gerrit-Reviewer: Matthias Mullie <mmul...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
