mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-03-28 22:00:25 -04:00
Added responsive view for LevelEditor
This commit is contained in:
tmrdja
parent
05dfa21a93
commit
826a5f56db
13 changed files with 312 additions and 9 deletions
app
styles/editor/level
templates/editor/level
views/editor/level
|
|
@ -1,6 +1,14 @@
|
|||
#editor-level-components-tab-view
|
||||
h3
|
||||
margin-top: 0
|
||||
@media screen and (max-width: 800px)
|
||||
display: none
|
||||
|
||||
.toggle
|
||||
padding: 6px 8px
|
||||
z-index: 11
|
||||
margin-top: 1px
|
||||
margin-left: 2px
|
||||
|
||||
.components-container
|
||||
position: absolute
|
||||
|
|
@ -16,6 +24,9 @@
|
|||
|
||||
.treema-children .treema-row *
|
||||
cursor: pointer !important
|
||||
|
||||
#components-treema
|
||||
z-index: 11
|
||||
|
||||
.edit-component-container
|
||||
margin-left: 290px
|
||||
|
|
@ -24,7 +35,15 @@
|
|||
left: 0px
|
||||
top: 0
|
||||
bottom: 0
|
||||
|
||||
@media screen and (max-width: 800px)
|
||||
margin-left: 0px
|
||||
|
||||
.nav-tabs
|
||||
margin-left: 80px
|
||||
|
||||
li
|
||||
z-index: 11
|
||||
|
||||
.treema-root
|
||||
position: absolute
|
||||
top: 35px
|
||||
|
|
@ -37,3 +56,18 @@
|
|||
position: absolute
|
||||
top: 0
|
||||
right: 0
|
||||
left: auto
|
||||
@media screen and (max-width: 800px)
|
||||
left: 40px
|
||||
top: 1px
|
||||
bottom: auto
|
||||
padding: 8px 10px
|
||||
.text
|
||||
display: block
|
||||
@media screen and (max-width: 800px)
|
||||
display: none
|
||||
[class^='icon-']
|
||||
display: none
|
||||
@media screen and (max-width: 800px)
|
||||
display: block
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
#editor-level-view
|
||||
&, #level-editor-top-nav
|
||||
min-width: 1024px
|
||||
// min-width: 1024px
|
||||
|
||||
a
|
||||
font-family: helvetica, arial, sans serif
|
||||
|
|
@ -13,7 +13,32 @@
|
|||
|
||||
$BG: rgba(228, 207, 140, 1.0)
|
||||
$NAVBG: #2f261d
|
||||
|
||||
.dropdown-menu
|
||||
position: absolute
|
||||
background-color: #FFF
|
||||
border: 1px solid rgba(0, 0, 0, 0.15)
|
||||
border-radius: 4px
|
||||
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176)
|
||||
left: 0px
|
||||
right: auto
|
||||
|
||||
li a
|
||||
color: #555
|
||||
padding: 3px 20px
|
||||
|
||||
#tabs-dropdown
|
||||
display: none
|
||||
//@media only screen and (max-width: 800px)
|
||||
// display: block
|
||||
|
||||
.navbar-nav
|
||||
float: left
|
||||
margin: 0
|
||||
|
||||
> li
|
||||
float: left
|
||||
|
||||
li.navbar-btn
|
||||
margin-right: 5px
|
||||
|
||||
|
|
@ -29,6 +54,11 @@
|
|||
.navbar-right
|
||||
// not sure why bootstrap puts a big negative margin in, but this overrides it
|
||||
margin-right: 10px
|
||||
float: right
|
||||
|
||||
.dropdown-menu
|
||||
right: 0px
|
||||
left: auto
|
||||
|
||||
// custom navbar styling
|
||||
.navbar-brand
|
||||
|
|
@ -40,15 +70,46 @@
|
|||
border-right: 2px solid lighten($NAVBG, 20%)
|
||||
background: lighten($NAVBG, 10%)
|
||||
margin-left: 20px
|
||||
float: left
|
||||
.nav-tabs
|
||||
margin-left: 5px
|
||||
border-bottom: 0 !important
|
||||
|
||||
li
|
||||
float: left
|
||||
display: block
|
||||
|
||||
@media only screen and (max-width: 800px)
|
||||
|
||||
li
|
||||
float: none
|
||||
display: none
|
||||
z-index: 12
|
||||
|
||||
a
|
||||
background-color: $BG
|
||||
border-color: darken($BG, 50%)
|
||||
border-width: 0px 1px
|
||||
border-radius: 0px
|
||||
|
||||
li:first-child > a
|
||||
border-radius: 5px 5px 0px 0px
|
||||
border-top-width: 1px
|
||||
|
||||
li:last-child > a
|
||||
border-radius: 0px 0px 5px 5px
|
||||
border-bottom-width: 1px
|
||||
|
||||
li.active
|
||||
display: block
|
||||
|
||||
.active > a, .active > a:hover, .active > a:focus
|
||||
background-color: $BG !important
|
||||
border-color: darken($BG, 50%)
|
||||
border-bottom: 0
|
||||
a
|
||||
padding: 7px 5px !important
|
||||
|
||||
.dropdown-menu a
|
||||
cursor: pointer
|
||||
&:hover
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
#editor-level-scripts-tab-view
|
||||
|
||||
.toggle
|
||||
z-index: 11
|
||||
margin-top: -10px
|
||||
margin-left: -10px
|
||||
float: left
|
||||
|
||||
.treema-script
|
||||
cursor: pointer
|
||||
|
||||
|
|
@ -9,9 +15,15 @@
|
|||
bottom: 0
|
||||
width: 250px
|
||||
overflow: scroll
|
||||
@media screen and (max-width: 800px)
|
||||
top: 40px
|
||||
z-index: 11
|
||||
|
||||
#script-treema
|
||||
margin-left: 290px
|
||||
max-height: 100%
|
||||
overflow: scroll
|
||||
box-sizing: border-box
|
||||
@media screen and (max-width: 800px)
|
||||
margin-left: 30px
|
||||
top: -50px
|
||||
|
|
|
|||
|
|
@ -1,2 +1,5 @@
|
|||
#editor-level-settings-tab-view
|
||||
color: black
|
||||
|
||||
.treema-value img
|
||||
width: 100%
|
||||
|
|
@ -1,6 +1,14 @@
|
|||
#editor-level-systems-tab-view
|
||||
h3
|
||||
margin-top: 0
|
||||
@media screen and (max-width: 800px)
|
||||
display: none
|
||||
|
||||
.toggle
|
||||
padding: 6px 8px
|
||||
z-index: 11
|
||||
margin-top: 0px
|
||||
margin-left: 2px
|
||||
|
||||
.systems-container
|
||||
position: absolute
|
||||
|
|
@ -13,6 +21,9 @@
|
|||
bottom: 0
|
||||
width: 250px
|
||||
overflow: scroll
|
||||
@media screen and (max-width: 800px)
|
||||
z-index: 10
|
||||
bottom: -35px
|
||||
|
||||
.treema-children .treema-row *
|
||||
cursor: pointer !important
|
||||
|
|
@ -21,6 +32,21 @@
|
|||
position: absolute
|
||||
bottom: 0
|
||||
left: 170px
|
||||
top: auto
|
||||
@media screen and (max-width: 800px)
|
||||
left: 40px
|
||||
top: 1px
|
||||
bottom: auto
|
||||
padding: 8px 10px
|
||||
|
||||
.text
|
||||
display: block
|
||||
@media screen and (max-width: 800px)
|
||||
display: none
|
||||
[class^='icon-']
|
||||
display: none
|
||||
@media screen and (max-width: 800px)
|
||||
display: block
|
||||
|
||||
.edit-system-container
|
||||
margin-left: 290px
|
||||
|
|
@ -29,6 +55,14 @@
|
|||
left: 0px
|
||||
top: 0
|
||||
bottom: 0
|
||||
@media screen and (max-width: 800px)
|
||||
margin-left: 0px
|
||||
|
||||
.nav-tabs
|
||||
margin-left: 120px
|
||||
|
||||
li
|
||||
z-index: 11
|
||||
|
||||
.treema-root
|
||||
position: absolute
|
||||
|
|
@ -42,3 +76,17 @@
|
|||
position: absolute
|
||||
top: 0
|
||||
right: 0
|
||||
left: auto
|
||||
@media screen and (max-width: 800px)
|
||||
left: 80px
|
||||
top: 1px
|
||||
bottom: auto
|
||||
padding: 8px 10px
|
||||
.text
|
||||
display: block
|
||||
@media screen and (max-width: 800px)
|
||||
display: none
|
||||
[class^='icon-']
|
||||
display: none
|
||||
@media screen and (max-width: 800px)
|
||||
display: block
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
@import "../../bootstrap/mixins"
|
||||
|
||||
|
||||
$mobile: 1050px
|
||||
|
||||
#editor-level-thangs-tab-view
|
||||
$addPaletteIconColumns: 3
|
||||
$extantThangsWidth: 300px
|
||||
|
|
@ -8,12 +10,69 @@
|
|||
$addPaletteIconMargin: 2px
|
||||
$addPaletteWidth: ($addPaletteIconWidth + 2 * $addPaletteIconPadding + 2 * $addPaletteIconMargin) * $addPaletteIconColumns + 20
|
||||
|
||||
#toggle
|
||||
display: none
|
||||
position: absolute
|
||||
z-index: 11
|
||||
left: -14px
|
||||
@media screen and (max-width: $mobile)
|
||||
display: block
|
||||
|
||||
.toggle
|
||||
left: 0
|
||||
|
||||
.toggle
|
||||
display: none
|
||||
float: none
|
||||
z-index: 11
|
||||
position: absolute
|
||||
right: -14px
|
||||
z-index: 11
|
||||
margin: 0
|
||||
padding: 8px
|
||||
@media screen and (max-width: $mobile)
|
||||
display: block
|
||||
|
||||
.thangs-column
|
||||
background-color: #E4CF8C
|
||||
|
||||
@media screen and (max-width: $mobile)
|
||||
display: block
|
||||
|
||||
h3
|
||||
@media screen and (max-width: $mobile)
|
||||
display: none
|
||||
|
||||
#all-thangs
|
||||
display: block
|
||||
@media screen and (max-width: $mobile)
|
||||
display: none
|
||||
|
||||
.thangs-container
|
||||
width: $extantThangsWidth
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
bottom: 0
|
||||
z-index: 11
|
||||
@media screen and (max-width: $mobile)
|
||||
width: auto
|
||||
left: 18px
|
||||
bottom: -18px
|
||||
|
||||
.btn-group
|
||||
margin: 0
|
||||
@media screen and (max-width: $mobile)
|
||||
margin: 5px
|
||||
//position: absolute
|
||||
//left: -40px
|
||||
//top: 40px
|
||||
|
||||
.btn
|
||||
@media screen and (max-width: $mobile)
|
||||
//float: none
|
||||
//display: block
|
||||
//padding: 10px
|
||||
|
||||
h3
|
||||
margin: 0 -20px 0 0
|
||||
|
|
@ -25,6 +84,10 @@
|
|||
right: 0
|
||||
bottom: 0
|
||||
overflow: scroll
|
||||
margin: 0
|
||||
@media screen and (max-width: $mobile)
|
||||
margin: 5px
|
||||
top: 40px
|
||||
|
||||
&.hide-except-Unit
|
||||
.treema-node
|
||||
|
|
@ -62,11 +125,15 @@
|
|||
.world-container
|
||||
margin-left: $extantThangsWidth
|
||||
margin-right: $addPaletteWidth
|
||||
@media screen and (max-width: $mobile)
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
padding: 0 20px
|
||||
box-sizing: border-box
|
||||
|
||||
h3
|
||||
margin: 0 -10px 0 0
|
||||
text-align: center
|
||||
|
||||
.add-thangs-palette
|
||||
width: $addPaletteWidth
|
||||
|
|
@ -75,6 +142,17 @@
|
|||
right: 0
|
||||
top: 0
|
||||
bottom: 0
|
||||
@media screen and (max-width: $mobile)
|
||||
display: none
|
||||
right: 18px
|
||||
z-index: 11
|
||||
width: $addPaletteWidth + 10
|
||||
|
||||
input
|
||||
width: $addPaletteWidth
|
||||
margin: 0
|
||||
@media screen and (max-width: $mobile)
|
||||
margin: 0 5px
|
||||
|
||||
#thangs-list
|
||||
position: relative
|
||||
|
|
@ -83,6 +161,9 @@
|
|||
bottom: 10px
|
||||
overflow: scroll
|
||||
height: 100%
|
||||
margin: 0
|
||||
@media screen and (max-width: $mobile)
|
||||
margin: 0 5px
|
||||
|
||||
h3
|
||||
margin: 0 -20px 0 0
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
.components-container
|
||||
h3(data-i18n="editor.level_component_tab_title") Current Components
|
||||
button.navbar-toggle.toggle.btn-primary#thangs-container-toggle(type="button" data-toggle="collapse" data-target="#components-treema")
|
||||
span.icon-list
|
||||
#components-treema
|
||||
|
||||
.edit-component-container
|
||||
if me.isAdmin()
|
||||
button(data-i18n="editor.level_component_btn_new").btn.btn-primary#create-new-component-button-no-select Create New Component
|
||||
button.btn.btn-primary#create-new-component-button-no-select
|
||||
span.icon-plus
|
||||
span.text(data-i18n="editor.level_component_btn_new") Create New Component
|
||||
|
||||
#editor-level-component-edit-view
|
||||
|
|
|
|||
|
|
@ -15,8 +15,28 @@ block header
|
|||
li
|
||||
a(href="/editor/level")
|
||||
span.glyphicon-home.glyphicon
|
||||
li.dropdown#tabs-dropdown
|
||||
a(data-toggle='dropdown')
|
||||
span.glyphicon-chevron-down.glyphicon
|
||||
ul.dropdown-menu
|
||||
li.active
|
||||
a(href="#editor-level-thangs-tab-view", data-toggle="tab", data-i18n="editor.level_tab_thangs") Thangs
|
||||
li
|
||||
a(href="#editor-level-scripts-tab-view", data-toggle="tab", data-i18n="editor.level_tab_scripts") Scripts
|
||||
li
|
||||
a(href="#editor-level-settings-tab-view", data-toggle="tab", data-i18n="editor.level_tab_settings") Settings
|
||||
li
|
||||
a(href="#editor-level-components-tab-view", data-toggle="tab", data-i18n="editor.level_tab_components") Components
|
||||
li
|
||||
a(href="#editor-level-systems-tab-view", data-toggle="tab", data-i18n="editor.level_tab_systems") Systems
|
||||
li
|
||||
a(href="#editor-level-patches", data-toggle="tab")#patches-tab
|
||||
span(data-i18n="resources.patches").spr Patches
|
||||
- var patches = level.get('patches')
|
||||
if patches && patches.length
|
||||
span.badge= patches.length
|
||||
|
||||
ul.nav.navbar-nav.nav-tabs
|
||||
|
||||
li.active
|
||||
a(href="#editor-level-thangs-tab-view", data-toggle="tab", data-i18n="editor.level_tab_thangs") Thangs
|
||||
li
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
button.navbar-toggle.toggle.btn-primary#thangs-container-toggle(type="button" data-toggle="collapse" data-target="#scripts-treema")
|
||||
span.icon-list
|
||||
|
||||
#scripts-treema
|
||||
|
||||
#script-treema
|
||||
|
|
|
|||
|
|
@ -1,11 +1,17 @@
|
|||
.systems-container
|
||||
button.navbar-toggle.toggle.btn-primary#thangs-container-toggle(type="button" data-toggle="collapse" data-target="#systems-treema")
|
||||
span.icon-list
|
||||
h3(data-i18n="editor.level_systems_tab_title") Current Systems
|
||||
#systems-treema
|
||||
|
||||
.edit-system-container
|
||||
if me.isAdmin()
|
||||
button(data-i18n="editor.level_systems_btn_new").btn.btn-primary#create-new-system-button Create New System
|
||||
button.btn.btn-primary#create-new-system-button
|
||||
span.icon-file
|
||||
span.text(data-i18n="editor.level_systems_btn_new") Create New System
|
||||
|
||||
#editor-level-system-edit-view
|
||||
|
||||
button(data-i18n="editor.level_systems_btn_add").btn.btn-primary#add-system-button Add System
|
||||
button.btn.btn-primary#add-system-button
|
||||
span.icon-plus
|
||||
span.text(data-i18n="editor.level_systems_btn_add") Add System
|
||||
|
|
@ -1,4 +1,9 @@
|
|||
.thangs-container.thangs-column
|
||||
div#toggle
|
||||
button.navbar-toggle.toggle.btn-primary#thangs-container-toggle(type="button" data-toggle="collapse" data-target="#all-thangs")
|
||||
span.icon-list
|
||||
button.navbar-toggle.toggle.btn-primary#thangs-palette-toggle(type="button" data-toggle="collapse" data-target="#add-thangs-column")
|
||||
span.icon-plus
|
||||
.thangs-container.thangs-column#all-thangs
|
||||
h3(data-i18n="editor.level_tab_thangs_title") Current Thangs
|
||||
.btn-group(data-toggle="buttons-radio")#extant-thangs-filter
|
||||
button.btn.btn-primary(data-i18n="editor.level_tab_thangs_all") All
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ module.exports = class EditorLevelView extends View
|
|||
'click #patches-tab': -> @patchesView.load()
|
||||
'click #level-patch-button': 'startPatchingLevel'
|
||||
'click #level-watch-button': 'toggleWatchLevel'
|
||||
'mouseup .nav-tabs > li a': 'toggleTab'
|
||||
|
||||
subscriptions:
|
||||
'refresh-level-editor': 'rerenderAllViews'
|
||||
|
|
@ -139,3 +140,13 @@ module.exports = class EditorLevelView extends View
|
|||
button = @$el.find('#level-watch-button')
|
||||
@level.watch(button.find('.watch').is(':visible'))
|
||||
button.find('> span').toggleClass('secret')
|
||||
|
||||
toggleTab: (e) ->
|
||||
return unless $(document).width() <= 800
|
||||
li = $(e.target).closest('li')
|
||||
if li.hasClass('active')
|
||||
li.parent().find('li').show()
|
||||
else
|
||||
li.parent().find('li').hide()
|
||||
li.show()
|
||||
console.log li.hasClass('active')
|
||||
|
|
|
|||
|
|
@ -50,6 +50,9 @@ module.exports = class ThangsTabView extends View
|
|||
'click #extant-thangs-filter button': 'onFilterExtantThangs'
|
||||
'click #delete': 'onDeleteClicked'
|
||||
'click #duplicate': 'onDuplicateClicked'
|
||||
'click #thangs-container-toggle': 'toggleThangsContainer'
|
||||
'click #thangs-palette-toggle': 'toggleThangsPalette'
|
||||
'click .add-thang-palette-icon': 'toggleThangsPalette'
|
||||
|
||||
shortcuts:
|
||||
'esc': 'selectAddThang'
|
||||
|
|
@ -112,7 +115,11 @@ module.exports = class ThangsTabView extends View
|
|||
$('#thangs-list').height('100%')
|
||||
thangsHeaderHeight = $('#thangs-header').height()
|
||||
oldHeight = $('#thangs-list').height()
|
||||
$('#thangs-list').height(oldHeight - thangsHeaderHeight - 80)
|
||||
if $(document).width() < 1050
|
||||
$('#thangs-list').height(oldHeight - thangsHeaderHeight - 30)
|
||||
else
|
||||
$('#thangs-list').height(oldHeight - thangsHeaderHeight - 80)
|
||||
|
||||
|
||||
afterRender: ->
|
||||
return if @startsLoading
|
||||
|
|
@ -450,6 +457,14 @@ module.exports = class ThangsTabView extends View
|
|||
thang = @selectedExtantThang.spriteName
|
||||
e.target = $(".add-thang-palette-icon[data-thang-type='" + thang + "']").get 0
|
||||
@selectAddThang e
|
||||
|
||||
toggleThangsContainer: (e) ->
|
||||
$('#all-thangs').toggle()
|
||||
|
||||
toggleThangsPalette: (e) ->
|
||||
$('#add-thangs-column').toggle()
|
||||
@onWindowResize e
|
||||
|
||||
|
||||
class ThangsNode extends TreemaNode.nodeMap.array
|
||||
valueClass: 'treema-array-replacement'
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue