mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-27 17:45:40 -05:00
Improved the navbars in the level editor.
This commit is contained in:
Scott Erickson
parent
653cc8b004
commit
65f74e9587
9 changed files with 235 additions and 168 deletions
|
|
@ -4,40 +4,6 @@
|
|||
h1 h2 h3 h4
|
||||
letter-spacing: 2px
|
||||
|
||||
#top-nav
|
||||
a.navbar-brand
|
||||
padding: 4px 20px 0px 20px
|
||||
margin-left: -20px
|
||||
|
||||
.navbuttontext, .fancy-select .trigger
|
||||
font-family: 'Bangers', cursive
|
||||
font-size: 20px
|
||||
font-weight: 400
|
||||
letter-spacing: 1px
|
||||
|
||||
.navbuttontext-user-name
|
||||
max-width: 125px
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
display: inline-block
|
||||
padding: 0 5px 0 0
|
||||
margin: 0
|
||||
height: 18px
|
||||
|
||||
.nav.navbar-link-text, .nav.navbar-link-text > li > a
|
||||
font-family: 'Bangers', cursive
|
||||
font-weight: normal
|
||||
font-size: 25px
|
||||
letter-spacing: 2px
|
||||
color: $white
|
||||
&:hover
|
||||
color: #f8e413
|
||||
|
||||
.navbar-link-text a:hover
|
||||
background: darken($body-bg, 3%)
|
||||
|
||||
|
||||
.main-content-area
|
||||
position: relative
|
||||
width: 1024px
|
||||
|
|
@ -46,49 +12,12 @@ h1 h2 h3 h4
|
|||
padding: 14px 12px 5px 12px
|
||||
@include box-sizing(border-box)
|
||||
|
||||
.navbar .btn, .navbar .btn-group, .navbar .fancy-select
|
||||
margin-top: 13px
|
||||
|
||||
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus
|
||||
background-color: #eee
|
||||
|
||||
.nav-tabs > li
|
||||
cursor: pointer
|
||||
|
||||
#top-nav .nav
|
||||
margin-bottom: 0
|
||||
|
||||
#outer-content-wrapper
|
||||
background: #8cc63f url(/images/pages/base/repeat-tile.png) top center
|
||||
|
||||
#inner-content-wrapper
|
||||
background: url(/images/pages/base/background_texture.png) top center no-repeat
|
||||
|
||||
.navbar
|
||||
font-size: 25px
|
||||
a:not(.btn)
|
||||
line-height: 25px
|
||||
|
||||
.btn
|
||||
font-size: 20px
|
||||
padding: 4px 12px
|
||||
|
||||
.btn, .fancy-select
|
||||
float: right
|
||||
margin-left: 10px
|
||||
line-height: 20px
|
||||
|
||||
select
|
||||
opacity: 0
|
||||
|
||||
.fancy-select
|
||||
.trigger
|
||||
padding: 5px 25px 3px 10px
|
||||
width: auto
|
||||
&:after
|
||||
top: 13px
|
||||
max-width: 140px
|
||||
|
||||
#front-summary-points-left
|
||||
width: 250px
|
||||
margin: 0px 20px 10px 15px
|
||||
|
|
@ -235,35 +164,6 @@ table.table
|
|||
.ui-autocomplete
|
||||
//z-index: $zindexAutocomplete
|
||||
|
||||
div.fancy-select
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
|
||||
div.trigger
|
||||
background-color: #9d8f5a
|
||||
background-image: linear-gradient(to bottom, #a4955e, #948754)
|
||||
background-repeat: repeat-x
|
||||
border: 1px solid #cccccc
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
|
||||
color: white
|
||||
&:after
|
||||
border-top-color: white
|
||||
&.open
|
||||
background-color: #8B7F51
|
||||
color: #ebebeb
|
||||
&:after
|
||||
border-top-color: #ebebeb
|
||||
ul.options
|
||||
max-height: 415px
|
||||
background-color: #9d8f5a
|
||||
right: 0
|
||||
left: auto
|
||||
overflow-x: hidden
|
||||
&.open
|
||||
top: 36px
|
||||
li
|
||||
color: #ebebeb
|
||||
padding: 8px 20px
|
||||
|
||||
.ui-slider
|
||||
border: 1px solid black
|
||||
.ui-slider-handle
|
||||
|
|
|
|||
99
app/styles/common/top_nav.sass
Normal file
99
app/styles/common/top_nav.sass
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
@import "../bootstrap/variables"
|
||||
|
||||
#top-nav
|
||||
a.navbar-brand
|
||||
padding: 4px 20px 0px 20px
|
||||
margin-left: -20px
|
||||
|
||||
.navbuttontext, .fancy-select .trigger
|
||||
font-family: 'Bangers', cursive
|
||||
font-size: 20px
|
||||
font-weight: 400
|
||||
letter-spacing: 1px
|
||||
|
||||
.navbuttontext-user-name
|
||||
max-width: 125px
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
display: inline-block
|
||||
padding: 0 5px 0 0
|
||||
margin: 0
|
||||
height: 18px
|
||||
|
||||
.nav.navbar-link-text, .nav.navbar-link-text > li > a
|
||||
font-family: 'Bangers', cursive
|
||||
font-weight: normal
|
||||
font-size: 25px
|
||||
letter-spacing: 2px
|
||||
color: $white
|
||||
&:hover
|
||||
color: #f8e413
|
||||
|
||||
.navbar-link-text a:hover
|
||||
background: darken($body-bg, 3%)
|
||||
|
||||
.btn, .btn-group, .fancy-select
|
||||
margin-top: 13px
|
||||
|
||||
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus
|
||||
background-color: #eee
|
||||
|
||||
.nav-tabs > li
|
||||
cursor: pointer
|
||||
|
||||
font-size: 25px
|
||||
a:not(.btn)
|
||||
line-height: 25px
|
||||
|
||||
.btn
|
||||
font-size: 20px
|
||||
padding: 4px 12px
|
||||
|
||||
.btn, .fancy-select
|
||||
float: right
|
||||
margin-left: 10px
|
||||
line-height: 20px
|
||||
|
||||
select
|
||||
opacity: 0
|
||||
|
||||
.fancy-select
|
||||
.trigger
|
||||
padding: 5px 25px 3px 10px
|
||||
width: auto
|
||||
&:after
|
||||
top: 13px
|
||||
max-width: 140px
|
||||
|
||||
.nav
|
||||
margin-bottom: 0
|
||||
|
||||
div.fancy-select
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
|
||||
div.trigger
|
||||
background-color: #9d8f5a
|
||||
background-image: linear-gradient(to bottom, #a4955e, #948754)
|
||||
background-repeat: repeat-x
|
||||
border: 1px solid #cccccc
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
|
||||
color: white
|
||||
&:after
|
||||
border-top-color: white
|
||||
&.open
|
||||
background-color: #8B7F51
|
||||
color: #ebebeb
|
||||
&:after
|
||||
border-top-color: #ebebeb
|
||||
ul.options
|
||||
max-height: 415px
|
||||
background-color: #9d8f5a
|
||||
right: 0
|
||||
left: auto
|
||||
overflow-x: hidden
|
||||
&.open
|
||||
top: 36px
|
||||
li
|
||||
color: #ebebeb
|
||||
padding: 8px 20px
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import "bootstrap/variables"
|
||||
#editor-level-view
|
||||
#editor-nav-view
|
||||
.editor-column
|
||||
width: 33%
|
||||
box-sizing: border-box
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
#editor-level-view
|
||||
a
|
||||
font-family: helvetica, arial, sans serif
|
||||
|
||||
#top-nav
|
||||
display: none
|
||||
|
||||
|
|
@ -10,6 +13,14 @@
|
|||
|
||||
$BG: rgba(228, 207, 140, 1.0)
|
||||
|
||||
li.navbar-btn
|
||||
margin-right: 5px
|
||||
|
||||
.nav-tabs
|
||||
border-bottom: 0 !important
|
||||
.active > a, .active > a:hover, .active > a:focus
|
||||
background-color: #eee !important
|
||||
|
||||
.outer-content
|
||||
background-color: $BG
|
||||
position: absolute
|
||||
|
|
@ -26,21 +37,6 @@
|
|||
right: 20px
|
||||
margin-top: -10px
|
||||
padding-top: 10px
|
||||
|
||||
.level-title-header
|
||||
float: left
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
|
||||
.level-control-buttons
|
||||
float: right
|
||||
margin: 5px
|
||||
& > *
|
||||
margin: 10px 10px
|
||||
|
||||
.nav-tabs
|
||||
margin: 15px 30px
|
||||
float: left
|
||||
|
||||
// keeps the editor tabs a certain height
|
||||
|
||||
|
|
@ -48,7 +44,7 @@
|
|||
position: absolute
|
||||
left: 20px
|
||||
right: 20px
|
||||
top: 80px
|
||||
top: 66px
|
||||
bottom: 20px
|
||||
|
||||
.treema-root
|
||||
|
|
|
|||
|
|
@ -1,17 +1,21 @@
|
|||
.navbar
|
||||
.navbar-inner
|
||||
p.navbar-text
|
||||
span(data-i18n="editor.level_component_edit_title")
|
||||
| Edit Component
|
||||
span :
|
||||
| "#{editTitle}"
|
||||
ul.nav.nav-pills
|
||||
li
|
||||
a(href="#code" data-toggle="tab") Code
|
||||
li
|
||||
a(href="#config-schema" data-toggle="tab") Config Schema
|
||||
li
|
||||
a(href="#settings" data-toggle="tab") Settings
|
||||
nav.navbar.navbar-default(role='navigation')
|
||||
.container-fluid
|
||||
.navbar-header
|
||||
span.navbar-brand
|
||||
span(data-i18n="editor.level_component_edit_title")
|
||||
| Edit Component
|
||||
span :
|
||||
| "#{editTitle}"
|
||||
.collapse.navbar-collapse
|
||||
ul.nav.navbar-nav.nav-tabs
|
||||
li.active
|
||||
a(href="#code" data-toggle="tab") Code
|
||||
li
|
||||
a(href="#config-schema" data-toggle="tab") Config Schema
|
||||
li
|
||||
a(href="#settings" data-toggle="tab") Settings
|
||||
ul.nav.navbar-nav.navbar-right
|
||||
li(data-i18n="editor.level_component_btn_new").btn.btn-primary.navbar-btn#create-new-component-button Create New Component
|
||||
|
||||
.tab-content
|
||||
.tab-pane.active#code
|
||||
|
|
|
|||
|
|
@ -2,21 +2,55 @@ extends /templates/base
|
|||
|
||||
block outer_content
|
||||
.outer-content
|
||||
|
||||
.top-controls-area
|
||||
h2.level-title-header
|
||||
span(data-i18n="editor.level_title") Level Editor
|
||||
span :
|
||||
span.level-title #{level.attributes.name}
|
||||
|
||||
.level-control-buttons
|
||||
button(data-toggle="coco-modal", data-target="modal/revert", data-i18n="revert.revert").btn.btn-primary#revert-button Revert
|
||||
button(data-i18n="common.save").btn.btn-primary#commit-level-start-button Save
|
||||
button(data-i18n="common.fork").btn.btn-primary#fork-level-start-button Fork
|
||||
.btn-group.play-button-group
|
||||
button(title="⌃↩ or ⌘↩: Play preview of current level", data-i18n="common.play")#play-button.btn.btn-inverse.banner Play!
|
||||
button.btn.btn-inverse.banner.dropdown-toggle(data-toggle="dropdown")
|
||||
i.icon-cog.icon-white
|
||||
|
||||
nav.navbar.navbar-default(role='navigation')#level-editor-top-nav
|
||||
.container-fluid
|
||||
ul.nav.navbar-nav
|
||||
li
|
||||
a(href="/editor/level") Back
|
||||
.navbar-header
|
||||
span.navbar-brand
|
||||
span(data-i18n="editor.level_title") Level Editor
|
||||
span :
|
||||
span.level-title #{level.attributes.name}
|
||||
.collapse.navbar-collapse
|
||||
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
|
||||
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
|
||||
|
||||
|
||||
ul.nav.navbar-nav.navbar-right
|
||||
li(data-toggle="coco-modal", data-target="modal/revert", data-i18n="revert.revert").btn.btn-primary.navbar-btn#revert-button Revert
|
||||
|
||||
li(data-i18n="common.save").btn.btn-primary.navbar-btn#commit-level-start-button Save
|
||||
li(data-i18n="common.fork").btn.btn-primary.navbar-btn#fork-level-start-button Fork
|
||||
li(title="⌃↩ or ⌘↩: Play preview of current level", data-i18n="common.play")#play-button.btn.btn-inverse.banner.navbar-btn Play!
|
||||
|
||||
li.divider
|
||||
|
||||
li.dropdown
|
||||
a.dropdown-toggle(href='#', data-toggle='dropdown')
|
||||
| Help
|
||||
b.caret
|
||||
ul.dropdown-menu
|
||||
li
|
||||
a(href='https://github.com/codecombat/codecombat/wiki/Artisan-Home') Wiki
|
||||
li
|
||||
a(href='http://www.hipchat.com/g3plnOKqa') Live Chat
|
||||
li
|
||||
a(href='http://discourse.codecombat.com/category/artisan') Forum
|
||||
li
|
||||
a(data-toggle="coco-modal", data-target="modal/contact", data-i18n="nav.contact") Email
|
||||
|
||||
|
||||
|
||||
ul.dropdown-menu
|
||||
|
|
@ -28,18 +62,46 @@ block outer_content
|
|||
a(data-delay="3000", href="#", data-i18n="common.delay_3_sec") 3 seconds
|
||||
a(data-delay="5000", href="#", data-i18n="common.delay_5_sec") 5 seconds
|
||||
a(data-delay="90019001", href="#", data-i18n="common.manual") Manual
|
||||
|
||||
ul.nav.nav-tabs
|
||||
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
|
||||
|
||||
|
||||
|
||||
//.top-controls-area
|
||||
// h2.level-title-header
|
||||
// span(data-i18n="editor.level_title") Level Editor
|
||||
// span :
|
||||
// span.level-title #{level.attributes.name}
|
||||
//
|
||||
// .level-control-buttons
|
||||
// button(data-toggle="coco-modal", data-target="modal/revert", data-i18n="revert.revert").btn.btn-primary#revert-button Revert
|
||||
// button(data-i18n="common.save").btn.btn-primary#commit-level-start-button Save
|
||||
// button(data-i18n="common.fork").btn.btn-primary#fork-level-start-button Fork
|
||||
// .btn-group.play-button-group
|
||||
// button(title="⌃↩ or ⌘↩: Play preview of current level", data-i18n="common.play")#play-button.btn.btn-inverse.banner Play!
|
||||
// button.btn.btn-inverse.banner.dropdown-toggle(data-toggle="dropdown")
|
||||
// i.icon-cog.icon-white
|
||||
//
|
||||
//
|
||||
// ul.dropdown-menu
|
||||
// li
|
||||
// span(data-i18n="editor.level_some_options").dropdown-menu-header Some Options?
|
||||
// li.divider
|
||||
// li
|
||||
// a(data-delay="1000", href="#", data-i18n="common.delay_1_sec") 1 second
|
||||
// a(data-delay="3000", href="#", data-i18n="common.delay_3_sec") 3 seconds
|
||||
// a(data-delay="5000", href="#", data-i18n="common.delay_5_sec") 5 seconds
|
||||
// a(data-delay="90019001", href="#", data-i18n="common.manual") Manual
|
||||
//
|
||||
// ul.nav.nav-tabs
|
||||
// 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
|
||||
|
||||
div.tab-content#level-editor-tabs
|
||||
div.tab-pane.active#editor-level-thangs-tab-view
|
||||
|
|
|
|||
|
|
@ -1,17 +1,22 @@
|
|||
.navbar
|
||||
.navbar-inner
|
||||
p.navbar-text
|
||||
span(data-i18n="editor.level_system_edit_title")
|
||||
| Edit System
|
||||
span :
|
||||
| "#{editTitle}"
|
||||
ul.nav.nav-pills
|
||||
li
|
||||
nav.navbar.navbar-default(role='navigation')
|
||||
.container-fluid
|
||||
.navbar-header
|
||||
span.navbar-brand
|
||||
span(data-i18n="editor.level_system_edit_title")
|
||||
| Edit System
|
||||
span :
|
||||
| "#{editTitle}"
|
||||
.collapse.navbar-collapse
|
||||
ul.nav.navbar-nav.nav-tabs
|
||||
li.active
|
||||
a(href="#code" data-toggle="tab") Code
|
||||
li
|
||||
a(href="#config-schema" data-toggle="tab") Config Schema
|
||||
li
|
||||
a(href="#settings" data-toggle="tab") Settings
|
||||
ul.nav.navbar-nav.navbar-right
|
||||
li(data-i18n="editor.level_system_btn_new").btn.btn-primary.navbar-btn#create-new-system-button Create New System
|
||||
|
||||
.tab-content
|
||||
.tab-pane.active#code
|
||||
#system-code-editor
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@ View = require 'views/kinds/RootView'
|
|||
template = require 'templates/editor'
|
||||
|
||||
module.exports = class EditorView extends View
|
||||
id: "editor-level-view"
|
||||
id: "editor-nav-view"
|
||||
template: template
|
||||
|
|
@ -16,6 +16,7 @@ module.exports = class CocoView extends Backbone.View
|
|||
events:
|
||||
'click a': 'toggleModal'
|
||||
'click button': 'toggleModal'
|
||||
'click li': 'toggleModal'
|
||||
|
||||
subscriptions: {}
|
||||
shortcuts: {}
|
||||
|
|
|
|||
Loading…
Reference in a new issue