jenkins-bot has submitted this change and it was merged.
Change subject: Wrap timeline image into a div element and style it for tiny
screens
......................................................................
Wrap timeline image into a div element and style it for tiny screens
The added div element with `timeline-wrapper` class allows easy styling
of the content. Add a new module, too, which is added to the output, whenever
a timeline is rendered and sets the max-width to 100% with an automatic over-
flow, so timelines, which are bigger as the content div (e.g. on tiny screens)
can scroll the timeline without breaking the content style.
Bug: T118601
Change-Id: I09c5b168e02a9a3aff30d59671986cfc086cf8c9
---
M Timeline.php
A resources/ext.timeline.styles/timeline.css
2 files changed, 24 insertions(+), 3 deletions(-)
Approvals:
VolkerE: Looks good to me, but someone else must approve
Jhobs: Looks good to me, but someone else must approve
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/Timeline.php b/Timeline.php
index 07f1ecf..e164a2f 100644
--- a/Timeline.php
+++ b/Timeline.php
@@ -55,6 +55,16 @@
$wgMessagesDirs['Timeline'] = __DIR__ . '/i18n';
$wgExtensionMessagesFiles['Timeline'] = __DIR__ . '/Timeline.i18n.php';
+$wgResourceModules['ext.timeline.styles'] = array(
+ 'localBasePath' => __DIR__,
+ 'remoteExtPath' => 'timeline',
+ 'styles' => array(
+ 'resources/ext.timeline.styles/timeline.css',
+ ),
+ 'position' => 'top',
+ 'targets' => array( 'mobile', 'desktop' ),
+);
+
/**
* @param $parser Parser
* @return bool
@@ -67,12 +77,16 @@
/**
* @param $timelinesrc string
* @param $args array
+ * @param Parser $parser
+ * @param PPFrame $frame
* @throws Exception
* @return string HTML
*/
-function wfRenderTimeline( $timelinesrc, array $args ) {
+function wfRenderTimeline( $timelinesrc, array $args, $parser, $frame ) {
global $wgUploadDirectory, $wgUploadPath, $wgArticlePath,
$wgTmpDirectory, $wgRenderHashAppend;
global $wgTimelineSettings;
+
+ $parser->getOutput()->addModuleStyles( 'ext.timeline.styles' );
$method = isset( $args['method'] ) ? $args['method'] : 'ploticusOnly';
$svg2png = ( $method == 'svg2png' );
@@ -220,9 +234,11 @@
$map = easyTimelineFixMap( $map );
$url = "{$wgUploadPath}/timeline/{$hash}.png";
- $txt = $map .
+ $txt = "<div class=\"timeline-wrapper\">" .
+ $map .
"<img usemap=\"#timeline_" . htmlspecialchars( $hash )
. "\" " .
- "src=\"" . htmlspecialchars( $url ) . "\">";
+ "src=\"" . htmlspecialchars( $url ) . "\">" .
+ "</div>";
if( $expired ) {
// Replacing an older file, we may need to purge the
old one.
diff --git a/resources/ext.timeline.styles/timeline.css
b/resources/ext.timeline.styles/timeline.css
new file mode 100644
index 0000000..07d6de9
--- /dev/null
+++ b/resources/ext.timeline.styles/timeline.css
@@ -0,0 +1,5 @@
+/* Timelines can be very long and huge, like tables, so they should be
scrollable. */
+.timeline-wrapper {
+ max-width: 100%;
+ overflow: auto;
+}
--
To view, visit https://gerrit.wikimedia.org/r/253035
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I09c5b168e02a9a3aff30d59671986cfc086cf8c9
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/timeline
Gerrit-Branch: master
Gerrit-Owner: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Jhobs <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
