jenkins-bot has submitted this change and it was merged.
Change subject: Responsive side rail
......................................................................
Responsive side rail
Move the board description to a collapsible
side rail when the page is wide enough.
Bug: T88114
Change-Id: I5b23449d5a581a6d6de5518fea1a69298de1f869
---
M Resources.php
M handlebars/compiled/flow_block_header.handlebars.php
M handlebars/compiled/flow_block_header_edit.handlebars.php
M handlebars/flow_block_header.handlebars
M handlebars/flow_block_header_edit.handlebars
M handlebars/flow_header_detail.partial.handlebars
A handlebars/flow_header_title.partial.handlebars
M i18n/en.json
M i18n/qqq.json
M includes/View.php
M modules/engine/components/board/features/flow-board-navigation.js
A modules/engine/components/board/features/flow-board-side-rail.js
M modules/styles/board/form-actions.less
M modules/styles/board/header.less
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
M modules/styles/flow.less/flow.variables.less
22 files changed, 304 insertions(+), 50 deletions(-)
Approvals:
Matthias Mullie: Looks good to me, approved
jenkins-bot: Verified
diff --git a/Resources.php b/Resources.php
index 9233e58..6291274 100644
--- a/Resources.php
+++ b/Resources.php
@@ -58,6 +58,7 @@
'handlebars/flow_editor_switcher.partial.handlebars',
'handlebars/flow_errors.partial.handlebars',
'handlebars/flow_form_buttons.partial.handlebars',
+ 'handlebars/flow_header_title.partial.handlebars',
'handlebars/flow_header_detail.partial.handlebars',
'handlebars/flow_load_more.partial.handlebars',
'handlebars/flow_moderate_post_confirmation.partial.handlebars',
@@ -91,6 +92,10 @@
'messages' => array(
'flow-anon-warning',
'flow-cancel',
+ 'flow-board-header',
+ 'flow-board-collapse-description',
+ 'flow-board-expand-description',
+ 'flow-edit-header-link',
'flow-edit-header-placeholder',
'flow-edit-header-submit',
'flow-edit-title-submit',
@@ -367,6 +372,8 @@
'engine/components/board/features/flow-board-navigation.js',
// Feature: Table of Contents
'engine/components/board/features/flow-board-toc.js',
+ // Feature: Side Rail
+
'engine/components/board/features/flow-board-side-rail.js',
// Feature: VisualEditor
'engine/components/board/features/flow-board-visualeditor.js',
// Feature: Switch between editors
diff --git a/handlebars/compiled/flow_block_header.handlebars.php
b/handlebars/compiled/flow_block_header.handlebars.php
index 06e2bcf..57022ff 100644
--- a/handlebars/compiled/flow_block_header.handlebars.php
+++ b/handlebars/compiled/flow_block_header.handlebars.php
@@ -12,12 +12,17 @@
'debug' => $debugopt,
),
'constants' => array(),
- 'helpers' => array( 'html' =>
'Flow\TemplateHelper::htmlHelper',
+ 'helpers' => array( 'l10n' => 'Flow\TemplateHelper::l10n',
+ 'html' => 'Flow\TemplateHelper::htmlHelper',
'escapeContent' => 'Flow\TemplateHelper::escapeContent',
),
'blockhelpers' => array(),
'hbhelpers' => array(),
- 'partials' => array('flow_errors' => function ($cx, $in) {return '<div
class="flow-error-container">
+ 'partials' => array('flow_header_title' => function ($cx, $in) {return
'<h2 class="flow-board-header-title">
+ <span class="wikiglyph wikiglyph-speech-bubbles"></span>
+ '.LCRun3::ch($cx, 'l10n', array(array('flow-board-header'),array()),
'encq').'
+</h2>
+';},'flow_errors' => function ($cx, $in) {return '<div
class="flow-error-container">
'.((LCRun3::ifvar($cx, ((isset($cx['sp_vars']['root']['errors']) &&
is_array($cx['sp_vars']['root'])) ? $cx['sp_vars']['root']['errors'] : null)))
? ' <div class="flow-errors errorbox">
<ul>
'.LCRun3::sec($cx, ((isset($cx['sp_vars']['root']['errors']) &&
is_array($cx['sp_vars']['root'])) ? $cx['sp_vars']['root']['errors'] : null),
$in, true, function($cx, $in) {return '
<li>'.LCRun3::ch($cx, 'html', array(array(((isset($in['message']) &&
is_array($in)) ? $in['message'] : null)),array()), 'encq').'</li>
@@ -25,28 +30,35 @@
</div>
' : '').'</div>
';},'flow_header_detail' => function ($cx, $in) {return '<div
class="flow-board-header-detail-view">
-'.((LCRun3::ifvar($cx, ((isset($in['revision']['content']) &&
is_array($in['revision'])) ? $in['revision']['content'] : null))) ? '
'.LCRun3::ch($cx, 'escapeContent',
array(array(((isset($in['revision']['content']['format']) &&
is_array($in['revision']['content'])) ? $in['revision']['content']['format'] :
null),((isset($in['revision']['content']['content']) &&
is_array($in['revision']['content'])) ? $in['revision']['content']['content'] :
null)),array()), 'encq').'
-' : '').'
-
<div class="flow-board-header-nav">
'.((LCRun3::ifvar($cx, ((isset($in['revision']['actions']['edit']) &&
is_array($in['revision']['actions'])) ? $in['revision']['actions']['edit'] :
null))) ? ' <a
href="'.htmlentities((string)((isset($in['revision']['actions']['edit']['url'])
&& is_array($in['revision']['actions']['edit'])) ?
$in['revision']['actions']['edit']['url'] : null), ENT_QUOTES, 'UTF-8').'"
data-flow-api-handler="activateEditHeader"
data-flow-api-target="< .flow-board-header"
data-flow-interactive-handler="apiRequest"
- class="mw-ui-button mw-ui-progressive mw-ui-quiet
flow-board-header-icon flow-ui-tooltip-target"
+ class="mw-ui-button mw-ui-progressive mw-ui-quiet
flow-ui-tooltip-target"
title="'.htmlentities((string)((isset($in['revision']['actions']['edit']['title'])
&& is_array($in['revision']['actions']['edit'])) ?
$in['revision']['actions']['edit']['title'] : null), ENT_QUOTES, 'UTF-8').'">
- <span class="wikiglyph
wikiglyph-pencil"></span>
+ <span class="wikiglyph wikiglyph-pencil
flow-board-header-icon"></span>'.LCRun3::ch($cx, 'l10n',
array(array('flow-edit-header-link'),array()), 'encq').'
</a>
' : '').' </div>
-</div>
-';},),
+'.((LCRun3::ifvar($cx, ((isset($in['revision']['content']) &&
is_array($in['revision'])) ? $in['revision']['content'] : null))) ? '
<div class="flow-board-header-content">
+ '.LCRun3::ch($cx, 'escapeContent',
array(array(((isset($in['revision']['content']['format']) &&
is_array($in['revision']['content'])) ? $in['revision']['content']['format'] :
null),((isset($in['revision']['content']['content']) &&
is_array($in['revision']['content'])) ? $in['revision']['content']['content'] :
null)),array()), 'encq').'
+ </div>
+' : '').'</div>
+<a href="javascript:void(0);"
+ class="mw-ui-button mw-ui-quiet side-rail-toggle-button"
+ data-flow-interactive-handler="toggleSideRail">
+ <span class="wikiglyph wikiglyph-x pull-right collapse-button"
+ title="'.LCRun3::ch($cx, 'l10n',
array(array('flow-board-collapse-description'),array()), 'encq').'"></span>
+ <span class="wikiglyph wikiglyph-speech-bubbles pull-right
expand-button"
+ title="'.LCRun3::ch($cx, 'l10n',
array(array('flow-board-expand-description'),array()), 'encq').'"></span>
+</a>';},),
'scopes' => array($in),
'sp_vars' => array('root' => $in),
);
return '<div class="flow-board-header">
-'.LCRun3::p($cx, 'flow_errors', array(array($in),array())).''.LCRun3::p($cx,
'flow_header_detail', array(array($in),array())).'</div>
+'.LCRun3::p($cx, 'flow_header_title',
array(array($in),array())).''.LCRun3::p($cx, 'flow_errors',
array(array($in),array())).''.LCRun3::p($cx, 'flow_header_detail',
array(array($in),array())).'</div>
';
}
?>
\ No newline at end of file
diff --git a/handlebars/compiled/flow_block_header_edit.handlebars.php
b/handlebars/compiled/flow_block_header_edit.handlebars.php
index 3ff34c4..807172c 100644
--- a/handlebars/compiled/flow_block_header_edit.handlebars.php
+++ b/handlebars/compiled/flow_block_header_edit.handlebars.php
@@ -18,7 +18,11 @@
),
'blockhelpers' => array(),
'hbhelpers' => array(),
- 'partials' => array('flow_errors' => function ($cx, $in) {return '<div
class="flow-error-container">
+ 'partials' => array('flow_header_title' => function ($cx, $in) {return
'<h2 class="flow-board-header-title">
+ <span class="wikiglyph wikiglyph-speech-bubbles"></span>
+ '.LCRun3::ch($cx, 'l10n', array(array('flow-board-header'),array()),
'encq').'
+</h2>
+';},'flow_errors' => function ($cx, $in) {return '<div
class="flow-error-container">
'.((LCRun3::ifvar($cx, ((isset($cx['sp_vars']['root']['errors']) &&
is_array($cx['sp_vars']['root'])) ? $cx['sp_vars']['root']['errors'] : null)))
? ' <div class="flow-errors errorbox">
<ul>
'.LCRun3::sec($cx, ((isset($cx['sp_vars']['root']['errors']) &&
is_array($cx['sp_vars']['root'])) ? $cx['sp_vars']['root']['errors'] : null),
$in, true, function($cx, $in) {return '
<li>'.LCRun3::ch($cx, 'html', array(array(((isset($in['message']) &&
is_array($in)) ? $in['message'] : null)),array()), 'encq').'</li>
@@ -38,7 +42,7 @@
);
return '<div class="flow-board-header">
- <div class="flow-board-header-edit-view">
+'.LCRun3::p($cx, 'flow_header_title', array(array($in),array())).' <div
class="flow-board-header-edit-view">
<form method="POST"
action="'.htmlentities((string)((isset($in['revision']['actions']['edit']['url'])
&& is_array($in['revision']['actions']['edit'])) ?
$in['revision']['actions']['edit']['url'] : null), ENT_QUOTES, 'UTF-8').'"
flow-api-action="edit-header">
'.LCRun3::p($cx, 'flow_errors', array(array($in),array())).'
<input type="hidden" name="wpEditToken"
value="'.htmlentities((string)((isset($cx['sp_vars']['root']['editToken']) &&
is_array($cx['sp_vars']['root'])) ? $cx['sp_vars']['root']['editToken'] :
null), ENT_QUOTES, 'UTF-8').'" />
'.((LCRun3::ifvar($cx, ((isset($in['revision']['revisionId']) &&
is_array($in['revision'])) ? $in['revision']['revisionId'] : null))) ? '
<input type="hidden" name="header_prev_revision"
value="'.htmlentities((string)((isset($in['revision']['revisionId']) &&
is_array($in['revision'])) ? $in['revision']['revisionId'] : null), ENT_QUOTES,
'UTF-8').'" />
@@ -60,7 +64,6 @@
</div>
</form>
</div>
-</div>
-';
+</div>';
}
?>
\ No newline at end of file
diff --git a/handlebars/flow_block_header.handlebars
b/handlebars/flow_block_header.handlebars
index 5952a9c..60c5f77 100644
--- a/handlebars/flow_block_header.handlebars
+++ b/handlebars/flow_block_header.handlebars
@@ -1,4 +1,5 @@
<div class="flow-board-header">
+ {{> flow_header_title}}
{{> flow_errors}}
{{> flow_header_detail}}
</div>
diff --git a/handlebars/flow_block_header_edit.handlebars
b/handlebars/flow_block_header_edit.handlebars
index 55ced50..1c545be 100644
--- a/handlebars/flow_block_header_edit.handlebars
+++ b/handlebars/flow_block_header_edit.handlebars
@@ -1,4 +1,5 @@
<div class="flow-board-header">
+ {{> flow_header_title}}
<div class="flow-board-header-edit-view">
<form method="POST" action="{{revision.actions.edit.url}}"
flow-api-action="edit-header">
{{> flow_errors }}
@@ -33,4 +34,4 @@
</div>
</form>
</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/handlebars/flow_header_detail.partial.handlebars
b/handlebars/flow_header_detail.partial.handlebars
index 2962066..72fbfb4 100644
--- a/handlebars/flow_header_detail.partial.handlebars
+++ b/handlebars/flow_header_detail.partial.handlebars
@@ -1,19 +1,27 @@
<div class="flow-board-header-detail-view">
- {{#if revision.content}}
- {{escapeContent revision.content.format
revision.content.content}}
- {{/if}}
-
-
<div class="flow-board-header-nav">
{{#if revision.actions.edit}}
<a href="{{revision.actions.edit.url}}"
data-flow-api-handler="activateEditHeader"
data-flow-api-target="< .flow-board-header"
data-flow-interactive-handler="apiRequest"
- class="mw-ui-button mw-ui-progressive mw-ui-quiet
flow-board-header-icon flow-ui-tooltip-target"
+ class="mw-ui-button mw-ui-progressive mw-ui-quiet
flow-ui-tooltip-target"
title="{{revision.actions.edit.title}}">
- <span class="wikiglyph
wikiglyph-pencil"></span>
+ <span class="wikiglyph wikiglyph-pencil
flow-board-header-icon"></span>{{l10n "flow-edit-header-link"}}
</a>
{{/if}}
</div>
+ {{#if revision.content}}
+ <div class="flow-board-header-content">
+ {{escapeContent revision.content.format
revision.content.content}}
+ </div>
+ {{/if}}
</div>
+<a href="javascript:void(0);"
+ class="mw-ui-button mw-ui-quiet side-rail-toggle-button"
+ data-flow-interactive-handler="toggleSideRail">
+ <span class="wikiglyph wikiglyph-x pull-right collapse-button"
+ title="{{l10n "flow-board-collapse-description"}}"></span>
+ <span class="wikiglyph wikiglyph-speech-bubbles pull-right
expand-button"
+ title="{{l10n "flow-board-expand-description"}}"></span>
+</a>
\ No newline at end of file
diff --git a/handlebars/flow_header_title.partial.handlebars
b/handlebars/flow_header_title.partial.handlebars
new file mode 100644
index 0000000..a3da2a0
--- /dev/null
+++ b/handlebars/flow_header_title.partial.handlebars
@@ -0,0 +1,4 @@
+<h2 class="flow-board-header-title">
+ <span class="wikiglyph wikiglyph-speech-bubbles"></span>
+ {{l10n "flow-board-header"}}
+</h2>
diff --git a/i18n/en.json b/i18n/en.json
index da0587f..a64e826 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -29,6 +29,9 @@
"logentry-import-lqt-to-flow-topic": "[[$1|$2]] on [[$3]] was imported
from LiquidThreads to Flow",
"flow-user-moderated": "Moderated user",
"flow-board-header-browse-topics-link": "Browse topics",
+ "flow-board-header": "About this discussion",
+ "flow-board-collapse-description": "Hide description",
+ "flow-board-expand-description": "Show description",
"flow-edit-header-link": "Edit description",
"flow-post-moderated-toggle-hide-show": "Show comment
{{GENDER:$1|hidden}} by $2",
"flow-post-moderated-toggle-delete-show": "Show comment
{{GENDER:$1|deleted}} by $2",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index ba89232..625950d 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -34,6 +34,9 @@
"logentry-import-lqt-to-flow-topic": "Text for an import log entry when
a topic has been imported from LiquidThreads to Flow. Parameters:\n* $1 - The
page within the topic namespace to which the topic was imported.\n* $2 - The
title of the LiquidThreads thread being imported.\n* $3 - The board that was
converted from LiquidThreads to Flow.",
"flow-user-moderated": "Name to display when the current user is not
allowed to see the users name due to moderation",
"flow-board-header-browse-topics-link": "Text to show in the board
description which links to the topics list.",
+ "flow-board-header": "Used as title for the board description in the
side rail.",
+ "flow-board-collapse-description": "Used as title for the collapse
description icon.",
+ "flow-board-expand-description": "Used as title for the expand
description icon.",
"flow-edit-header-link": "Used as text for the button that either
allows editing the description in place or brings the user to a page for
editing the description.",
"flow-post-moderated-toggle-hide-show": "Message to display instead of
content when a hidden post has been hidden.\n\nParameters:\n* $1 - username
that hid the title, can be used for GENDER\n* $2 - user link and tool links for
the user\n{{Related|Flow-post-moderated-toggle}}",
"flow-post-moderated-toggle-delete-show": "Message to display instead
of content when a deleted post has been hidden.\n\nParameters:\n* $1 - username
that hid the title, can be used for GENDER\n* $2 - user link and tool links for
the user\n{{Related|Flow-post-moderated-toggle}}",
diff --git a/includes/View.php b/includes/View.php
index 537afe9..f787df0 100644
--- a/includes/View.php
+++ b/includes/View.php
@@ -214,9 +214,15 @@
switch ( $block['type'] ) {
case 'board-history':
$flowComponent = 'boardHistory';
+ $page = 'history';
+ break;
+ case 'topic':
+ $flowComponent = 'board';
+ $page = 'topic';
break;
default:
$flowComponent = 'board';
+ $page = 'board';
}
// Don't re-render a block type twice in one page
@@ -228,7 +234,7 @@
// Get the block loop template
$template = $this->lightncandy->getTemplate(
'flow_block_loop' );
- $classes = array( 'flow-component' );
+ $classes = array( 'flow-component', "$page-page" );
// Add mw-content-{ltr,rtl} text if necessary (MW core
doesn't add it for action=reply)
if ( \Action::getActionName( $this ) === 'reply' ) {
$title = Title::newFromText(
$apiResponse['title'] );
diff --git a/modules/engine/components/board/features/flow-board-navigation.js
b/modules/engine/components/board/features/flow-board-navigation.js
index 057743a..9f7e2c9 100644
--- a/modules/engine/components/board/features/flow-board-navigation.js
+++ b/modules/engine/components/board/features/flow-board-navigation.js
@@ -178,7 +178,7 @@
$boardNavigation
.removeClass(
'flow-board-navigation-affixed' )
.css( 'left', '' )
- .css( 'width', 'inherit' );
+ .css( 'width', '' );
// Remove the old clone if it exists
this.$boardNavigationClone.remove();
delete this.$boardNavigationClone;
diff --git a/modules/engine/components/board/features/flow-board-side-rail.js
b/modules/engine/components/board/features/flow-board-side-rail.js
new file mode 100644
index 0000000..be4ada3
--- /dev/null
+++ b/modules/engine/components/board/features/flow-board-side-rail.js
@@ -0,0 +1,46 @@
+/*!
+ * Contains Side Rail functionality.
+ */
+
+( function ( $, mw ) {
+ /**
+ * Binds handlers for side rail in board header.
+ * @param {jQuery} $container
+ * @this FlowComponent
+ * @constructor
+ */
+ function FlowBoardComponentSideRailFeatureMixin( $container ) {
+ // Bind element handlers
+ this.bindNodeHandlers(
FlowBoardComponentSideRailFeatureMixin.UI.events );
+ }
+ OO.initClass( FlowBoardComponentSideRailFeatureMixin );
+
+ FlowBoardComponentSideRailFeatureMixin.UI = {
+ events: {
+ apiPreHandlers: {},
+ apiHandlers: {},
+ interactiveHandlers: {},
+ loadHandlers: {}
+ }
+ };
+
+ //
+ // On element-click handlers
+ //
+
+ /**
+ *
+ * @param {Event} event
+ */
+ function FlowBoardComponentSideRailFeatureMixinToggleCallback( event ) {
+ $( '.flow-component' ).toggleClass( 'expanded' );
+ }
+
FlowBoardComponentSideRailFeatureMixin.UI.events.interactiveHandlers.toggleSideRail
= FlowBoardComponentSideRailFeatureMixinToggleCallback;
+
+ //
+ // Private functions
+ //
+
+ // Mixin to FlowComponent
+ mw.flow.mixinComponent( 'component',
FlowBoardComponentSideRailFeatureMixin );
+}( jQuery, mediaWiki ) );
diff --git a/modules/styles/board/form-actions.less
b/modules/styles/board/form-actions.less
index e1037ee..4dda53d 100644
--- a/modules/styles/board/form-actions.less
+++ b/modules/styles/board/form-actions.less
@@ -34,7 +34,7 @@
width: 15em;
}
-@media all and (min-width: @wgFlowDeviceWidthTablet) {
+@media all and (min-width: @small) {
.flow-anon-warning-mobile {
display: none;
}
diff --git a/modules/styles/board/header.less b/modules/styles/board/header.less
index aa95362..75d3549 100644
--- a/modules/styles/board/header.less
+++ b/modules/styles/board/header.less
@@ -5,19 +5,27 @@
.flow-board-header {
word-break: break-word;
+ font-size: .875em;
+ width: 100%;
+ max-width: 700px;
+ padding-top: 10px;
+ padding-right: 15px;
+ padding-left: 5px;
+ position: relative;
+ z-index: 3;
}
// Top board header
.flow-board-header-nav {
- position: relative;
- text-align: right;
+ font-size: 1.15em;
+ margin-bottom: 10px;
+ .mw-ui-button {
+ padding: 0;
+ }
}
// Top board header edit icon
.flow-board-header-icon {
- position: absolute;
- bottom: 0;
- right: 0;
opacity: .33;
&:hover,
@@ -25,3 +33,40 @@
opacity: 1;
}
}
+
+// need to be specific to override this h2
+div#content h2.flow-board-header-title {
+ /* @noflip */
+ margin-right: 10px;
+
+ margin-top: 0;
+ margin-bottom: 10px;
+ border-bottom: none;
+ font-family: sans-serif;
+ font-weight: bold;
+ font-size: 1.15em;
+}
+
+.flow-board-header-title {
+ display: none;
+}
+
+.side-rail-toggle-button {
+ visibility: hidden;
+ position: absolute;
+ top: 8px;
+ right: 2px;
+ font-size: 1.3em;
+
+ &.mw-ui-button {
+ padding: 0;
+ }
+
+ .collapse-button {
+ display: none;
+ }
+
+ .expand-button {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/modules/styles/board/menu.less b/modules/styles/board/menu.less
index 8c59506..975c0d8 100644
--- a/modules/styles/board/menu.less
+++ b/modules/styles/board/menu.less
@@ -42,7 +42,7 @@
/* @noflip */
left: 0;
}
- // This is the TOC popup for browsing topics, and we want this
+ // This is the sorting popup menu, and we want this
// to flip in interface language because the TOC flips too
&.flow-board-sort-menu {
left: auto;
@@ -173,7 +173,7 @@
}
}
-@media all and (min-width: @wgFlowDeviceWidthTablet) {
+@media all and (min-width: @small) {
// On desktop, the flow-menu is no longer inline
.flow-menu {
position: absolute;
diff --git a/modules/styles/board/navigation.less
b/modules/styles/board/navigation.less
index 31ffafa..936975c 100644
--- a/modules/styles/board/navigation.less
+++ b/modules/styles/board/navigation.less
@@ -98,6 +98,9 @@
.flow-board-header-menu {
position: relative;
float: right;
+ width: 100%;
+
+ font-size: .875em;
// Make TOC wide
.flow-board-toc-menu {
@@ -134,7 +137,7 @@
}
// MEDIA QUERIES
-@media all and (min-width: @wgFlowDeviceWidthTablet) {
+@media all and (min-width: @small) {
html .flow-board-navigation {
font-size: 1.15em;
position: relative;
diff --git a/modules/styles/board/terms-of-use.less
b/modules/styles/board/terms-of-use.less
index 65c1370..a092e6d 100644
--- a/modules/styles/board/terms-of-use.less
+++ b/modules/styles/board/terms-of-use.less
@@ -18,7 +18,7 @@
direction: ltr;
}
-@media all and (min-width: @wgFlowDeviceWidthTablet) {
+@media all and (min-width: @small) {
.flow-terms-of-use {
clear: none;
}
diff --git a/modules/styles/board/topic/post.less
b/modules/styles/board/topic/post.less
index d7f147a..bbcfc5d 100644
--- a/modules/styles/board/topic/post.less
+++ b/modules/styles/board/topic/post.less
@@ -227,7 +227,7 @@
}
// MEDIA QUERIES
-@media all and (min-width: @wgFlowDeviceWidthTablet) {
+@media all and (min-width: @small) {
.flow-post {
/* left margin provided by highlighting zone */
.mw-content-ltr & {
diff --git a/modules/styles/board/topic/titlebar.less
b/modules/styles/board/topic/titlebar.less
index 41b94bf..4274f0b 100644
--- a/modules/styles/board/topic/titlebar.less
+++ b/modules/styles/board/topic/titlebar.less
@@ -75,7 +75,7 @@
}
// MEDIA QUERIES
-@media all and (min-width: @wgFlowDeviceWidthTablet) {
+@media all and (min-width: @small) {
.flow-topic-titlebar {
.mw-content-ltr & {
/* @noflip */
diff --git a/modules/styles/board/topic/watchlist.less
b/modules/styles/board/topic/watchlist.less
index 2c28078..dc967ad 100644
--- a/modules/styles/board/topic/watchlist.less
+++ b/modules/styles/board/topic/watchlist.less
@@ -68,7 +68,7 @@
}
}
-@media all and (min-width: @wgFlowDeviceWidthTablet) {
+@media all and (min-width: @small) {
.flow-topic-watchlist {
a {
font-size: inherit;
diff --git a/modules/styles/common.less b/modules/styles/common.less
index 9c09382..1b64d38 100644
--- a/modules/styles/common.less
+++ b/modules/styles/common.less
@@ -4,10 +4,6 @@
@import 'flow.variables';
.flow-component {
- // This should flip with interface directionality
- float: left;
- width: 100%;
-
.flow-list {
list-style: none;
margin: 0;
@@ -25,18 +21,30 @@
padding-top: 1.5em;
}
-// Top board header
-.flow-board-header,
// board navigation
.flow-board-navigation,
-// The sort navigation
-.flow-board-header-menu,
// The whole board content wrapper
.flow-board {
.box-sizing( border-box );
font-size: .875em;
width: 100%;
- max-width: 850px;
+ padding-left: 0;
+ padding-top: 0;
+ padding-right: 20px;
+ padding-bottom: 24px;
+}
+
+.board-page {
+ .flow-board-navigation,
+ .flow-board {
+ max-width: 700px;
+ }
+}
+
+.topic-page {
+ .flow-board {
+ max-width: 850px;
+ }
}
// Individual topic containers
@@ -79,13 +87,11 @@
line-height: 0;
}
-@media all and (min-width: @wgFlowDeviceWidthTablet) {
+@media all and (min-width: @small) {
.flow-topic-meta {
font-size: 1em;
}
- // Top board header
- .flow-board-header,
// The sort navigation
.flow-board-header-menu,
// board navigation
@@ -95,6 +101,85 @@
// Set a fixed font-size from which everything else can use a
relative amount
font-size: 1em;
line-height: 1.4;
+ }
+}
+
+@media all and (min-width: @medium) {
+ .flow-component.board-page {
+ overflow: hidden;
+
+ .flow-board-header {
+ padding-left: 10px;
+ float: right;
+ width: 33%;
+ background-color: @colorGrayLightest;
+ box-shadow: -2px 0 0 0 rgba(0,0,0,0.10);
+
+ // this is a hack to make sure the side rail always
+ // stretches all the way to the bottom of the page
+ padding-bottom: 9999999px;
+ margin-bottom: -9999999px;
+
+ .flow-board-header-title {
+ display: block;
+ }
+
+ .side-rail-toggle-button {
+ visibility: visible;
+ }
+
+ .side-rail-toggle-button {
+ .collapse-button {
+ display: block;
+ }
+
+ .expand-button {
+ display: none;
+ }
+ }
+ }
+
+ .flow-board-navigation,
+ .flow-board {
+ float: left;
+ clear: left;
+ width: 66%;
+ max-width: 1200px;
+ padding-right: 20px;
+ }
+ }
+
+ .flow-component.board-page.expanded {
+ padding-right: 30px;
+
+ .flow-board-header {
+ width: 30px;
+ margin-right: -30px;
+ padding-left: 0;
+ padding-right: 0;
+ margin-left: 0;
+
+ .side-rail-toggle-button {
+ .collapse-button {
+ display: none;
+ }
+
+ .expand-button {
+ display: block;
+ }
+ }
+
+ .flow-board-header-title,
+ .flow-board-header-detail-view {
+ display: none;
+ }
+ }
+
+ .flow-board-navigation,
+ .flow-board {
+ width: 100%;
+ max-width: none;
+ }
}
}
@@ -128,3 +213,26 @@
}
}
}
+
+.pull-right {
+ float: right;
+}
+
+// vector theme overrides
+// makes the layout more compact on Talk (ns-1) and User_Talk (ns-3)
+body.ns-1,
+body.ns-3 {
+ div#content.mw-body {
+ margin-right: 0;
+ padding-right: 0;
+ padding-bottom: 0;
+
+ h1.firstHeading {
+ margin-bottom: 0;
+ }
+
+ #contentSub {
+ display: none;
+ }
+ }
+}
diff --git a/modules/styles/flow.less/flow.variables.less
b/modules/styles/flow.less/flow.variables.less
index 55ffe26..6869f6c 100644
--- a/modules/styles/flow.less/flow.variables.less
+++ b/modules/styles/flow.less/flow.variables.less
@@ -2,4 +2,8 @@
@textareaPadding: .3em;
// @todo: Use same variable as MobileFrontend
-@wgFlowDeviceWidthTablet: 768px;
+
+@small: 768px;
+@medium: 1165px;
+@large: 1300px;
+@xlarge: 2000px;
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/209807
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I5b23449d5a581a6d6de5518fea1a69298de1f869
Gerrit-PatchSet: 12
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Sbisson <sbis...@wikimedia.org>
Gerrit-Reviewer: Mattflaschen <mflasc...@wikimedia.org>
Gerrit-Reviewer: Matthias Mullie <mmul...@wikimedia.org>
Gerrit-Reviewer: Pginer <pgi...@wikimedia.org>
Gerrit-Reviewer: Sbisson <sbis...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
