codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2024-11-28 01:55:38 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Put video into its own guide tab, fix intro tabs

Browse source
This commit is contained in:
Nick Winter 2015-11-30 13:54:13 -08:00
parent 69379fb54f
commit 8fd47535d1
3 changed files with 31 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/styles/play/menu/guide-view.sass
View file

@ -54,6 +54,10 @@
color: white
#guide-view
&.has-tabs
margin-top: -40px
pre.ace_editor
padding: 2px 4px
border-radius: 4px
@ -63,3 +67,7 @@
.ace_cursor, .ace_bracket
display: none
.tab-content
img
max-width: 100%

12
app/templates/play/menu/guide-view.jade
View file

@ -1,6 +1,6 @@
if docs.length === 1
if showVideo
h3(id='help-video-heading', data-i18n="game_menu.guide_video_tutorial")
h3#help-video-heading(data-i18n="game_menu.guide_video_tutorial")
if videoLocked
p(data-i18n="subscribe.unlock_help_videos") Subscribe to unlock all video tutorials.
button.start-subscription-button.btn.btn-lg.btn-success(data-i18n="subscribe.subscribe_title") Subscribe
@ -12,9 +12,19 @@ if docs.length === 1
else
ul.nav.nav-tabs
if showVideo
li
a(data-target="#docs_tab_help_video", data-toggle="tab", data-i18n="game_menu.guide_video_tutorial")
for doc in docs
li
a(data-target="#docs_tab_#{doc.slug}", data-toggle="tab") #{doc.name}
div.tab-content
if showVideo
div.tab-pane(id="docs_tab_help_video")
if videoLocked
p(data-i18n="subscribe.unlock_help_videos") Subscribe to unlock all video tutorials.
button.start-subscription-button.btn.btn-lg.btn-success(data-i18n="subscribe.subscribe_title") Subscribe
else
div(id="help-video-player")
for doc in docs
div.tab-pane(id="docs_tab_#{doc.slug}")!= doc.html

19
app/views/play/menu/GuideView.coffee
View file

@ -23,7 +23,7 @@ module.exports = class LevelGuideView extends CocoView
# A/B Testing video tutorial styles
@helpVideosIndex = me.getVideoTutorialStylesIndex(@helpVideos.length)
@helpVideo = @helpVideos[@helpVideosIndex] if @helpVideos.length > 0
@videoLocked = not (@helpVideo?.free or options.level.get('type', true) is 'course') and @requiresSubscription
@videoLocked = not (@helpVideo?.free or options.level.get('type', true) in ['course', 'course-ladder']) and @requiresSubscription
@firstOnly = options.firstOnly
@docs = options?.docs ? options.level.get('documentation') ? {}
@ -40,8 +40,8 @@ module.exports = class LevelGuideView extends CocoView
@docs = $.extend(true, [], @docs)
@docs = [@docs[0]] if @firstOnly and @docs[0]
doc.html = marked(utils.filterMarkdownCodeLanguages(utils.i18n(doc, 'body'))) for doc in @docs
doc.name = (utils.i18n doc, 'name') for doc in @docs
doc.slug = _.string.slugify(doc.name) for doc in @docs
doc.name = (utils.i18n doc, 'name') for doc in @docs
super options
destroy: ->
@ -62,13 +62,18 @@ module.exports = class LevelGuideView extends CocoView
afterRender: ->
super()
if @docs.length is 1 and @helpVideos.length > 0
@setupVideoPlayer() unless @videoLocked
else
@setupVideoPlayer() unless @videoLocked
if @docs.length + @helpVideos.length > 1
if @helpVideos.length
startingTab = 0
else
startingTab = _.findIndex @docs, slug: 'intro'
startingTab = 0 if startingTab is -1
# incredible hackiness. Getting bootstrap tabs to work shouldn't be this complex
@$el.find('.nav-tabs li:first').addClass('active')
@$el.find('.tab-content .tab-pane:first').addClass('active')
@$el.find(".nav-tabs li:nth(#{startingTab})").addClass('active')
@$el.find(".tab-content .tab-pane:nth(#{startingTab})").addClass('active')
@$el.find('.nav-tabs a').click(@clickTab)
@$el.addClass 'has-tabs'
@configureACEEditors()
@playSound 'guide-open'