Responsive

app/gist/template.hbs

@@ -1,40 +1,53 @@
-<div class="row toolbar">
-  <ul class="nav nav-pills file-menu">
-    {{file-menu model=model
-                session=session
-                activeEditorCol=activeEditorCol
-                activeFile=activeFile
-                addFile=(action "addFile")
-                addHelper=(action "addHelper")
-                addComponent=(action "addComponent")
-                renameFile=(action "renameFile")
-                removeFile=(action "removeFile")
-                deleteGist=(action "deleteGist")
-                saveGist="saveGist"
-                fork="fork"
-                copy="copy"
-                signInViaGithub="signInViaGithub"}}
+<nav class="navbar-default">
+  <div class="row toolbar">
+    <div>
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsed-menu" aria-expanded="false">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+    </div>
+  </div>
+  <div id="collapsed-menu" class="collapse navbar-collapse row toolbar">
+    <ul class="nav-pills main-menu">
+      {{file-menu model=model
+                  session=session
+                  activeEditorCol=activeEditorCol
+                  activeFile=activeFile
+                  addFile=(action "addFile")
+                  addHelper=(action "addHelper")
+                  addComponent=(action "addComponent")
+                  renameFile=(action "renameFile")
+                  removeFile=(action "removeFile")
+                  deleteGist=(action "deleteGist")
+                  saveGist="saveGist"
+                  fork="fork"
+                  copy="copy"
+                  signInViaGithub="signInViaGithub"
+      }}
+
+      {{editor-mode-menu setKeyMap=(action "setEditorKeyMap")}}
 
-    {{editor-mode-menu setKeyMap=(action "setEditorKeyMap")}}
+      {{versions-menu versionSelected=(action "versionSelected")
+                      emberVersions=emberVersions
+                      emberDataVersions=emberDataVersions
+      }}
+    </ul>
 
-    {{versions-menu versionSelected=(action "versionSelected")
-                    emberVersions=emberVersions
-                    emberDataVersions=emberDataVersions }}
-  </ul>
+    <div class="title">
+      {{title-input value=model.description titleChanged=(action "titleChanged")}}
+      {{saved-state-indicator model=model unsaved=unsaved}}
+    </div>
 
-  <div class="title">
-    {{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"
     }}
-  </div>
 
-  {{user-menu session=session
-              signInViaGithub="signInViaGithub"
-              signOut="signOut"
-              showTwiddles="showTwiddles"
-  }}
-</div>
+    <div></div>
+  </div>
+</nav>
 
 {{#twiddle-panes numColumns=realNumColumns fullScreen=fullScreen fileTreeShown=fileTreeShown}}
   {{#unless fullScreen}}

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;
+    }
+  }
+}

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;
+}

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);
+}

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%;
+  }
+}

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;
+  }
+}