close

app/debug/index.js

@@ -63,12 +63,16 @@ module.exports = {
             width: this.debugWidth.toString() + "px",
             height: 'auto'
           });
+          $('.prompt-label').css('margin-left', '8px');
+          $('.console-label').css('margin-left', '5px');
 
         } else {
           container.css({
             width: 'auto',
             height: this.debugWidth > $('#editor-container').height() ? "100px" : this.debugWidth.toString() + "px"
           });
+          $('.prompt-label').css('margin-left', '25px');
+          $('.console-label').css('margin-left', '23px');
         }
       }
     },

app/debug/style.scss

@@ -22,7 +22,7 @@
   width: 100px;
   height: auto;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: flex-start;
   position: relative;
   min-width: 10px;
@@ -31,12 +31,22 @@
 
 #debug-drag {
   background-color: rgba(153, 153, 153, 0.5);
-  height: 20px !important;
+  padding-top: 2px;
+  height: 18px !important;
   cursor: col-resize;
   color: #b1b1b1;
   font-size: 12px;
 }
 
+.prompt-label {
+  margin-left: 25px;
+}
+
+.console-label {
+  margin-left: 23px;
+}
+
+
 body.horizontal {
   #debug-container {
     height: 100px;

app/debug/template.html

@@ -1,2 +1,2 @@
-<div id="debug-drag" v-on="mousedown: startDrag">>_ console</div>
+<div id="debug-drag" v-on="mousedown: startDrag"><span class='prompt-label'>>_</span><span class='console-label'>console</span></div>
 <div id="debug" style="font-size:{{$root.settings.fontSize}}px"></div>

app/editor/style.scss

@@ -1,5 +1,5 @@
 #main-container {
-  margin-top: 25px;
+  margin-top: 30px;
   margin-bottom: 10px;
   margin-right: 10px;
   flex: 1;
@@ -13,7 +13,6 @@ div#editor-container {
   display: flex;
   flex: 1;
   flex-direction: row;
-  margin-top: 15px;
 }
 
 #main {
@@ -37,6 +36,7 @@ div#editor-container {
   color: #b5b5b5 !important;
   background: rgba(153, 153, 153, 0.1) !important;
   width: 53px !important;
+  border-right: 1px solid rgba(153, 153, 153, 0.3);
 }
 
 .ace_gutter-layer {

app/sidebar/style.scss

@@ -16,7 +16,7 @@
     visibility: hidden;
     position: relative;
     width: 10px;
-    margin-top: 120px;
+    margin-top: 55px;
     flex: 1;
     overflow-y: auto;
   }

app/tabs/style.scss

@@ -1,61 +1,14 @@
 
-#header-container {
+#tab-container {
   font-size: 12px;
   display: flex;
   flex: 1;
   flex-direction: column;
-  max-height: 85px;
+  max-height: 30px;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
 }
 
-#logo {
-  height: 43px;
-  float: left;
-  margin-right: 25px;
-  margin-left: -35px;
-}
-
-#play {
-  background: none;
-  background-image: url('../images/play-button.svg');
-  border: 0;
-  width: 44px;
-  height: 44px;
-  font-size: 25px;
-  display: inline;
-  outline: 0; 
-  float: left;
-
-  &.running {
-    background-image: url('../images/stop-button.svg');
-  }
-}  
-
-#settings {
-  width: 44px;
-  height: 44px;
-}
-
-
-
-#button_header {
-  margin-left: 15px;
-  height: 75px;
-  margin-bottom: 33px;
-}
-
-#project-name {
-  font-size: 12px;
-  padding-left: 20px;
-  color: #b5b5b5;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  cursor: default; 
-  float:left;
-}
-
-
 #toolbar {
   height: 60px;
   width: 100%;

app/tabs/template.html

@@ -1,14 +1,3 @@
-  <div id ="button_header">
-
-    <img id="logo" src="images/p5-logo.png">
-    <img src="images/play-button.svg" class="button" id="play" v-class="running: $root.running" v-on="click: $root.toggleRun()">
-  <h1 id="project-name" v-text="projectName"></h1>
-    <div id="toolbar">
-      <div id="actions">
-        <img id="settings" class="button" title="Preferences" src="images/settings-button.svg" v-on="click: $root.toggleSettingsPane()">
-      </div>
-    </div>
-  </div>
   <div id="tabs"> 
     <ul id="tab-list"> 
       <li v-repeat="tabs | orderBy 'name'" v-component="tab"></li>

app/window/window.scss

@@ -24,10 +24,17 @@ body, html {
 
 body {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
   overflow: hidden;
+  height: 100%;
+}
+
+#flex-container {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
 }
 
 .file-handler {
@@ -55,4 +62,66 @@ body {
 
 .button:hover {
   opacity: 0.6;
-}
+}
+
+#header-container {
+  height: 44px;
+  margin-top: 30px;
+  margin-left: 102px;
+}
+
+#logo {
+  height: 43px;
+  float: left;
+  margin-right: 25px;
+}
+
+#play {
+  background: none;
+  background-image: url('../images/play-button.svg');
+  border: 0;
+  width: 44px;
+  height: 44px;
+  font-size: 25px;
+  display: inline;
+  outline: 0; 
+  float: left;
+
+  &.running {
+    background-image: url('../images/stop-button.svg');
+  }
+}  
+
+#settings {
+  width: 44px;
+  height: 44px;
+}
+
+#project-name {
+  font-size: 12px;
+  padding-left: 20px;
+  color: #b5b5b5;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  cursor: default; 
+  float:left;
+}
+
+
+#toolbar {
+  height: 60px;
+  width: 100%;
+}
+
+#actions {
+
+  #add, #export {
+    float: left;
+  }
+
+  #settings {
+    float: right;
+    margin-right: 15px;
+  }
+}
+

public/index.html

@@ -6,12 +6,24 @@
   <link rel="stylesheet" href="css/main.css">
 </head>
 <body class="{{orientation}}">
-  <div v-component="sidebar" v-with="files : files" id="side-container"></div>
-  <div id="main-container">
-    <div v-component="tabs" v-ref="tabs" id="header-container"></div>
-    <div id = "editor-container">
-      <div v-component="editor" v-ref="editor" id="main"></div>
-      <div v-component="debug" id="debug-container"></div>
+  <div id="header-container">
+    <img id="logo" src="images/p5-logo.png">
+    <img src="images/play-button.svg" class="button" id="play" v-class="running: $root.running" v-on="click: $root.toggleRun()">
+    <h1 id="project-name" v-text="projectName"></h1>
+    <div id="toolbar">
+      <div id="actions">
+        <img id="settings" class="button" title="Preferences" src="images/settings-button.svg" v-on="click: $root.toggleSettingsPane()">
+      </div>
+    </div>
+  </div>
+  <div id="flex-container">
+    <div v-component="sidebar" v-with="files : files" id="side-container"></div>
+    <div id="main-container">
+      <div v-component="tabs" v-ref="tabs" id="tab-container"></div>
+      <div id = "editor-container">
+        <div v-component="editor" v-ref="editor" id="main"></div>
+        <div v-component="debug" id="debug-container"></div>
+      </div>
     </div>
   </div>