Add Bootstrap and fixed bottom navbar

curtgrimes · Jun 21, 2017 · 2f96e23 · 2f96e23
1 parent 858ee33
commit 2f96e23
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 53 deletions.
diff --git a/app/Gulpfile.js b/app/Gulpfile.js
@@ -4,15 +4,21 @@ var rename = require('gulp-rename');
 var uglify = require('gulp-uglify');
 var merge = require('gulp-merge');
 var cleanCSS = require('gulp-clean-css');
+var sass = require('gulp-sass');
 
 gulp.task('default', function () {
-    var jsStream = gulp.src('js/*')
+    var jsStream = gulp.src([
+            'js/*',
+            'node_modules/bootstrap/js/dist/collapse.js',
+            'node_modules/bootstrap/js/dist/util.js'
+        ])
         .pipe(concat('build.js'))
         .pipe(uglify())
         .pipe(gulp.dest('build/js'));
 
-    var cssStream = gulp.src('css/*')
-        .pipe(concat('build.css'))
+    var cssStream = gulp.src('scss/*')
+        .pipe(concat('build.scss'))
+        .pipe(sass().on('error', sass.logError))
         .pipe(cleanCSS())
         .pipe(gulp.dest('build/css'));
 

diff --git a/app/build/css/build.css b/app/build/css/build.css
diff --git a/app/build/js/build.js b/app/build/js/build.js
diff --git a/app/css/app.css b/app/css/app.css
diff --git a/app/package.json b/app/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "body-parser": "~1.17.1",
+    "bootstrap": "^4.0.0-alpha.6",
     "cookie-parser": "~1.4.3",
     "debug": "~2.6.3",
     "ejs": "~2.5.6",
@@ -17,6 +18,7 @@
     "gulp-concat": "^2.6.1",
     "gulp-merge": "^0.1.1",
     "gulp-rename": "^1.2.2",
+    "gulp-sass": "^3.1.0",
     "gulp-uglify": "^3.0.0",
     "morgan": "~1.8.1",
     "serve-favicon": "~2.4.2"

diff --git a/app/scss/app.scss b/app/scss/app.scss
@@ -0,0 +1,87 @@
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/custom";
+
+// Reset and dependencies
+@import "../node_modules/bootstrap/scss/normalize";
+@import "../node_modules/bootstrap/scss/print";
+
+// Core CSS
+@import "../node_modules/bootstrap/scss/reboot";
+@import "../node_modules/bootstrap/scss/type";
+@import "../node_modules/bootstrap/scss/images";
+@import "../node_modules/bootstrap/scss/code";
+@import "../node_modules/bootstrap/scss/grid";
+@import "../node_modules/bootstrap/scss/tables";
+@import "../node_modules/bootstrap/scss/forms";
+@import "../node_modules/bootstrap/scss/buttons";
+
+// Components
+@import "../node_modules/bootstrap/scss/transitions";
+@import "../node_modules/bootstrap/scss/dropdown";
+@import "../node_modules/bootstrap/scss/button-group";
+@import "../node_modules/bootstrap/scss/input-group";
+@import "../node_modules/bootstrap/scss/custom-forms";
+@import "../node_modules/bootstrap/scss/nav";
+@import "../node_modules/bootstrap/scss/navbar";
+@import "../node_modules/bootstrap/scss/card";
+@import "../node_modules/bootstrap/scss/breadcrumb";
+@import "../node_modules/bootstrap/scss/pagination";
+@import "../node_modules/bootstrap/scss/badge";
+@import "../node_modules/bootstrap/scss/jumbotron";
+@import "../node_modules/bootstrap/scss/alert";
+@import "../node_modules/bootstrap/scss/progress";
+@import "../node_modules/bootstrap/scss/media";
+@import "../node_modules/bootstrap/scss/list-group";
+@import "../node_modules/bootstrap/scss/responsive-embed";
+@import "../node_modules/bootstrap/scss/close";
+
+// Components w/ JavaScript
+@import "../node_modules/bootstrap/scss/modal";
+@import "../node_modules/bootstrap/scss/tooltip";
+@import "../node_modules/bootstrap/scss/popover";
+@import "../node_modules/bootstrap/scss/carousel";
+
+// Utility classes
+@import "../node_modules/bootstrap/scss/utilities";
+
+
+
+    html, body {
+      background: #000;
+      font-family: 'Lato', sans-serif;
+    }
+
+    a, a:visited, a:hover {
+      color: #b7d3ff;
+      text-decoration: none;
+      cursor: pointer;
+    }
+
+    #info {
+      font-size: 20px;
+    }
+
+    #start_button {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      color: #ccc;
+    }
+
+    .interim {
+      color: #fffeaf;
+    }
+
+    .final {
+      padding-right: 3px;
+    }
+    .caption-wrap {
+      line-height: 1.3em;
+      color: #fff;
+      max-width: 1200px;
+      margin: 0 auto 150px auto;
+      font-weight: bold;
+      text-transform: uppercase;
+      font-size: 4em;
+    }
diff --git a/app/views/index.ejs b/app/views/index.ejs
@@ -11,10 +11,6 @@
 
 <body class="" id="grid">
   <div class="browser-landing" id="main">
-    <div id="div_start" style="position:fixed;right:0;bottom:0">
-      <a href="javascript:void(0)" onclick="startButton(event)" id="startButton">Start</a><br/><br/><a href="javascript:void(0)"
-        onclick="clear_saved()">Clear</a>
-    </div>
     <div class="caption-wrap">
       <div id="info" style="visibility: visible;">
         <p id="info_speak_now" style="display:none">
@@ -47,9 +43,25 @@
       </div>
     </div>
   </div>
-  <script>
 
-  </script>
+
+<nav class="navbar fixed-bottom navbar-toggleable-md navbar-inverse bg-inverse">
+  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <span class="navbar-brand">WebCaptioner</span>
+
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <ul class="navbar-nav ml-auto">
+      <li class="nav-item active">
+        <a class="nav-link" href="javascript:void(0)" onclick="startButton(event)" id="startButton">Start</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="javascript:void(0)" onclick="clear_saved()">Clear</a>
+      </li>
+    </ul>
+  </div>
+</nav>
 
   <script src="https://code.jquery.com/jquery-3.2.0.min.js" integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
     crossorigin="anonymous"></script>