mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-02-16 00:19:50 -05:00
A few fixes for the Bootstrap 3 migration. Fixed #280.
This commit is contained in:
Nick Winter
parent
f065406cf5
commit
e0108a3166
27 changed files with 88 additions and 73 deletions
|
|
@ -4,5 +4,5 @@
|
|||
p
|
||||
margin: 20px 0
|
||||
|
||||
.bar
|
||||
width: 100%
|
||||
.progress-bar
|
||||
width: 100%
|
||||
|
|
|
|||
|
|
@ -133,13 +133,13 @@ a[data-toggle="modal"]
|
|||
.share-buttons, .partner-badges
|
||||
margin-top: 10px
|
||||
text-align: center
|
||||
@include opacity(75)
|
||||
@include opacity(0.75)
|
||||
|
||||
&.fade-in
|
||||
@include opacity(0)
|
||||
|
||||
&:hover, &:active
|
||||
@include opacity(100)
|
||||
@include opacity(1)
|
||||
@include transition(opacity .10s linear)
|
||||
|
||||
.github-star-button
|
||||
|
|
@ -168,9 +168,9 @@ a[data-toggle="modal"]
|
|||
|
||||
.close
|
||||
font-size: 28px
|
||||
@include opacity(60)
|
||||
@include opacity(0.60)
|
||||
&:hover
|
||||
@include opacity(100)
|
||||
@include opacity(1)
|
||||
|
||||
.modal-footer
|
||||
background-color: transparent
|
||||
|
|
@ -226,7 +226,7 @@ a[data-toggle="modal"]
|
|||
.progress
|
||||
width: 50%
|
||||
margin: 10px auto
|
||||
.bar
|
||||
.progress-bar
|
||||
width: 100%
|
||||
|
||||
table.table
|
||||
|
|
@ -267,4 +267,4 @@ div.fancy-select
|
|||
.ui-slider
|
||||
border: 1px solid black
|
||||
.ui-slider-handle
|
||||
border: 1px solid black !important
|
||||
border: 1px solid black !important
|
||||
|
|
|
|||
|
|
@ -7,5 +7,5 @@
|
|||
margin: 0 20%
|
||||
width: 60%
|
||||
|
||||
.bar
|
||||
.progress-bar
|
||||
width: 100%
|
||||
|
|
|
|||
|
|
@ -7,5 +7,5 @@
|
|||
margin: 0 20%
|
||||
width: 60%
|
||||
|
||||
.bar
|
||||
.progress-bar
|
||||
width: 100%
|
||||
|
|
|
|||
|
|
@ -18,5 +18,5 @@
|
|||
margin: 0 20%
|
||||
width: 60%
|
||||
|
||||
.bar
|
||||
.progress-bar
|
||||
width: 100%
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
margin: 0 20%
|
||||
width: 60%
|
||||
|
||||
.bar
|
||||
.progress-bar
|
||||
width: 100%
|
||||
|
||||
.modal textarea
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
&.disabled, &[disabled]
|
||||
cursor: default
|
||||
background-image: none
|
||||
@include opacity(65)
|
||||
@include opacity(0.65)
|
||||
@include box-shadow(none)
|
||||
|
||||
|
||||
|
|
@ -105,11 +105,11 @@
|
|||
@include banner-button(nth($tuple, 2), #FFF)
|
||||
|
||||
.footer .footer-link-text a
|
||||
@include opacity(75)
|
||||
@include opacity(0.75)
|
||||
@include transition(opacity .10s linear)
|
||||
|
||||
&:hover, &:active
|
||||
@include opacity(100)
|
||||
@include opacity(1)
|
||||
|
||||
$GI: 0.5 // gradient intensity; can tweak this 0-1
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
i
|
||||
float: left
|
||||
@include opacity(75)
|
||||
@include opacity(0.75)
|
||||
margin-right: 5px
|
||||
margin-left: -5px
|
||||
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
background-position: left
|
||||
|
||||
.center
|
||||
width: 520px
|
||||
height: 116px
|
||||
width: 560px
|
||||
height: 120px
|
||||
padding: 4px 20px 0 20px
|
||||
margin: auto
|
||||
background-image: url(/images/level/hud_center.png)
|
||||
|
|
|
|||
|
|
@ -1,24 +1,20 @@
|
|||
@import "../../bootstrap/mixins"
|
||||
|
||||
#playback-view
|
||||
|
||||
width: 55%
|
||||
height: 30px
|
||||
@include box-sizing(border-box)
|
||||
position: relative
|
||||
background: #383434
|
||||
|
||||
button
|
||||
height: 26px
|
||||
background: transparent
|
||||
@include opacity(0.50)
|
||||
i
|
||||
position: relative
|
||||
// TODO: need actual bigger button images
|
||||
//@include scale(1.5)
|
||||
background: transparent
|
||||
@include opacity(50)
|
||||
|
||||
button:hover
|
||||
@include opacity(75)
|
||||
@include opacity(0.75)
|
||||
|
||||
#play-button, #volume-button, #music-button
|
||||
float: left
|
||||
|
|
@ -28,22 +24,26 @@
|
|||
position: relative
|
||||
|
||||
#music-button
|
||||
@include opacity(25)
|
||||
@include opacity(0.25)
|
||||
font-size: 20px
|
||||
&:hover
|
||||
@include opacity(50)
|
||||
@include opacity(0.50)
|
||||
&.music-on
|
||||
@include opacity(50)
|
||||
@include opacity(0.50)
|
||||
&:hover
|
||||
@include opacity(75)
|
||||
@include opacity(0.75)
|
||||
|
||||
#play-button, #volume-button
|
||||
i
|
||||
display: none
|
||||
position: absolute
|
||||
left: 2px
|
||||
top: 4px
|
||||
|
||||
top: 2px
|
||||
|
||||
#settings-button
|
||||
padding-left: 4px
|
||||
padding-right: 4px
|
||||
|
||||
#playback-settings
|
||||
float: right
|
||||
position: relative
|
||||
|
|
@ -65,9 +65,9 @@
|
|||
display: inline-block
|
||||
#volume-button.vol-off i.icon-volume-off
|
||||
display: inline-block
|
||||
@include opacity(50)
|
||||
@include opacity(0.50)
|
||||
&:hover
|
||||
@include opacity(75)
|
||||
@include opacity(0.75)
|
||||
#volume-button.vol-down i.icon-volume-down
|
||||
display: inline-block
|
||||
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
border-radius: 0
|
||||
border: 0
|
||||
|
||||
.bar
|
||||
.progress-bar
|
||||
@include transition(width .0s linear)
|
||||
position: relative
|
||||
pointer-events: none
|
||||
|
|
|
|||
|
|
@ -36,14 +36,16 @@
|
|||
|
||||
.cast-button-group
|
||||
z-index: 2
|
||||
@include opacity(77)
|
||||
@include opacity(0.77)
|
||||
width: 100%
|
||||
border-radius: 6px
|
||||
|
||||
.button-progress-overlay
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
bottom: 0
|
||||
border-radius: 6px
|
||||
// This transition time should roughly match the world progress update interval
|
||||
@include transition(width .2s linear)
|
||||
|
||||
|
|
@ -51,7 +53,7 @@
|
|||
background-color: rgba(255, 255, 255, 0.5)
|
||||
|
||||
&:hover, &.castable
|
||||
@include opacity(100)
|
||||
@include opacity(1)
|
||||
|
||||
&.castable
|
||||
-webkit-animation-name: castablePulse
|
||||
|
|
@ -67,19 +69,28 @@
|
|||
&:not(.castable):not(:hover)
|
||||
.cast-options-button
|
||||
// Mimic the disabled visuals
|
||||
@include opacity(65)
|
||||
@include opacity(0.65)
|
||||
background-image: none
|
||||
@include box-shadow(none)
|
||||
|
||||
.btn
|
||||
padding: 3px 10px
|
||||
height: 40px
|
||||
|
||||
.cast-button
|
||||
width: 100%
|
||||
height: 29px
|
||||
width: 80%
|
||||
width: -webkit-calc(100% - 40px)
|
||||
width: calc(100% - 40px)
|
||||
|
||||
.cast-options-button
|
||||
width: 20%
|
||||
width: -webkit-calc(40px)
|
||||
width: calc(40px)
|
||||
|
||||
.autocast-delays
|
||||
min-width: 0
|
||||
right: 0
|
||||
left: auto
|
||||
li
|
||||
a, .dropdown-menu-header
|
||||
padding: 3px 15px
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@
|
|||
word-wrap: break-word
|
||||
|
||||
.close
|
||||
@include opacity(80)
|
||||
@include opacity(0.80)
|
||||
text-shadow: none
|
||||
cursor: pointer
|
||||
color: white
|
||||
float: right
|
||||
|
||||
&:hover, &:focus
|
||||
@include opacity(100)
|
||||
@include opacity(1)
|
||||
|
||||
//&.alert-error
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
position: absolute
|
||||
top: 0
|
||||
height: 100%
|
||||
width: 100%
|
||||
|
||||
.save-status
|
||||
display: none
|
||||
|
|
|
|||
|
|
@ -57,13 +57,13 @@
|
|||
|
||||
.spell-list-entry-view:not(.spell-tab)
|
||||
cursor: pointer
|
||||
@include opacity(90)
|
||||
@include opacity(0.90)
|
||||
clear: both
|
||||
padding: 5px
|
||||
position: relative
|
||||
|
||||
&:hover
|
||||
@include opacity(100)
|
||||
@include opacity(1)
|
||||
background-color: hsla(240, 40, 80, 0.25)
|
||||
|
||||
&.shows-top-divider:not(:first-child)
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
bottom: 10px
|
||||
left: 10px
|
||||
right: 10px
|
||||
height: 90px
|
||||
height: 140px
|
||||
padding-top: 50px
|
||||
// Height and padding-top relate to .tab-content height
|
||||
padding-left: 35px
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
z-index: -1
|
||||
|
||||
&.disabled
|
||||
@include opacity(80)
|
||||
@include opacity(0.80)
|
||||
|
||||
h4
|
||||
color: #333
|
||||
|
|
|
|||
|
|
@ -25,14 +25,14 @@
|
|||
.progress
|
||||
position: absolute
|
||||
left: 0px
|
||||
top: 12.5px
|
||||
top: 17.5px
|
||||
bottom: 0px
|
||||
width: 100%
|
||||
height: 4px
|
||||
overflow: visible
|
||||
pointer-events: none
|
||||
|
||||
.bar
|
||||
.progress-bar
|
||||
@include transition(width .0s linear)
|
||||
position: relative
|
||||
pointer-events: none
|
||||
|
|
@ -44,10 +44,10 @@
|
|||
position: absolute
|
||||
pointer-events: none
|
||||
right: -5px
|
||||
top: -12.5px
|
||||
top: -17.5px
|
||||
background: linear-gradient(#2c3e5f, #2c3e5f 16%, #3a537f 16%, #3a537f 83%, #2c3e5f 84%, #2c3e5f)
|
||||
width: 14px
|
||||
height: 29px
|
||||
height: 40px
|
||||
border-radius: 3px
|
||||
box-sizing: border-box
|
||||
border: 1px solid black
|
||||
|
|
@ -59,13 +59,16 @@
|
|||
.steppers
|
||||
position: absolute
|
||||
z-index: 2
|
||||
width: 10%
|
||||
width: 60px
|
||||
right: 2%
|
||||
box-sizing: border-box
|
||||
opacity: 0.25
|
||||
|
||||
button
|
||||
height: 29px
|
||||
box-sizing: border-box
|
||||
height: 40px
|
||||
width: 30px
|
||||
padding: 2px
|
||||
|
||||
.metrics
|
||||
display: none
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "../../../bootstrap/mixins"
|
||||
|
||||
.thang-list-entry-view
|
||||
@include opacity(90)
|
||||
@include opacity(0.90)
|
||||
cursor: pointer
|
||||
float: left
|
||||
box-sizing: border-box
|
||||
|
|
@ -9,12 +9,12 @@
|
|||
max-width: 100px
|
||||
|
||||
&.dead
|
||||
@include opacity(50)
|
||||
@include opacity(0.50)
|
||||
|
||||
&.disabled
|
||||
@include opacity(25)
|
||||
@include opacity(0.25)
|
||||
cursor: default
|
||||
|
||||
&:hover:not(.disabled)
|
||||
@include opacity(100)
|
||||
@include opacity(1)
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ block content
|
|||
button.btn.btn-warning#unsubscribe-button(data-i18n="account.unsubscribe_button") Do it
|
||||
|
||||
.progress.progress-striped.active.hide
|
||||
.bar
|
||||
.progress-bar
|
||||
|
||||
p.hide#fail-alert(data-i18n="account.unsubscribe_failed").alert.alert-danger Failed
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
block modal-body-wait-content
|
||||
h3 Reticulating Splines...
|
||||
.progress.progress-striped.active
|
||||
.bar
|
||||
.progress-bar
|
||||
|
||||
block modal-footer
|
||||
.modal-footer
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ button.btn.btn-xs.btn-inverse#music-button(title="Toggle Music")
|
|||
|
||||
.scrubber
|
||||
.progress.hide
|
||||
.bar
|
||||
.progress-bar
|
||||
.scrubber-handle
|
||||
|
||||
.btn-group.dropup#playback-settings
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
div.btn-group.cast-button-group
|
||||
div.btn-group.btn-group-lg.cast-button-group.dropup
|
||||
.button-progress-overlay
|
||||
button.btn.btn-inverse.btn-large.banner.cast-button(title=castShortcutVerbose + ": Cast current spell", data-i18n="play_level.tome_cast_button_cast") Spell Cast
|
||||
button.btn.btn-inverse.btn-large.banner.cast-options-button.dropdown-toggle(data-toggle="dropdown")
|
||||
i.icon-cog.icon-white
|
||||
button.btn.btn-inverse.banner.cast-button(title=castShortcutVerbose + ": Cast current spell", data-i18n="play_level.tome_cast_button_cast") Spell Cast
|
||||
button.btn.btn-inverse.banner.cast-options-button.dropdown-toggle(data-toggle="dropdown")
|
||||
i.icon-cog.icon-white.big
|
||||
|
||||
ul.dropdown-menu.autocast-delays
|
||||
li
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.spell-progress
|
||||
.progress
|
||||
.bar
|
||||
.progress-bar
|
||||
.scrubber-handle
|
||||
|
||||
.btn-group.steppers
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ module.exports = class PlaybackView extends View
|
|||
'click #debug-toggle': 'onToggleDebug'
|
||||
'click #grid-toggle': 'onToggleGrid'
|
||||
'click #edit-wizard-settings': 'onEditWizardSettings'
|
||||
'click #music-button': ->
|
||||
'click #music-button': ->
|
||||
me.set('music', not me.get('music'))
|
||||
me.save()
|
||||
'click #zoom-in-button': -> Backbone.Mediator.publish('camera-zoom-in') unless @disabled
|
||||
|
|
@ -33,12 +33,12 @@ module.exports = class PlaybackView extends View
|
|||
'click #volume-button': 'onToggleVolume'
|
||||
'click #play-button': 'onTogglePlay'
|
||||
'click': -> Backbone.Mediator.publish 'focus-editor'
|
||||
|
||||
|
||||
shortcuts:
|
||||
'⌘+p, p, ctrl+p': 'onTogglePlay'
|
||||
'[': 'onScrubBack'
|
||||
']': 'onScrubForward'
|
||||
|
||||
|
||||
constructor: ->
|
||||
super(arguments...)
|
||||
me.on('change:music', @updateMusicButton, @)
|
||||
|
|
@ -118,7 +118,7 @@ module.exports = class PlaybackView extends View
|
|||
button.addClass(classes[0]) if e.volume <= 0.0
|
||||
button.addClass(classes[1]) if e.volume > 0.0 and e.volume < 1.0
|
||||
button.addClass(classes[2]) if e.volume >= 1.0
|
||||
|
||||
|
||||
onScrubForward: (e) ->
|
||||
e?.preventDefault()
|
||||
Backbone.Mediator.publish('level-set-time', ratioOffset: 0.05, scrubDuration: 500)
|
||||
|
|
@ -134,7 +134,7 @@ module.exports = class PlaybackView extends View
|
|||
@lastProgress = e.progress
|
||||
|
||||
updateProgress: (progress) ->
|
||||
$('.scrubber .bar', @$el).css('width', "#{progress*100}%")
|
||||
$('.scrubber .progress-bar', @$el).css('width', "#{progress*100}%")
|
||||
|
||||
updatePlayButton: (progress) ->
|
||||
if progress >= 1.0 and @lastProgress < 1.0
|
||||
|
|
@ -206,7 +206,7 @@ module.exports = class PlaybackView extends View
|
|||
|
||||
getScrubRatio: ->
|
||||
bar = $('.scrubber .progress', @$el)
|
||||
$('.bar', bar).width() / bar.width()
|
||||
$('.progress-bar', bar).width() / bar.width()
|
||||
|
||||
scrubTo: (ratio, duration=0) ->
|
||||
return if @disabled
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ module.exports = class CastButtonView extends View
|
|||
|
||||
onWorldLoadProgressChanged: (e) ->
|
||||
overlay = @castButtonGroup.find '.button-progress-overlay'
|
||||
overlay.css 'width', e.progress * @castButtonGroup.width()
|
||||
overlay.css 'width', e.progress * @castButtonGroup.width() - 6
|
||||
|
||||
onNewWorld: (e) ->
|
||||
@casting = false
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ module.exports = class SpellPaletteEntryView extends View
|
|||
onMouseOver: (e) ->
|
||||
# Make sure the doc has the updated Thang so it can regenerate its prop value
|
||||
@doc.thang = @thang
|
||||
@$el.data('popover').options.content = @doc.html()
|
||||
@$el.data('bs.popover').options.content = @doc.html()
|
||||
@$el.popover('setContent')
|
||||
|
||||
onClick: (e) ->
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ module.exports = class SpellToolbarView extends View
|
|||
@statementIndex = Math.min(total - 1, Math.max(0, statementIndex))
|
||||
@statementRatio = @statementIndex / (total - 1)
|
||||
@statementTime = @callState.statements[@statementIndex]?.userInfo.time ? 0
|
||||
@$el.find('.bar').css('width', 100 * @statementRatio + '%')
|
||||
@$el.find('.progress-bar').css('width', 100 * @statementRatio + '%')
|
||||
@$el.find('.step-backward').prop('disabled', @statementIndex is 0)
|
||||
@$el.find('.step-forward').prop('disabled', @statementIndex is total - 1)
|
||||
@updateMetrics()
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ module.exports = class ThangListEntryView extends View
|
|||
|
||||
showSpells: =>
|
||||
@sortSpells()
|
||||
@$el.data('popover').options.content = @getSpellListHTML()
|
||||
@$el.data('bs.popover').options.content = @getSpellListHTML()
|
||||
@$el.popover('setContent').popover('show')
|
||||
@$el.parent().parent().parent().i18n()
|
||||
clearTimeout @hideSpellsTimeout if @hideSpellsTimeout
|
||||
|
|
|
|||
Loading…
Reference in a new issue