diff --git a/app/gist/template.hbs b/app/gist/template.hbs index 8bd76b49..02747ba0 100644 --- a/app/gist/template.hbs +++ b/app/gist/template.hbs @@ -1,40 +1,53 @@ -
- +
+ {{title-input value=model.description titleChanged=(action "titleChanged")}} + {{saved-state-indicator model=model unsaved=unsaved}} +
-
- {{title-input value=model.description titleChanged=(action "titleChanged")}} - {{saved-state-indicator model=model - unsaved=unsaved + {{user-menu session=session + signInViaGithub="signInViaGithub" + signOut="signOut" + showTwiddles="showTwiddles" }} -
- {{user-menu session=session - signInViaGithub="signInViaGithub" - signOut="signOut" - showTwiddles="showTwiddles" - }} -
+
+ + {{#twiddle-panes numColumns=realNumColumns fullScreen=fullScreen fileTreeShown=fileTreeShown}} {{#unless fullScreen}} diff --git a/app/styles/_code.scss b/app/styles/_code.scss new file mode 100644 index 00000000..da8c5a4c --- /dev/null +++ b/app/styles/_code.scss @@ -0,0 +1,25 @@ +.code { + .CodeMirror, .header ul { + opacity: .3; + transition: opacity .3s; + } + + &.active .CodeMirror, &.active .header ul { + opacity: 1; + } + + .CodeMirror { + font-family: Monaco, monospace; + font-size: $font-size; + line-height: 1.6; + height: 100%; + width: 100%; + position: absolute; + + @media (min-width: $screen-md-min) { + height: auto; + top: 60px; + bottom: 0; + } + } +} diff --git a/app/styles/_dropdown.scss b/app/styles/_dropdown.scss new file mode 100644 index 00000000..7a44a89b --- /dev/null +++ b/app/styles/_dropdown.scss @@ -0,0 +1,58 @@ +.dropdown { + li { + cursor: pointer; + } +} + +.dropdown-submenu { + position: relative; +} + +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: -6px; + margin-left: -1px; + -webkit-border-radius: 0 6px 6px 6px; + -moz-border-radius: 0 6px 6px; + border-radius: 0 6px 6px 6px; +} + +.dropdown-submenu:hover > .dropdown-menu { + display: block; +} + +.dropdown-submenu:hover > a { + background: $dropdown-link-hover-bg; + color: $dropdown-link-hover-color; +} + +.dropdown-submenu > a:after { + display: block; + content: " "; + float: right; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 5px 0 5px 5px; + border-left-color: $grey-5; + margin-top: 5px; + margin-right: -10px; +} + +.dropdown-submenu:hover>a:after { + border-left-color: white; +} + +.dropdown-submenu.pull-left { + float: none; +} + +.dropdown-submenu.pull-left > .dropdown-menu { + left: -100%; + margin-left: 10px; + -webkit-border-radius: 6px 0 6px 6px; + -moz-border-radius: 6px 0 6px 6px; + border-radius: 6px 0 6px 6px; +} diff --git a/app/styles/_main.scss b/app/styles/_main.scss new file mode 100644 index 00000000..18dc1a94 --- /dev/null +++ b/app/styles/_main.scss @@ -0,0 +1,25 @@ +button { + @extend .btn; + @extend .btn-default; +} + +body { + font-family: 'Maven Pro', sans-serif; +} + +#demo-app { + position: absolute; + z-index: -1; +} + +.light-gray { + color: $grey-5; +} + +.yellow { + color: $yellow; +} + +.flip-horizontal { + transform: scale(-1, 1); +} diff --git a/app/styles/_output-pane.scss b/app/styles/_output-pane.scss new file mode 100644 index 00000000..3cbe44c4 --- /dev/null +++ b/app/styles/_output-pane.scss @@ -0,0 +1,37 @@ +.url-bar { + background: $grey-2; + border-bottom: 1px solid $grey-4; + padding: 6px; +} +.url-bar > input { + display: block; + height: 25px; + width: 100%; + padding: 3px; + background: white; + border: 1px solid $grey-4; +} + +.run-now { + margin-left: 10px; + padding: 1px 6px 3px; +} + +.run-or-live-reload { + position: absolute; + right: 0; + top: 8px; + margin: 10px 25px; + text-align: right; +} + +.handle { + width: 3px; + background-color: transparent; + position: relative; + left: -2px; + + @media (min-width: $screen-md-min) { + height: 100%; + } +} diff --git a/app/styles/_saved-twiddles.scss b/app/styles/_saved-twiddles.scss new file mode 100644 index 00000000..930d7788 --- /dev/null +++ b/app/styles/_saved-twiddles.scss @@ -0,0 +1,17 @@ +div.table-responsive { + margin: 20px auto; +} + +.saved-twiddles { + width: 80%; + margin: 0 auto; + + thead th { + padding: 8px; + border: 1px solid $grey-4; + } + + tbody tr:hover { + background-color: $pale-orange; + } +} diff --git a/app/styles/_toolbar.scss b/app/styles/_toolbar.scss new file mode 100644 index 00000000..d0bb5cb4 --- /dev/null +++ b/app/styles/_toolbar.scss @@ -0,0 +1,223 @@ +.toolbar { + + @media (min-width: $screen-md-min) { + height: $topbar-height; + } + + @media (max-width: $screen-md-min) { + position: relative; + z-index: 100; + opacity: 1; + + >div, >ul { + height: $topbar-height; + margin-top: 0; + margin-bottom: 0; + } + } + + font-size: $font-size; + background: $ember-orange top center; + background-image: url("../images/navigation_background.png"); + border-bottom: 1px solid $burnt-orange; + -moz-box-shadow: rgba(0,0,0,0.3) 0 0 3px; + -webkit-box-shadow: rgba(0,0,0,0.3) 0 0 3px; + box-shadow: rgba(0,0,0,0.3) 0 0 3px; + + button.navbar-toggle { + &:hover, &:active, &:focus { + background: $pale-orange; + outline: none; + opacity: 0.5; + } + } + + ul { + list-style-type: none; + margin-left: 0; + padding-left: 0; + } + + .user-menu { + text-align: right; + + @media (min-width: $screen-md-min) { + position: absolute; + right: ($topbar-height - $topbar-control-height) / 2; + top: ($topbar-height - $topbar-control-height) / 2; + } + + @media (max-width: $screen-md-min) { + float: right; + } + + .user-avatar { + display: inline-block; + width: $topbar-control-height; + height: 100%; + overflow: hidden; + float: left; + margin-right: 10px; + line-height: normal; + border-radius: 3px; + + img { + width: $topbar-control-height; + height: $topbar-control-height; + } + + &.unauthenticated { + background: url("../images/github32-inverse-faf2ee.svg"); + } + } + } + + .main-menu { + + @media (min-width: $screen-md-min) { + position: absolute; + left: ($topbar-height - $topbar-control-height) / 2; + top: ($topbar-height - $topbar-control-height) / 2; + } + + text-align: left; + height: 60px; + } + + .title { + padding: 13px 0; + text-align: center; + width: 100%; + + @media (min-width: $screen-md-min) { + position: absolute; + top: 0; + left: 50%; + margin-left: -400px; + width: 800px; + } + + h1 { + margin: 10px; + } + + .saved-twiddles-header { + color: $bleached-orange; + font-size: $font-size-larger; + } + + .indicator { + text-transform: uppercase; + font-weight: bold; + color: #faf2ee; + text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 0px; + + a { + color: #ffffff; + text-decoration: none; + &:hover { + border-bottom: dotted 1px; + } + } + } + + .input-edit { + display: inline-block; + padding: 5px 10px; + transition: background .3s; + font-size: $font-size-larger; + text-shadow: $text-shadow; + border-radius: 3px; + border: 0; + color: $bleached-orange; + cursor: pointer; + + input { + background-color: transparent; + border: 0; + outline: 0; + box-sizing: content-box; + } + + .glyphicon { + color: $bleached-orange; + } + + &.active .glyphicon { + display: none; + } + + &:hover { + text-shadow: none; + background-color: $menu-hover-bg; + } + + &.active { + text-shadow: none; + background-color: $menu-bg; + box-shadow: rgba(255,255,255,0.15) 0 1px 0px,inset rgba(0,0,0,0.17) 0 1px 1px; + outline: 0; + } + } + + .gist-link, span { + display: inline-block; + } + + } + + .dropdown { + &.open .dropdown-toggle { + text-shadow: none; + background-color: $menu-bg; + box-shadow: rgba(255,255,255,0.15) 0 1px 0px,inset rgba(0,0,0,0.17) 0 1px 1px; + border: 1px solid transparent; + } + } + + .user-dropdown > .dropdown-toggle { + padding: 0 1em 0 0; + } + + .dropdown-toggle, .sign-in { + height: $topbar-control-height; + line-height: $topbar-control-height - 2; + text-transform: uppercase; + font-weight: bold; + color: $bleached-orange; + text-shadow: $text-shadow; + border: 1px solid transparent; + + &:hover, &:focus { + text-shadow: none; + background-color: $menu-hover-bg; + } + } + + .dropdown-toggle { + padding: 0 1em; + } + + .sign-in { + cursor: pointer; + padding: 0 .5em 0 0; + } + + .signing-in { + padding: 0 1em; + height: $topbar-control-height; + line-height: $topbar-control-height - 2; + text-transform: uppercase; + font-weight: bold; + color: $bleached-orange; + text-shadow: $text-shadow; + border: 1px solid transparent; + } + + &.navbar-collapse { + @media (max-width: $screen-md-min) { + background: $ember-orange; + } + } + +} diff --git a/app/styles/_twiddle-panes.scss b/app/styles/_twiddle-panes.scss new file mode 100644 index 00000000..a6ee0d11 --- /dev/null +++ b/app/styles/_twiddle-panes.scss @@ -0,0 +1,155 @@ +.twiddle-panes { + margin: 0; + margin-left: 0; + position: absolute; + top: $topbar-height; + bottom: 0; + left: 0; + right: 0; + + @media (min-width: $screen-md-min) { + display: -webkit-flex; + display: flex; + } + + .col-md-4 { + -webkit-flex: 0.5; + flex: 0.5; + padding: 0; + height: 100%; + border-right: 1px solid #e4e2e2; + cursor: normal; + + @media (max-width: $screen-md-min) { + margin-bottom: 60px; + } + } + + .handle + .col-md-4 { + margin-left: -3px; + } + + .output { + border-right: none; + position: relative; + + span { + margin: 16px 25px; + display: inline-block; + } + + .content { + position: absolute; + top: 100px; + bottom: 0; + width: 100%; + border: 0; + + iframe { + border: 0; + width: 100%; + height: 100%; + position: absolute; + } + } + + span.glyphicon-plus { + cursor: pointer; + } + } + + .header { + height: $code-header-height; + border-bottom: 1px solid $grey-3; + font-size: 16px; + background-color: $grey-1; + position: relative; + + .nav-left { + position: absolute; + top: 18px; + left: 15px; + } + + .file-picker { + margin-left: 15px; + margin-top: 8px; + margin-bottom: 0; + position: absolute; + } + + .nav-left+.file-picker { + margin-left: 30px; + } + + .nav-right { + position: absolute; + top: 20px; + right: 15px; + } + + .glyphicon { + font-size: 0.8em; + } + + .twiddlicon { + font-size: 1em; + } + + .glyphicon, .twiddlicon { + text-align:center; + color: $header-icon-color; + text-shadow: 1px 1px 0px white; + cursor: pointer; + padding: 2px; + } + + .twiddlicon:hover{ + color: $grey-1; + background-color: $icon-bg; + border-radius: 20%; + padding: 2px; + text-shadow: $icon-shadow-hover; + } + + .glyphicon-plus { + padding-bottom: 3px; + padding-left: 3px; + } + + .glyphicon:hover { + color: #faf4f1; + background-color: #d6c3ba; + border-radius: 20%; + padding: 2px; + text-shadow: $icon-shadow-hover; + } + + .glyphicon-plus:hover { + padding-bottom: 3px; + padding-left: 3px; + } + } + + .full-screen { + .header { + display: none; + } + + .run-or-live-reload { + display: none; + } + } + + .exit-full-screen-link { + display: block; + position: absolute; + bottom: 20px; + left: 50%; + width: 100px; + margin-left: -50px; + text-align: center; + color: $dropdown-link-color; + cursor: pointer; + } +} diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss new file mode 100644 index 00000000..758cbeb9 --- /dev/null +++ b/app/styles/_variables.scss @@ -0,0 +1,41 @@ +// local vars +$ember-orange: #e1563f; +$pale-orange: #f67862; +$bleached-orange: #faf2ee; +$burnt-orange: #aa412f; +$header-icon-color: #c6b5ad; +$grey-1: #faf4f1; +$grey-2: #eee; +$grey-3: #e4e2e2; +$grey-4: #ddd; +$grey-5: #ccc; +$yellow: #ffcc00; +$icon-bg: #d6c3ba; +$icon-shadow: 1px 1px 0px #fff; +$icon-shadow-hover: 1px 1px 0px #ad9488; +$shadow-opacity: 0.3; +$text-shadow: rgba(0, 0, 0, $shadow-opacity) 0px 1px 0px; +$menu-hover-bg: rgba(0, 0, 0, 0.13); +$menu-box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0px, inset rgba(0, 0, 0, 0.17) 0 1px 1px; +$menu-bg: rgba(0, 0, 0, 0.2); + +$topbar-height: 60px; +$topbar-control-height: 32px; +$code-header-height: 60px; +$url-bar-height: 30px; +$url-bar-padding: 6px; + +$font-size: 13px; +$font-size-larger: 15px; + +// bootstrap vars +$brand-primary: #000; +$screen-md-min: 950px; +$grid-float-breakpoint: 950px; +$dropdown-link-hover-bg: $ember-orange; +$dropdown-link-hover-color: #fff; +$dropdown-link-color: #000; +$navbar-default-link-color: #777; +$navbar-default-link-hover-color: #333; +$navbar-default-link-hover-bg: transparent; +$navbar-default-link-active-color: #555; diff --git a/app/styles/app.scss b/app/styles/app.scss index 82dde704..a1633132 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -1,505 +1,10 @@ -$brand-primary: #000; -$screen-md: 950px !default; -$ember-orange: #f67862; -$dropdown-link-hover-bg: $ember-orange; -$dropdown-link-hover-color: #fff; -$dropdown-link-color: #000; -$navbar-default-link-color: #777 !default; -$navbar-default-link-hover-color: #333 !default; -$navbar-default-link-hover-bg: transparent !default; -$navbar-default-link-active-color: #555 !default; -$header-icon-color: #c6b5ad !default; - -$topbar-height: 60px; -$topbar-control-height: 32px; -$code-header-height: 60px; - -.dropdown-submenu:hover > a { - background: $dropdown-link-hover-bg; - color: $dropdown-link-hover-color; -} - +@import "variables"; @import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap"; @import "vendor/twiddlicon/twiddlicon.scss"; - -button { - @extend .btn; - @extend .btn-default; -} - -body { - font-family: 'Maven Pro', sans-serif; -} - -#demo-app { - position: absolute; - z-index: -1; -} - -.light-gray { - color: #cccccc; -} - -.yellow { - color: #ffcc00; -} - -.flip-horizontal { - transform: scale(-1, 1); -} - -.toolbar { - height: $topbar-height; - font-size: 13px; - background: #e1563f top center; - background-image: url("../images/navigation_background.png"); - border-bottom: 1px solid #aa412f; - -moz-box-shadow: rgba(0,0,0,0.3) 0 0 3px; - -webkit-box-shadow: rgba(0,0,0,0.3) 0 0 3px; - box-shadow: rgba(0,0,0,0.3) 0 0 3px; - - .user-menu { - position: absolute; - right: ($topbar-height - $topbar-control-height) / 2; - top: ($topbar-height - $topbar-control-height) / 2; - text-align: right; - - .user-avatar { - display: inline-block; - width: $topbar-control-height; - height: 100%; - overflow: hidden; - float: left; - margin-right: 10px; - line-height: normal; - border-radius: 3px; - - img { - width: $topbar-control-height; - height: $topbar-control-height; - } - - &.unauthenticated { - background: url("../images/github32-inverse-faf2ee.svg"); - } - } - } - - .file-menu { - position: absolute; - left: ($topbar-height - $topbar-control-height) / 2; - top: ($topbar-height - $topbar-control-height) / 2; - text-align: left; - } - - .title { - width: 800px; - margin: 13px auto; - text-align: center; - - .saved-twiddles-header { - color: #faf2ee; - font-size: 15px; - } - - .indicator { - text-transform: uppercase; - font-weight: bold; - color: #faf2ee; - text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 0px; - - a { - color: #ffffff; - text-decoration: none; - &:hover { - border-bottom: dotted 1px; - } - } - } - - .input-edit { - display: inline-block; - padding: 5px 10px; - transition: background .3s; - font-size: 15px; - text-shadow: rgba(0,0,0,0.3) 0px 1px 0px; - border-radius: 3px; - border: 0; - color: #faf2ee; - cursor: pointer; - - input { - background-color: transparent; - border: 0; - outline: 0; - box-sizing: content-box; - } - - .glyphicon { - color: #faf2ee; - } - - &.active .glyphicon { - display: none; - } - - &:hover { - text-shadow: none; - background-color: rgba(0,0,0,0.13); - } - - &.active { - text-shadow: none; - background-color: rgba(0,0,0,0.2); - box-shadow: rgba(255,255,255,0.15) 0 1px 0px,inset rgba(0,0,0,0.17) 0 1px 1px; - outline: 0; - } - } - - .gist-link, span { - display: inline-block; - } - - } - - .dropdown { - &.open .dropdown-toggle { - text-shadow: none; - background-color: rgba(0,0,0,0.2); - box-shadow: rgba(255,255,255,0.15) 0 1px 0px,inset rgba(0,0,0,0.17) 0 1px 1px; - border: 1px solid transparent; - } - } - - .user-dropdown > .dropdown-toggle { - padding: 0 1em 0 0; - } - - .dropdown-toggle, .sign-in { - height: $topbar-control-height; - line-height: $topbar-control-height - 2; - text-transform: uppercase; - font-weight: bold; - color: #faf2ee; - text-shadow: rgba(0,0,0,0.3) 0px 1px 0px; - border: 1px solid transparent; - - &:hover, &:focus { - text-shadow: none; - background-color: rgba(0,0,0,0.13); - } - } - - .dropdown-toggle { - padding: 0 1em; - } - - .sign-in { - cursor: pointer; - padding: 0 .5em 0 0; - } - - .signing-in { - padding: 0px 1em; - height: $topbar-control-height; - line-height: $topbar-control-height - 2; - text-transform: uppercase; - font-weight: bold; - color: #faf2ee; - text-shadow: rgba(0,0,0,0.3) 0px 1px 0px; - border: 1px solid transparent; - } - -} - -.code { - .CodeMirror, .header ul { - opacity: .3; - transition: opacity .3s; - } - - &.active .CodeMirror, &.active .header ul { - opacity: 1; - } - - .CodeMirror { - font-family: Monaco, monospace; - font-size: 13px; - line-height: 1.6; - height: 100%; - width: 100%; - position: absolute; - - @media (min-width: $screen-md-min) { - height: auto; - top: 60px; - bottom: 0; - } - } -} - -.twiddle-panes { - position: absolute; - top: 60px; - bottom: 0; - left: 0; - right: 0; - margin: 0; - margin-left: 0; - - @media (min-width: $screen-md-min) { - display: -webkit-flex; - display: flex; - } - - .col-md-4 { - -webkit-flex: 0.5; - flex: 0.5; - padding: 0; - height: 100%; - border-right: 1px solid #e4e2e2; - cursor: normal; - - @media (max-width: $screen-md-min) { - margin-bottom: 60px; - } - } - - .handle + .col-md-4 { - margin-left: -3px; - } - - .output { - border-right: none; - position: relative; - - span { - margin: 16px 25px; - display: inline-block; - } - - .content { - position: absolute; - top: 100px; - bottom: 0; - width: 100%; - border: 0; - - iframe { - border: 0; - width: 100%; - height: 100%; - position: absolute; - } - } - - span.glyphicon-plus { - cursor: pointer; - } - } - - .header { - height: $code-header-height; - border-bottom: 1px solid #e4e2e2; - font-size: 16px; - background-color: #faf4f1; - position: relative; - - .nav-left { - position: absolute; - top: 18px; - left: 15px; - } - - .file-picker { - margin-left: 15px; - margin-top: 8px; - margin-bottom: 0; - position: absolute; - } - - .nav-left+.file-picker { - margin-left: 30px; - } - - .nav-right { - position: absolute; - top: 20px; - right: 15px; - } - - .glyphicon { - font-size: 0.8em; - } - - .twiddlicon { - font-size: 1em; - } - - .glyphicon, .twiddlicon { - text-align:center; - color: $header-icon-color; - text-shadow: 1px 1px 0px white; - cursor: pointer; - padding: 2px; - } - - .twiddlicon:hover{ - color: #faf4f1; - background-color: #d6c3ba; - border-radius: 20%; - padding: 2px; - text-shadow: 1px 1px 0px #ad9488; - } - - .glyphicon-plus { - padding-bottom: 3px; - padding-left: 3px; - } - - .glyphicon:hover { - color: #faf4f1; - background-color: #d6c3ba; - border-radius: 20%; - padding: 2px; - text-shadow: 1px 1px 0px #ad9488; - } - - .glyphicon-plus:hover { - padding-bottom: 3px; - padding-left: 3px; - } - } - - .full-screen { - .header { - display: none; - } - - .run-or-live-reload { - display: none; - } - } - - .exit-full-screen-link { - display: block; - position: absolute; - bottom: 20px; - left: 50%; - width: 100px; - margin-left: -50px; - text-align: center; - color: $dropdown-link-color; - cursor: pointer; - } -} - -.dropdown { - li { - cursor: pointer; - } -} - -.dropdown-submenu { - position: relative; -} - -.dropdown-submenu > .dropdown-menu { - top: 0; - left: 100%; - margin-top: -6px; - margin-left: -1px; - -webkit-border-radius: 0 6px 6px 6px; - -moz-border-radius: 0 6px 6px; - border-radius: 0 6px 6px 6px; -} - -.dropdown-submenu:hover > .dropdown-menu { - display: block; -} - -.dropdown-submenu > a:after { - display: block; - content: " "; - float: right; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - border-width: 5px 0 5px 5px; - border-left-color: #ccc; - margin-top: 5px; - margin-right: -10px; -} - -.dropdown-submenu:hover>a:after { - border-left-color: #fff; -} - -.dropdown-submenu.pull-left { - float: none; -} - -.dropdown-submenu.pull-left > .dropdown-menu { - left: -100%; - margin-left: 10px; - -webkit-border-radius: 6px 0 6px 6px; - -moz-border-radius: 6px 0 6px 6px; - border-radius: 6px 0 6px 6px; -} - -.url-bar { - background: #eee; - border-bottom: 1px solid #ddd; - padding: 6px; -} -.url-bar > input { - display: block; - height: 25px; - width: 100%; - padding: 3px; - background: #fff; - border: 1px solid #ddd; -} - -.run-now { - margin-left: 10px; - padding: 1px 6px 3px; -} - -.run-or-live-reload { - position: absolute; - right: 0; - top: 8px; - margin: 10px 25px; - text-align: right; -} - -.handle { - width: 3px; - background-color: transparent; - position: relative; - left: -2px; - - @media (min-width: $screen-md-min) { - height: 100%; - } -} - -div.table-responsive { - margin: 20px auto; -} - -.saved-twiddles { - width: 80%; - margin: 0 auto; - - thead th { - padding: 8px; - border: 1px solid #ddd; - } - - tbody tr:hover { - background-color: $ember-orange; - } -} +@import "main"; +@import "toolbar"; +@import "twiddle-panes"; +@import "code"; +@import "output-pane"; +@import "dropdown"; +@import "saved-twiddles"; diff --git a/app/twiddles/template.hbs b/app/twiddles/template.hbs index 6014423c..14c9785f 100644 --- a/app/twiddles/template.hbs +++ b/app/twiddles/template.hbs @@ -1,16 +1,26 @@ -
- - -
-

My Saved Twiddles

+
+
diff --git a/ember-cli-build.js b/ember-cli-build.js index 4d1f8241..58ee79f2 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -29,7 +29,7 @@ module.exports = function() { keyMaps: ['emacs', 'sublime', 'vim'] }, 'ember-cli-bootstrap-sassy': { - 'js': ['dropdown'] + 'js': ['dropdown', 'collapse'] }, fileCreator: [{filename: '/lib/blueprints.js', content: blueprintsCode}], sourcemaps: { diff --git a/tests/acceptance/gist-test.js b/tests/acceptance/gist-test.js index a5be3f2c..e841e52f 100644 --- a/tests/acceptance/gist-test.js +++ b/tests/acceptance/gist-test.js @@ -10,8 +10,8 @@ const firstColumn = '.code:first-of-type'; const firstFilePicker = firstColumn + ' .dropdown-toggle'; const secondFile = firstColumn + ' .dropdown-menu li:nth-child(2) a'; const anyFile = firstColumn + ' .dropdown-menu li:nth-child(1) a'; -const fileMenu = '.file-menu .dropdown-toggle'; -const deleteAction = '.file-menu a:contains(Delete)'; +const fileMenu = '.main-menu .dropdown-toggle'; +const deleteAction = '.main-menu a:contains(Delete)'; const addTemplateAction = '.test-template-action'; const firstFilePickerFiles = firstColumn + ' .dropdown-menu>li'; const firstColumnTextarea = firstColumn + ' .CodeMirror textarea'; @@ -52,7 +52,7 @@ test('deleting a gist loaded in two columns', function(assert) { andThen(function() { assert.equal(find('.code .CodeMirror').length, 0, 'No code mirror editors active'); assert.equal(find('.dropdown-toggle:contains(No file selected)').length, 2, 'Shows message when no file is selected.'); - assert.equal(find('.file-menu .test-remove-action').length, 0, 'There no longer is a selected file to delete'); + assert.equal(find('.main-menu .test-remove-action').length, 0, 'There no longer is a selected file to delete'); }); // TODO: Replace brittle for loop test code with "while there are files left..."