diff --git a/src/client/site/mod_page/mod_page.jade b/src/client/site/mod_page/mod_page.jade index 05d576281..0a3063794 100644 --- a/src/client/site/mod_page/mod_page.jade +++ b/src/client/site/mod_page/mod_page.jade @@ -24,6 +24,10 @@ a.documentation(target="documentation") documentation a.download(target="download") download + section.videos + h2 Videos + .panel + section.tutorials h2 Tutorials .panel diff --git a/src/client/site/mod_page/mod_page.scss b/src/client/site/mod_page/mod_page.scss index 93860be50..7bf50b17a 100644 --- a/src/client/site/mod_page/mod_page.scss +++ b/src/client/site/mod_page/mod_page.scss @@ -59,6 +59,18 @@ @include layout-link-list; } } + + section.videos { + .panel { + display: flex; + flex-wrap: wrap; + + .view__video { + flex: 0 0 50%; + margin-bottom: $size-margin-large; + } + } + } } @include screen-size(mobile) { @@ -97,5 +109,13 @@ margin-right: $size-margin-medium; } } + + section.videos { + .panel { + .view__video { + flex: 0 0 100%; + } + } + } } } diff --git a/src/client/site/mod_page/mod_page_controller.coffee b/src/client/site/mod_page/mod_page_controller.coffee index e8380e89a..98448dedc 100644 --- a/src/client/site/mod_page/mod_page_controller.coffee +++ b/src/client/site/mod_page/mod_page_controller.coffee @@ -5,12 +5,13 @@ # All rights reserved. # -{Item} = require('crafting-guide-common').deprecated.game -ItemGroupController = require '../common/item_group/item_group_controller' -{Mod} = require('crafting-guide-common').deprecated.game -ModVersionSelectorController = require '../common/mod_version_selector/mod_version_selector_controller' -PageController = require '../page_controller' -TutorialController = require './tutorial/tutorial_controller' +{Item} = require("crafting-guide-common").deprecated.game +ItemGroupController = require "../common/item_group/item_group_controller" +{Mod} = require("crafting-guide-common").deprecated.game +ModVersionSelectorController = require "../common/mod_version_selector/mod_version_selector_controller" +PageController = require "../page_controller" +TutorialController = require "./tutorial/tutorial_controller" +VideoController = require "../common/video/video_controller" ######################################################################################################################## @@ -64,12 +65,16 @@ module.exports = class ModPageController extends PageController @$title = @$('.about .title') @$tutorialsContainer = @$('section.tutorials .panel') @$tutorialsSection = @$('section.tutorials') + @$videosContainer = @$('section.videos .panel') + @$videosSection = @$('section.videos') + @$videosSectionTitle = @$('section.videos h2') super refresh: -> @_refreshAboutBlock() @_refreshItemGroups() @_refreshTutorials() + @_refreshVideos() super # Backbone.View Overrides ###################################################################### @@ -152,3 +157,29 @@ module.exports = class ModPageController extends PageController @show @$tutorialsSection else @hide @$tutorialsSection + + _refreshVideos: -> + @_videoControllers ?= [] + index = 0 + + videos = @model?.videos or [] + if videos? and videos.length > 0 + @$videosSectionTitle.html if videos.length is 1 then 'Video' else 'Videos' + + for video in videos + controller = @_videoControllers[index] + if not controller? + controller = new VideoController model:video + @_videoControllers.push controller + controller.render() + @$videosContainer.append controller.$el + else + controller.model = video + index++ + + @show @$videosSection + else + @hide @$videosSection + + while @_videoControllers.length > index + @_videoControllers.pop().remove()