Sebschlicht2 has submitted this change and it was merged. ( https://gerrit.wikimedia.org/r/342621 )
Change subject: clickable unit video thumb ...................................................................... clickable unit video thumb In this change, thumbnails of videos are made clickable both when a video is set and if not. This is made possible using the HTML tag for links, providing the best usability for users. Furthermore, video thumbnails have been made responsive. Change-Id: Ibf797ca4d30ec42a3d8d08e4418da06a657a9be3 --- M includes/model/MoocItem.php M includes/rendering/MoocLessonRenderer.php M resources/js/ext.mooc.js M resources/less/ext.mooc.less 4 files changed, 66 insertions(+), 39 deletions(-) diff --git a/includes/model/MoocItem.php b/includes/model/MoocItem.php index ef27070..fb3cb32 100644 --- a/includes/model/MoocItem.php +++ b/includes/model/MoocItem.php @@ -103,7 +103,14 @@ } /** - * @return boolean whether the item has children + * @return bool whether the item has a video + */ + public function hasVideo() { + return isset( $this->video ); + } + + /** + * @return bool whether the item has children */ public function hasChildren() { return !empty( $this->children ); diff --git a/includes/rendering/MoocLessonRenderer.php b/includes/rendering/MoocLessonRenderer.php index 8a23ac0..13f0555 100644 --- a/includes/rendering/MoocLessonRenderer.php +++ b/includes/rendering/MoocLessonRenderer.php @@ -57,48 +57,54 @@ * * @param MoocItem $unit unit to add */ - protected function addChildUnit($unit) { - $this->out->addHTML('<div class="child unit col-xs-12">'); + protected function addChildUnit( $unit ) { + $this->out->addHTML( '<div class="child unit col-xs-12">' ); - $this->out->addHTML('<div class="left col-xs-12 col-sm-5">'); - // video thumbnail - $this->out->addHTML('<div class="video-thumbnail">'); - if (isset($unit->video)) { - // TODO re-calc max width - $this->out->addWikiText('[[File:' . $unit->video . '|frameless|300x170px|link=' . $unit->title . ']]'); - } else { - // TODO make clickable without JS - $this->out->addHTML('<span>' . $this->loadMessage('unit-no-video') . '</span>'); + // left column: clickable video thumbnail + $this->out->addHTML( '<div class="left col-xs-12 col-sm-5">' ); + $videoThumbClasses = 'video-thumbnail'; + if ( !$unit->hasVideo() ) { + $videoThumbClasses .= ' no-video'; } - $this->out->addHTML('</div>'); - $this->out->addHTML('</div>'); - $this->parserOutput->addLink($unit->title); + $this->out->addHTML( "<a href='{$unit->title->getLinkURL()}' class='$videoThumbClasses'>" ); + if ( $unit->hasVideo() ) { + // TODO what is the max-width here? fine to use fixed width? + $this->out->addWikiText( "[[File:$unit->video|frameless|300x170px|link=$unit->title]]" ); + } else { + $this->out->addHTML( "<span>{$this->loadMessage( 'unit-no-video' )}</span>" ); + } + $this->out->addHTML( '</a>' ); + $this->out->addHTML( '</div>' ); - $this->out->addHTML('<div class="col-xs-12 col-sm-7">'); + // right column: links, clickable title, learning goals + $this->out->addHTML( '<div class="col-xs-12 col-sm-7">' ); // links - $this->addChildLinkBar($unit); + $this->addChildLinkBar( $unit ); // title - $this->out->addHTML('<div class="title">'); - $this->out->addWikiText('[[' . $unit->title . '|'. $unit->title->getSubpageText() . ']]'); - $this->out->addHTML('</div>'); + $this->out->addHTML( '<div class="title">' ); + $this->out->addWikiText( "[[$unit->title|{$unit->title->getSubpageText()}]]" ); + $this->out->addHTML( '</div>' ); // learning goals - $this->out->addHTML('<div class="learning-goals">'); - $learningGoals = $this->generateLearningGoalsWikiText($unit); - if ($learningGoals != null) { - $this->out->addWikiText($learningGoals); + $this->out->addHTML( '<div class="learning-goals">' ); + $learningGoals = $this->generateLearningGoalsWikiText( $unit ); + if ( $learningGoals !== null ) { + $this->out->addWikiText( $learningGoals ); } else { - $this->out->addHTML($this->loadMessage('section-' . 'learning-goals' . '-empty-description')); + $this->out->addHTML( $this->loadMessage( 'section-' . 'learning-goals' . '-empty-description' ) ); } - $this->out->addHTML('</div>'); + $this->out->addHTML( '</div>' ); - // meta TODO add discussion meta data overlay + // meta TODO add discussion meta data overlay? - $this->out->addHTML('</div>'); + $this->out->addHTML( '</div>' ); - $this->out->addHTML('</div>'); + $this->out->addHTML( '</div>' ); + + // register external link to unit + $this->parserOutput->addLink( $unit->title ); } /** diff --git a/resources/js/ext.mooc.js b/resources/js/ext.mooc.js index 6e1ccf5..e0e9ee5 100644 --- a/resources/js/ext.mooc.js +++ b/resources/js/ext.mooc.js @@ -51,15 +51,10 @@ } // make video a thumb - var unitVideoThumbSrc = $unitVideo.attr( 'poster' ); - var $unitVideoThumbLink = $( '<a>', { - 'href': getUnitLinkHref( $unit ) - } ); var $unitVideoThumb = $( '<img>', { - 'src': unitVideoThumbSrc + 'src': $unitVideo.attr( 'poster' ) } ); - $unitVideoThumbLink.append( $unitVideoThumb ); - $unitVideo.replaceWith( $unitVideoThumbLink ); + $unitVideo.replaceWith( $unitVideoThumb ); } } ); @@ -373,7 +368,7 @@ $mwNavButton.attr( 'src', '/mediawiki-vagrant.png' ); $mwNavButton.on( 'click', mwNavigationButtonClicked ); //$mwNavButton.insertBefore( $mwNavigation ); - hideMwNavigation( $mwNavigation ); + //hideMwNavigation( $mwNavigation ); function mwNavigationButtonClicked() { if ( $mwNavigation.hasClass( 'hidden' ) ) { diff --git a/resources/less/ext.mooc.less b/resources/less/ext.mooc.less index 94dbec0..02e54a5 100644 --- a/resources/less/ext.mooc.less +++ b/resources/less/ext.mooc.less @@ -6,6 +6,7 @@ @import "elements.less"; // COLORS +@cText: #000; @cContentBg: #FFF; @cSectionBg: #CCC; @cNavigationBarBg: #FFF; @@ -20,6 +21,14 @@ // DIMENSIONS @hCollapsedSection: 200px; // warning: when altering this value, update ext.mooc.js:hCollapsedSection as well @hCollapsedSectionOverlay: 50px; // height of the 'Read more' overlay + +#mooc { + // make images responsive + img { + max-width: 100%; + height: auto; + } +} #mooc-sections { padding-bottom: 39px; @@ -246,22 +255,32 @@ .left { padding: 0; } + // video thumbnail .video-thumbnail { - display: table; + display: block; border: 1px solid @cSectionBorder; max-width: 100%; width: 300px; height: 170px; - cursor: pointer; text-align: center; .mediaContainer, video { max-width: 100%; } + } + // no video available + .no-video { + display: table; span { display: table-cell; vertical-align: middle; + color: @cText; } } + a.video-thumbnail:hover, + a.video-thumbnail:focus { + color: @cText; + text-decoration: none; + } .links { a { display: inline-block; -- To view, visit https://gerrit.wikimedia.org/r/342621 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Ibf797ca4d30ec42a3d8d08e4418da06a657a9be3 Gerrit-PatchSet: 2 Gerrit-Project: mediawiki/extensions/MOOC Gerrit-Branch: master Gerrit-Owner: Sebschlicht2 <sebschli...@uni-koblenz.de> Gerrit-Reviewer: Sebschlicht2 <sebschli...@uni-koblenz.de> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits