Mattflaschen has uploaded a new change for review.
https://gerrit.wikimedia.org/r/185392
Change subject: WIP: Fix most noticeable IE 8 issues
......................................................................
WIP: Fix most noticeable IE 8 issues
* Remove all uses of :empty and :not (except where it's intentionally
used to target IE 8). Moved the parentheses for pipelist into
templates.
* Drop <time> and just use a <span> with a class instead.
IE 8 was treating <time> as a self-closing tag.
To fix that, we'd either have to call createElement on the HTML5
elements *before* the IE 8 parser hits them (which means some kind of
top script), or just not use the element. The latter is simpler.
* Fix scroll detection by using $( window ).scrollTop()
* Provide alternative to vh unit (vh is not supported before IE 9)
* Fix trailing comma in object literal (not allowed in IE 8 or
ECMAScript 3).
* Minor reformatting (mainly for whitespace) in pipelist templates
Bug: T74059
Bug: T75819
Bug: T86411
Bug: T75817
Change-Id: I861696290dde4db0c755fce7627a141f9dc7c161
---
M handlebars/flow_block_board-history.handlebars
M handlebars/flow_block_topic_history.handlebars
M handlebars/flow_post_author.handlebars
M handlebars/timestamp.handlebars
M modules/engine/components/board/base/flow-board-api-events.js
M modules/engine/components/board/base/flow-board-load-events.js
M modules/engine/components/board/features/flow-board-navigation.js
M modules/engine/misc/flow-handlebars.js
M modules/styles/board/navigation.less
M modules/styles/board/timestamps.less
M modules/styles/common.less
11 files changed, 53 insertions(+), 31 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow
refs/changes/92/185392/1
diff --git a/handlebars/flow_block_board-history.handlebars
b/handlebars/flow_block_board-history.handlebars
index b32e6f1..ae1f9dd 100644
--- a/handlebars/flow_block_board-history.handlebars
+++ b/handlebars/flow_block_board-history.handlebars
@@ -3,6 +3,7 @@
{{#each revisions}}
<li>
<span class="flow-pipelist">
+ (
{{~noop~}}
<span>
{{~#if links.diff-cur~}}
@@ -10,8 +11,8 @@
{{~links.diff-cur.title~}}
</a>
{{~else~}}
- {{l10n "cur"}}
- {{/if}}
+ {{~l10n "cur"~}}
+ {{~/if~}}
</span>
<span>
{{#if links.diff-prev}}
@@ -19,7 +20,7 @@
{{~links.diff-prev.title~}}
</a>
{{~else~}}
- {{l10n "last"}}
+ {{~l10n "last"~}}
{{~/if~}}
</span>
{{~#if links.topic}}
@@ -27,6 +28,7 @@
{{~links.topic.title~}}
</a></span>
{{~/if~}}
+ )
</span>
{{historyTimestamp this}}
diff --git a/handlebars/flow_block_topic_history.handlebars
b/handlebars/flow_block_topic_history.handlebars
index 4b4f4fb..732b999 100644
--- a/handlebars/flow_block_topic_history.handlebars
+++ b/handlebars/flow_block_topic_history.handlebars
@@ -4,6 +4,7 @@
{{#each revisions}}
<li>
<span class="flow-pipelist">
+ (
{{~noop~}}
<span>
{{~#if links.diff-cur~}}
@@ -11,7 +12,7 @@
{{~links.diff-cur.title~}}
</a>
{{~else~}}
- {{l10n "cur"}}
+ {{~l10n "cur"~}}
{{/if}}
</span>
<span>
@@ -20,7 +21,7 @@
{{~links.diff-prev.title~}}
</a>
{{~else~}}
- {{l10n "last"}}
+ {{~l10n
"last"~}}
{{~/if~}}
</span>
{{~#if links.topic}}
@@ -28,6 +29,7 @@
{{~links.topic.title~}}
</a></span>
{{~/if~}}
+ )
</span>
{{historyTimestamp this}}
diff --git a/handlebars/flow_post_author.handlebars
b/handlebars/flow_post_author.handlebars
index e6c48cf..4521bb4 100644
--- a/handlebars/flow_post_author.handlebars
+++ b/handlebars/flow_post_author.handlebars
@@ -13,7 +13,8 @@
{{~#if links.userpage~}}</a>{{~/if~}}
<span class="mw-usertoollinks flow-pipelist">
- {{~#if links.talk~}}
+ (
+ {{~#if links.talk~}}
<span><a href="{{links.talk.url}}"
class="{{#unless links.talk.exists}}new
{{/unless}}"
title="{{links.talk.title}}">
@@ -21,11 +22,9 @@
</a></span>
{{~/if~}}
{{~#if links.contribs~}}
- <span>
- <a href="{{links.contribs.url}}"
title="{{links.contribs.title}}">
+ <span><a href="{{links.contribs.url}}"
title="{{links.contribs.title}}">
{{~l10n "contribslink"~}}
- </a>
- </span>
+ </a></span>
{{~/if~}}
{{~#if links.block~}}
<span><a class="{{#unless
links.block.exists}}new {{/unless}}"
@@ -34,6 +33,7 @@
{{~l10n "blocklink"~}}
</a></span>
{{~/if~}}
+ )
</span>
{{/if}}
</span>
diff --git a/handlebars/timestamp.handlebars b/handlebars/timestamp.handlebars
index 6531e89..9bde727 100644
--- a/handlebars/timestamp.handlebars
+++ b/handlebars/timestamp.handlebars
@@ -1,11 +1,13 @@
+{{!-- Using <span> instead of <time> to support old browsers (e.g. IE 8).
+ IE 8 will treat it <time> a self-closing tag, without a
+ createElement call before the element. --}}
{{#if guid}}
- <time datetime="{{time_iso}}" class="flow-timestamp">
+ <span datetime="{{time_iso}}" class="flow-timestamp">
{{else}}
- <time datetime="{{time_iso}}"
+ <span datetime="{{time_iso}}"
class="flow-timestamp flow-load-interactive"
- data-flow-load-handler="timestamp"
- >
+ data-flow-load-handler="timestamp">
{{/if}}
<span class="flow-timestamp-user-formatted">{{time_readable}}</span>
<span id="{{guid}}" class="flow-timestamp-ago">{{time_ago}}</span>
-</time>
+</span>
diff --git a/modules/engine/components/board/base/flow-board-api-events.js
b/modules/engine/components/board/base/flow-board-api-events.js
index d517c05..289e0dc 100644
--- a/modules/engine/components/board/base/flow-board-api-events.js
+++ b/modules/engine/components/board/base/flow-board-api-events.js
@@ -670,7 +670,7 @@
$button
.data( 'flow-return-to-edit', {
text: $button.text(),
- $nodes: $previewContainer,
+ $nodes: $previewContainer
} )
.text(
flowBoard.constructor.static.TemplateEngine.l10n(
'flow-preview-return-edit-post' ) )
.one( 'click', function() {
diff --git a/modules/engine/components/board/base/flow-board-load-events.js
b/modules/engine/components/board/base/flow-board-load-events.js
index c4ee0b6..9fe19d7 100644
--- a/modules/engine/components/board/base/flow-board-load-events.js
+++ b/modules/engine/components/board/base/flow-board-load-events.js
@@ -25,7 +25,7 @@
//
/**
- * Replaces $time with a new time element generated by TemplateEngine
+ * Replaces $time with a new flow-timestamp element generated by
TemplateEngine
* @param {jQuery} $time
*/
FlowBoardComponentLoadEventsMixin.UI.events.loadHandlers.timestamp =
function ( $time ) {
diff --git a/modules/engine/components/board/features/flow-board-navigation.js
b/modules/engine/components/board/features/flow-board-navigation.js
index 793e380..4ac89bb 100644
--- a/modules/engine/components/board/features/flow-board-navigation.js
+++ b/modules/engine/components/board/features/flow-board-navigation.js
@@ -166,11 +166,12 @@
function _flowBoardAdjustTopicNavigationHeader( $boardNavigation,
event, extraParameters ) {
var bottomScrollPosition, topicText, newReadingTopicId,
self = this,
- boardNavigationPosition = ( this.$boardNavigationClone
|| $boardNavigation ).offset();
+ boardNavigationPosition = ( this.$boardNavigationClone
|| $boardNavigation ).offset(),
+ windowVerticalScroll = $( window ).scrollTop();
extraParameters = extraParameters || {};
- if ( window.scrollY <= boardNavigationPosition.top ) {
+ if ( windowVerticalScroll <= boardNavigationPosition.top ) {
// Board nav is still in view; don't affix it
if ( this.$boardNavigationClone ) {
// Un-affix this
@@ -221,7 +222,9 @@
}
// Find out what the bottom of the board nav is touching
- bottomScrollPosition = window.scrollY +
$boardNavigation.outerHeight( true );
+ // XXX: One of the IE 8 problems seems to be that
$boardNavigation.outerHeight( true ) is about 10 times too big (35 on Firefox,
349 on IE 8).
+ // I think this also causes visual problems.
+ bottomScrollPosition = windowVerticalScroll +
$boardNavigation.outerHeight( true );
$.each( this.orderedTopicIds || [], function ( idx, topicId,
$topic ) {
$topic = self.renderedTopics[ topicId ];
diff --git a/modules/engine/misc/flow-handlebars.js
b/modules/engine/misc/flow-handlebars.js
index eb7d7aa..21404e6 100644
--- a/modules/engine/misc/flow-handlebars.js
+++ b/modules/engine/misc/flow-handlebars.js
@@ -257,7 +257,7 @@
};
/**
- * Updates one <time> node at a time every 100ms, until finishing, and
then sleeps 5s.
+ * Updates one flow-timestamp node at a time every 100ms, until
finishing, and then sleeps 5s.
* Nodes do not get updated again until they have changed.
* @todo Perhaps only update elements within the viewport?
* @todo Maybe updating elements every few seconds is distracting?
Think about this.
diff --git a/modules/styles/board/navigation.less
b/modules/styles/board/navigation.less
index d9b359b..640fd72 100644
--- a/modules/styles/board/navigation.less
+++ b/modules/styles/board/navigation.less
@@ -66,7 +66,8 @@
.flow-board-toc-menu {
.flow-list {
- // TODO: We can't use units like vh yet since
IE 8 doesn't support them.
+ // em version can probably be dropped when we
drop IE 8
+ max-height: 30.6em;
max-height: 85vh;
}
}
@@ -99,6 +100,7 @@
.flow-list {
overflow-y: auto;
+ // em version can probably be dropped when we drop IE 8
max-height: 18em;
max-height: 50vh;
}
diff --git a/modules/styles/board/timestamps.less
b/modules/styles/board/timestamps.less
index fe3ef8c..3e271d9 100644
--- a/modules/styles/board/timestamps.less
+++ b/modules/styles/board/timestamps.less
@@ -33,7 +33,24 @@
margin-top: -1em;
}
-// inherit the gray color if not hovered, doesn't work in ie8
-a.flow-timestamp-anchor:not(:hover) {
- color: inherit;
+a.flow-timestamp-anchor {
+ &, &:visited {
+ color: inherit;
+ }
+}
+
+// Colors are from mediawiki.skinning/elements.css
+// Could use a.flow-timestamp-anchor:not(:hover) to set color to gray
+// only when *not* hovering (and avoid the copied colors), but we can't
+// use :not for now due to old IE.
+a.flow-timestamp-anchor:hover {
+ color: #0645ad;
+
+ &:visited {
+ color: #0b0080;
+ }
+
+ &:active {
+ color: #faa700;
+ }
}
diff --git a/modules/styles/common.less b/modules/styles/common.less
index 84a3036..9dd4287 100644
--- a/modules/styles/common.less
+++ b/modules/styles/common.less
@@ -63,14 +63,8 @@
// Decorate as a pipelist, ex: (foo | bar | baz)
.flow-pipelist {
- &:not(:empty):before {
- content: ' (';
- }
span ~ span:before {
content: ' | ';
- }
- &:not(:empty):after {
- content: ') ';
}
}
--
To view, visit https://gerrit.wikimedia.org/r/185392
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I861696290dde4db0c755fce7627a141f9dc7c161
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Mattflaschen <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
