frontend: スタイルを修正

5 files changed, 66 insertions, 28 deletions

diff --git a/frontend/Rakefile b/frontend/Rakefile
index a651a63..4b23e4e 100644
--- a/frontend/Rakefile
+++ b/frontend/Rakefile
@@ -17,7 +17,7 @@ $deps = [
 
 $copies = [
   "index.html",
-  "poe.css",
+  "dist/poe.css",
 ]
 
 $minify = <<EOF
@@ -62,7 +62,7 @@ task :deploy => [:prepare, :compile] do
   puts "Copying static files...."
   $copies.each { |copy|
     puts "Copying #{copy}"
-    FileUtils.cp(File.join($root, copy), $destdir)
+    FileUtils.cp(File.join($root, copy), File.join($destdir, copy))
   }
 end
 
@@ -78,7 +78,7 @@ end
 
 task :compile do
   puts "Running tsc...."
-  system "npm tsc" || exit(1)
+  system "npm run tsc" || exit(1)
   puts "Running node-sass...."
-  system "npm sass" || exit(1)
+  system "npm run sass" || exit(1)
 end
diff --git a/frontend/app/app.component.ts b/frontend/app/app.component.ts
index 662f34f..fba4739 100644
--- a/frontend/app/app.component.ts
+++ b/frontend/app/app.component.ts
@@ -23,17 +23,17 @@ import {EditorComponent} from "./editor.component";
       </ul>-->
     </nav>
     <div class="container">
-      <div class="panel panel-default">
+      <div id="editor" class="panel">
         <div class="panel-body">
           <form (ngSubmit)="onSubmit()">
-            <div class="form-group" id="code-field">
+            <div class="form-group" id="editor-editor">
               <editor (onSubmit)="onSubmit()" [(value)]="editing.code" [mode]="editing.lang"></editor>
             </div>
-            <div class="form-group form-inline">
-              <select class="form-control" [(ngModel)]="editing.lang" required>
+            <div class="form-group container" id="editor-options">
+              <select class="button dropdown-button" [(ngModel)]="editing.lang" required>
                 <option *ngFor="#p of availableLangs()" [value]="p">{{p}}</option>
               </select>
-              <button class="btn btn-default" type="submit">Run</button>
+              <button class="button default-button" type="submit">{{editing.lang}} /tmp/prog</button>
             </div>
           </form>
         </div>
diff --git a/frontend/app/snippet-detail.component.ts b/frontend/app/snippet-detail.component.ts
index 14b2351..f9ddae6 100644
--- a/frontend/app/snippet-detail.component.ts
+++ b/frontend/app/snippet-detail.component.ts
@@ -10,7 +10,7 @@ import {EditingData, EditingDataService} from "./editing-data.service";
           *ngFor="#r of snippet.results.slice().reverse(); #i = index"
           [ngClass]="{'panel-success': isSuccess(r), 'panel-failure': isFailure(r), 'panel-running': isRunning(r), 'result-item-collapsed': isHiddenIdx(i)}">
         <div class="panel-heading" (click)="toggleHiddenIdx(i)">{{r.compiler.id}} ({{r.compiler.version}})</div>
-        <div class="panel-body">
+        <div class="panel-body container">
           <pre><code [innerHTML]="formatted_output(r)"></code></pre>
         </div>
       </div>
@@ -53,7 +53,7 @@ export class SnippetDetailComponent implements OnInit {
     if (r.truncated) {
       str += "<span class=\"result-info\">[truncated]</span>";
     } else if (r.output.length === 0 || !r.output[r.output.length - 1][1].endsWith("\n")) {
-      str += "<span class=\"result-info\">%\n</span>";
+      str += "<span class=\"result-missing-newline\">%\n</span>";
     }
 
     if (r.result === 0) { // Success
diff --git a/frontend/bs-config.js b/frontend/bs-config.js
index 0d3dc57..de96484 100644
--- a/frontend/bs-config.js
+++ b/frontend/bs-config.js
@@ -10,7 +10,7 @@ module.exports = {
   injectChanges: false,
   ui: { port: 3002 },
   port: 3001,
-  files: ["./app/**/*.js", "./*.html", "./*.css"],
+  files: ["./app/**/*.js", "./*.html", "./dist/**/*"],
   server: {
     baseDir: "./",
     middleware: [
diff --git a/frontend/poe.scss b/frontend/poe.scss
index 81b2145..dbb6698 100644
--- a/frontend/poe.scss
+++ b/frontend/poe.scss
@@ -22,11 +22,10 @@ pre {
 }
 
 .container {
-  padding: 0 15px;
+  padding: 15px;
 }
 
 .navbar {
-  margin-bottom: 20px;
   border: 1px solid #e7e7e7;
   border-width: 0 0 1px;
   background-color: #f8f8f8;
@@ -58,7 +57,7 @@ pre {
 }
 
 .panel {
-  margin: 20px 0;
+  margin: 0 0 20px;
   border: 1px solid #dddddd;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
 
@@ -69,20 +68,60 @@ pre {
   }
 
   .panel-body {
-    padding: 15px;
+    /*padding: 15px;*/
   }
-
-  .panel-success, .panel-success .panel-heading { border-color: #d6e9c6; }
-  .panel-success .panel-heading { color: #3c763d; background-color: #dff0d8; }
-  .panel-failure, .panel-failure .panel-heading { border-color: #ebccd1; }
-  .panel-failure .panel-heading { color: #a94442; background-color: #f2dede; }
-  .panel-running, .panel-running .panel-heading { border-color: #dddddd; }
-  .panel-running .panel-heading { color: #333333; background-color: #f5f5f5; }
 }
 
+.panel-success, .panel-success .panel-heading { border-color: #d6e9c6; }
+.panel-success .panel-heading { color: #3c763d; background-color: #dff0d8; }
+.panel-failure, .panel-failure .panel-heading { border-color: #ebccd1; }
+.panel-failure .panel-heading { color: #a94442; background-color: #f2dede; }
+.panel-running, .panel-running .panel-heading { border-color: #dddddd; }
+.panel-running .panel-heading { color: #333333; background-color: #f5f5f5; }
+
 /* EDITOR *************************************************/
-editor .CodeMirror-gutters {
-  height: 100% !important;
+#editor {
+  #editor-editor {
+    border-bottom: 1px solid #dddddd;
+
+    /* なぜが gutter の高さがいっぱいになってくれない */
+    .CodeMirror-gutters {
+      height: 100% !important;
+    }
+  }
+
+  #editor-options {
+    .button {
+      overflow: visible;
+      padding: 0 12px;
+      height: 32px;
+      vertical-align: middle;
+      display: inline-block;
+      font-size: 14px;
+      border-radius: 0;
+      cursor: pointer;
+      outline: 0 !important;
+      color: #333333;
+      border: 1px solid #cccccc;
+      background-color: #ffffff;
+
+      &:hover {
+        background-color: #e6e6e6;
+        border-color: #adadad;
+      }
+    }
+
+    .default-button {
+      color: #ffffff;
+      background-color: #337ab7;
+      border-color: #2e6da4;
+
+      &:hover {
+        background-color: #286090;
+        border-color: #204d74;
+      }
+    }
+  }
 }
 
 /* RESULT *************************************************/
@@ -117,8 +156,7 @@ editor .CodeMirror-gutters {
   }
 }
 
-.result-exit { color: orange; }
-.result-info { color: white; background-color: black; }
-
 .result-fd-1 { color: black; }
 .result-fd-2 { color: red; }
+.result-exit { color: orange; }
+.result-missing-newline { color: white; background-color: black; }