Sebschlicht2 has submitted this change and it was merged. ( 
https://gerrit.wikimedia.org/r/342645 )

Change subject: code cleanUp
......................................................................


code cleanUp

The code structure of the renderers has been cleaned up.
Spacing has globally been updated to match the Mediawiki styleguide and
open TODOs have been solved, where quickfixes were possible.
Code sections have been added to the renderers, alongside with
missing PHPDoc. Constants have been used where available.

Change-Id: If810f06fd962bcc7f15593d157af7253e1b2ac50
---
M includes/content/MoocContent.php
M includes/content/MoocContentHandler.php
M includes/model/MoocItem.php
M includes/model/MoocLesson.php
M includes/rendering/MoocContentRenderer.php
M includes/rendering/MoocLessonRenderer.php
M includes/rendering/MoocOverviewRenderer.php
M includes/structure/MoocContentStructureProvider.php
M resources/js/ext.mooc.edit.js
M resources/js/ext.mooc.headers.js
M resources/js/ext.mooc.js
M resources/js/ext.mooc.navigation.js
M resources/less/ext.mooc.less
13 files changed, 469 insertions(+), 378 deletions(-)



diff --git a/includes/content/MoocContent.php b/includes/content/MoocContent.php
index 9a82091..aefb7dc 100644
--- a/includes/content/MoocContent.php
+++ b/includes/content/MoocContent.php
@@ -24,8 +24,8 @@
      * @param string $text MOOC entity JSON
      * @param string $modelId identifier of the page's content model
      */
-    public function __construct($text, $modelId = 
self::CONTENT_MODEL_MOOC_ITEM) {
-        parent::__construct($text, $modelId);
+    public function __construct( $text, $modelId = 
self::CONTENT_MODEL_MOOC_ITEM ) {
+        parent::__construct( $text, $modelId );
     }
 
     /**
@@ -45,9 +45,9 @@
      */
     public function isValid() {
         // check for valid JSON
-        if (parent::isValid()) {
+        if ( parent::isValid() ) {
             // load MOOC entity if not loaded yet
-            if (!isset($this->entity)) {
+            if ( !isset( $this->entity ) ) {
                 $this->entity = $this->loadItem();
             }
             return ( $this->entity != null );
@@ -64,8 +64,8 @@
      * @param bool $generateHtml            
      * @param ParserOutput $output            
      */
-    protected function fillParserOutput(Title $title, $revId, ParserOptions 
$options, $generateHtml, 
-        ParserOutput &$output) {
+    protected function fillParserOutput( Title $title, $revId, ParserOptions 
$options, $generateHtml,
+        ParserOutput &$output ) {
         // FIXME: WikiPage::doEditContent generates parser output before 
validation.
         // As such, native data may be invalid (though output is discarded 
later in that case).
         if ( $generateHtml && $this->isValid() ) {
@@ -91,7 +91,7 @@
                 $bootstrapManager->addAllBootstrapModules();
                 $output->addModuleStyles( 'ext.bootstrap.styles' );
 
-                $output->setText( MoocContentRenderer::renderItem( $output, 
$this->entity ) );
+                MoocContentRenderer::renderItem( $output, $this->entity );
 
                 // pass data to JS
                 $output->addJsConfigVars( [
diff --git a/includes/content/MoocContentHandler.php 
b/includes/content/MoocContentHandler.php
index 0ac1ae1..809a649 100644
--- a/includes/content/MoocContentHandler.php
+++ b/includes/content/MoocContentHandler.php
@@ -13,10 +13,10 @@
     /**
      * @param string $modelId identifier of the page's content model
      */
-    public function __construct($modelId = 
MoocContent::CONTENT_MODEL_MOOC_ITEM) {
-        parent::__construct($modelId, [
+    public function __construct( $modelId = 
MoocContent::CONTENT_MODEL_MOOC_ITEM ) {
+        parent::__construct( $modelId, [
             'CONTENT_FORMAT_JSON'
-        ]);
+        ] );
     }
 
     /**
diff --git a/includes/model/MoocItem.php b/includes/model/MoocItem.php
index 09fa62a..120cb86 100644
--- a/includes/model/MoocItem.php
+++ b/includes/model/MoocItem.php
@@ -78,7 +78,7 @@
     public $furtherReading;
 
     /**
-     * @var MoocItem[] child items
+     * @var MoocUnit[]|MoocLesson[] child items
      */
     public $children;
 
diff --git a/includes/model/MoocLesson.php b/includes/model/MoocLesson.php
index 21bc55b..2088d23 100644
--- a/includes/model/MoocLesson.php
+++ b/includes/model/MoocLesson.php
@@ -18,7 +18,7 @@
         parent::__construct( self::ENTITY_TYPE_LESSON, $title );
     }
 
-    protected function loadJson($jsonArray) {
+    protected function loadJson( $jsonArray ) {
         parent::loadJson( $jsonArray );
 
         // child units
diff --git a/includes/rendering/MoocContentRenderer.php 
b/includes/rendering/MoocContentRenderer.php
index bc8b4c6..f5f273a 100644
--- a/includes/rendering/MoocContentRenderer.php
+++ b/includes/rendering/MoocContentRenderer.php
@@ -50,14 +50,13 @@
     protected $out;
 
     /**
-     * @var MoocItem MOOC item being rendered
+     * @var MoocUnit|MoocLesson|MoocOverview MOOC item being rendered
      */
     protected $item;
 
     public function __construct() {
-        $this->out = new OutputPage();
-        // TODO necessary?
-        $this->out->enableTOC(false);
+        $tmpRequestContext = new RequestContext();
+        $this->out = $tmpRequestContext->getOutput();
     }
 
     /**
@@ -66,9 +65,9 @@
      * @param string $type MOOC item type
      * @return MoocLessonRenderer|MoocUnitRenderer|null appropriate renderer 
for the item type or null
      */
-    protected static function getRenderer($type) {
+    protected static function getRenderer( $type ) {
         // TODO use some registration process for flexibility
-        switch($type) {
+        switch ( $type ) {
             case MoocUnit::ENTITY_TYPE_UNIT:
                 return new MoocUnitRenderer();
 
@@ -89,11 +88,16 @@
      *
      * @param ParserOutput $parserOutput parser output
      * @param MoocItem $item MOOC item to render
-     * @return string|null body HTML
+     * @return bool whether the item has been successfully rendered
      */
-    public static function renderItem(&$parserOutput, $item) {
-        $renderer = self::getRenderer($item->type);
-        return ($renderer == null) ? null : $renderer->render($parserOutput, 
$item);
+    public static function renderItem( &$parserOutput, $item ) {
+        $renderer = self::getRenderer( $item->type );
+        if ( $renderer !== null ) {
+            $renderer->render( $parserOutput, $item );
+            return true;
+        } else {
+            return false;
+        }
     }
 
     /**
@@ -101,43 +105,45 @@
      *
      * @param ParserOutput $parserOutput parser output
      * @param MoocItem $item MOOC item to render
-     * @return string body HTML
      */
-    public function render(&$parserOutput, $item) {
+    public function render( &$parserOutput, $item ) {
         $this->parserOutput = $parserOutput;
         $this->item = $item;
-        MoocContentStructureProvider::loadMoocStructure($this->item);
+        MoocContentStructureProvider::loadMoocStructure( $this->item );
 
-        $this->out->addHTML('<div id="mooc" class="container-fluid">');
+        $this->out->addHTML( '<div id="mooc" class="container-fluid">' );
         
         // # navigation
-        $this->out->addHTML('<div id="mooc-navigation-bar" class="col-xs-12 
col-sm-3">');
-        $this->addNavigation($this->item->baseItem);
-        $this->out->addHTML('</div>');
+        $this->out->addHTML( '<div id="mooc-navigation-bar" class="col-xs-12 
col-sm-3">' );
+        $this->addNavigation( $this->item->baseItem );
+        $this->out->addHTML( '</div>' );
         
         // # content
-        $this->out->addHTML('<div id="mooc-content" class="col-xs-12 
col-sm-9">');
+        $this->out->addHTML( '<div id="mooc-content" class="col-xs-12 
col-sm-9">' );
         
         // ## sections
-        $this->out->addHTML('<div id="mooc-sections" class="row">');
+        $this->out->addHTML( '<div id="mooc-sections" class="row">' );
         $this->addSections();
-        $this->out->addHTML('</div>');
+        $this->out->addHTML( '</div>' );
         
         // ## categories
         $rootTitle = $this->item->title->getRootTitle();
         $categoryNS = $rootTitle->getNsText();
-        $this->out->addWikiText('[[Category:' . $categoryNS . ']]');
-        $this->parserOutput->addCategory($categoryNS, 0);
-        $categoryMooc = $categoryNS . ':' . $rootTitle->getText();
-        $this->out->addWikiText('[[Category:' . $categoryMooc . ']]');
-        $this->parserOutput->addCategory($categoryMooc, 1);
+        $this->out->addWikiText( "[[Category:$categoryNS]]" );
+        $this->parserOutput->addCategory( $categoryNS, 0 );
+        $categoryMooc = "$categoryNS:{$rootTitle->getText()}";
+        $this->out->addWikiText( "[[Category:$categoryMooc]]" );
+        $this->parserOutput->addCategory( $categoryMooc, 1 );
         
-        $this->out->addHTML('</div>');
-        
-        $this->out->addHTML('</div>');
-        // TODO call parserOutput->setText from here
-        return $this->out->getHTML();
+        $this->out->addHTML( '</div>' );
+        $this->out->addHTML( '</div>' );
+
+        $parserOutput->setText( $this->out->getHTML() );
     }
+
+    // ########################################################################
+    // # section content
+    // ########################################################################
 
     /**
      * Adds the sections of the MOOC item to the current output.
@@ -145,39 +151,29 @@
     abstract protected function addSections();
 
     protected function addLearningGoalsSection() {
-        $this->beginSection(self::SECTION_KEY_LEARNING_GOALS);
+        $this->beginSection( self::SECTION_KEY_LEARNING_GOALS );
 
-        $learningGoals = $this->generateLearningGoalsWikiText($this->item);
-        if ($learningGoals != null) {
-            $this->out->addWikiText($learningGoals);
+        // add learning goals as unordered list, if any
+        $learningGoals = self::generateUnorderedList( 
$this->item->learningGoals );
+        if ( $learningGoals !== null ) {
+            $this->out->addWikiText( $learningGoals );
         } else {
             // show info box if no learning goal added yet
-            $this->addEmptySectionBox(self::SECTION_KEY_LEARNING_GOALS);
+            $this->addEmptySectionBox( self::SECTION_KEY_LEARNING_GOALS );
         }
         
         $this->endSection();
     }
 
-    protected function generateLearningGoalsWikiText($item) {
-        if (count($item->learningGoals) == 0) {
-            return null;
-        }
-        $learningGoals = '';
-        foreach ($item->learningGoals as $learningGoal) {
-            $learningGoals .= "\n" . '# ' . $learningGoal;
-        }
-        return $learningGoals;
-    }
-
     protected function addVideoSection() {
-        $this->beginSection(self::SECTION_KEY_VIDEO);
+        $this->beginSection( self::SECTION_KEY_VIDEO );
         
-        if ($this->item->video) {
+        if ( $this->item->hasVideo() ) {
             // show video player if video set
-            $this->out->addWikiText('[[File:' . $this->item->video. 
'|800px]]');
+            $this->out->addWikiText( '[[File:' . $this->item->video. 
'|800px]]' );
         } else {
             // show info box if video not set yet
-            $this->addEmptySectionBox(self::SECTION_KEY_VIDEO);
+            $this->addEmptySectionBox( self::SECTION_KEY_VIDEO );
         }
         
         $this->endSection();
@@ -186,11 +182,11 @@
     protected function addScriptSection() {
         $this->beginSection( self::SECTION_KEY_SCRIPT );
 
-        // add script if existing
+        // add script content if existing
         if ( $this->item->script !== null ) {
             $this->out->addWikiText( $this->item->script->content );
         } else {
-            // show info box if script not created yet
+            // show info box when script has not been created yet
             // TODO pass link to edit script resource page
             $this->addEmptySectionBox( self::SECTION_KEY_SCRIPT );
         }
@@ -201,11 +197,11 @@
     protected function addQuizSection() {
         $this->beginSection( self::SECTION_KEY_QUIZ );
 
-        // add quiz if existing
+        // add quiz content if existing
         if ( $this->item->quiz !== null ) {
             $this->out->addWikiText( $this->item->quiz->content );
         } else {
-            // show info box if quiz not created yet
+            // show info box when quiz has not been created yet
             // TODO pass link to edit quiz resource page
             $this->addEmptySectionBox( self::SECTION_KEY_QUIZ );
         }
@@ -214,21 +210,37 @@
     }
 
     protected function addFurtherReadingSection() {
-        $this->beginSection(self::SECTION_KEY_FURTHER_READING);
-        
-        if (count($this->item->furtherReading) > 0) {
-            // show further reading as ordered list if any
-            $furtherReading = '';
-            foreach ($this->item->furtherReading as $furtherReadingEntry) {
-                $furtherReading .= "\n" . '# ' . $furtherReadingEntry;
-            }
-            $this->out->addWikiText($furtherReading);
+        $this->beginSection( self::SECTION_KEY_FURTHER_READING );
+
+        // add further readings as unordered list, if any
+        $furtherReading = self::generateUnorderedList( 
$this->item->furtherReading );
+        if ( $furtherReading !== null ) {
+            $this->out->addWikiText( $furtherReading );
         } else {
-            // show info box if no further reading added yet
-            $this->addEmptySectionBox(self::SECTION_KEY_FURTHER_READING);
+            // show info box when no further readings have been added yet
+            $this->addEmptySectionBox( self::SECTION_KEY_FURTHER_READING );
         }
-        
+
         $this->endSection();
+    }
+
+    // ########################################################################
+    // # section helper functions
+    // ########################################################################
+
+    /**
+     * Generates an unordered list from an array.
+     *
+     * @param array $array array to generate the list from
+     * @return null|string Wikitext for an unordered list containing the items 
specified
+     */
+    protected static function generateUnorderedList( $array ) {
+        if ( isset( $array ) && !empty( $array ) ) {
+            return '#' . implode( "\n#", $array );
+        } else {
+            // list unset or empty
+            return null;
+        }
     }
 
     /**
@@ -244,13 +256,13 @@
         // inform about missing content
         $this->out->addHTML( "<span class='description'>{$this->loadMessage( 
"section-$sectionKey-empty-description" )}</span>" );
 
-        // add controls to add content
+        // add controls to add content, if desired
         if ( $showActionAddContent ) {
             // build edit link
             $editHrefAttr = ( $editHref === null ) ? '' : " href='$editHref'";
 
             // TODO do we need an additional text to point at external 
resources such as /script or general hints?
-            $this->out->addHTML( " <a class='edit-link'$editHrefAttr>" );
+            $this->out->addHTML( " <a class='edit-link' $editHrefAttr>" );
             $this->out->addHTML( $this->loadMessage( 
"section-$sectionKey-empty-edit-link" ) );
             $this->out->addHTML( '</a>' );
         }
@@ -263,52 +275,97 @@
      *
      * @param string $sectionKey section key
      */
-    protected function beginSection($sectionKey) {
+    protected function beginSection( $sectionKey ) {
         global $wgMOOCSectionConfig;
         $sectionConfig = $wgMOOCSectionConfig[$sectionKey];
         
         $classes = 'section';
         // trigger collapsing of selected, large sections
-        if ($sectionConfig['collapsed']) {
+        if ( $sectionConfig['collapsed'] ) {
             $classes .= ' default-collapsed';
         }
         
-        $this->out->addHTML('<div id="' . $sectionKey . '" class="' . $classes 
. ' col-xs-12">');
-        $this->addSectionHeader($sectionKey);
-        $this->out->addHTML('<div class="content">');
+        $this->out->addHTML( "<div id='$sectionKey' class='$classes 
col-xs-12'>" );
+        $this->addSectionHeader( $sectionKey );
+        $this->out->addHTML( '<div class="content">' );
     }
+
+    /**
+     * Finishes the current section output.
+     */
+    protected function endSection() {
+        // add section expander
+        $this->out->addHTML( "<div class='expander'>{$this->loadMessage( 
'button-expand-section' )}</div>" );
+
+        // finish section
+        $this->out->addHTML( '</div>' );
+        $this->out->addHTML( '</div>' );
+    }
+
+    // ########################################################################
+    // # section header
+    // ########################################################################
 
     /**
      * Adds the header of a section to the output.
      *
      * @param string $sectionKey section key
      */
-    protected function addSectionHeader($sectionKey) {
-        $sectionTitle = $this->loadMessage("section-$sectionKey-title");
-        $this->out->addHTML('<div class="header">');
-        
+    protected function addSectionHeader( $sectionKey ) {
+        $sectionTitle = $this->loadMessage( "section-$sectionKey-title" );
+        $this->out->addHTML( '<div class="header">' );
+
         // actions
-        $this->out->addHTML('<div class="actions">');
-        $this->addSectionActions($sectionKey);
-        $this->out->addHTML('</div>');
-        
+        $this->out->addHTML( '<div class="actions">' );
+        $this->addSectionActions( $sectionKey );
+        $this->out->addHTML( '</div>' );
+
         // icon
-        $this->addSectionIcon($sectionKey);
-        
+        $this->addSectionIcon( $sectionKey );
+
         // heading
-        $this->out->addHTML("<h2>$sectionTitle</h2>");
-        
-        $this->out->addHTML('</div>');
+        $this->out->addHTML( "<h2>$sectionTitle</h2>" );
+
+        $this->out->addHTML( '</div>' );
     }
+
+    /**
+     * Adds the icon for a section header to the output.
+     *
+     * @param string $sectionKey section key
+     */
+    protected function addSectionIcon( $sectionKey ) {
+        $this->out->addHTML( '<div class="icon">' );
+
+        global $wgMOOCImagePath;
+        $iconPath = $wgMOOCImagePath . $this->getSectionIconFilename( 
$sectionKey );
+        $this->out->addHTML( "<img src='$iconPath' alt='' />" );
+
+        $this->out->addHTML( '</div>' );
+    }
+
+    /**
+     * Determines the name of the icon file for a certain section.
+     *
+     * @param string $sectionKey section key
+     * @return string name of the section icon file
+     */
+    protected function getSectionIconFilename( $sectionKey ) {
+        return "ic_$sectionKey.svg";
+    }
+
+    // ########################################################################
+    // # section header.actions
+    // ########################################################################
 
     /**
      * Adds the action buttons for a section header to the output.
      *
      * @param string $sectionKey section key
      */
-    protected function addSectionActions($sectionKey) {
+    protected function addSectionActions( $sectionKey ) {
         // edit section content
-        $this->addSectionActionEdit($sectionKey);
+        $this->addSectionActionEdit( $sectionKey );
     }
 
     /**
@@ -316,104 +373,12 @@
      *
      * @param string $sectionKey section key
      */
-    protected function addSectionActionEdit($sectionKey) {
-        $btnHref = '/SpecialPage:MoocEdit?title=' . $this->item->title . 
'&section=' . $sectionKey;
-        $btnTitle = $this->loadMessage("section-$sectionKey-edit-title");
+    protected function addSectionActionEdit( $sectionKey ) {
+        $btnHref = 
"/SpecialPage:MoocEdit?title={$this->item->title}&section=$sectionKey";
+        $btnTitle = $this->loadMessage( "section-$sectionKey-edit-title" );
 
-        $this->addSectionActionButton('edit', $btnTitle, $btnHref);
-        $this->addModalBox($sectionKey, 'edit');
-    }
-
-    /**
-     * Adds the modal box for a certain action.
-     *
-     * @param string $sectionKey section key
-     * @param string $action action the modal box is intended for
-     */
-    protected function addModalBox($sectionKey, $action) {
-        $this->out->addHTML("<div class=\"modal-wrapper\">");
-        $this->out->addHTML("<div class=\"modal-bg\"></div>");
-        $this->out->addHTML("<div class=\"modal-box\">");
-        $this->addModalBoxContent($sectionKey, $action);
-        $this->out->addHTML('</div>');
-        $this->out->addHTML('</div>');
-    }
-
-    /**
-     * Adds the content of the modal box for a certain action.
-     *
-     * @param string $sectionKey section key
-     * @param string $action action the modal box is intended for
-     */
-    protected function addModalBoxContent($sectionKey, $action) {
-        $modalTitle = $this->loadMessage("section-$sectionKey-$action-title");
-        $this->out->addHTML("<h3>$modalTitle</h3>");
-        $this->out->addHTML("<form class=\"$action container-fluid\">");
-        $this->out->addHTML("<div class=\"form-group row\">");
-        $this->fillModalBoxForm($sectionKey, $action);
-        $this->out->addHTML('</div>');
-        $this->out->addHTML("<div class=\"form-group row\">");
-        $this->addModalBoxActions($sectionKey, $action);
-        $this->out->addHTML('</div>');
-        $this->out->addHTML('</form>');
-    }
-
-    /**
-     * Fills the form fields to a modal box.
-     *
-     * @param string $sectionKey section key
-     * @param string $action action the modal box is intended for
-     */
-    protected function fillModalBoxForm($sectionKey, $action) {
-        if ( $action == self::ACTION_EDIT ) {
-            switch ( $sectionKey ) {
-                // video
-                case self::SECTION_KEY_VIDEO:
-                    // simple text input field
-                    $this->out->addHTML( '<input type="text" class="value 
form-control" value="' . $this->item->video . '" />' );
-                    break;
-
-                // ordered lists
-                case self::SECTION_KEY_LEARNING_GOALS:
-                case self::SECTION_KEY_FURTHER_READING:
-                    $this->out->addHTML('<ol class="value"></ol>');
-                    break;
-
-                // external resources
-                case self::SECTION_KEY_SCRIPT:
-                case self::SECTION_KEY_QUIZ:
-                    // auto-growing textarea
-                    $entity = ( $sectionKey === self::SECTION_KEY_SCRIPT ) ? 
$this->item->script : $this->item->quiz;
-                    $textareaValue = ( $entity === null ) ? '' : 
$entity->content;
-                    $this->out->addHTML( '<textarea class="value auto-grow 
form-control" rows="1">' . $textareaValue . '</textarea>' );
-                    break;
-
-                default:
-                    // unknown form components, leave empty
-                    break;
-            }
-        }
-    }
-
-    /**
-     * Adds the form actions to a modal box.
-     *
-     * @param string $sectionKey section key
-     * @param string $action action the modal box is intended for
-     */
-    protected function addModalBoxActions($sectionKey, $action) {
-        if ($action == self::ACTION_EDIT) {
-            switch ($sectionKey) {
-                default:
-                    $titleSave = $this->loadMessage('modal-button-title-save');
-                    $this->out->addHTML("<input type=\"submit\" class=\"btn 
btn-save btn-submit\" value=\"$titleSave\"/>");
-                    break;
-            }
-        }
-        $titleCancel = $this->loadMessage('modal-button-title-cancel');
-        $this->out->addHTML("<input type=\"button\" class=\"btn btn-cancel\" 
value=\"$titleCancel\" />");
-        $titleReset = $this->loadMessage('modal-button-title-reset');
-        $this->out->addHTML("<input type=\"reset\" class=\"btn btn-reset\" 
value=\"$titleReset\" />");
+        $this->addSectionActionButton( self::ACTION_EDIT, $btnTitle, $btnHref 
);
+        $this->addModalBox( $sectionKey, self::ACTION_EDIT );
     }
 
     /**
@@ -423,87 +388,159 @@
      * @param string $btnTitle button title
      * @param string $btnHref button target link
      */
-    protected function addSectionActionButton($action, $btnTitle, $btnHref) {
+    protected function addSectionActionButton( $action, $btnTitle, $btnHref ) {
         global $wgMOOCImagePath;
-        // TODO do this in CSS
-        $icSize = '32px';
-        $icAction = $wgMOOCImagePath . 
$this->getSectionActionIconFilename($action);
+        $icAction = $wgMOOCImagePath . $this->getActionIconFilename( $action );
 
-        $this->out->addHTML("<div class=\"btn btn-$action\">");
-        // TODO ensure to link to the special page allowing to perform this 
action
-        // TODO replace href with link that allows tab-browsing with modal 
boxes
-        $this->out->addHTML("<a href=\"$btnHref\" title=\"$btnTitle\">");
-        $this->out->addHTML("<img src=\"$icAction\" width=\"$icSize\" 
height=\"$icSize\" alt=\"$btnTitle\" />");
-        $this->out->addHTML('</a>');
-        $this->out->addHTML('</div>');
-    }
-
-    protected function getSectionActionIconFilename($action) {
-        return 'ic_' . $action . '.svg';
+        $this->out->addHTML( "<div class='btn btn-$action'>" );
+        $this->out->addHTML( "<a href='$btnHref'' title='$btnTitle'>" );
+        $this->out->addHTML( "<img src='$icAction' alt='$btnTitle'/>" );
+        $this->out->addHTML( '</a>' );
+        $this->out->addHTML( '</div>' );
     }
 
     /**
-     * Adds the icon for a section header to the output.
+     * Determines the name of the icon file for an action.
+     *
+     * @param string $action action
+     * @return string name of the action icon file
+     */
+    protected function getActionIconFilename( $action ) {
+        return "ic_$action.svg";
+    }
+
+    // ########################################################################
+    // # modal box
+    // ########################################################################
+
+    /**
+     * Adds the modal box for a certain action.
      *
      * @param string $sectionKey section key
+     * @param string $action action the modal box is intended for
      */
-    protected function addSectionIcon($sectionKey) {
-        $this->out->addHTML('<div class="icon">');
-        
-        global $wgMOOCImagePath;
-        $this->out->addHTML(
-            '<img src="' . $wgMOOCImagePath . 
$this->getSectionIconFilename($sectionKey) . '" width="32px" height="32px" 
alt="" />');
-        
-        $this->out->addHTML('</div>');
-    }
-
-    /**
-     * Determines the name of the icon file for a certain section.
-     *
-     * @param string $sectionKey section key
-     * @return string name of the section icon file
-     */
-    protected function getSectionIconFilename($sectionKey) {
-        return 'ic_' . $sectionKey . '.svg';
-    }
-
-    /**
-     * Finishes the current section output.
-     */
-    protected function endSection() {
-        // add section expander
-        $this->out->addHTML( '<div class="expander">' . $this->loadMessage( 
'button-expand-section' ) . '</div>' );
-
-        // finish section
+    protected function addModalBox( $sectionKey, $action ) {
+        $this->out->addHTML( '<div class="modal-wrapper">' );
+        $this->out->addHTML( '<div class="modal-bg"></div>' );
+        $this->out->addHTML( '<div class="modal-box">' );
+        $this->addModalBoxContent( $sectionKey, $action );
         $this->out->addHTML( '</div>' );
         $this->out->addHTML( '</div>' );
     }
+
+    /**
+     * Adds the content of the modal box for a certain action.
+     *
+     * @param string $sectionKey section key
+     * @param string $action action the modal box is intended for
+     */
+    protected function addModalBoxContent( $sectionKey, $action ) {
+        $modalTitle = $this->loadMessage( "section-$sectionKey-$action-title" 
);
+        $this->out->addHTML( "<h3>$modalTitle</h3>" );
+        $this->out->addHTML( "<form class='$action container-fluid'>" );
+
+        // form components
+        $this->out->addHTML( '<div class="form-group row">' );
+        $this->fillModalBoxForm( $sectionKey, $action );
+        $this->out->addHTML( '</div>' );
+
+        // form actions
+        $this->out->addHTML( '<div class="form-group row">' );
+        $this->addModalBoxActions( $sectionKey, $action );
+        $this->out->addHTML( '</div>' );
+
+        $this->out->addHTML( '</form>' );
+    }
+
+    /**
+     * Fills the form fields to a modal box.
+     *
+     * @param string $sectionKey section key
+     * @param string $action action the modal box is intended for
+     */
+    protected function fillModalBoxForm( $sectionKey, $action ) {
+        if ( $action != self::ACTION_EDIT ) {
+            // default implementation only supports editing
+            return;
+        }
+
+        switch ( $sectionKey ) {
+            // video
+            case self::SECTION_KEY_VIDEO:
+                // simple text input field
+                $this->out->addHTML( "<input type='text' class='value 
form-control' value='{$this->item->video}'/>" );
+                break;
+
+            // ordered lists
+            case self::SECTION_KEY_LEARNING_GOALS:
+            case self::SECTION_KEY_FURTHER_READING:
+                $this->out->addHTML( '<ol class="value"></ol>' );
+                break;
+
+            // external resources
+            case self::SECTION_KEY_SCRIPT:
+            case self::SECTION_KEY_QUIZ:
+                // auto-growing textarea
+                $entity = ( $sectionKey === self::SECTION_KEY_SCRIPT ) ? 
$this->item->script : $this->item->quiz;
+                $textareaValue = ( $entity === null ) ? '' : $entity->content;
+                $this->out->addHTML( "<textarea class='value auto-grow 
form-control' rows='1'>$textareaValue</textarea>" );
+                break;
+
+            default:
+                // unknown form components, leave empty
+                break;
+        }
+    }
+
+    /**
+     * Adds the form actions to a modal box.
+     *
+     * @param string $sectionKey section key
+     * @param string $action action the modal box is intended for
+     */
+    protected function addModalBoxActions( $sectionKey, $action ) {
+        if ( $action == self::ACTION_EDIT && $sectionKey !== null ) {
+            // save button
+            $titleSave = $this->loadMessage( 'modal-button-title-save' );
+            $this->out->addHTML( "<input type='submit' class='btn btn-save 
btn-submit' value='$titleSave'/>" );
+        }
+        // cancel button
+        $titleCancel = $this->loadMessage( 'modal-button-title-cancel' );
+        $this->out->addHTML( "<input type=\"button\" class=\"btn btn-cancel\" 
value=\"$titleCancel\" />" );
+        // reset button
+        $titleReset = $this->loadMessage( 'modal-button-title-reset' );
+        $this->out->addHTML( "<input type='reset' class='btn btn-reset' 
value='$titleReset'/>" );
+    }
+
+    // ########################################################################
+    // # MOOC navigation
+    // ########################################################################
 
     /**
      * Adds the navigation bar for the MOOC to the output.
      *
      * @param MoocItem $baseItem MOOC's base item
      */
-    protected function addNavigation($baseItem) {
-        $this->out->addHTML('<div id="mooc-navigation">');
+    protected function addNavigation( $baseItem ) {
+        $this->out->addHTML( '<div id="mooc-navigation">' );
         // header
-        $title = $this->loadMessage('navigation-title');
-        $this->out->addHTML('<div class="header">');
+        $title = $this->loadMessage( 'navigation-title' );
+        $this->out->addHTML( '<div class="header">' );
         
         // ## icon
-        $this->addSectionIcon('navigation');
+        $this->addSectionIcon( 'navigation' );
         
         // ## heading
-        $this->out->addHTML('<h2>' . $title . '</h2>');
+        $this->out->addHTML( "<h2>$title</h2>" );
         
-        $this->out->addHTML('</div>');
+        $this->out->addHTML( '</div>' );
         
         // content
-        $this->out->addHTML('<ul class="content">');
-        $this->addNavigationItem($baseItem);
-        $this->out->addHTML('</ul>');
+        $this->out->addHTML( '<ul class="content">' );
+        $this->addNavigationItem( $baseItem );
+        $this->out->addHTML( '</ul>' );
         
-        $this->out->addHTML('</div>');
+        $this->out->addHTML( '</div>' );
     }
 
     /**
@@ -513,16 +550,18 @@
      */
     protected function addNavigationItem( $item ) {
         $this->out->addHTML( '<li>' );
-        $this->out->addWikiText( '[[' . $item->title . '|' . $item->getName() 
. ']]' );
+        $this->out->addWikiText( "[[$item->title|{$item->getName()}]]" );
+
         // register link for interwiki meta data
         $this->parserOutput->addLink( $item->title );
+
         // TODO do this for next/previous links and displayed children as well
         
         // add menu items for children - if any
         if ( $item->hasChildren() ) {
-            // limit to MoocItems
+            // limit navigation to MoocItems
             $children = [];
-            foreach ($item->children as $childItem) {
+            foreach ( $item->children as $childItem ) {
                 if ( $childItem instanceof MoocItem ) {
                     array_push( $children, $childItem );
                 }
@@ -539,11 +578,15 @@
         $this->out->addHTML( '</li>' );
     }
 
+    // ########################################################################
+    // # Mediawiki-API wrappers
+    // ########################################################################
+
     /**
      * Loads a message in context of the MOOC extension.
+     * Additional parameters will be passed to wfMessage in background.
      *
      * @param string $key message key
-     * @param mixed $params,... additional message parameters
      * @return string internationalized message built
      */
     protected function loadMessage( $key /*...*/ ) {
diff --git a/includes/rendering/MoocLessonRenderer.php 
b/includes/rendering/MoocLessonRenderer.php
index 200aa06..5156c5b 100644
--- a/includes/rendering/MoocLessonRenderer.php
+++ b/includes/rendering/MoocLessonRenderer.php
@@ -19,6 +19,10 @@
      */
     const ACTION_ADD = 'add';
 
+    // ########################################################################
+    // # section content
+    // ########################################################################
+
     /**
      * Adds the MOOC lesson sections to the output.
      */
@@ -35,7 +39,6 @@
         $this->beginSection( self::SECTION_KEY_UNITS );
 
         $this->addUnitsSectionContent( $this->item );
-        // TODO add controls to add units somewhere
 
         $this->endSection();
     }
@@ -61,7 +64,7 @@
     /**
      * Adds an unit to the units section.
      *
-     * @param MoocItem $unit unit to add
+     * @param MoocUnit $unit unit to add
      */
     protected function addChildUnit( $unit ) {
         $this->out->addHTML( '<div class="child unit col-xs-12">' );
@@ -101,7 +104,7 @@
 
         // learning goals
         $this->out->addHTML( '<div class="learning-goals">' );
-        $learningGoals = $this->generateLearningGoalsWikiText( $unit );
+        $learningGoals = self::generateUnorderedList( $unit->learningGoals );
         if ( $learningGoals !== null ) {
             $this->out->addWikiText( $learningGoals );
         } else {
@@ -124,7 +127,7 @@
      *
      * @param MoocItem $item item
      * @param int $thumbWidth targeted thumbnail width
-     * @return {bool} whether the video data has been successfully loaded or 
not
+     * @return bool whether the video data has been successfully loaded or not
      */
     protected function loadVideoData( $item, $thumbWidth ) {
         if ( $item->hasVideo() ) {
@@ -162,6 +165,10 @@
         // no video
         return false;
     }
+
+    // ########################################################################
+    // # section content.links
+    // ########################################################################
 
     /**
      * Adds the link bar to the child unit output.
@@ -202,17 +209,6 @@
     }
 
     /**
-     * Resolves the full URL to the original file of a media.
-     *
-     * @param Title $title page title of the media file
-     * @return string full URL to the original media file
-     */
-    protected function resolveMediaUrl( $title ) {
-        // TODO resolve media file title to full URL to original file
-        return $title->getLinkURL();
-    }
-
-    /**
      * Adds the link to a unit's section to the child unit link bar.
      *
      * @param MoocUnit $unit child unit
@@ -226,32 +222,49 @@
         $this->addChildLinkBarLink( $icon, $href, $title );
     }
 
+    /**
+     * Adds a link to the child unit link bar.
+     *
+     * @param string $icon icon file path
+     * @param string $href link target
+     * @param string $title link title
+     * @param array $classes CSS classes to apply to the link
+     */
     protected function addChildLinkBarLink( $icon, $href, $title, $classes = 
null ) {
         $attrClass = '';
         if ( !empty( $classes ) ) {
-            $attrClass = ' class="' . implode( ' ', $classes ) . '"';
+            $attrClass = 'class="' . implode( ' ', $classes ) . '"';
         }
-        $this->out->addHTML( "<a href='$href'$attrClass>" );
+        $this->out->addHTML( "<a href='$href' $attrClass>" );
         $this->out->addHTML( "<img src='$icon' title='$title' alt='$title' />" 
);
         $this->out->addHTML( '</a>' );
     }
 
-    protected function fillModalBoxForm( $sectionKey, $action ) {
-        if ( $sectionKey == self::SECTION_KEY_UNITS && $action == 
self::ACTION_ADD ) {
-            $this->out->addHTML( '<input type="text" class="value 
form-control" />' );
-        } else {
-            parent::fillModalBoxForm( $sectionKey, $action );
+    // ########################################################################
+    // # section header
+    // ########################################################################
+
+    protected function getSectionIconFilename( $sectionKey ) {
+        switch ( $sectionKey ) {
+            case self::SECTION_KEY_UNITS:
+                return parent::getSectionIconFilename( 'children' );
+
+            default:
+                return parent::getSectionIconFilename( $sectionKey );
         }
     }
 
-    protected function addModalBoxActions( $sectionKey, $action ) {
-        if ( $sectionKey == self::SECTION_KEY_UNITS && $action == 
self::ACTION_ADD ) {
-            $titleAdd = $this->loadMessage( 'modal-button-title-add' );
-            $this->out->addHTML( "<input type='submit' class='btn btn-add 
btn-submit' value='$titleAdd' />" );
-            $titleCancel = $this->loadMessage( 'modal-button-title-cancel' );
-            $this->out->addHTML( "<input type='button' class='btn btn-cancel' 
value='$titleCancel' />" );
+    // ########################################################################
+    // # section header.actions
+    // ########################################################################
+
+    protected function addSectionActions( $sectionKey ) {
+        if ( $sectionKey == self::SECTION_KEY_UNITS ) {
+            // add unit
+            $this->addSectionActionAdd( $sectionKey );
+            // TODO edit units?
         } else {
-            parent::addModalBoxActions( $sectionKey, $action );
+            parent::addSectionActions( $sectionKey );
         }
     }
 
@@ -269,31 +282,36 @@
         $this->addModalBox( $sectionKey, self::ACTION_ADD );
     }
 
-    protected function addSectionActions( $sectionKey ) {
-        if ( $sectionKey == self::SECTION_KEY_UNITS ) {
-            // add unit
-            $this->addSectionActionAdd( $sectionKey );
-        } else {
-            // TODO always add edit button?
-            parent::addSectionActions( $sectionKey );
-        }
-    }
-
-    protected function getSectionActionIconFilename( $action ) {
+    protected function getActionIconFilename( $action ) {
         if ( $action == self::ACTION_ADD ) {
             return "ic_$action.png";
         } else {
-            return "ic_$action.svg";
+            return parent::getActionIconFilename( $action );
         }
     }
 
-    protected function getSectionIconFilename( $sectionKey ) {
-        switch ( $sectionKey ) {
-            case self::SECTION_KEY_UNITS:
-                return parent::getSectionIconFilename( 'children' );
+    // ########################################################################
+    // # modal box
+    // ########################################################################
 
-            default:
-                return parent::getSectionIconFilename( $sectionKey );
+    protected function fillModalBoxForm( $sectionKey, $action ) {
+        if ( $sectionKey == self::SECTION_KEY_UNITS && $action == 
self::ACTION_ADD ) {
+            $this->out->addHTML( '<input type="text" class="value 
form-control" />' );
+        } else {
+            parent::fillModalBoxForm( $sectionKey, $action );
+        }
+    }
+
+    protected function addModalBoxActions( $sectionKey, $action ) {
+        if ( $sectionKey == self::SECTION_KEY_UNITS && $action == 
self::ACTION_ADD ) {
+            // add button
+            $titleAdd = $this->loadMessage( 'modal-button-title-add' );
+            $this->out->addHTML( "<input type='submit' class='btn btn-add 
btn-submit' value='$titleAdd' />" );
+            // cancel button
+            $titleCancel = $this->loadMessage( 'modal-button-title-cancel' );
+            $this->out->addHTML( "<input type='button' class='btn btn-cancel' 
value='$titleCancel' />" );
+        } else {
+            parent::addModalBoxActions( $sectionKey, $action );
         }
     }
 }
diff --git a/includes/rendering/MoocOverviewRenderer.php 
b/includes/rendering/MoocOverviewRenderer.php
index 39d5fda..5c2ff68 100644
--- a/includes/rendering/MoocOverviewRenderer.php
+++ b/includes/rendering/MoocOverviewRenderer.php
@@ -19,6 +19,10 @@
      */
     const ACTION_ADD = 'add';
 
+    // ########################################################################
+    // # section content
+    // ########################################################################
+
     /**
      * Adds the MOOC overview sections to the output.
      */
@@ -55,7 +59,7 @@
 
         // header
         $this->out->addHTML( '<div class="title">' );
-        $this->out->addWikiText( sprintf( '[[%s|%d. %s]]', $lesson->title, 
$iLesson, $lesson->getName() ) );
+        $this->out->addWikiText( "[[$lesson->title|$iLesson. 
{$lesson->getName()}]]" );
         $this->out->addHTML( '</div>' );
 
         // units
@@ -63,6 +67,60 @@
 
         $this->out->addHTML( '</div>' );
     }
+
+    // ########################################################################
+    // # section header
+    // ########################################################################
+
+    protected function getSectionIconFilename( $sectionKey ) {
+        switch ( $sectionKey ) {
+            case self::SECTION_KEY_LESSONS:
+                return parent::getSectionIconFilename( 'children' );
+
+            default:
+                return parent::getSectionIconFilename( $sectionKey );
+        }
+    }
+
+    // ########################################################################
+    // # section header.actions
+    // ########################################################################
+
+    protected function addSectionActions( $sectionKey ) {
+        if ( $sectionKey == self::SECTION_KEY_LESSONS ) {
+            // add lesson
+            $this->addSectionActionAddLesson( $sectionKey );
+            // TODO edit lessons?
+        } else {
+            parent::addSectionActions( $sectionKey );
+        }
+    }
+
+    /**
+     * Adds the UI elements to the lessons section header that allow to add a 
lesson.
+     *
+     * @param string $sectionKey section key
+     */
+    protected function addSectionActionAddLesson( $sectionKey ) {
+        // TODO link to add lesson function instead
+        $btnHref = 
"/SpecialPage:MoocEdit?title={$this->item->title}&section=$sectionKey";
+        $btnTitle = $this->loadMessage( "section-$sectionKey-add-title" );
+
+        $this->addSectionActionButton( self::ACTION_ADD, $btnTitle, $btnHref );
+        $this->addModalBox( $sectionKey, self::ACTION_ADD );
+    }
+
+    protected function getActionIconFilename( $action ) {
+        if ( $action == self::ACTION_ADD ) {
+            return "ic_$action.png";
+        } else {
+            return parent::getActionIconFilename( $action );
+        }
+    }
+
+    // ########################################################################
+    // # modal box
+    // ########################################################################
 
     protected function fillModalBoxForm( $sectionKey, $action ) {
         if ( $sectionKey == self::SECTION_KEY_LESSONS && $action == 
self::ACTION_ADD ) {
@@ -74,54 +132,13 @@
 
     protected function addModalBoxActions( $sectionKey, $action ) {
         if ( $sectionKey == self::SECTION_KEY_LESSONS && $action == 
self::ACTION_ADD ) {
+            // add button
             $titleAdd = $this->loadMessage( 'modal-button-title-add' );
-            $this->out->addHTML( "<input type=\"submit\" class=\"btn btn-add 
btn-submit\" value=\"$titleAdd\" />" );
+            $this->out->addHTML( "<input type='submit' class='btn btn-add 
btn-submit' value='$titleAdd'/>" );
             $titleCancel = $this->loadMessage( 'modal-button-title-cancel' );
-            $this->out->addHTML( "<input type=\"button\" class=\"btn 
btn-cancel\" value=\"$titleCancel\" />" );
+            $this->out->addHTML( "<input type='button' class='btn btn-cancel' 
value='$titleCancel'/>" );
         } else {
             parent::addModalBoxActions( $sectionKey, $action );
-        }
-    }
-
-    /**
-     * Adds the UI elements to the lessons section header that allow to add a 
lesson.
-     *
-     * @param string $sectionKey section key
-     */
-    protected function addSectionActionAddLesson( $sectionKey ) {
-        // TODO link to add lesson function instead
-        $btnHref = '/SpecialPage:MoocEdit?title=' . $this->item->title . 
'&section=' . $sectionKey;
-        $btnTitle = $this->loadMessage( "section-$sectionKey-add-title" );
-
-        $this->addSectionActionButton( 'add', $btnTitle, $btnHref );
-        $this->addModalBox( $sectionKey, 'add' );
-    }
-
-    protected function addSectionActions( $sectionKey ) {
-        if ( $sectionKey == self::SECTION_KEY_LESSONS ) {
-            // add lesson
-            $this->addSectionActionAddLesson( $sectionKey );
-        } else {
-            // TODO always add edit button
-            parent::addSectionActions( $sectionKey );
-        }
-    }
-
-    protected function getSectionActionIconFilename( $action ) {
-        if ( $action == 'add' ) {
-            return "ic_$action.png";
-        } else {
-            return "ic_$action.svg";
-        }
-    }
-
-    protected function getSectionIconFilename( $sectionKey ) {
-        switch ( $sectionKey ) {
-            case self::SECTION_KEY_LESSONS:
-                return parent::getSectionIconFilename( 'children' );
-
-            default:
-                return parent::getSectionIconFilename( $sectionKey );
         }
     }
 }
\ No newline at end of file
diff --git a/includes/structure/MoocContentStructureProvider.php 
b/includes/structure/MoocContentStructureProvider.php
index bbe8d54..5614e85 100644
--- a/includes/structure/MoocContentStructureProvider.php
+++ b/includes/structure/MoocContentStructureProvider.php
@@ -112,15 +112,15 @@
 
         // inject values of the rendered item
         $queue = [$rootItem];
-        while ( !empty($queue) ) {
+        while ( !empty( $queue ) ) {
             $crr = array_pop( $queue ); // LIFO until reversing array
             // check if item is what we are searching for
             if ( $renderedItem->title->equals( $crr->title ) ) {
                 $renderedItem->children = $crr->children;
                 return;
-            } elseif ($crr->hasChildren()) {
-                foreach ($crr->children as $child) {
-                    array_push($queue, $child);
+            } elseif ( $crr->hasChildren() ) {
+                foreach ( $crr->children as $child ) {
+                    array_push( $queue, $child );
                 }
             }
         }
diff --git a/resources/js/ext.mooc.edit.js b/resources/js/ext.mooc.edit.js
index 72466eb..65e5d15 100644
--- a/resources/js/ext.mooc.edit.js
+++ b/resources/js/ext.mooc.edit.js
@@ -13,23 +13,25 @@
   });
 
   // register API calls when resources ready
-  mw.loader.using( [ 'mediawiki.api.messages', 'mediawiki.jqueryMsg', 
'mediawiki.api.edit' ], registerApiCalls, function () {
-    mw.log.error( 'Failed to load MediaWiki modules to initialize MOOC 
extension!' );
-  } );
+  mw.loader.using([
+      'mediawiki.api.messages', 'mediawiki.jqueryMsg', 'mediawiki.api.edit'
+    ], registerApiCalls, function () {
+      mw.log.error( 'Failed to load MediaWiki modules to initialize MOOC 
extension!' );
+  });
 
   /**
    * Registers the API calls with the corresponding UI elements.
    */
   function registerApiCalls() {
-    new mw.Api().loadMessagesIfMissing( [
+    new mw.Api().loadMessagesIfMissing([
       'mooc-overview-add-lesson-summary', 'mooc-lesson-add-unit-summary'
-    ] ).then( function () {
+    ]).then( function () {
       // initialize modal edit boxes
       initModalEditBoxes( item );
       // initialize modal add boxes
       $( '#lessons' ).find( '.header form.add .btn-submit' ).on( 'click', 
addLessonToCurrentMooc );
       $( '#units' ).find( '.header form.add .btn-submit' ).on( 'click', 
addUnitToCurrentLesson );
-    } );
+    });
   }
 
   /**
@@ -47,7 +49,7 @@
     apiAddUnitToLesson( mw.config.get( 'wgPageName' ), unitName ).then( 
function () {
       // reload page on success
       reloadPage();
-    } );
+    });
     return false;
   }
 
@@ -66,7 +68,7 @@
     apiAddLessonToMooc( mw.config.get( 'wgPageName' ), lessonName ).then( 
function () {
       // reload page on success
       reloadPage();
-    } );
+    });
     return false;
   }
 
@@ -101,7 +103,7 @@
         mw.log.warn( "HTTP error: " + response.textStatus ); // result.xhr 
contains the jqXHR object
       }
       //TODO show the user that the process has failed!
-    } );
+    });
   }
 
   /**
@@ -119,10 +121,10 @@
         'summary': summary,
         'text': content
       };
-    } ).then( function( json ) {
+    }).then( function( json ) {
       mw.log( 'The page has been saved successfully. Response:' );
       mw.log( json );
-    } ).fail( function ( code, response ) {
+    }).fail( function ( code, response ) {
       mw.log.warn( 'Failed to save the page!' );
       mw.log( response );
       mw.log.warn( 'Cause: ' + response.error );
@@ -131,7 +133,7 @@
         mw.log.warn( "HTTP error: " + response.textStatus ); // result.xhr 
contains the jqXHR object
       }
       //TODO show the user that the process has failed!
-    } );
+    });
   }
 
   /**
@@ -257,7 +259,7 @@
     $autoGrowingTextarea.each ( function( index, ele ) {
       var $textarea = $( ele );
       resizeTextarea( $textarea );
-    } );
+    });
   }
 
   /**
@@ -336,7 +338,7 @@
           !resourcePageExists, section ).then( function ( ) {
           // reload page on success
           reloadPage();
-        } );
+        });
         break;
     }
 
@@ -346,7 +348,7 @@
       apiSaveItem( mw.config.get( 'wgPageName' ), item, editSummary ).then( 
function ( ) {
         // reload page on success
         reloadPage();
-      } );
+      });
     }
     return false;
   }
@@ -384,7 +386,7 @@
       if ( value.length > 0 ) {
         list.push( value );
       }
-    } );
+    });
     return list;
   }
 
@@ -424,13 +426,13 @@
       'type': 'text',
       'value': value
     } );
-    $input.on( 'keydown', onListItemInputKeyDown);
+    $input.on( 'keydown', onListItemInputKeyDown );
 
-    var $listItem = $( '<li>' ).append($input);
+    var $listItem = $( '<li>' ).append( $input );
     if ( $prev === undefined ) {
-      $list.append($listItem);
+      $list.append( $listItem );
     } else {
-      $prev.after($listItem);
+      $prev.after( $listItem );
     }
     $input.focus();
 
@@ -491,7 +493,7 @@
       // Enter
       case 13:
         var $listItem = getListItem( $( this ) );
-        addListItem( $listItem.parent(), '', $listItem);
+        addListItem( $listItem.parent(), '', $listItem );
         e.preventDefault();
         return false;
 
diff --git a/resources/js/ext.mooc.headers.js b/resources/js/ext.mooc.headers.js
index 8e94d48..c4c6210 100644
--- a/resources/js/ext.mooc.headers.js
+++ b/resources/js/ext.mooc.headers.js
@@ -12,7 +12,7 @@
     var $sectionHeader = $section.children( '.header' );
     $sectionHeader.css( 'position', 'absolute' ).css( 'top', 0 ).css( 'width', 
'100%' );
     $section.css( 'padding-top', $sectionHeader.outerHeight() );
-  } );
+  });
 
   // update section headers on scroll
   $window.scroll( updateSectionHeaders );
diff --git a/resources/js/ext.mooc.js b/resources/js/ext.mooc.js
index a410a7b..067817d 100644
--- a/resources/js/ext.mooc.js
+++ b/resources/js/ext.mooc.js
@@ -46,7 +46,7 @@
     if ( isEscape ) {
       closeModalBoxes();
     }
-  } );
+  });
 
   // show/hide actions if mouse is inside/outside the respective section
   $sections
@@ -108,7 +108,7 @@
       // filter by action if multiple modal boxes available
       $modal = $modal.filter( function( index, $el ) {
         return ( $el.find( 'form.' + action ).length > 1 );
-      } );
+      });
     }
 
     $modal.fadeIn( 200 );
@@ -179,7 +179,7 @@
    * @param $section section jQuery-element
    * @returns {boolean} whether the section is collapsable or not
    */
-  function isSectionCollapsable($section) {
+  function isSectionCollapsable( $section ) {
     if ( $section.hasClass( 'collapsed' ) ) {
       return true;
     }
diff --git a/resources/js/ext.mooc.navigation.js 
b/resources/js/ext.mooc.navigation.js
index 1024718..a92e134 100644
--- a/resources/js/ext.mooc.navigation.js
+++ b/resources/js/ext.mooc.navigation.js
@@ -123,6 +123,6 @@
     resetNavBarHeader( $navigationHeader );
     resetNavBar( $navigation );
     updateNavigationBar();
-  } );
+  });
 
 }( mediaWiki, jQuery ) );
diff --git a/resources/less/ext.mooc.less b/resources/less/ext.mooc.less
index 0dc5392..97788bb 100644
--- a/resources/less/ext.mooc.less
+++ b/resources/less/ext.mooc.less
@@ -48,6 +48,12 @@
       .box-shadow(0 0 0 1px rgba(155, 155, 155, .3), 1px 0 0 0 rgba(255, 255, 
255, .9) inset, 0 2px 2px rgba(0, 0, 0, .1));
       z-index: 1;
 
+      // section icon
+      .icon {
+        max-width: 32px;
+        max-height: 32px;
+      }
+
       // ACTION BUTTONS
       .actions {
         float: right;
@@ -55,6 +61,11 @@
           padding: 3px 6px;
           opacity: 1;
           .transition(.3s, ease-out 0s, opacity);
+          // button icon
+          img {
+            max-width: 32px;
+            max-height: 32px;
+          }
         }
       }
       .actions.hidden-actions {

-- 
To view, visit https://gerrit.wikimedia.org/r/342645
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: If810f06fd962bcc7f15593d157af7253e1b2ac50
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

Reply via email to