From e13b02bcecdf6e89ecc53cceb93ffc87563305ec Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Tue, 28 Mar 2017 14:30:09 -0700
Subject: [PATCH 01/16] scaffold

---
 lab-remil/.babelrc                            |   3 +
 lab-remil/.eslintignore                       |   1 +
 lab-remil/.eslintrc                           |  25 ++++
 lab-remil/.gitignore                          | 122 ++++++++++++++++++
 lab-remil/app/component/login/_login.scss     |   0
 lab-remil/app/component/login/login.html      |  31 +++++
 lab-remil/app/component/login/login.js        |  23 ++++
 lab-remil/app/component/signup/_signup.scss   |   0
 lab-remil/app/component/signup/signup.html    |  25 ++++
 lab-remil/app/component/signup/signup.js      |  21 +++
 lab-remil/app/config/router-config.js         |   0
 lab-remil/app/entry.js                        |  41 ++++++
 lab-remil/app/index.html                      |   0
 lab-remil/app/scss/lib/base/_reset.scss       |  48 +++++++
 lab-remil/app/scss/lib/theme/_vars.scss       |   0
 lab-remil/app/scss/main.scss                  |   0
 lab-remil/app/service/auth-service.js         |  88 +++++++++++++
 lab-remil/app/view/landing/_landing.scss      |   0
 .../app/view/landing/landing-controller.js    |   8 ++
 lab-remil/app/view/landing/landing.html       |  26 ++++
 lab-remil/karma.conf.js                       |  25 ++++
 lab-remil/package.json                        |  53 ++++++++
 lab-remil/webpack.config.js                   |  49 +++++++
 23 files changed, 589 insertions(+)
 create mode 100644 lab-remil/.babelrc
 create mode 100644 lab-remil/.eslintignore
 create mode 100644 lab-remil/.eslintrc
 create mode 100644 lab-remil/.gitignore
 create mode 100644 lab-remil/app/component/login/_login.scss
 create mode 100644 lab-remil/app/component/login/login.html
 create mode 100644 lab-remil/app/component/login/login.js
 create mode 100644 lab-remil/app/component/signup/_signup.scss
 create mode 100644 lab-remil/app/component/signup/signup.html
 create mode 100644 lab-remil/app/component/signup/signup.js
 create mode 100644 lab-remil/app/config/router-config.js
 create mode 100644 lab-remil/app/entry.js
 create mode 100644 lab-remil/app/index.html
 create mode 100644 lab-remil/app/scss/lib/base/_reset.scss
 create mode 100644 lab-remil/app/scss/lib/theme/_vars.scss
 create mode 100644 lab-remil/app/scss/main.scss
 create mode 100644 lab-remil/app/service/auth-service.js
 create mode 100644 lab-remil/app/view/landing/_landing.scss
 create mode 100644 lab-remil/app/view/landing/landing-controller.js
 create mode 100644 lab-remil/app/view/landing/landing.html
 create mode 100644 lab-remil/karma.conf.js
 create mode 100644 lab-remil/package.json
 create mode 100644 lab-remil/webpack.config.js

diff --git a/lab-remil/.babelrc b/lab-remil/.babelrc
new file mode 100644
index 00000000..a0765e18
--- /dev/null
+++ b/lab-remil/.babelrc
@@ -0,0 +1,3 @@
+{
+    "presets": ["es2015"]
+}
diff --git a/lab-remil/.eslintignore b/lab-remil/.eslintignore
new file mode 100644
index 00000000..3c3629e6
--- /dev/null
+++ b/lab-remil/.eslintignore
@@ -0,0 +1 @@
+node_modules
diff --git a/lab-remil/.eslintrc b/lab-remil/.eslintrc
new file mode 100644
index 00000000..cac15fda
--- /dev/null
+++ b/lab-remil/.eslintrc
@@ -0,0 +1,25 @@
+{
+  "rules": {
+    "no-console": "off",
+    "indent": [ "error", 2 ],
+    "quotes": [ "error", "single" ],
+    "semi": ["error", "always"],
+    "linebreak-style": [ "error", "unix" ],
+    "comma-dangle": ["error", "always-multiline"],
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "mocha": true,
+    "jasmine": true,
+  },
+  "ecmaFeatures": {
+    "modules": true,
+    "experimentalObjectRestSpread": true,
+    "impliedStrict": true,
+  },
+  "extends": "eslint:recommended",
+  "parserOptions": {
+        "sourceType": "module",
+  },
+}
diff --git a/lab-remil/.gitignore b/lab-remil/.gitignore
new file mode 100644
index 00000000..1426a62b
--- /dev/null
+++ b/lab-remil/.gitignore
@@ -0,0 +1,122 @@
+# Created by https://www.gitignore.io/api/node,vim,osx,macos,linux
+
+### My Custom Jams ###
+*.env
+.appnote
+build
+
+*node_modules
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+
+
+### Vim ###
+# swap
+[._]*.s[a-v][a-z]
+[._]*.sw[a-p]
+[._]s[a-v][a-z]
+[._]sw[a-p]
+# session
+Session.vim
+# temporary
+.netrwhist
+*~
+# auto-generated tag files
+tags
+
+
+### OSX ###
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+# Thumbnails
+._*
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+
+### macOS ###
+# Icon must end with two \r
+# Thumbnails
+# Files that might appear in the root of a volume
+# Directories potentially created on remote AFP share
+
+
+### Linux ###
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+# End of https://www.gitignore.io/api/node,vim,osx,macos,linux
diff --git a/lab-remil/app/component/login/_login.scss b/lab-remil/app/component/login/_login.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/lab-remil/app/component/login/login.html b/lab-remil/app/component/login/login.html
new file mode 100644
index 00000000..8addd906
--- /dev/null
+++ b/lab-remil/app/component/login/login.html
@@ -0,0 +1,31 @@
+<section class="login-form">
+  <form
+    name="loginForm"
+    ng-submit="loginCtrl.login()" novalidate>
+    <div
+      ng-class="{
+        'error': loginForm.username.$invalid,
+        'success': loginForm.username.$valid
+      }">
+      <input type="text"
+        name="username"
+        placeholder="username"
+        ng-minlength="4"
+        ng-model="loginCtrl.user.username" required>
+    </div>
+
+    <div
+      ng-class="{
+        'error': loginForm.password.$invalid && loginForm.$submitted,
+        'success': loginForm.password.$valid
+      }">
+      <input type="password" name="password"
+        ng-disabled="loginForm.username.$invalid"
+        placeholder="password"
+        ng-minlength="3"
+        ng-model="loginCtrl.user.password" required>
+    </div>
+
+    <button class="btn-std">sign in</button>
+  </form>
+</section>
diff --git a/lab-remil/app/component/login/login.js b/lab-remil/app/component/login/login.js
new file mode 100644
index 00000000..207888c6
--- /dev/null
+++ b/lab-remil/app/component/login/login.js
@@ -0,0 +1,23 @@
+'use strict';
+
+require('./_login.scss');
+
+module.exports = {
+  template: require('./login.html'),
+  controller: ['$log', '$location', 'authService', LoginController],
+  controllerAs: 'loginCtrl',
+};
+
+function LoginController($log, $location, authService) {
+  $log.debug('LoginController');
+
+  authService.getToken()
+  .then( () => $location.url('/home'));
+
+  this.login = function() {
+    $log.debug('loginCtrl.login()');
+
+    authService.login(this.user)
+    .then( () => $location.url('/home'));
+  };
+}
diff --git a/lab-remil/app/component/signup/_signup.scss b/lab-remil/app/component/signup/_signup.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/lab-remil/app/component/signup/signup.html b/lab-remil/app/component/signup/signup.html
new file mode 100644
index 00000000..44bc8764
--- /dev/null
+++ b/lab-remil/app/component/signup/signup.html
@@ -0,0 +1,25 @@
+<section class="signup">
+  <form class="signup-form"
+    ng-submit="signupCtrl.signup(signupCtrl.user)"
+    novalidate>
+
+    <input class="input-std"
+      type="text"
+      placeholder="name"
+      ng-minlength="4"
+      ng-model="signupCtrl.user.username" required>
+
+    <input class="input-std"
+      type="email"
+      placeholder="email"
+      ng-model="signupCtrl.user.email">
+
+    <input class="input-std"
+      type="password"
+      placeholder="password"
+      ng-minlength="3"
+      ng-model="signupCtrl.user.password" required>
+
+    <input type="submit" class="btn-std" value="sign up">
+  </form>
+</section>
diff --git a/lab-remil/app/component/signup/signup.js b/lab-remil/app/component/signup/signup.js
new file mode 100644
index 00000000..e470d75f
--- /dev/null
+++ b/lab-remil/app/component/signup/signup.js
@@ -0,0 +1,21 @@
+'use strict';
+
+module.exports = {
+  template: require('./signup.html'),
+  controller: ['$log', '$location', 'authService', SignupController],
+  controllerAs: 'signupCtrl',
+};
+
+function SignupController($log, $location, authService) {
+  $log.debug('SignupController');
+
+  authService.getToken()
+  .then( () => $location.url('/home'));
+
+  this.signup = function(user) {
+    $log.debug('signupCtrl.signup()');
+
+    authService.signup(user)
+    .then( () => $location.url('/home'));
+  };
+}
diff --git a/lab-remil/app/config/router-config.js b/lab-remil/app/config/router-config.js
new file mode 100644
index 00000000..e69de29b
diff --git a/lab-remil/app/entry.js b/lab-remil/app/entry.js
new file mode 100644
index 00000000..48a31655
--- /dev/null
+++ b/lab-remil/app/entry.js
@@ -0,0 +1,41 @@
+'use strict';
+
+require('./scss/main.scss');
+
+const
+  path = require('path'),
+  angular = require('angular'),
+  camelcase = require('camelcase'),
+  pascalcase = require('pascalcase'),
+  uiRouter = require('angular-ui-router'),
+  ngTouch = require('angular-touch'),
+  ngAnimate = require('angular-animate');
+
+const ayogram = angular.module('ayogram', [ngTouch, ngAnimate, uiRouter]);
+
+
+let context = require.context('./config/', true, /\.js$/);
+context.keys().forEach( key => {
+  ayogram.config(context(key));
+});
+
+context = require.context('./view/', true, /\.js$/);
+context.keys().forEach( key => {
+  let name = pascalcase(path.basename(key, '.js'));
+  let module = context(key);
+  ayogram.controller(name, module);
+});
+
+context = require.context('./service/', true, /\.js$/);
+context.keys().forEach( key => {
+  let name = camelcase(path.basename(key, '.js'));
+  let module = context(key);
+  ayogram.service(name, module);
+});
+
+context = require.context('./component/', true, /\.js$/);
+context.keys().forEach( key => {
+  let name = camelcase(path.basename(key, '.js'));
+  let module = context(key);
+  ayogram.component(name, module);
+});
diff --git a/lab-remil/app/index.html b/lab-remil/app/index.html
new file mode 100644
index 00000000..e69de29b
diff --git a/lab-remil/app/scss/lib/base/_reset.scss b/lab-remil/app/scss/lib/base/_reset.scss
new file mode 100644
index 00000000..ed11813c
--- /dev/null
+++ b/lab-remil/app/scss/lib/base/_reset.scss
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/lab-remil/app/scss/lib/theme/_vars.scss b/lab-remil/app/scss/lib/theme/_vars.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/lab-remil/app/scss/main.scss b/lab-remil/app/scss/main.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/lab-remil/app/service/auth-service.js b/lab-remil/app/service/auth-service.js
new file mode 100644
index 00000000..75fa970c
--- /dev/null
+++ b/lab-remil/app/service/auth-service.js
@@ -0,0 +1,88 @@
+'use strict';
+
+module.exports = ['$q', '$log', '$http', '$window', authService];
+
+function authService($q, $log, $http, $window) {
+  $log.debug('authService');
+
+  let service = {};
+  let token = null;
+
+  function setToken(_token) {
+    $log.debug('authService.setToken()');
+
+    if (! _token) {
+      return $q.reject(new Error('no token'));
+    }
+
+    $window.localStorage.setItem('token', _token);
+    token = _token;
+    return $q.resolve(token);
+  }
+
+  service.getToken = function() {
+    $log.debug('authService.getToken()');
+    if (token) {
+      return $q.resolve(token);
+    }
+
+    token = $window.localStorage.getItem('token');
+    if (token) return $q.resolve(token);
+    return $q.reject(new Error('token not found'));
+  };
+
+  service.signup = function(user) {
+    $log.debug('authService.signup()');
+
+    let url = `${__API_URL__}/api/signup`;
+    let config = {
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+      },
+    };
+
+    return $http.post(url, user, config)
+    .then( res => {
+      $log.log('signup success', res.data);
+      return setToken(res.data);
+    })
+    .catch( err => {
+      $log.error('signup failure:', err.message);
+      return $q.reject(err);
+    });
+  };
+
+  service.logout = function() {
+    $log.debug('authService.logout()');
+
+    $window.localStorage.removeItem('token');
+    token = null;
+    return $q.resolve();
+  };
+
+  service.login = function(user) {
+    $log.debug('authService.login()');
+
+    let url = `${__API_URL__}/api/login`;
+    let base64 = $window.btoa(`${user.username}:${user.password}`);
+    let config = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Basic ${base64}`,
+      },
+    };
+
+    return $http.get(url, config)
+    .then( res => {
+      $log.log('login: success', res.data);
+      return setToken(res.data);
+    })
+    .catch( err => {
+      $log.error(err.message);
+      return $q.reject(err);
+    });
+  };
+
+  return service;
+}
diff --git a/lab-remil/app/view/landing/_landing.scss b/lab-remil/app/view/landing/_landing.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/lab-remil/app/view/landing/landing-controller.js b/lab-remil/app/view/landing/landing-controller.js
new file mode 100644
index 00000000..74a0662e
--- /dev/null
+++ b/lab-remil/app/view/landing/landing-controller.js
@@ -0,0 +1,8 @@
+'use strict';
+
+module.exports = ['$log', '$location', '$rootScope', 'authService', LandingController];
+
+function LandingController($log, $location, authService) {
+  let url = $location.url();
+  this.showSignup = url === '/join#signup' || url === '/join';
+}
diff --git a/lab-remil/app/view/landing/landing.html b/lab-remil/app/view/landing/landing.html
new file mode 100644
index 00000000..21122719
--- /dev/null
+++ b/lab-remil/app/view/landing/landing.html
@@ -0,0 +1,26 @@
+
+<section class="landing">
+  <div class="join-container"
+    ng-if="landingCtrl.showSignup">
+    <div class="join-inner">
+      <signup></signup>
+      <p>already a member?</p>
+      <a href="/#/join#login"
+         ng-click="landingCtrl.showSignup=false">
+        sign in here.
+      </a>
+    </div>
+  </div>
+
+  <div class="join-container"
+       ng-if="!landingCtrl.showSignup">
+    <div class="join-inner">
+      <login></login>
+      <p>want to sign up?</p>
+      <a href="/#/join#signup"
+         ng-click="landingCtrl.showSignup=true">
+        sign up here.
+      </a>
+    </div>
+  </div>
+</section>
diff --git a/lab-remil/karma.conf.js b/lab-remil/karma.conf.js
new file mode 100644
index 00000000..58de3786
--- /dev/null
+++ b/lab-remil/karma.conf.js
@@ -0,0 +1,25 @@
+const webpackConfig = require('./webpack.config.js');
+
+module.exports = function(config) {
+  config.set({
+    webpack: webpackConfig,
+    basePath: '',
+    frameworks: ['jasmine'],
+    files: [
+      'test/**/*-test.js',
+    ],
+    exclude: [
+    ],
+    preprocessors: {
+      'test/**/*-test.js': ['webpack'],
+    },
+    reporters: ['mocha'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['PhantomJS'],
+    singleRun: false,
+    concurrency: Infinity,
+  });
+};
diff --git a/lab-remil/package.json b/lab-remil/package.json
new file mode 100644
index 00000000..92bca9e9
--- /dev/null
+++ b/lab-remil/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "lab-remil",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "./node_modules/webpack/bin/webpack.js",
+    "watch": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot",
+    "lint": "./node_modules/eslint/bin/eslint.js .",
+    "test-watch": "./node_modules/karma/bin/karma start",
+    "test": "./node_modules/karma/bin/karma start --single-run"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "angular": "^1.6.3",
+    "angular-animate": "^1.6.3",
+    "angular-route": "^1.6.3",
+    "angular-touch": "^1.6.3",
+    "angular-ui-router": "^0.4.2",
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
+    "babel-preset-es2015": "^6.24.0",
+    "camelcase": "^4.0.0",
+    "clean-webpack-plugin": "^0.1.16",
+    "css-loader": "^0.27.3",
+    "dotenv": "^4.0.0",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.10.1",
+    "html-loader": "^0.4.5",
+    "html-webpack-plugin": "^2.28.0",
+    "node-sass": "^4.5.1",
+    "pascalcase": "^0.1.1",
+    "resolve-url-loader": "^2.0.2",
+    "sass-loader": "^6.0.3",
+    "style-loader": "^0.16.1",
+    "ui-router": "^1.0.0-alpha.3",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.3.2"
+  },
+  "devDependencies": {
+    "angular-mocks": "^1.6.3",
+    "eslint": "^3.18.0",
+    "jasmine-core": "^2.5.2",
+    "karma": "^1.5.0",
+    "karma-jasmine": "^1.1.0",
+    "karma-mocha-reporter": "^2.2.3",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-webpack": "^2.0.3",
+    "webpack-dev-server": "^2.4.2"
+  }
+}
diff --git a/lab-remil/webpack.config.js b/lab-remil/webpack.config.js
new file mode 100644
index 00000000..203e26f9
--- /dev/null
+++ b/lab-remil/webpack.config.js
@@ -0,0 +1,49 @@
+'use strict';
+
+require('dotenv').load();
+
+const webpack = require('webpack');
+const HTMLPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+
+module.exports = {
+  devtool: 'eval',
+  entry: `${__dirname}/app/entry.js`,
+  output: {
+    filename: 'bundle.js',
+    path: `${__dirname}/build`,
+  },
+  plugins: [
+    new HTMLPlugin({ template: `${__dirname}/app/index.html` }),
+    new ExtractTextPlugin('bundle.css'),
+    new webpack.DefinePlugin({__API_URL__: JSON.stringify(process.env.API_URL)}),
+  ],
+  module: {
+    rules: [
+      { //:::: babel ::::
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: 'babel-loader',
+      },
+      {//:::: html ::::
+        test: /\.html$/,
+        use: 'html-loader',
+      },
+      { //:::: sass ::::
+        test: /\.scss$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: ['css-loader', 'sass-loader'],
+        }),
+      },
+      { //:::: fonts ::::
+        test: /\.(eot|woff|tff|svg).*/,
+        use: 'url-loader?limit=10000&name=fonts/[hash].[ext]',
+      },
+      {
+
+      },
+    ],
+  },
+};

From 7f9203ef578eaf268fcfebd9f3e24d631d3a344f Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Tue, 28 Mar 2017 17:42:43 -0700
Subject: [PATCH 02/16] css

---
 lab-remil/app/component/signup/signup.html |  2 +-
 lab-remil/app/config/router-config.js      | 31 ++++++++++++++++++++++
 lab-remil/app/index.html                   | 19 +++++++++++++
 lab-remil/app/scss/lib/base/_base.scss     | 25 +++++++++++++++++
 lab-remil/app/scss/lib/layout/_footer.scss |  6 +++++
 lab-remil/app/scss/lib/layout/_header.scss | 16 +++++++++++
 lab-remil/app/scss/lib/layout/_layout.scss |  5 ++++
 lab-remil/app/scss/lib/layout/_main.scss   |  6 +++++
 lab-remil/app/scss/lib/theme/_vars.scss    | 14 ++++++++++
 lab-remil/app/scss/main.scss               | 11 ++++++++
 lab-remil/app/view/home/_home.scss         |  0
 lab-remil/app/view/home/home-controller.js |  7 +++++
 lab-remil/app/view/home/home.html          |  3 +++
 lab-remil/app/view/landing/_landing.scss   |  9 +++++++
 lab-remil/app/view/landing/landing.html    |  1 -
 lab-remil/webpack.config.js                |  1 -
 16 files changed, 153 insertions(+), 3 deletions(-)
 create mode 100644 lab-remil/app/scss/lib/base/_base.scss
 create mode 100644 lab-remil/app/scss/lib/layout/_footer.scss
 create mode 100644 lab-remil/app/scss/lib/layout/_header.scss
 create mode 100644 lab-remil/app/scss/lib/layout/_layout.scss
 create mode 100644 lab-remil/app/scss/lib/layout/_main.scss
 create mode 100644 lab-remil/app/view/home/_home.scss
 create mode 100644 lab-remil/app/view/home/home-controller.js
 create mode 100644 lab-remil/app/view/home/home.html

diff --git a/lab-remil/app/component/signup/signup.html b/lab-remil/app/component/signup/signup.html
index 44bc8764..c429e74b 100644
--- a/lab-remil/app/component/signup/signup.html
+++ b/lab-remil/app/component/signup/signup.html
@@ -5,7 +5,7 @@
 
     <input class="input-std"
       type="text"
-      placeholder="name"
+      placeholder="username"
       ng-minlength="4"
       ng-model="signupCtrl.user.username" required>
 
diff --git a/lab-remil/app/config/router-config.js b/lab-remil/app/config/router-config.js
index e69de29b..427c7f96 100644
--- a/lab-remil/app/config/router-config.js
+++ b/lab-remil/app/config/router-config.js
@@ -0,0 +1,31 @@
+'use strict';
+
+module.exports = ['$stateProvider', '$urlRouterProvider', routerConfig];
+
+function routerConfig($stateProvider, $urlRouterProvider) {
+  $urlRouterProvider.when('', '/join#signup');
+  $urlRouterProvider.when('/', '/join#signup');
+  $urlRouterProvider.when('/signup', '/join#signup');
+  $urlRouterProvider.when('/login', '/join#login');
+
+  let states = [
+    {
+      name: 'home',
+      url: '/home',
+      template: require('../view/home/home.html'),
+      controller: 'HomeController',
+      controllerAs: 'homeCtrl',
+    },
+    {
+      name: 'landing',
+      url: '/join',
+      template: require('../view/landing/landing.html'),
+      controller: 'LandingController',
+      controllerAs: 'landingCtrl',
+    },
+  ];
+
+  states.forEach( state => {
+    $stateProvider.state(state);
+  });
+}
diff --git a/lab-remil/app/index.html b/lab-remil/app/index.html
index e69de29b..3b5da145 100644
--- a/lab-remil/app/index.html
+++ b/lab-remil/app/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html ng-app="ayogram">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>ayoGRAM</title>
+  </head>
+  <header>
+    <div class="inner">
+      <h1>ayoGRAM</h1>      
+    </div>
+  </header>
+  <body>
+    <main>
+      <ui-view></ui-view>
+    </main>
+  </body>
+  <footer></footer>
+</html>
diff --git a/lab-remil/app/scss/lib/base/_base.scss b/lab-remil/app/scss/lib/base/_base.scss
new file mode 100644
index 00000000..8d63ada7
--- /dev/null
+++ b/lab-remil/app/scss/lib/base/_base.scss
@@ -0,0 +1,25 @@
+@import '../theme/vars';
+
+body {
+  font-family: helvetica;
+  font-size: 2.75vw;
+  background: $color-secondary;
+}
+
+a {
+  text-decoration: none;
+}
+
+.input-std {
+  width: 100%;
+  margin: 0 0 $gutter-std 0;
+  padding: $input-padding;
+  border-radius: $border-radius;
+}
+
+.btn-std {
+  padding: $input-padding $input-padding * 6;
+  background: $color-primary;
+  color: $white;
+  border-radius: $border-radius;
+}
diff --git a/lab-remil/app/scss/lib/layout/_footer.scss b/lab-remil/app/scss/lib/layout/_footer.scss
new file mode 100644
index 00000000..00d9644d
--- /dev/null
+++ b/lab-remil/app/scss/lib/layout/_footer.scss
@@ -0,0 +1,6 @@
+@import '../theme/vars';
+
+footer {
+  height: $height-header * .8;
+  background: $color-primary * 2.3;
+}
diff --git a/lab-remil/app/scss/lib/layout/_header.scss b/lab-remil/app/scss/lib/layout/_header.scss
new file mode 100644
index 00000000..6cfc0184
--- /dev/null
+++ b/lab-remil/app/scss/lib/layout/_header.scss
@@ -0,0 +1,16 @@
+@import '../theme/vars';
+
+header {
+  height: 8vh;
+  background: $color-primary;
+  color: $white;
+
+  h1 {
+    font-size: 3.1vh;
+  }
+
+  .inner {
+    width: 100% - 2 * $gutter-std;
+    margin: 0 auto;
+  }
+}
diff --git a/lab-remil/app/scss/lib/layout/_layout.scss b/lab-remil/app/scss/lib/layout/_layout.scss
new file mode 100644
index 00000000..2aa31eea
--- /dev/null
+++ b/lab-remil/app/scss/lib/layout/_layout.scss
@@ -0,0 +1,5 @@
+@import '../theme/vars';
+
+body * {
+  box-sizing: border-box;
+}
diff --git a/lab-remil/app/scss/lib/layout/_main.scss b/lab-remil/app/scss/lib/layout/_main.scss
new file mode 100644
index 00000000..07a50d41
--- /dev/null
+++ b/lab-remil/app/scss/lib/layout/_main.scss
@@ -0,0 +1,6 @@
+@import '../theme/vars';
+
+main {
+  height: 100vh - $height-header * 1.8;
+  margin-top: $gutter-std;
+}
diff --git a/lab-remil/app/scss/lib/theme/_vars.scss b/lab-remil/app/scss/lib/theme/_vars.scss
index e69de29b..fcc52d6d 100644
--- a/lab-remil/app/scss/lib/theme/_vars.scss
+++ b/lab-remil/app/scss/lib/theme/_vars.scss
@@ -0,0 +1,14 @@
+//:::: COLORS ::::
+$color-primary: #444;
+$color-secondary: #ccc;
+$black: #000;
+$white: #fff;
+
+//:::: LAYOUT ::::
+$gutter-std: 5%;
+$gutter-sm: $gutter-std / 2;
+$height-header: 8vh;
+
+//:::: ELEMENTS ::::
+$border-radius: 3px;
+$input-padding: 2%;
diff --git a/lab-remil/app/scss/main.scss b/lab-remil/app/scss/main.scss
index e69de29b..5fdc7f4d 100644
--- a/lab-remil/app/scss/main.scss
+++ b/lab-remil/app/scss/main.scss
@@ -0,0 +1,11 @@
+//:::: BASE ::::
+@import './lib/base/reset',
+        './lib/base/base';
+
+//:::: LAYOUT ::::
+@import './lib/layout/layout',
+        './lib/layout/header',
+        './lib/layout/main',
+        './lib/layout/footer';
+
+@import '../view/landing/landing';
diff --git a/lab-remil/app/view/home/_home.scss b/lab-remil/app/view/home/_home.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/lab-remil/app/view/home/home-controller.js b/lab-remil/app/view/home/home-controller.js
new file mode 100644
index 00000000..6d4a6d6a
--- /dev/null
+++ b/lab-remil/app/view/home/home-controller.js
@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = ['$log', HomeController];
+
+function HomeController($log) {
+  $log.debug('HomeController');
+}
diff --git a/lab-remil/app/view/home/home.html b/lab-remil/app/view/home/home.html
new file mode 100644
index 00000000..a1eb6fc8
--- /dev/null
+++ b/lab-remil/app/view/home/home.html
@@ -0,0 +1,3 @@
+<section class="home">
+  <h2>Ayo U iz HOME</h2>
+</section>
diff --git a/lab-remil/app/view/landing/_landing.scss b/lab-remil/app/view/landing/_landing.scss
index e69de29b..5cf714a4 100644
--- a/lab-remil/app/view/landing/_landing.scss
+++ b/lab-remil/app/view/landing/_landing.scss
@@ -0,0 +1,9 @@
+@import '../../scss/lib/theme/vars';
+
+.join-container {
+  .join-inner {
+    width: 100% - 2 * $gutter-std;
+    margin: 0 auto;
+  }
+
+}
diff --git a/lab-remil/app/view/landing/landing.html b/lab-remil/app/view/landing/landing.html
index 21122719..efa4547a 100644
--- a/lab-remil/app/view/landing/landing.html
+++ b/lab-remil/app/view/landing/landing.html
@@ -1,4 +1,3 @@
-
 <section class="landing">
   <div class="join-container"
     ng-if="landingCtrl.showSignup">
diff --git a/lab-remil/webpack.config.js b/lab-remil/webpack.config.js
index 203e26f9..4b4c8025 100644
--- a/lab-remil/webpack.config.js
+++ b/lab-remil/webpack.config.js
@@ -6,7 +6,6 @@ const webpack = require('webpack');
 const HTMLPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
-
 module.exports = {
   devtool: 'eval',
   entry: `${__dirname}/app/entry.js`,

From e33548e35a8a460e064a750c8b7fe28a759f9476 Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Tue, 28 Mar 2017 22:47:16 -0700
Subject: [PATCH 03/16] completed css

---
 lab-remil/app/component/login/_login.scss   |   6 +++++
 lab-remil/app/component/login/login.html    |  10 ++++++---
 lab-remil/app/component/signup/_signup.scss |  14 ++++++++++++
 lab-remil/app/component/signup/signup.html  |   7 +++---
 lab-remil/app/index.html                    |   3 ++-
 lab-remil/app/scss/lib/base/_base.scss      |   1 +
 lab-remil/app/scss/lib/layout/_header.scss  |  15 +++++++++++--
 lab-remil/app/scss/lib/layout/_layout.scss  |   4 ++++
 lab-remil/app/scss/lib/layout/_main.scss    |   3 +--
 lab-remil/app/scss/main.scss                |   4 ++++
 lab-remil/app/view/landing/_landing.scss    |  18 ++++++++++++++-
 lab-remil/app/view/landing/landing.html     |  23 +++++++++++++-------
 lab-remil/assets/cf-logo.png                | Bin 0 -> 6821 bytes
 lab-remil/webpack.config.js                 |   3 ++-
 14 files changed, 90 insertions(+), 21 deletions(-)
 create mode 100644 lab-remil/assets/cf-logo.png

diff --git a/lab-remil/app/component/login/_login.scss b/lab-remil/app/component/login/_login.scss
index e69de29b..2961a371 100644
--- a/lab-remil/app/component/login/_login.scss
+++ b/lab-remil/app/component/login/_login.scss
@@ -0,0 +1,6 @@
+@import '../../scss/lib/theme/vars';
+@import '../signup/signup';
+
+.login-form {
+  @extend .signup-form;
+}
diff --git a/lab-remil/app/component/login/login.html b/lab-remil/app/component/login/login.html
index 8addd906..cd0d771b 100644
--- a/lab-remil/app/component/login/login.html
+++ b/lab-remil/app/component/login/login.html
@@ -1,4 +1,5 @@
-<section class="login-form">
+<section class="login-form landing-form">
+  <h2>sign in</h2>
   <form
     name="loginForm"
     ng-submit="loginCtrl.login()" novalidate>
@@ -7,7 +8,8 @@
         'error': loginForm.username.$invalid,
         'success': loginForm.username.$valid
       }">
-      <input type="text"
+      <input class="input-std"
+        type="text"
         name="username"
         placeholder="username"
         ng-minlength="4"
@@ -19,7 +21,9 @@
         'error': loginForm.password.$invalid && loginForm.$submitted,
         'success': loginForm.password.$valid
       }">
-      <input type="password" name="password"
+      <input class="input-std"
+        type="password"
+        name="password"
         ng-disabled="loginForm.username.$invalid"
         placeholder="password"
         ng-minlength="3"
diff --git a/lab-remil/app/component/signup/_signup.scss b/lab-remil/app/component/signup/_signup.scss
index e69de29b..6aaa611a 100644
--- a/lab-remil/app/component/signup/_signup.scss
+++ b/lab-remil/app/component/signup/_signup.scss
@@ -0,0 +1,14 @@
+@import '../../scss/lib/theme/vars';
+
+.signup-form {
+  margin-top: $gutter-std;
+
+  h2 {
+    font-size: 2.2vh;
+    margin: $gutter-sm 0;
+  }
+
+  button {
+    float: right;
+  }
+}
diff --git a/lab-remil/app/component/signup/signup.html b/lab-remil/app/component/signup/signup.html
index c429e74b..65dc9187 100644
--- a/lab-remil/app/component/signup/signup.html
+++ b/lab-remil/app/component/signup/signup.html
@@ -1,5 +1,6 @@
-<section class="signup">
-  <form class="signup-form"
+<section class="signup-form landing-form">
+  <h2>sign up</h2>
+  <form
     ng-submit="signupCtrl.signup(signupCtrl.user)"
     novalidate>
 
@@ -20,6 +21,6 @@
       ng-minlength="3"
       ng-model="signupCtrl.user.password" required>
 
-    <input type="submit" class="btn-std" value="sign up">
+    <button class="btn-std">sign up</button>
   </form>
 </section>
diff --git a/lab-remil/app/index.html b/lab-remil/app/index.html
index 3b5da145..98366d33 100644
--- a/lab-remil/app/index.html
+++ b/lab-remil/app/index.html
@@ -7,7 +7,8 @@
   </head>
   <header>
     <div class="inner">
-      <h1>ayoGRAM</h1>      
+      <img src="../assets/cf-logo.png">
+      <h1>ayoGRAM</h1>
     </div>
   </header>
   <body>
diff --git a/lab-remil/app/scss/lib/base/_base.scss b/lab-remil/app/scss/lib/base/_base.scss
index 8d63ada7..850c10bd 100644
--- a/lab-remil/app/scss/lib/base/_base.scss
+++ b/lab-remil/app/scss/lib/base/_base.scss
@@ -4,6 +4,7 @@ body {
   font-family: helvetica;
   font-size: 2.75vw;
   background: $color-secondary;
+  color: $color-primary;
 }
 
 a {
diff --git a/lab-remil/app/scss/lib/layout/_header.scss b/lab-remil/app/scss/lib/layout/_header.scss
index 6cfc0184..1dd759dc 100644
--- a/lab-remil/app/scss/lib/layout/_header.scss
+++ b/lab-remil/app/scss/lib/layout/_header.scss
@@ -1,16 +1,27 @@
 @import '../theme/vars';
 
+$header-font-size: 3vh;
+
 header {
-  height: 8vh;
+  height: $height-header;
   background: $color-primary;
   color: $white;
 
+  img {
+    height: $height-header * .6;
+    float: left;
+    margin-top: $height-header * .2;
+    margin-right: $height-header * .2;
+  }
+
   h1 {
-    font-size: 3.1vh;
+    font-size: $header-font-size;
+    margin-top: ($height-header - $header-font-size) / 2;
   }
 
   .inner {
     width: 100% - 2 * $gutter-std;
     margin: 0 auto;
+    display: flex;
   }
 }
diff --git a/lab-remil/app/scss/lib/layout/_layout.scss b/lab-remil/app/scss/lib/layout/_layout.scss
index 2aa31eea..804f30e5 100644
--- a/lab-remil/app/scss/lib/layout/_layout.scss
+++ b/lab-remil/app/scss/lib/layout/_layout.scss
@@ -3,3 +3,7 @@
 body * {
   box-sizing: border-box;
 }
+
+.clearfix {
+  clear: both;
+}
diff --git a/lab-remil/app/scss/lib/layout/_main.scss b/lab-remil/app/scss/lib/layout/_main.scss
index 07a50d41..bfe368f4 100644
--- a/lab-remil/app/scss/lib/layout/_main.scss
+++ b/lab-remil/app/scss/lib/layout/_main.scss
@@ -1,6 +1,5 @@
 @import '../theme/vars';
 
 main {
-  height: 100vh - $height-header * 1.8;
-  margin-top: $gutter-std;
+  height: 100vh - ( $height-header * 1.8 );
 }
diff --git a/lab-remil/app/scss/main.scss b/lab-remil/app/scss/main.scss
index 5fdc7f4d..95b60c12 100644
--- a/lab-remil/app/scss/main.scss
+++ b/lab-remil/app/scss/main.scss
@@ -9,3 +9,7 @@
         './lib/layout/footer';
 
 @import '../view/landing/landing';
+
+//:::: COMPONENTS ::::
+@import '../component/signup/signup.scss',
+        '../component/login/login.scss';
diff --git a/lab-remil/app/view/landing/_landing.scss b/lab-remil/app/view/landing/_landing.scss
index 5cf714a4..f58eab16 100644
--- a/lab-remil/app/view/landing/_landing.scss
+++ b/lab-remil/app/view/landing/_landing.scss
@@ -1,9 +1,25 @@
 @import '../../scss/lib/theme/vars';
 
+.landing {
+
+  span {
+    margin-top: $gutter-sm;
+    display: block;
+    float: right;
+  }
+  p {
+    display: inline-block;
+  }
+
+  a {
+    font-weight: bolder;
+    color: $color-primary;
+  }
+}
+
 .join-container {
   .join-inner {
     width: 100% - 2 * $gutter-std;
     margin: 0 auto;
   }
-
 }
diff --git a/lab-remil/app/view/landing/landing.html b/lab-remil/app/view/landing/landing.html
index efa4547a..834434b0 100644
--- a/lab-remil/app/view/landing/landing.html
+++ b/lab-remil/app/view/landing/landing.html
@@ -3,23 +3,30 @@
     ng-if="landingCtrl.showSignup">
     <div class="join-inner">
       <signup></signup>
-      <p>already a member?</p>
-      <a href="/#/join#login"
-         ng-click="landingCtrl.showSignup=false">
+      <div class="clearfix"></div>
+      <span>
+        <p>already a member?</p>
+        <a href="/#/join#login"
+        ng-click="landingCtrl.showSignup=false">
         sign in here.
-      </a>
+        </a>
+      </span>
     </div>
   </div>
 
+
   <div class="join-container"
        ng-if="!landingCtrl.showSignup">
     <div class="join-inner">
       <login></login>
-      <p>want to sign up?</p>
-      <a href="/#/join#signup"
-         ng-click="landingCtrl.showSignup=true">
+      <div class="clearfix"></div>
+      <span>
+        <p>want to sign up?</p>
+        <a href="/#/join#signup"
+        ng-click="landingCtrl.showSignup=true">
         sign up here.
-      </a>
+        </a>        
+      </span>
     </div>
   </div>
 </section>
diff --git a/lab-remil/assets/cf-logo.png b/lab-remil/assets/cf-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..38a23b2d1d0dc6944768b2f98fae55197b0155b7
GIT binary patch
literal 6821
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

literal 0
HcmV?d00001

diff --git a/lab-remil/webpack.config.js b/lab-remil/webpack.config.js
index 4b4c8025..f29ac22b 100644
--- a/lab-remil/webpack.config.js
+++ b/lab-remil/webpack.config.js
@@ -41,7 +41,8 @@ module.exports = {
         use: 'url-loader?limit=10000&name=fonts/[hash].[ext]',
       },
       {
-
+        test: /\.png$/,
+        use: 'url-loader',
       },
     ],
   },

From fac857e973032a1dc1d3eca6f5c28eb4caca70dc Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Wed, 29 Mar 2017 17:11:19 -0700
Subject: [PATCH 04/16] completed functionality and css

---
 .../create-gallery/_create-gallery.scss       |  0
 .../create-gallery/create-gallery.html        | 18 ++++
 .../gallery/create-gallery/create-gallery.js  | 21 +++++
 .../component/{ => landing}/login/_login.scss |  2 +-
 .../component/{ => landing}/login/login.html  |  0
 .../component/{ => landing}/login/login.js    |  0
 .../{ => landing}/signup/_signup.scss         |  3 +-
 .../{ => landing}/signup/signup.html          |  0
 .../component/{ => landing}/signup/signup.js  |  2 +
 lab-remil/app/component/navbar/_navbar.scss   | 33 ++++++++
 lab-remil/app/component/navbar/navbar.html    |  7 ++
 lab-remil/app/component/navbar/navbar.js      | 43 ++++++++++
 lab-remil/app/config/log-config.js            |  7 ++
 lab-remil/app/entry.js                        |  7 ++
 lab-remil/app/index.html                      |  5 +-
 lab-remil/app/scss/lib/base/_base.scss        | 21 +++++
 lab-remil/app/scss/lib/layout/_header.scss    | 18 ----
 lab-remil/app/scss/lib/layout/_layout.scss    |  5 ++
 lab-remil/app/scss/main.scss                  |  7 +-
 lab-remil/app/service/gallery-service.js      | 83 +++++++++++++++++++
 lab-remil/app/view/home/_home.scss            | 17 ++++
 lab-remil/app/view/home/home-controller.js    | 21 ++++-
 lab-remil/app/view/home/home.html             | 18 +++-
 .../app/view/landing/landing-controller.js    |  2 +
 lab-remil/webpack.config.js                   | 12 ++-
 25 files changed, 317 insertions(+), 35 deletions(-)
 create mode 100644 lab-remil/app/component/gallery/create-gallery/_create-gallery.scss
 create mode 100644 lab-remil/app/component/gallery/create-gallery/create-gallery.html
 create mode 100644 lab-remil/app/component/gallery/create-gallery/create-gallery.js
 rename lab-remil/app/component/{ => landing}/login/_login.scss (63%)
 rename lab-remil/app/component/{ => landing}/login/login.html (100%)
 rename lab-remil/app/component/{ => landing}/login/login.js (100%)
 rename lab-remil/app/component/{ => landing}/signup/_signup.scss (66%)
 rename lab-remil/app/component/{ => landing}/signup/signup.html (100%)
 rename lab-remil/app/component/{ => landing}/signup/signup.js (94%)
 create mode 100644 lab-remil/app/component/navbar/_navbar.scss
 create mode 100644 lab-remil/app/component/navbar/navbar.html
 create mode 100644 lab-remil/app/component/navbar/navbar.js
 create mode 100644 lab-remil/app/config/log-config.js
 create mode 100644 lab-remil/app/service/gallery-service.js

diff --git a/lab-remil/app/component/gallery/create-gallery/_create-gallery.scss b/lab-remil/app/component/gallery/create-gallery/_create-gallery.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/lab-remil/app/component/gallery/create-gallery/create-gallery.html b/lab-remil/app/component/gallery/create-gallery/create-gallery.html
new file mode 100644
index 00000000..49cd314d
--- /dev/null
+++ b/lab-remil/app/component/gallery/create-gallery/create-gallery.html
@@ -0,0 +1,18 @@
+<section class="create-gallery form">
+  <form name="createGalleryForm"
+    class="gallery-form"
+    ng-submit="createGalleryCtrl.createGallery()">
+
+    <fieldset>
+      <input name="name" class="input-std" type="text"
+        ng-model="createGalleryCtrl.gallery.name" placeholder="gallery name"required>
+    </fieldset>
+
+    <fieldset>
+      <input name="desc" class="input-std" type="text"
+        ng-model="createGalleryCtrl.gallery.desc" placeholder="gallery description"required>
+    </fieldset>
+
+    <button class="btn-std" type="submit">create gallery</button>
+  </form>
+</section>
diff --git a/lab-remil/app/component/gallery/create-gallery/create-gallery.js b/lab-remil/app/component/gallery/create-gallery/create-gallery.js
new file mode 100644
index 00000000..5130b098
--- /dev/null
+++ b/lab-remil/app/component/gallery/create-gallery/create-gallery.js
@@ -0,0 +1,21 @@
+'use strict';
+
+module.exports = {
+  template: require('./create-gallery.html'),
+  controller: ['$log', 'galleryService', CreateGalleryController],
+  controllerAs: 'createGalleryCtrl',
+};
+
+function CreateGalleryController($log, galleryService) {
+  $log.debug('CreateGalleryController');
+
+  this.gallery = {};
+
+  this.createGallery = function() {
+    galleryService.createGallery(this.gallery)
+    .then( () => {
+      this.gallery.name = null;
+      this.gallery.desc = null;
+    });
+  };
+}
diff --git a/lab-remil/app/component/login/_login.scss b/lab-remil/app/component/landing/login/_login.scss
similarity index 63%
rename from lab-remil/app/component/login/_login.scss
rename to lab-remil/app/component/landing/login/_login.scss
index 2961a371..a9b9a1b0 100644
--- a/lab-remil/app/component/login/_login.scss
+++ b/lab-remil/app/component/landing/login/_login.scss
@@ -1,4 +1,4 @@
-@import '../../scss/lib/theme/vars';
+@import '../../../scss/lib/theme/vars';
 @import '../signup/signup';
 
 .login-form {
diff --git a/lab-remil/app/component/login/login.html b/lab-remil/app/component/landing/login/login.html
similarity index 100%
rename from lab-remil/app/component/login/login.html
rename to lab-remil/app/component/landing/login/login.html
diff --git a/lab-remil/app/component/login/login.js b/lab-remil/app/component/landing/login/login.js
similarity index 100%
rename from lab-remil/app/component/login/login.js
rename to lab-remil/app/component/landing/login/login.js
diff --git a/lab-remil/app/component/signup/_signup.scss b/lab-remil/app/component/landing/signup/_signup.scss
similarity index 66%
rename from lab-remil/app/component/signup/_signup.scss
rename to lab-remil/app/component/landing/signup/_signup.scss
index 6aaa611a..73131b39 100644
--- a/lab-remil/app/component/signup/_signup.scss
+++ b/lab-remil/app/component/landing/signup/_signup.scss
@@ -1,10 +1,9 @@
-@import '../../scss/lib/theme/vars';
+@import '../../../scss/lib/theme/vars';
 
 .signup-form {
   margin-top: $gutter-std;
 
   h2 {
-    font-size: 2.2vh;
     margin: $gutter-sm 0;
   }
 
diff --git a/lab-remil/app/component/signup/signup.html b/lab-remil/app/component/landing/signup/signup.html
similarity index 100%
rename from lab-remil/app/component/signup/signup.html
rename to lab-remil/app/component/landing/signup/signup.html
diff --git a/lab-remil/app/component/signup/signup.js b/lab-remil/app/component/landing/signup/signup.js
similarity index 94%
rename from lab-remil/app/component/signup/signup.js
rename to lab-remil/app/component/landing/signup/signup.js
index e470d75f..3eb1c471 100644
--- a/lab-remil/app/component/signup/signup.js
+++ b/lab-remil/app/component/landing/signup/signup.js
@@ -1,5 +1,7 @@
 'use strict';
 
+require('./_signup.scss');
+
 module.exports = {
   template: require('./signup.html'),
   controller: ['$log', '$location', 'authService', SignupController],
diff --git a/lab-remil/app/component/navbar/_navbar.scss b/lab-remil/app/component/navbar/_navbar.scss
new file mode 100644
index 00000000..425a1e34
--- /dev/null
+++ b/lab-remil/app/component/navbar/_navbar.scss
@@ -0,0 +1,33 @@
+@import '../../scss/lib/theme/vars';
+
+$header-font-size: 3vh;
+
+.navbar {
+  width: 100% - 2 * $gutter-std;
+  margin: 0 auto;
+  display: flex;
+
+  img {
+    height: $height-header * .6;
+    float: left;
+    margin-top: $height-header * .2;
+    margin-right: $height-header * .2;
+  }
+
+  h1 {
+    font-size: $header-font-size;
+    margin-top: ($height-header - $header-font-size) / 2;
+  }
+
+  div {
+    margin-left: auto;
+  }
+
+  button {
+    width: 10vh;
+    height: $height-header * .4;
+    margin-top: $height-header * .3;
+    background: $color-secondary;
+    color: $color-primary;
+  }
+}
diff --git a/lab-remil/app/component/navbar/navbar.html b/lab-remil/app/component/navbar/navbar.html
new file mode 100644
index 00000000..8fac5dbb
--- /dev/null
+++ b/lab-remil/app/component/navbar/navbar.html
@@ -0,0 +1,7 @@
+<nav class="navbar">
+  <img ng-src="../assets/cf-logo.png">
+  <h1>ayogram</h1>
+  <div ng-hide="navbarCtrl.hideButtons">
+    <button class="btn-std" ng-click="navbarCtrl.logout()">sign out</button>
+  </div>
+</nav>
diff --git a/lab-remil/app/component/navbar/navbar.js b/lab-remil/app/component/navbar/navbar.js
new file mode 100644
index 00000000..d67e1061
--- /dev/null
+++ b/lab-remil/app/component/navbar/navbar.js
@@ -0,0 +1,43 @@
+'use strict';
+
+require('./_navbar.scss');
+
+module.exports = {
+  template: require('./navbar.html'),
+  controller: ['$log', '$location', '$rootScope', 'authService', NavbarController],
+  controllerAs: 'navbarCtrl',
+};
+
+function NavbarController($log, $location, $rootScope, authService) {
+  $log.debug('NavbarController');
+
+  this.checkPath = function() {
+    let path = $location.path();
+    if (path === '/join') {
+      this.hideButtons = true;
+    }
+
+    if (path !== '/join') {
+      this.hideButtons = false;
+      authService.getToken()
+      .catch( () => {
+        $location.url('/join#login');
+      });
+    }
+  };
+
+  this.checkPath();
+
+  $rootScope.$on('$locationChangeSuccess', () => {
+    this.checkPath();
+  });
+
+  this.logout = function() {
+    $log.log('navbarCtrl.logout');
+    this.hideButtons = true;
+    authService.logout()
+    .then( () => {
+      $location.url('/');
+    });
+  };
+}
diff --git a/lab-remil/app/config/log-config.js b/lab-remil/app/config/log-config.js
new file mode 100644
index 00000000..01068985
--- /dev/null
+++ b/lab-remil/app/config/log-config.js
@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = ['$logProvider', logConfig];
+
+function logConfig($logProvider) {
+  $logProvider.debugEnabled(__DEBUG__);
+}
diff --git a/lab-remil/app/entry.js b/lab-remil/app/entry.js
index 48a31655..5bb9ff3e 100644
--- a/lab-remil/app/entry.js
+++ b/lab-remil/app/entry.js
@@ -13,6 +13,13 @@ const
 
 const ayogram = angular.module('ayogram', [ngTouch, ngAnimate, uiRouter]);
 
+// const angularLoaderObject = {
+//   config: {
+//     dir: './config',
+//     fn: file => ay
+//   },
+// };
+
 
 let context = require.context('./config/', true, /\.js$/);
 context.keys().forEach( key => {
diff --git a/lab-remil/app/index.html b/lab-remil/app/index.html
index 98366d33..6ed5bd6c 100644
--- a/lab-remil/app/index.html
+++ b/lab-remil/app/index.html
@@ -6,10 +6,11 @@
     <title>ayoGRAM</title>
   </head>
   <header>
-    <div class="inner">
+    <!-- <div class="inner">
       <img src="../assets/cf-logo.png">
       <h1>ayoGRAM</h1>
-    </div>
+    </div> -->
+    <navbar></navbar>
   </header>
   <body>
     <main>
diff --git a/lab-remil/app/scss/lib/base/_base.scss b/lab-remil/app/scss/lib/base/_base.scss
index 850c10bd..391e610a 100644
--- a/lab-remil/app/scss/lib/base/_base.scss
+++ b/lab-remil/app/scss/lib/base/_base.scss
@@ -11,6 +11,15 @@ a {
   text-decoration: none;
 }
 
+strong {
+  font-weight:900;
+}
+
+h2 {
+  font-size: 2.2vh;
+  margin: $gutter-std/2 0;
+}
+
 .input-std {
   width: 100%;
   margin: 0 0 $gutter-std 0;
@@ -24,3 +33,15 @@ a {
   color: $white;
   border-radius: $border-radius;
 }
+
+.form {
+  margin-top: $gutter-std;
+
+  h2 {
+    margin: $gutter-sm 0;
+  }
+
+  button {
+    float: right;
+  }
+}
diff --git a/lab-remil/app/scss/lib/layout/_header.scss b/lab-remil/app/scss/lib/layout/_header.scss
index 1dd759dc..28d9e363 100644
--- a/lab-remil/app/scss/lib/layout/_header.scss
+++ b/lab-remil/app/scss/lib/layout/_header.scss
@@ -6,22 +6,4 @@ header {
   height: $height-header;
   background: $color-primary;
   color: $white;
-
-  img {
-    height: $height-header * .6;
-    float: left;
-    margin-top: $height-header * .2;
-    margin-right: $height-header * .2;
-  }
-
-  h1 {
-    font-size: $header-font-size;
-    margin-top: ($height-header - $header-font-size) / 2;
-  }
-
-  .inner {
-    width: 100% - 2 * $gutter-std;
-    margin: 0 auto;
-    display: flex;
-  }
 }
diff --git a/lab-remil/app/scss/lib/layout/_layout.scss b/lab-remil/app/scss/lib/layout/_layout.scss
index 804f30e5..dcb7dca7 100644
--- a/lab-remil/app/scss/lib/layout/_layout.scss
+++ b/lab-remil/app/scss/lib/layout/_layout.scss
@@ -7,3 +7,8 @@ body * {
 .clearfix {
   clear: both;
 }
+
+.inner {
+  width: 100% - 2 * $gutter-std;
+  margin: 0 auto;
+}
diff --git a/lab-remil/app/scss/main.scss b/lab-remil/app/scss/main.scss
index 95b60c12..167190ca 100644
--- a/lab-remil/app/scss/main.scss
+++ b/lab-remil/app/scss/main.scss
@@ -7,9 +7,4 @@
         './lib/layout/header',
         './lib/layout/main',
         './lib/layout/footer';
-
-@import '../view/landing/landing';
-
-//:::: COMPONENTS ::::
-@import '../component/signup/signup.scss',
-        '../component/login/login.scss';
+ 
diff --git a/lab-remil/app/service/gallery-service.js b/lab-remil/app/service/gallery-service.js
new file mode 100644
index 00000000..6c1512d0
--- /dev/null
+++ b/lab-remil/app/service/gallery-service.js
@@ -0,0 +1,83 @@
+'use strict';
+
+module.exports = ['$q', '$log', '$http', 'authService', galleryService];
+
+function galleryService($q, $log, $http, authService) {
+  $log.debug('galleryService');
+
+  let service = {};
+  service.galleries = [];
+
+  service.createGallery = function(gallery) {
+    $log.debug('galleryService.createGallery');
+
+    return authService.getToken()
+    .then( token => {
+      let url = `${__API_URL__}/api/gallery`;
+      let config = {
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      };
+
+      return $http.post(url, gallery, config);
+    })
+    .then( res => {
+      $log.log('gallery created');
+      let gallery = res.data;
+      service.galleries.unshift(gallery);
+      return gallery;
+    })
+    .catch( err => {
+      $log.error(err.message);
+      return $q.reject(err);
+    });
+  };
+
+  service.deleteGalleries = function(galleryID) {
+    $log.debug('galleryService.deleteGalleries');
+
+    return authService.getToken()
+    .then( token => {
+      let url = `${__API_URL__}/api/gallery/${galleryID}`;
+      let config = {
+        headers: {
+          Accept: 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      };
+
+      // TODO: create $http.delete request
+    });
+  };
+
+  service.fetchGalleries = function() {
+    $log.debug('galleryService.fetchGalleries');
+
+    return authService.getToken()
+    .then( token => {
+      let url = `${__API_URL__}/api/gallery`;
+      let config = {
+        headers: {
+          Accept: 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      };
+
+      return $http.get(url, config);
+    })
+    .then( res => {
+      $log.log('galleries retrieved');
+      service.galleries = res.data;
+      return service.galleries;
+    })
+    .catch( err => {
+      $log.error(err.message);
+      return $q.reject(err);
+    });
+  };
+
+  return service;
+}
diff --git a/lab-remil/app/view/home/_home.scss b/lab-remil/app/view/home/_home.scss
index e69de29b..aefdcc87 100644
--- a/lab-remil/app/view/home/_home.scss
+++ b/lab-remil/app/view/home/_home.scss
@@ -0,0 +1,17 @@
+@import '../../scss/lib/theme/vars';
+
+.gallery-container {
+  background: $color-primary * 2.3;
+  border-radius: $border-radius;
+  margin-bottom: $gutter-sm;
+
+  span {
+    display: block;
+    padding: $input-padding;
+    padding-top: 0;
+
+    &:first-child {
+      padding-top: $input-padding;
+    }
+  }
+}
diff --git a/lab-remil/app/view/home/home-controller.js b/lab-remil/app/view/home/home-controller.js
index 6d4a6d6a..4640d170 100644
--- a/lab-remil/app/view/home/home-controller.js
+++ b/lab-remil/app/view/home/home-controller.js
@@ -1,7 +1,24 @@
 'use strict';
 
-module.exports = ['$log', HomeController];
+require('./_home.scss');
 
-function HomeController($log) {
+module.exports = ['$log', '$rootScope', 'galleryService', HomeController];
+
+function HomeController($log, $rootScope, galleryService) {
   $log.debug('HomeController');
+
+  this.galleries = [];
+
+  this.fetchGalleries = function() {
+    galleryService.fetchGalleries()
+    .then( galleries => {
+      this.galleries = galleries;
+    });
+  };
+
+  this.fetchGalleries();
+
+  $rootScope.$on('$locationChangeSuccess', () => {
+    this.fetchGalleries();
+  });
 }
diff --git a/lab-remil/app/view/home/home.html b/lab-remil/app/view/home/home.html
index a1eb6fc8..5ab0791f 100644
--- a/lab-remil/app/view/home/home.html
+++ b/lab-remil/app/view/home/home.html
@@ -1,3 +1,19 @@
 <section class="home">
-  <h2>Ayo U iz HOME</h2>
+  <div class="inner">
+
+    <create-gallery></create-gallery>
+
+    <div class="clearfix"></div>
+
+    <h2>Galleries</h2>
+
+    <ul>
+      <li ng-repeat="gallery in homeCtrl.galleries" class="gallery-container">
+        <span><strong>name:</strong> {{ gallery.name }}</span>
+        <span><strong>description:</strong> {{ gallery.desc }}</span>
+        <span><strong>id:</strong> {{ gallery._id }}</span>
+      </li>
+    </ul>
+
+  </div>
 </section>
diff --git a/lab-remil/app/view/landing/landing-controller.js b/lab-remil/app/view/landing/landing-controller.js
index 74a0662e..ad4e3b7e 100644
--- a/lab-remil/app/view/landing/landing-controller.js
+++ b/lab-remil/app/view/landing/landing-controller.js
@@ -1,5 +1,7 @@
 'use strict';
 
+require('./_landing.scss');
+
 module.exports = ['$log', '$location', '$rootScope', 'authService', LandingController];
 
 function LandingController($log, $location, authService) {
diff --git a/lab-remil/webpack.config.js b/lab-remil/webpack.config.js
index f29ac22b..6af18fce 100644
--- a/lab-remil/webpack.config.js
+++ b/lab-remil/webpack.config.js
@@ -1,11 +1,14 @@
 'use strict';
 
-require('dotenv').load();
-
+const dotenv = require('dotenv');
 const webpack = require('webpack');
 const HTMLPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
+const production = process.env.NODE_ENV === 'production';
+
+dotenv.load();
+
 module.exports = {
   devtool: 'eval',
   entry: `${__dirname}/app/entry.js`,
@@ -16,7 +19,10 @@ module.exports = {
   plugins: [
     new HTMLPlugin({ template: `${__dirname}/app/index.html` }),
     new ExtractTextPlugin('bundle.css'),
-    new webpack.DefinePlugin({__API_URL__: JSON.stringify(process.env.API_URL)}),
+    new webpack.DefinePlugin({
+      __API_URL__: JSON.stringify(process.env.API_URL),
+      __DEBUG__: JSON.stringify(!production),
+    }),
   ],
   module: {
     rules: [

From 5220c2581c43854dc4b44bcb2247dfd47f5e2a46 Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Thu, 30 Mar 2017 14:15:29 -0700
Subject: [PATCH 05/16] completed functionality and css for gallery item

---
 .../create-gallery/create-gallery.html        |  1 +
 .../gallery/edit-gallery/_edit-gallery.scss   |  0
 .../gallery/edit-gallery/edit-gallery.html    | 21 +++++++
 .../gallery/edit-gallery/edit-gallery.js      | 21 +++++++
 .../gallery/gallery-item/_gallery-item.scss   | 33 ++++++++++
 .../gallery/gallery-item/gallery-item.html    | 23 +++++++
 .../gallery/gallery-item/gallery-item.js      | 22 +++++++
 lab-remil/app/scss/lib/base/_base.scss        | 18 +++++-
 lab-remil/app/scss/lib/layout/_main.scss      |  2 +-
 lab-remil/app/scss/lib/theme/_vars.scss       |  4 +-
 lab-remil/app/service/gallery-service.js      | 62 +++++++++++++++++++
 lab-remil/app/view/home/_home.scss            | 16 +----
 lab-remil/app/view/home/home.html             | 10 +--
 13 files changed, 207 insertions(+), 26 deletions(-)
 create mode 100644 lab-remil/app/component/gallery/edit-gallery/_edit-gallery.scss
 create mode 100644 lab-remil/app/component/gallery/edit-gallery/edit-gallery.html
 create mode 100644 lab-remil/app/component/gallery/edit-gallery/edit-gallery.js
 create mode 100644 lab-remil/app/component/gallery/gallery-item/_gallery-item.scss
 create mode 100644 lab-remil/app/component/gallery/gallery-item/gallery-item.html
 create mode 100644 lab-remil/app/component/gallery/gallery-item/gallery-item.js

diff --git a/lab-remil/app/component/gallery/create-gallery/create-gallery.html b/lab-remil/app/component/gallery/create-gallery/create-gallery.html
index 49cd314d..7ca0203d 100644
--- a/lab-remil/app/component/gallery/create-gallery/create-gallery.html
+++ b/lab-remil/app/component/gallery/create-gallery/create-gallery.html
@@ -16,3 +16,4 @@
     <button class="btn-std" type="submit">create gallery</button>
   </form>
 </section>
+<div class="clearfix"></div>
diff --git a/lab-remil/app/component/gallery/edit-gallery/_edit-gallery.scss b/lab-remil/app/component/gallery/edit-gallery/_edit-gallery.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/lab-remil/app/component/gallery/edit-gallery/edit-gallery.html b/lab-remil/app/component/gallery/edit-gallery/edit-gallery.html
new file mode 100644
index 00000000..17e642c2
--- /dev/null
+++ b/lab-remil/app/component/gallery/edit-gallery/edit-gallery.html
@@ -0,0 +1,21 @@
+<section class="edit">
+  <form class="edit-gallery"
+    name="editGallery"
+    ng-submit="editGalleryCtrl.updateGallery()"
+    novalidate>
+
+    <fieldset>
+      <span class="item-label">name:</span>
+      <input name="name" class="input-std" type="text"
+        ng-model="editGalleryCtrl.gallery.name">
+    </fieldset>
+
+    <fieldset>
+      <span class="item-label">description:</span>
+      <input name="desc" class="input-std" type="text"
+        ng-model="editGalleryCtrl.gallery.desc">
+    </fieldset>
+
+    <button class="btn-std">update</button>
+  </form>
+</section>
diff --git a/lab-remil/app/component/gallery/edit-gallery/edit-gallery.js b/lab-remil/app/component/gallery/edit-gallery/edit-gallery.js
new file mode 100644
index 00000000..5c037cc7
--- /dev/null
+++ b/lab-remil/app/component/gallery/edit-gallery/edit-gallery.js
@@ -0,0 +1,21 @@
+'use strict';
+
+require('./_edit-gallery.scss');
+
+module.exports = {
+  template: require('./edit-gallery.html'),
+  controller: ['$log', 'galleryService', EditGalleryController],
+  controllerAs: 'editGalleryCtrl',
+  bindings: {
+    gallery: '<',
+  },
+};
+
+function EditGalleryController($log, galleryService) {
+  $log.debug('EditGalleryController');
+
+  this.updateGallery = function() {
+    $log.debug('editGalleryCtrl.updateGallery');
+    galleryService.updateGallery(this.gallery._id, this.gallery);
+  };
+}
diff --git a/lab-remil/app/component/gallery/gallery-item/_gallery-item.scss b/lab-remil/app/component/gallery/gallery-item/_gallery-item.scss
new file mode 100644
index 00000000..7f06a530
--- /dev/null
+++ b/lab-remil/app/component/gallery/gallery-item/_gallery-item.scss
@@ -0,0 +1,33 @@
+@import '../../../scss/lib/theme/vars';
+
+.gallery-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: $gutter-std;
+
+  .current-item {
+    border-radius: $border-radius;
+    background: $color-primary * 2.3;
+  }
+
+  .gallery-property {
+    padding: $input-padding;
+
+    &:first-child {
+      padding-bottom: 0;
+    }
+  }
+
+  .item-label {
+    font-weight: 900;
+  }
+
+  .button-container {
+    align-self: flex-end;
+    margin-top: $gutter-sm;
+  }
+
+  span {
+    display: inline-block;
+  }
+}
diff --git a/lab-remil/app/component/gallery/gallery-item/gallery-item.html b/lab-remil/app/component/gallery/gallery-item/gallery-item.html
new file mode 100644
index 00000000..770d5d53
--- /dev/null
+++ b/lab-remil/app/component/gallery/gallery-item/gallery-item.html
@@ -0,0 +1,23 @@
+<li class="gallery-item">
+  <div class="current-item" ng-if="!galleryItemCtrl.showEditGallery">
+    <div class="gallery-property">
+      <span class="item-label">name:</span>
+      <span>{{ galleryItemCtrl.gallery.name }}</span>
+    </div>
+
+    <div class="gallery-property">
+      <span class="item-label">description:</span>
+      <span>{{ galleryItemCtrl.gallery.desc }}</span>
+    </div>
+  </div>
+
+  <edit-gallery ng-if="galleryItemCtrl.showEditGallery" gallery="galleryItemCtrl.gallery"></edit-gallery>
+
+  <div class="button-container">
+    <span
+      ng-click="galleryItemCtrl.showEditGallery = !galleryItemCtrl.showEditGallery"
+      class="btn-sm">edit</span>
+    <span ng-click="galleryItemCtrl.deleteGallery()" class="btn-sm-secondary">delete</span>
+  </div>
+
+</li>
diff --git a/lab-remil/app/component/gallery/gallery-item/gallery-item.js b/lab-remil/app/component/gallery/gallery-item/gallery-item.js
new file mode 100644
index 00000000..1b09377a
--- /dev/null
+++ b/lab-remil/app/component/gallery/gallery-item/gallery-item.js
@@ -0,0 +1,22 @@
+'use strict';
+
+require('./_gallery-item.scss');
+
+module.exports = {
+  template: require('./gallery-item.html'),
+  controller: ['$log', 'galleryService', GalleryItemController],
+  controllerAs: 'galleryItemCtrl',
+  bindings: {
+    gallery: '<',
+  },
+};
+
+function GalleryItemController($log, galleryService) {
+  $log.debug('GalleryItemController');
+
+  this.showEditGallery = false;
+
+  this.deleteGallery = function() {
+    galleryService.deleteGallery(this.gallery._id);
+  };
+}
diff --git a/lab-remil/app/scss/lib/base/_base.scss b/lab-remil/app/scss/lib/base/_base.scss
index 391e610a..8d6add5a 100644
--- a/lab-remil/app/scss/lib/base/_base.scss
+++ b/lab-remil/app/scss/lib/base/_base.scss
@@ -28,11 +28,27 @@ h2 {
 }
 
 .btn-std {
-  padding: $input-padding $input-padding * 6;
+  // padding: $input-padding $input-padding * 6;
+  padding: $input-padding 0;
+  display: inline-block;
+  width: 35vw;
   background: $color-primary;
   color: $white;
   border-radius: $border-radius;
+  margin: 0 auto;
+  text-align: center;
 }
+.btn-sm {
+  @extend .btn-std;
+  width: 20vw;
+}
+.btn-sm-secondary {
+  @extend .btn-sm;
+  background: $color-secondary * .8;
+  color: $color-primary;
+}
+
+
 
 .form {
   margin-top: $gutter-std;
diff --git a/lab-remil/app/scss/lib/layout/_main.scss b/lab-remil/app/scss/lib/layout/_main.scss
index bfe368f4..df54e055 100644
--- a/lab-remil/app/scss/lib/layout/_main.scss
+++ b/lab-remil/app/scss/lib/layout/_main.scss
@@ -1,5 +1,5 @@
 @import '../theme/vars';
 
 main {
-  height: 100vh - ( $height-header * 1.8 );
+  min-height: 100vh - ( $height-header * 1.8 );
 }
diff --git a/lab-remil/app/scss/lib/theme/_vars.scss b/lab-remil/app/scss/lib/theme/_vars.scss
index fcc52d6d..a211df63 100644
--- a/lab-remil/app/scss/lib/theme/_vars.scss
+++ b/lab-remil/app/scss/lib/theme/_vars.scss
@@ -10,5 +10,5 @@ $gutter-sm: $gutter-std / 2;
 $height-header: 8vh;
 
 //:::: ELEMENTS ::::
-$border-radius: 3px;
-$input-padding: 2%;
+$border-radius: 5px;
+$input-padding: 3%;
diff --git a/lab-remil/app/service/gallery-service.js b/lab-remil/app/service/gallery-service.js
index 6c1512d0..fc8805a4 100644
--- a/lab-remil/app/service/gallery-service.js
+++ b/lab-remil/app/service/gallery-service.js
@@ -79,5 +79,67 @@ function galleryService($q, $log, $http, authService) {
     });
   };
 
+  service.updateGallery = function(galleryID, galleryData) {
+    $log.debug('galleryService.updateGallery');
+
+    return authService.getToken()
+    .then( token => {
+      let url = `${__API_URL__}/api/gallery/${galleryID}`;
+      let config = {
+        headers: {
+          Accept: 'application/json',
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+      };
+
+      return $http.put(url, galleryData, config);
+    })
+    .then( res => {
+      for (let i=0; i < service.galleries.length; i++) {
+        let current = service.galleries[i];
+        if (current._id === galleryID) {
+          service.galleries[i] = res.data;
+          break;
+        }
+      }
+
+      return res.data;
+    })
+    .catch( err => {
+      $log.error(err.message);
+      return $q.reject(err);
+    });
+  };
+
+  service.deleteGallery = function(galleryID) {
+    $log.debug('galleryService.deleteGallery');
+
+    return authService.getToken()
+    .then( token => {
+      let url = `${__API_URL__}/api/gallery/${galleryID}`;
+      let config = {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      };
+
+      return $http.delete(url, config);
+    })
+    .then( res => {
+      for (let i=0; i < service.galleries.length; i++) {
+        let current = service.galleries[i];
+        if (current._id === galleryID) {
+          service.galleries.splice(i, 1);
+          break;
+        }
+      }
+    })
+    .catch( err => {
+      $log.error(err.message);
+      return $q.reject(err);
+    });
+  };
+
   return service;
 }
diff --git a/lab-remil/app/view/home/_home.scss b/lab-remil/app/view/home/_home.scss
index aefdcc87..bd6650dc 100644
--- a/lab-remil/app/view/home/_home.scss
+++ b/lab-remil/app/view/home/_home.scss
@@ -1,17 +1,5 @@
 @import '../../scss/lib/theme/vars';
 
-.gallery-container {
-  background: $color-primary * 2.3;
-  border-radius: $border-radius;
-  margin-bottom: $gutter-sm;
-
-  span {
-    display: block;
-    padding: $input-padding;
-    padding-top: 0;
-
-    &:first-child {
-      padding-top: $input-padding;
-    }
-  }
+.home {
+  margin-top: $gutter-std;
 }
diff --git a/lab-remil/app/view/home/home.html b/lab-remil/app/view/home/home.html
index 5ab0791f..77992e51 100644
--- a/lab-remil/app/view/home/home.html
+++ b/lab-remil/app/view/home/home.html
@@ -1,18 +1,12 @@
 <section class="home">
   <div class="inner">
 
+    <h2>Create New Swaggerry</h2>
     <create-gallery></create-gallery>
 
-    <div class="clearfix"></div>
-
     <h2>Galleries</h2>
-
     <ul>
-      <li ng-repeat="gallery in homeCtrl.galleries" class="gallery-container">
-        <span><strong>name:</strong> {{ gallery.name }}</span>
-        <span><strong>description:</strong> {{ gallery.desc }}</span>
-        <span><strong>id:</strong> {{ gallery._id }}</span>
-      </li>
+      <gallery-item ng-repeat="item in homeCtrl.galleries" gallery="item"></gallery-item>
     </ul>
 
   </div>

From 20e1bd78a423e600a68bca86f9e96e2fed1537dd Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Thu, 30 Mar 2017 16:53:46 -0700
Subject: [PATCH 06/16] completed css for edit-gallery

---
 .../gallery/edit-gallery/_edit-gallery.scss   | 26 ++++++++++++++
 .../gallery/edit-gallery/edit-gallery.html    | 35 ++++++++++++++-----
 .../gallery/gallery-item/_gallery-item.scss   |  4 ---
 .../gallery/gallery-item/gallery-item.html    |  9 +++--
 lab-remil/app/component/navbar/_navbar.scss   |  1 +
 lab-remil/app/scss/lib/base/_base.scss        |  8 +++++
 lab-remil/app/scss/lib/theme/_vars.scss       |  2 +-
 7 files changed, 66 insertions(+), 19 deletions(-)

diff --git a/lab-remil/app/component/gallery/edit-gallery/_edit-gallery.scss b/lab-remil/app/component/gallery/edit-gallery/_edit-gallery.scss
index e69de29b..03290076 100644
--- a/lab-remil/app/component/gallery/edit-gallery/_edit-gallery.scss
+++ b/lab-remil/app/component/gallery/edit-gallery/_edit-gallery.scss
@@ -0,0 +1,26 @@
+@import '../../../scss/lib/theme/vars';
+@import '../gallery-item/gallery-item';
+
+.edit-gallery {
+  @extend .gallery-item;
+
+  fieldset {
+
+    input {
+      background: $color-primary * 2.5;
+      border: 1px solid $color-primary;
+    }
+
+    &:first-child {
+      input {
+        width: 88%;
+      }
+    }
+    &:last-child {
+      input {
+        width: 79%;
+      }
+    }
+  }
+
+}
diff --git a/lab-remil/app/component/gallery/edit-gallery/edit-gallery.html b/lab-remil/app/component/gallery/edit-gallery/edit-gallery.html
index 17e642c2..bec87b3a 100644
--- a/lab-remil/app/component/gallery/edit-gallery/edit-gallery.html
+++ b/lab-remil/app/component/gallery/edit-gallery/edit-gallery.html
@@ -3,19 +3,36 @@
     name="editGallery"
     ng-submit="editGalleryCtrl.updateGallery()"
     novalidate>
+    <div class="current-item">
+      <fieldset class="gallery-property">
+        <span class="item-label">name:</span>
 
-    <fieldset>
-      <span class="item-label">name:</span>
-      <input name="name" class="input-std" type="text"
+        <input name="name" class="input-sm" type="text"
         ng-model="editGalleryCtrl.gallery.name">
-    </fieldset>
+      </fieldset>
 
-    <fieldset>
-      <span class="item-label">description:</span>
-      <input name="desc" class="input-std" type="text"
+      <fieldset class="gallery-property">
+        <span class="item-label">description:</span>
+        <input name="desc" class="input-sm" type="text"
         ng-model="editGalleryCtrl.gallery.desc">
-    </fieldset>
+      </fieldset>
 
-    <button class="btn-std">update</button>
+    </div>
+    <div class="button-container">
+
+      <button class="btn-sm">update</button>
+    </div>
   </form>
 </section>
+
+<!-- <div class="current-item" ng-if="!galleryItemCtrl.showEditGallery">
+  <div class="gallery-property">
+    <span class="item-label">name:</span>
+    <span>{{ galleryItemCtrl.gallery.name }}</span>
+  </div>
+
+  <div class="gallery-property">
+    <span class="item-label">description:</span>
+    <span>{{ galleryItemCtrl.gallery.desc }}</span>
+  </div>
+</div> -->
diff --git a/lab-remil/app/component/gallery/gallery-item/_gallery-item.scss b/lab-remil/app/component/gallery/gallery-item/_gallery-item.scss
index 7f06a530..78fd1d31 100644
--- a/lab-remil/app/component/gallery/gallery-item/_gallery-item.scss
+++ b/lab-remil/app/component/gallery/gallery-item/_gallery-item.scss
@@ -26,8 +26,4 @@
     align-self: flex-end;
     margin-top: $gutter-sm;
   }
-
-  span {
-    display: inline-block;
-  }
 }
diff --git a/lab-remil/app/component/gallery/gallery-item/gallery-item.html b/lab-remil/app/component/gallery/gallery-item/gallery-item.html
index 770d5d53..bbaebffb 100644
--- a/lab-remil/app/component/gallery/gallery-item/gallery-item.html
+++ b/lab-remil/app/component/gallery/gallery-item/gallery-item.html
@@ -13,11 +13,10 @@
 
   <edit-gallery ng-if="galleryItemCtrl.showEditGallery" gallery="galleryItemCtrl.gallery"></edit-gallery>
 
-  <div class="button-container">
-    <span
-      ng-click="galleryItemCtrl.showEditGallery = !galleryItemCtrl.showEditGallery"
-      class="btn-sm">edit</span>
-    <span ng-click="galleryItemCtrl.deleteGallery()" class="btn-sm-secondary">delete</span>
+  <div class="button-container" ng-if="!galleryItemCtrl.showEditGallery">
+    <button
+      ng-click="galleryItemCtrl.showEditGallery = !galleryItemCtrl.showEditGallery" class="btn-sm">edit</button>
+    <button ng-click="galleryItemCtrl.deleteGallery()" class="btn-sm-secondary">delete</button>
   </div>
 
 </li>
diff --git a/lab-remil/app/component/navbar/_navbar.scss b/lab-remil/app/component/navbar/_navbar.scss
index 425a1e34..af1f4a6d 100644
--- a/lab-remil/app/component/navbar/_navbar.scss
+++ b/lab-remil/app/component/navbar/_navbar.scss
@@ -29,5 +29,6 @@ $header-font-size: 3vh;
     margin-top: $height-header * .3;
     background: $color-secondary;
     color: $color-primary;
+    padding: 0;
   }
 }
diff --git a/lab-remil/app/scss/lib/base/_base.scss b/lab-remil/app/scss/lib/base/_base.scss
index 8d6add5a..0cb60263 100644
--- a/lab-remil/app/scss/lib/base/_base.scss
+++ b/lab-remil/app/scss/lib/base/_base.scss
@@ -27,6 +27,13 @@ h2 {
   border-radius: $border-radius;
 }
 
+.input-sm {
+  @extend .input-std;
+  margin: 0;
+  // padding: 0;
+  padding: $input-padding/2 $input-padding;
+}
+
 .btn-std {
   // padding: $input-padding $input-padding * 6;
   padding: $input-padding 0;
@@ -41,6 +48,7 @@ h2 {
 .btn-sm {
   @extend .btn-std;
   width: 20vw;
+  padding: $input-padding/2 0;
 }
 .btn-sm-secondary {
   @extend .btn-sm;
diff --git a/lab-remil/app/scss/lib/theme/_vars.scss b/lab-remil/app/scss/lib/theme/_vars.scss
index a211df63..c4e634bb 100644
--- a/lab-remil/app/scss/lib/theme/_vars.scss
+++ b/lab-remil/app/scss/lib/theme/_vars.scss
@@ -11,4 +11,4 @@ $height-header: 8vh;
 
 //:::: ELEMENTS ::::
 $border-radius: 5px;
-$input-padding: 3%;
+$input-padding: 1.5vh;

From 3ee75ec7e049269e6efa2e9486f8cb5c2d24e043 Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Mon, 3 Apr 2017 15:58:03 -0700
Subject: [PATCH 07/16] completed structure and css

---
 .../_thumbnail-container.scss                 | 10 +++++
 .../thumbnail-container.html                  |  8 ++++
 .../thumbnail-container.js                    | 11 +++++
 .../gallery/thumbnail/_thumbnail.scss         | 17 ++++++++
 .../gallery/thumbnail/thumbnail.html          |  5 +++
 .../component/gallery/thumbnail/thumbnail.js  | 20 +++++++++
 .../gallery/upload-pic/_upload-pic.scss       | 29 +++++++++++++
 .../gallery/upload-pic/upload-pic.html        | 23 ++++++++++
 .../gallery/upload-pic/upload-pic.js          | 27 ++++++++++++
 lab-remil/app/entry.js                        | 12 ++----
 lab-remil/app/scss/lib/base/_base.scss        |  6 ++-
 lab-remil/app/service/pic-service.js          | 43 +++++++++++++++++++
 lab-remil/app/view/home/home-controller.js    | 15 +++++--
 lab-remil/app/view/home/home.html             |  9 +++-
 lab-remil/package.json                        |  1 +
 15 files changed, 220 insertions(+), 16 deletions(-)
 create mode 100644 lab-remil/app/component/gallery/thumbnail-container/_thumbnail-container.scss
 create mode 100644 lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.html
 create mode 100644 lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.js
 create mode 100644 lab-remil/app/component/gallery/thumbnail/_thumbnail.scss
 create mode 100644 lab-remil/app/component/gallery/thumbnail/thumbnail.html
 create mode 100644 lab-remil/app/component/gallery/thumbnail/thumbnail.js
 create mode 100644 lab-remil/app/component/gallery/upload-pic/_upload-pic.scss
 create mode 100644 lab-remil/app/component/gallery/upload-pic/upload-pic.html
 create mode 100644 lab-remil/app/component/gallery/upload-pic/upload-pic.js
 create mode 100644 lab-remil/app/service/pic-service.js

diff --git a/lab-remil/app/component/gallery/thumbnail-container/_thumbnail-container.scss b/lab-remil/app/component/gallery/thumbnail-container/_thumbnail-container.scss
new file mode 100644
index 00000000..8a72d479
--- /dev/null
+++ b/lab-remil/app/component/gallery/thumbnail-container/_thumbnail-container.scss
@@ -0,0 +1,10 @@
+@import '../../../scss/lib/theme/vars';
+
+.thumbnail-container {
+  display: flex;
+  flex-direction: column;
+
+  & > * {
+    margin-bottom: $gutter-std;
+  }
+}
diff --git a/lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.html b/lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.html
new file mode 100644
index 00000000..8bdfb34f
--- /dev/null
+++ b/lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.html
@@ -0,0 +1,8 @@
+<div class="thumbnail-container">
+  <h2>{{ thumbnailContainerCtrl.gallery.name }}</h2>
+  <upload-pic gallery="thumbnailContainerCtrl.gallery"></upload-pic>
+
+  <div class="thumbs">
+    <thumbnail ng-repeat="item in thumbnailContainerCtrl.gallery.pics" pic="item"></thumbnail>
+  </div>
+</div>
diff --git a/lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.js b/lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.js
new file mode 100644
index 00000000..fc7ae7cb
--- /dev/null
+++ b/lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.js
@@ -0,0 +1,11 @@
+'use strict';
+
+require('./_thumbnail-container.scss');
+
+module.exports = {
+  template: require('./thumbnail-container.html'),
+  controllerAs: 'thumbnailContainerCtrl',
+  bindings: {
+    gallery: '<',
+  },
+};
diff --git a/lab-remil/app/component/gallery/thumbnail/_thumbnail.scss b/lab-remil/app/component/gallery/thumbnail/_thumbnail.scss
new file mode 100644
index 00000000..ead8a1bd
--- /dev/null
+++ b/lab-remil/app/component/gallery/thumbnail/_thumbnail.scss
@@ -0,0 +1,17 @@
+@import '../../../scss/lib/theme/vars';
+
+.thumbnail {
+  display: flex;
+  flex-direction: column;
+
+  img{
+    width: 100%;
+    margin-bottom: $gutter-sm;
+  }
+
+  button {
+    align-self: flex-end;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
diff --git a/lab-remil/app/component/gallery/thumbnail/thumbnail.html b/lab-remil/app/component/gallery/thumbnail/thumbnail.html
new file mode 100644
index 00000000..aeedf8f4
--- /dev/null
+++ b/lab-remil/app/component/gallery/thumbnail/thumbnail.html
@@ -0,0 +1,5 @@
+<div class="thumbnail">
+  <img ng-src="{{ thumbnailCtrl.pic.imageURI }}" alt="{{ thumbnailCtrl.pic.desc }}">
+  <button class="btn-std" ng-click="thumbnailCtrl.deletePic()">delete</button>
+  <!-- TODO:  build out the delete service/controller methods -->
+</div>
diff --git a/lab-remil/app/component/gallery/thumbnail/thumbnail.js b/lab-remil/app/component/gallery/thumbnail/thumbnail.js
new file mode 100644
index 00000000..e310d510
--- /dev/null
+++ b/lab-remil/app/component/gallery/thumbnail/thumbnail.js
@@ -0,0 +1,20 @@
+'use strict';
+
+require('./_thumbnail.scss');
+
+module.exports = {
+  template: require('./thumbnail.html'),
+  controller: ['$log', 'picService', ThumbnailController],
+  controllerAs: 'thumbnailCtrl',
+  bindings: {
+    pic: '<',
+  },
+};
+
+function ThumbnailController($log, picService) {
+  $log.debug('ThumbnailController');
+
+  this.deletePic = function() {
+    $log.debug('thumbnailCtrl.deletePic');
+  };
+}
diff --git a/lab-remil/app/component/gallery/upload-pic/_upload-pic.scss b/lab-remil/app/component/gallery/upload-pic/_upload-pic.scss
new file mode 100644
index 00000000..7d937d96
--- /dev/null
+++ b/lab-remil/app/component/gallery/upload-pic/_upload-pic.scss
@@ -0,0 +1,29 @@
+@import '../../../scss/lib/theme/vars';
+
+.upload-pic {
+
+  h3 {
+    margin-bottom: $gutter-sm;
+  }
+  input {
+    background: $color-primary * 2.3;
+    padding-top: $input-padding/2;
+    padding-bottom: $input-padding/2;
+    color: $white;
+  }
+
+  .upload-controls {
+    display: flex;
+    justify-content: flex-end;
+
+    p {
+      padding: $input-padding;
+    }
+
+    button {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+  }
+}
diff --git a/lab-remil/app/component/gallery/upload-pic/upload-pic.html b/lab-remil/app/component/gallery/upload-pic/upload-pic.html
new file mode 100644
index 00000000..06e2886a
--- /dev/null
+++ b/lab-remil/app/component/gallery/upload-pic/upload-pic.html
@@ -0,0 +1,23 @@
+<section class="upload-pic">
+  <form
+    ng-submit="uploadPicCtrl.uploadPic()"
+    novalidate>
+
+    <h3 class="underline">upload new swag</h3>
+
+    <fieldset>
+      <input class="input-std" type="text" ng-model="uploadPicCtrl.pic.name" placeholder="name">
+      <input class="input-std" type="text" ng-model="uploadPicCtrl.pic.desc" placeholder="desc">
+    </fieldset>
+
+    <div class="upload-controls">
+      <p class="grab-img underline"
+        ngf-select
+        ng-model="uploadPicCtrl.pic.file">
+        select dat swag to upload
+      </p>
+
+      <button class="btn-std">upload</button>
+    </div>
+  </form>
+</section>
diff --git a/lab-remil/app/component/gallery/upload-pic/upload-pic.js b/lab-remil/app/component/gallery/upload-pic/upload-pic.js
new file mode 100644
index 00000000..e16e821e
--- /dev/null
+++ b/lab-remil/app/component/gallery/upload-pic/upload-pic.js
@@ -0,0 +1,27 @@
+'use strict';
+
+require('./_upload-pic.scss');
+
+module.exports = {
+  template: require('./upload-pic.html'),
+  controller: ['$log', 'picService', UploadPicController],
+  controllerAs: 'uploadPicCtrl',
+  bindings: {
+    gallery: '<',
+  },
+};
+
+function UploadPicController($log, picService) {
+  $log.debug('UploadPicController');
+
+  this.pic = {};
+
+  this.uploadPic = function() {
+    picService.uploadGalleryPic(this.gallery, this.pic)
+    .then( () => {
+      this.pic.name = null;
+      this.pic.desc = null;
+      this.pic.file = null;
+    });
+  };
+}
diff --git a/lab-remil/app/entry.js b/lab-remil/app/entry.js
index 5bb9ff3e..80b6c777 100644
--- a/lab-remil/app/entry.js
+++ b/lab-remil/app/entry.js
@@ -9,16 +9,10 @@ const
   pascalcase = require('pascalcase'),
   uiRouter = require('angular-ui-router'),
   ngTouch = require('angular-touch'),
-  ngAnimate = require('angular-animate');
+  ngAnimate = require('angular-animate'),
+  ngFileUpload = require('ng-file-upload');
 
-const ayogram = angular.module('ayogram', [ngTouch, ngAnimate, uiRouter]);
-
-// const angularLoaderObject = {
-//   config: {
-//     dir: './config',
-//     fn: file => ay
-//   },
-// };
+const ayogram = angular.module('ayogram', [ngTouch, ngAnimate, uiRouter, ngFileUpload]);
 
 
 let context = require.context('./config/', true, /\.js$/);
diff --git a/lab-remil/app/scss/lib/base/_base.scss b/lab-remil/app/scss/lib/base/_base.scss
index 0cb60263..8a674733 100644
--- a/lab-remil/app/scss/lib/base/_base.scss
+++ b/lab-remil/app/scss/lib/base/_base.scss
@@ -56,8 +56,6 @@ h2 {
   color: $color-primary;
 }
 
-
-
 .form {
   margin-top: $gutter-std;
 
@@ -69,3 +67,7 @@ h2 {
     float: right;
   }
 }
+
+.underline {
+  text-decoration: underline;
+}
diff --git a/lab-remil/app/service/pic-service.js b/lab-remil/app/service/pic-service.js
new file mode 100644
index 00000000..ccad4183
--- /dev/null
+++ b/lab-remil/app/service/pic-service.js
@@ -0,0 +1,43 @@
+'use strict';
+
+module.exports = ['$q', '$log', '$http', 'Upload', 'authService', picService];
+
+function picService($q, $log, $http, Upload, authService) {
+  $log.debug('picService');
+
+  let service = {};
+
+  service.uploadGalleryPic = function(galleryData, picData) {
+    $log.debug('service.uploadGalleryPic');
+
+    return authService.getToken()
+    .then( token => {
+      let url = `${__API_URL__}/api/gallery/${galleryData._id}/pic`;
+      let headers = {
+        Authorization: `Bearer ${token}`,
+        Accept: 'application/json',
+      };
+
+      return Upload.upload({
+        url,
+        headers,
+        method: 'POST',
+        data: {
+          name: picData.name,
+          desc: picData.desc,
+          file: picData.file,
+        },
+      });
+    })
+    .then( res => {
+      galleryData.pics.unshift(res.data);
+      return res.data;
+    })
+    .catch( err => {
+      $log.error(err.message);
+      return $q.reject(err);
+    });
+  };
+
+  return service;
+}
diff --git a/lab-remil/app/view/home/home-controller.js b/lab-remil/app/view/home/home-controller.js
index 4640d170..22c2c65c 100644
--- a/lab-remil/app/view/home/home-controller.js
+++ b/lab-remil/app/view/home/home-controller.js
@@ -10,10 +10,17 @@ function HomeController($log, $rootScope, galleryService) {
   this.galleries = [];
 
   this.fetchGalleries = function() {
-    galleryService.fetchGalleries()
-    .then( galleries => {
-      this.galleries = galleries;
-    });
+   galleryService.fetchGalleries()
+   .then( galleries => {
+     this.galleries = galleries;
+     this.currentGallery = galleries[0];
+   });
+ };
+
+  this.galleryDeleteDone = function(gallery) {
+    if (this.currentGallery._id === gallery._id) {
+      this.currentGallery = null;
+    }
   };
 
   this.fetchGalleries();
diff --git a/lab-remil/app/view/home/home.html b/lab-remil/app/view/home/home.html
index 77992e51..db1656bc 100644
--- a/lab-remil/app/view/home/home.html
+++ b/lab-remil/app/view/home/home.html
@@ -6,8 +6,15 @@ <h2>Create New Swaggerry</h2>
 
     <h2>Galleries</h2>
     <ul>
-      <gallery-item ng-repeat="item in homeCtrl.galleries" gallery="item"></gallery-item>
+      <gallery-item
+        ng-repeat="item in homeCtrl.galleries"
+        gallery="item"
+        delete-done="homeCtrl.galleryDeleteDone(galleryData)"
+        ng-click="homeCtrl.currentGallery = item"
+        ></gallery-item>
     </ul>
 
+    <thumbnail-container ng-if="homeCtrl.currentGallery" gallery="homeCtrl.currentGallery"></thumbnail-container>
+
   </div>
 </section>
diff --git a/lab-remil/package.json b/lab-remil/package.json
index 92bca9e9..f8e442f4 100644
--- a/lab-remil/package.json
+++ b/lab-remil/package.json
@@ -30,6 +30,7 @@
     "file-loader": "^0.10.1",
     "html-loader": "^0.4.5",
     "html-webpack-plugin": "^2.28.0",
+    "ng-file-upload": "^12.2.13",
     "node-sass": "^4.5.1",
     "pascalcase": "^0.1.1",
     "resolve-url-loader": "^2.0.2",

From b0aaa47c39912eff9b170432553e905680d613a3 Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Mon, 3 Apr 2017 19:05:23 -0700
Subject: [PATCH 08/16] finished pic delete

---
 .../thumbnail-container.html                  |  2 +-
 .../gallery/thumbnail/thumbnail.html          |  1 -
 .../component/gallery/thumbnail/thumbnail.js  |  3 ++
 lab-remil/app/service/pic-service.js          | 30 +++++++++++++++++++
 4 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.html b/lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.html
index 8bdfb34f..104b5c83 100644
--- a/lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.html
+++ b/lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.html
@@ -3,6 +3,6 @@ <h2>{{ thumbnailContainerCtrl.gallery.name }}</h2>
   <upload-pic gallery="thumbnailContainerCtrl.gallery"></upload-pic>
 
   <div class="thumbs">
-    <thumbnail ng-repeat="item in thumbnailContainerCtrl.gallery.pics" pic="item"></thumbnail>
+    <thumbnail ng-repeat="item in thumbnailContainerCtrl.gallery.pics" pic="item" gallery="thumbnailContainerCtrl.gallery"></thumbnail>
   </div>
 </div>
diff --git a/lab-remil/app/component/gallery/thumbnail/thumbnail.html b/lab-remil/app/component/gallery/thumbnail/thumbnail.html
index aeedf8f4..3554de0f 100644
--- a/lab-remil/app/component/gallery/thumbnail/thumbnail.html
+++ b/lab-remil/app/component/gallery/thumbnail/thumbnail.html
@@ -1,5 +1,4 @@
 <div class="thumbnail">
   <img ng-src="{{ thumbnailCtrl.pic.imageURI }}" alt="{{ thumbnailCtrl.pic.desc }}">
   <button class="btn-std" ng-click="thumbnailCtrl.deletePic()">delete</button>
-  <!-- TODO:  build out the delete service/controller methods -->
 </div>
diff --git a/lab-remil/app/component/gallery/thumbnail/thumbnail.js b/lab-remil/app/component/gallery/thumbnail/thumbnail.js
index e310d510..51c38cb8 100644
--- a/lab-remil/app/component/gallery/thumbnail/thumbnail.js
+++ b/lab-remil/app/component/gallery/thumbnail/thumbnail.js
@@ -8,6 +8,7 @@ module.exports = {
   controllerAs: 'thumbnailCtrl',
   bindings: {
     pic: '<',
+    gallery: '<',
   },
 };
 
@@ -16,5 +17,7 @@ function ThumbnailController($log, picService) {
 
   this.deletePic = function() {
     $log.debug('thumbnailCtrl.deletePic');
+
+    picService.deletePic(this.gallery,this.pic._id);
   };
 }
diff --git a/lab-remil/app/service/pic-service.js b/lab-remil/app/service/pic-service.js
index ccad4183..1edd4b94 100644
--- a/lab-remil/app/service/pic-service.js
+++ b/lab-remil/app/service/pic-service.js
@@ -39,5 +39,35 @@ function picService($q, $log, $http, Upload, authService) {
     });
   };
 
+  service.deletePic = function(galleryData, picID) {
+    $log.debug('service.deletePic');
+
+    // /api/gallery/:galleryID/pic/:picID
+    return authService.getToken()
+    .then( token => {
+      let url = `${__API_URL__}/api/gallery/${galleryData._id}/pic/${picID}`;
+      let config = {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      };
+
+      return $http.delete(url, config);
+    })
+    .then( () => {
+      for (let i=0; i < galleryData.pics.length; i++) {
+        if (galleryData.pics[i]._id === picID) {
+          galleryData.pics.splice(i, 1);
+          break;
+        }
+      }
+    })
+    .catch( err => {
+      $log.error(err.message);
+      return $q.reject(err);
+    });
+
+  };
+
   return service;
 }

From 78f6be86f7590e2965936db45c4cb8679b11cf65 Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Tue, 4 Apr 2017 17:04:25 -0700
Subject: [PATCH 09/16] completed test for gallery delete

---
 lab-remil/app/service/gallery-service.js |  1 +
 lab-remil/karma.conf.js                  | 37 +++++++++++-
 lab-remil/oldkarma.conf.js               | 26 +++++++++
 lab-remil/package.json                   |  1 +
 lab-remil/test/auth-service-test.js      | 31 ++++++++++
 lab-remil/test/ex-test.js                |  7 +++
 lab-remil/test/gallery-service-test.js   | 74 ++++++++++++++++++++++++
 7 files changed, 174 insertions(+), 3 deletions(-)
 create mode 100644 lab-remil/oldkarma.conf.js
 create mode 100644 lab-remil/test/auth-service-test.js
 create mode 100644 lab-remil/test/ex-test.js
 create mode 100644 lab-remil/test/gallery-service-test.js

diff --git a/lab-remil/app/service/gallery-service.js b/lab-remil/app/service/gallery-service.js
index fc8805a4..0dd9b0ce 100644
--- a/lab-remil/app/service/gallery-service.js
+++ b/lab-remil/app/service/gallery-service.js
@@ -121,6 +121,7 @@ function galleryService($q, $log, $http, authService) {
       let config = {
         headers: {
           Authorization: `Bearer ${token}`,
+          Accept:'application/json',
         },
       };
 
diff --git a/lab-remil/karma.conf.js b/lab-remil/karma.conf.js
index 58de3786..1582766f 100644
--- a/lab-remil/karma.conf.js
+++ b/lab-remil/karma.conf.js
@@ -1,12 +1,14 @@
-const webpackConfig = require('./webpack.config.js');
+const webpack = require('./webpack.config.js');
+delete webpack.entry;
 
-module.exports = function(config) {
+const my = function(config) {
   config.set({
-    webpack: webpackConfig,
+    webpack,
     basePath: '',
     frameworks: ['jasmine'],
     files: [
       'test/**/*-test.js',
+      'node_modules/angular-mocks/angular-mocks.js',
     ],
     exclude: [
     ],
@@ -23,3 +25,32 @@ module.exports = function(config) {
     concurrency: Infinity,
   });
 };
+
+const cf = function(config) {
+  config.set({
+    webpack,
+    basePath: '',
+    frameworks: ['jasmine'],
+    files: [
+      'app/entry.js',
+      'test/**/*-test.js',
+      'node_modules/angular-mocks/angular-mocks.js',
+    ],
+    exclude: [
+    ],
+    preprocessors: {
+      'test/**/*-test.js': ['webpack'],
+      'app/entry.js': ['webpack'],
+    },
+    reporters: ['mocha'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    concurrency: Infinity,
+  });
+};
+
+module.exports = cf;
diff --git a/lab-remil/oldkarma.conf.js b/lab-remil/oldkarma.conf.js
new file mode 100644
index 00000000..067f1cbd
--- /dev/null
+++ b/lab-remil/oldkarma.conf.js
@@ -0,0 +1,26 @@
+const webpackConfig = require('./webpack.config.js');
+
+module.exports = function(config) {
+  config.set({
+    webpack: webpackConfig,
+    basePath: '',
+    frameworks: ['jasmine'],
+    files: [
+      'test/**/*-test.js',
+      'node_modules/angular-mocks/angular-mocks.js',
+    ],
+    exclude: [
+    ],
+    preprocessors: {
+      'test/**/*-test.js': ['webpack'],
+    },
+    reporters: ['mocha'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['PhantomJS'],
+    singleRun: false,
+    concurrency: Infinity,
+  });
+};
diff --git a/lab-remil/package.json b/lab-remil/package.json
index f8e442f4..60923779 100644
--- a/lab-remil/package.json
+++ b/lab-remil/package.json
@@ -45,6 +45,7 @@
     "eslint": "^3.18.0",
     "jasmine-core": "^2.5.2",
     "karma": "^1.5.0",
+    "karma-chrome-launcher": "^2.0.0",
     "karma-jasmine": "^1.1.0",
     "karma-mocha-reporter": "^2.2.3",
     "karma-phantomjs-launcher": "^1.0.4",
diff --git a/lab-remil/test/auth-service-test.js b/lab-remil/test/auth-service-test.js
new file mode 100644
index 00000000..e2225085
--- /dev/null
+++ b/lab-remil/test/auth-service-test.js
@@ -0,0 +1,31 @@
+'use strict';
+
+describe('Auth Service', function() {
+
+  beforeEach(() => {
+    angular.mock.module('ayogram');
+    angular.mock.inject(($rootScope, authService, $window, $httpBackend) => {
+      this.$window = $window;
+      this.$rootScope = $rootScope;
+      this.authService = authService;
+      this.$httpBackend = $httpBackend;
+    });
+  });
+
+  describe('authService.getToken()', () => {
+    it('should return a token', () => {
+      this.authService.token = null;
+      this.$window.localStorage.setItem('token', 'test token');
+
+      this.authService.getToken()
+      .then( token => {
+        expect(token).toEqual('test token');
+      })
+      .catch( err => {
+        expect(err).toEqual(null);
+      });
+
+      this.$rootScope.$apply();
+    });
+  });
+});
diff --git a/lab-remil/test/ex-test.js b/lab-remil/test/ex-test.js
new file mode 100644
index 00000000..a41ce3fa
--- /dev/null
+++ b/lab-remil/test/ex-test.js
@@ -0,0 +1,7 @@
+'use strict';
+
+describe('Example Test', function() {
+  it('should pass this test wit swag', () => {
+    expect(!!'swag').toEqual(true);
+  });
+});
diff --git a/lab-remil/test/gallery-service-test.js b/lab-remil/test/gallery-service-test.js
new file mode 100644
index 00000000..7c4fd78c
--- /dev/null
+++ b/lab-remil/test/gallery-service-test.js
@@ -0,0 +1,74 @@
+'use strict';
+
+describe('Gallery Service', function() {
+
+  beforeEach(() => {
+    angular.mock.module('ayogram');
+    angular.mock.inject(($rootScope, authService, galleryService, $window, $httpBackend) => {
+      this.$window = $window;
+      this.$rootScope = $rootScope;
+      this.authService = authService;
+      this.galleryService = galleryService;
+      this.$httpBackend = $httpBackend;
+    });
+  });
+
+  describe('galleryService.createGallery()', () => {
+    it('should create a new swag gallery', () => {
+      let galleryData = {
+        name: 'swaggy gallery',
+        desc: 'swaggy description',
+      };
+
+      let headers = {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+        Authorization: 'Bearer test token',
+      };
+
+      this.$httpBackend.expectPOST(`${__API_URL__}/api/gallery`, galleryData, headers)
+      .respond(200, {
+        _id: '12345',
+        username: 'ayoplaya',
+        name: galleryData.name,
+        desc: galleryData.desc,
+        pics: [],
+      });
+
+      this.galleryService.createGallery(galleryData);
+      this.$httpBackend.flush();
+      this.$rootScope.$apply();
+    });
+  });
+
+  describe('galleryService.deleteGallery()', () => {
+    it('should create delete a gallery', () => {
+      let galleryData = {
+        _id: '12345',
+        name: 'swaggy gallery',
+        desc: 'swaggy description',
+      };
+
+      let headers = {
+        Authorization: 'Bearer test token',
+        Accept:'application/json',
+      };
+
+      let resHeaders =  {
+        Authorization:'Bearer test token',
+        Accept:'application/json',
+      };
+
+      console.log('delete headers', headers);
+
+      this.$httpBackend.expectDELETE(`${__API_URL__}/api/gallery/${galleryData._id}`, headers)
+      .respond(204, resHeaders);
+
+      this.galleryService.deleteGallery(galleryData._id);
+      this.$httpBackend.flush();
+      this.$rootScope.$apply();
+    });
+  });
+
+  // TODO: create another test for deleting a gallery
+});

From 1e852acd78ba23315489174a80de721f618562d2 Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Wed, 5 Apr 2017 18:03:08 -0700
Subject: [PATCH 10/16] added deleteDone data binding to gallery-item

---
 .../gallery/gallery-item/gallery-item.js      |  8 ++-
 lab-remil/app/service/gallery-service.js      |  6 +-
 lab-remil/app/view/home/home-controller.js    |  1 +
 lab-remil/app/view/home/home.html             |  2 +-
 lab-remil/package.json                        |  2 +-
 lab-remil/test/gallery-item-component-test.js | 55 +++++++++++++++++++
 lab-remil/test/gallery-service-test.js        |  2 -
 7 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 lab-remil/test/gallery-item-component-test.js

diff --git a/lab-remil/app/component/gallery/gallery-item/gallery-item.js b/lab-remil/app/component/gallery/gallery-item/gallery-item.js
index 1b09377a..b6c1d988 100644
--- a/lab-remil/app/component/gallery/gallery-item/gallery-item.js
+++ b/lab-remil/app/component/gallery/gallery-item/gallery-item.js
@@ -8,6 +8,7 @@ module.exports = {
   controllerAs: 'galleryItemCtrl',
   bindings: {
     gallery: '<',
+    deleteDone: '&',
   },
 };
 
@@ -17,6 +18,11 @@ function GalleryItemController($log, galleryService) {
   this.showEditGallery = false;
 
   this.deleteGallery = function() {
-    galleryService.deleteGallery(this.gallery._id);
+    console.log(this);
+    galleryService.deleteGallery(this.gallery._id)
+    .then(() => {
+      this.deleteDone(this.gallery);
+    });
+
   };
 }
diff --git a/lab-remil/app/service/gallery-service.js b/lab-remil/app/service/gallery-service.js
index 0dd9b0ce..91fa372a 100644
--- a/lab-remil/app/service/gallery-service.js
+++ b/lab-remil/app/service/gallery-service.js
@@ -132,7 +132,7 @@ function galleryService($q, $log, $http, authService) {
         let current = service.galleries[i];
         if (current._id === galleryID) {
           service.galleries.splice(i, 1);
-          break;
+          return res.data;
         }
       }
     })
@@ -142,5 +142,9 @@ function galleryService($q, $log, $http, authService) {
     });
   };
 
+  service.getGalleryState = function() {
+    return service.galleries;
+  };
+
   return service;
 }
diff --git a/lab-remil/app/view/home/home-controller.js b/lab-remil/app/view/home/home-controller.js
index 22c2c65c..63f7607f 100644
--- a/lab-remil/app/view/home/home-controller.js
+++ b/lab-remil/app/view/home/home-controller.js
@@ -18,6 +18,7 @@ function HomeController($log, $rootScope, galleryService) {
  };
 
   this.galleryDeleteDone = function(gallery) {
+    console.log('delete done gallery', gallery);
     if (this.currentGallery._id === gallery._id) {
       this.currentGallery = null;
     }
diff --git a/lab-remil/app/view/home/home.html b/lab-remil/app/view/home/home.html
index db1656bc..a0c0b4aa 100644
--- a/lab-remil/app/view/home/home.html
+++ b/lab-remil/app/view/home/home.html
@@ -9,7 +9,7 @@ <h2>Galleries</h2>
       <gallery-item
         ng-repeat="item in homeCtrl.galleries"
         gallery="item"
-        delete-done="homeCtrl.galleryDeleteDone(galleryData)"
+        delete-done="homeCtrl.galleryDeleteDone(item)"
         ng-click="homeCtrl.currentGallery = item"
         ></gallery-item>
     </ul>
diff --git a/lab-remil/package.json b/lab-remil/package.json
index 60923779..3f853e8a 100644
--- a/lab-remil/package.json
+++ b/lab-remil/package.json
@@ -7,7 +7,7 @@
     "build": "./node_modules/webpack/bin/webpack.js",
     "watch": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot",
     "lint": "./node_modules/eslint/bin/eslint.js .",
-    "test-watch": "./node_modules/karma/bin/karma start",
+    "test-watch": "./node_modules/karma/bin/karma start --run-watch",
     "test": "./node_modules/karma/bin/karma start --single-run"
   },
   "keywords": [],
diff --git a/lab-remil/test/gallery-item-component-test.js b/lab-remil/test/gallery-item-component-test.js
new file mode 100644
index 00000000..83b5d3b4
--- /dev/null
+++ b/lab-remil/test/gallery-item-component-test.js
@@ -0,0 +1,55 @@
+'use strict';
+
+describe('Gallery Item Component', function(){
+  beforeEach(() => {
+    angular.mock.module('ayogram');
+    angular.mock.inject(($rootScope, $componentController, $httpBackend, authService) => {
+      this.$rootScope = $rootScope;
+      this.$componentController = $componentController;
+      this.$httpBackend = $httpBackend;
+      this.authService = authService;
+    });
+  });
+
+  describe('galleryItemCtrl.deleteDone()', () => {
+    it('should call deleteDone', () => {
+      let mockBindings = {
+        gallery: {
+          _id: '12345',
+          name: 'test name',
+          desc: 'test description',
+          pics: [],
+        },
+      };
+
+      let galleryItemCtrl = this.$componentController('galleryItem', null, mockBindings);
+
+      this.$rootScope.$apply();
+    });
+  });
+
+  it('should call deleteDone with gallery after galleryDelete', () => {
+    let url = `${__API_URL__}/api/gallery/12345`;
+    let headers = {
+      Authorization: 'Bearer test token',
+      Accept: 'application/json',
+    };
+
+    let mockBindings = {
+      gallery: {
+        _id: '12345',
+        name: 'test name',
+        desc: 'test description',
+        pics: [],
+      },
+    };
+
+    this.$httpBackend.expectDELETE(url, headers).respond(204);
+
+    let galleryItemCtrl = this.$componentController('galleryItem', null, mockBindings);
+    galleryItemCtrl.deleteGallery();
+
+    this.$httpBackend.flush();
+    this.$rootScope.$apply();
+  });
+});
diff --git a/lab-remil/test/gallery-service-test.js b/lab-remil/test/gallery-service-test.js
index 7c4fd78c..211c5cd0 100644
--- a/lab-remil/test/gallery-service-test.js
+++ b/lab-remil/test/gallery-service-test.js
@@ -69,6 +69,4 @@ describe('Gallery Service', function() {
       this.$rootScope.$apply();
     });
   });
-
-  // TODO: create another test for deleting a gallery
 });

From 7c9146b855819ea7b668fae3a10583cb645f01fe Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Wed, 5 Apr 2017 20:29:33 -0700
Subject: [PATCH 11/16] passed galleryItemComponent test

---
 lab-remil/app/view/home/home-controller.js    | 12 ++++++------
 lab-remil/test/gallery-item-component-test.js |  9 ++++++++-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/lab-remil/app/view/home/home-controller.js b/lab-remil/app/view/home/home-controller.js
index 63f7607f..842c4dd0 100644
--- a/lab-remil/app/view/home/home-controller.js
+++ b/lab-remil/app/view/home/home-controller.js
@@ -10,12 +10,12 @@ function HomeController($log, $rootScope, galleryService) {
   this.galleries = [];
 
   this.fetchGalleries = function() {
-   galleryService.fetchGalleries()
-   .then( galleries => {
-     this.galleries = galleries;
-     this.currentGallery = galleries[0];
-   });
- };
+    galleryService.fetchGalleries()
+    .then( galleries => {
+      this.galleries = galleries;
+      this.currentGallery = galleries[0];
+    });
+  };
 
   this.galleryDeleteDone = function(gallery) {
     console.log('delete done gallery', gallery);
diff --git a/lab-remil/test/gallery-item-component-test.js b/lab-remil/test/gallery-item-component-test.js
index 83b5d3b4..c1038b41 100644
--- a/lab-remil/test/gallery-item-component-test.js
+++ b/lab-remil/test/gallery-item-component-test.js
@@ -20,9 +20,13 @@ describe('Gallery Item Component', function(){
           desc: 'test description',
           pics: [],
         },
+        deleteDone: function(data){
+          expect(data.galleryData._id).toEqual('12345');
+        },
       };
 
       let galleryItemCtrl = this.$componentController('galleryItem', null, mockBindings);
+      galleryItemCtrl.deleteDone({galleryData: galleryItemCtrl.gallery});
 
       this.$rootScope.$apply();
     });
@@ -42,12 +46,15 @@ describe('Gallery Item Component', function(){
         desc: 'test description',
         pics: [],
       },
+      deleteDone: function(data){
+        expect(data._id).toEqual(mockBindings.gallery._id);
+      },
     };
 
     this.$httpBackend.expectDELETE(url, headers).respond(204);
 
     let galleryItemCtrl = this.$componentController('galleryItem', null, mockBindings);
-    galleryItemCtrl.deleteGallery();
+    galleryItemCtrl.deleteGallery(mockBindings.gallery);
 
     this.$httpBackend.flush();
     this.$rootScope.$apply();

From 6f173af8bc240cb56a3c5450fa261169e2a21f8c Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Wed, 5 Apr 2017 20:43:11 -0700
Subject: [PATCH 12/16] passed editGalleryComponent test

---
 lab-remil/test/edit-gallery-component-test.js | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 lab-remil/test/edit-gallery-component-test.js

diff --git a/lab-remil/test/edit-gallery-component-test.js b/lab-remil/test/edit-gallery-component-test.js
new file mode 100644
index 00000000..30ca0716
--- /dev/null
+++ b/lab-remil/test/edit-gallery-component-test.js
@@ -0,0 +1,62 @@
+'use strict';
+
+describe('Edit Gallery Component', function(){
+
+  beforeEach(() => {
+    angular.mock.module('ayogram');
+    angular.mock.inject(($rootScope, $componentController, $httpBackend, authService) => {
+      this.$rootScope = $rootScope;
+      this.$componentController = $componentController;
+      this.$httpBackend = $httpBackend;
+      this.authService = authService;
+    });
+  });
+
+  it('should have right component bindings', () => {
+    let mockBindings = {
+      gallery: {
+        name: 'swag gallery',
+        desc: 'too swaggy description',
+      },
+    };
+
+    let editGalleryCtrl = this.$componentController('editGallery', null, mockBindings);
+    expect(editGalleryCtrl.gallery.name).toEqual(mockBindings.gallery.name);
+    expect(editGalleryCtrl.gallery.desc).toEqual(mockBindings.gallery.desc);
+
+    this.$rootScope.$apply();
+  });
+
+  describe('editGalleryCtrl.updateGallery()', () => {
+    it('should make a valid PUT request', () => {
+      let url = `${__API_URL__}/api/gallery/12345`;
+      let headers = {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer test token',
+      };
+
+      this.$httpBackend.expectPUT(url, {
+        _id: '12345',
+        name: 'updated name',
+        desc: 'updated description',
+      }, headers).respond(200);
+
+      let mockBindings = {
+        gallery: {
+          _id: '12345',
+          name: 'updated name',
+          desc: 'updated description',
+        },
+      };
+
+      let editGalleryCtrl = this.$componentController('editGallery', null, mockBindings);
+      editGalleryCtrl.gallery.name = 'updated name';
+      editGalleryCtrl.gallery.desc = 'updated description';
+      editGalleryCtrl.updateGallery();
+
+      this.$httpBackend.flush();
+      this.$rootScope.$apply();
+    });
+  });
+});

From bcf4894196fd548ff09cffefb54f0cf210f79400 Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Thu, 6 Apr 2017 14:27:01 -0700
Subject: [PATCH 13/16] added fuzzy search

---
 lab-remil/app/entry.js                 | 14 ++++++++++++++
 lab-remil/app/filter/gallery-search.js | 17 +++++++++++++++++
 lab-remil/app/view/home/home.html      |  6 ++++--
 3 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 lab-remil/app/filter/gallery-search.js

diff --git a/lab-remil/app/entry.js b/lab-remil/app/entry.js
index 80b6c777..fbbbf2c4 100644
--- a/lab-remil/app/entry.js
+++ b/lab-remil/app/entry.js
@@ -40,3 +40,17 @@ context.keys().forEach( key => {
   let module = context(key);
   ayogram.component(name, module);
 });
+
+context = require.context('./filter/', true, /\.js$/);
+context.keys().forEach( key => {
+  let name = camelcase(path.basename(key, '.js'));
+  let module = context(key);
+  ayogram.filter(name, module);
+});
+
+context = require.context('./directive/', true, /\.js$/);
+context.keys().forEach( key => {
+  let name = camelcase(path.basename(key, '.js'));
+  let module = context(key);
+  ayogram.directive(name, module);
+});
diff --git a/lab-remil/app/filter/gallery-search.js b/lab-remil/app/filter/gallery-search.js
new file mode 100644
index 00000000..1572b3d7
--- /dev/null
+++ b/lab-remil/app/filter/gallery-search.js
@@ -0,0 +1,17 @@
+'use strict';
+
+module.exports = function() {
+  return function(galleries, searchTerm) {
+    let fuzzyRegex = generateFuzzyRegex(searchTerm);
+
+    return galleries.filter(gallery => {
+      return fuzzyRegex.test(gallery.name.toUpperCase());
+    });
+  };
+};
+
+function generateFuzzyRegex(input) {
+  if (!input) return /.*/;
+  let fuzzyString = '.*' + input.toUpperCase() + '.*';
+  return new RegExp(fuzzyString);
+}
diff --git a/lab-remil/app/view/home/home.html b/lab-remil/app/view/home/home.html
index a0c0b4aa..3a4a902b 100644
--- a/lab-remil/app/view/home/home.html
+++ b/lab-remil/app/view/home/home.html
@@ -4,10 +4,12 @@
     <h2>Create New Swaggerry</h2>
     <create-gallery></create-gallery>
 
-    <h2>Galleries</h2>
+
+    <h2>Swaggeries</h2>
+    <input ng-model="homeCtrl.gallerySearchTerm" type="text" placeholder="Search Swaggeries" class="input-std">
     <ul>
       <gallery-item
-        ng-repeat="item in homeCtrl.galleries"
+        ng-repeat="item in homeCtrl.galleries | gallerySearch: homeCtrl.gallerySearchTerm"
         gallery="item"
         delete-done="homeCtrl.galleryDeleteDone(item)"
         ng-click="homeCtrl.currentGallery = item"

From f050406f61a9ec8fff3f7ad32751c576141fbd6e Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Thu, 6 Apr 2017 16:15:46 -0700
Subject: [PATCH 14/16] made swagCase filter and applied to gallery names -
 capitalizes consonants and lowercases vowels

---
 .../create-gallery/create-gallery.html        |   6 +--
 .../gallery/gallery-item/gallery-item.html    |   2 +-
 .../directive/social-icons/_social-icons.scss |  36 ++++++++++++++++++
 .../directive/social-icons/social-icons.html  |   7 ++++
 .../directive/social-icons/social-icons.js    |  20 ++++++++++
 .../directive/social-icons/social-icons.png   | Bin 0 -> 4505 bytes
 lab-remil/app/filter/swag-case.js             |  19 +++++++++
 lab-remil/app/index.html                      |   8 ++--
 lab-remil/app/view/home/home.html             |   2 +-
 9 files changed, 90 insertions(+), 10 deletions(-)
 create mode 100644 lab-remil/app/directive/social-icons/_social-icons.scss
 create mode 100644 lab-remil/app/directive/social-icons/social-icons.html
 create mode 100644 lab-remil/app/directive/social-icons/social-icons.js
 create mode 100644 lab-remil/app/directive/social-icons/social-icons.png
 create mode 100644 lab-remil/app/filter/swag-case.js

diff --git a/lab-remil/app/component/gallery/create-gallery/create-gallery.html b/lab-remil/app/component/gallery/create-gallery/create-gallery.html
index 7ca0203d..7e90818f 100644
--- a/lab-remil/app/component/gallery/create-gallery/create-gallery.html
+++ b/lab-remil/app/component/gallery/create-gallery/create-gallery.html
@@ -5,15 +5,15 @@
 
     <fieldset>
       <input name="name" class="input-std" type="text"
-        ng-model="createGalleryCtrl.gallery.name" placeholder="gallery name"required>
+        ng-model="createGalleryCtrl.gallery.name" placeholder="name dat swaggery"required>
     </fieldset>
 
     <fieldset>
       <input name="desc" class="input-std" type="text"
-        ng-model="createGalleryCtrl.gallery.desc" placeholder="gallery description"required>
+        ng-model="createGalleryCtrl.gallery.desc" placeholder="descrip dat swaggery"required>
     </fieldset>
 
-    <button class="btn-std" type="submit">create gallery</button>
+    <button class="btn-std" type="submit">create swaggery</button>
   </form>
 </section>
 <div class="clearfix"></div>
diff --git a/lab-remil/app/component/gallery/gallery-item/gallery-item.html b/lab-remil/app/component/gallery/gallery-item/gallery-item.html
index bbaebffb..e970e5d7 100644
--- a/lab-remil/app/component/gallery/gallery-item/gallery-item.html
+++ b/lab-remil/app/component/gallery/gallery-item/gallery-item.html
@@ -2,7 +2,7 @@
   <div class="current-item" ng-if="!galleryItemCtrl.showEditGallery">
     <div class="gallery-property">
       <span class="item-label">name:</span>
-      <span>{{ galleryItemCtrl.gallery.name }}</span>
+      <span>{{ galleryItemCtrl.gallery.name | swagCase }}</span>
     </div>
 
     <div class="gallery-property">
diff --git a/lab-remil/app/directive/social-icons/_social-icons.scss b/lab-remil/app/directive/social-icons/_social-icons.scss
new file mode 100644
index 00000000..22c460ae
--- /dev/null
+++ b/lab-remil/app/directive/social-icons/_social-icons.scss
@@ -0,0 +1,36 @@
+.social-icons-css {
+  display: flex;
+}
+
+.icon-list {
+  display: flex;
+}
+
+.social-icon {
+    background-image: url(./social-icons.png);
+    background-repeat: no-repeat;
+}
+
+.social-icon-github {
+    width: 30px;
+    height: 30px;
+    background-position: -5px -5px;
+}
+
+.social-icon-linkedin {
+    width: 30px;
+    height: 30px;
+    background-position: -45px -5px;
+}
+
+.social-icon-tumblr {
+    width: 30px;
+    height: 30px;
+    background-position: -5px -45px;
+}
+
+.social-icon-twitter {
+    width: 30px;
+    height: 30px;
+    background-position: -45px -45px;
+}
diff --git a/lab-remil/app/directive/social-icons/social-icons.html b/lab-remil/app/directive/social-icons/social-icons.html
new file mode 100644
index 00000000..a7ab57df
--- /dev/null
+++ b/lab-remil/app/directive/social-icons/social-icons.html
@@ -0,0 +1,7 @@
+<section class="social-icons-css inner">
+  <h2>{{ socialIconsCtrl.socialIconsTitle }}</h2>
+
+  <ul class="icon-list">
+    <li class="social-icon social-icon-{{icon}}" ng-repeat="icon in socialIconsCtrl.icons"></li>
+  </ul>
+</section>
diff --git a/lab-remil/app/directive/social-icons/social-icons.js b/lab-remil/app/directive/social-icons/social-icons.js
new file mode 100644
index 00000000..43702bef
--- /dev/null
+++ b/lab-remil/app/directive/social-icons/social-icons.js
@@ -0,0 +1,20 @@
+'use strict';
+
+require('./_social-icons.scss');
+
+module.exports = function() {
+  return {
+    restrict: 'EAC',
+    template: require('./social-icons.html'),
+    controller: ['$log', SocialIconsController],
+    bindToController: true,
+    controllerAs: 'socialIconsCtrl',
+    scope: {
+      socialIconsTitle: '@',
+    },
+  };
+};
+
+function SocialIconsController() {
+  this.icons = ['github', 'linkedin', 'tumblr', 'twitter'];
+}
diff --git a/lab-remil/app/directive/social-icons/social-icons.png b/lab-remil/app/directive/social-icons/social-icons.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f78a1e51edd457ab0f01e2d91fbc90884c0bba5
GIT binary patch
literal 4505
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

literal 0
HcmV?d00001

diff --git a/lab-remil/app/filter/swag-case.js b/lab-remil/app/filter/swag-case.js
new file mode 100644
index 00000000..ddf9364c
--- /dev/null
+++ b/lab-remil/app/filter/swag-case.js
@@ -0,0 +1,19 @@
+'use strict';
+
+const vowels = {
+  a: 'a',
+  e: 'e',
+  i: 'i',
+  o: 'o',
+  u: 'u',
+};
+
+module.exports = function() {
+  return function(string) {
+    return string.split('').reduce((str, char) => {
+      if (vowels[char.toLowerCase()]) char = char.toLowerCase();
+      if (!vowels[char.toLowerCase()]) char = char.toUpperCase();
+      return str.concat(char);
+    }, '');
+  };
+};
diff --git a/lab-remil/app/index.html b/lab-remil/app/index.html
index 6ed5bd6c..7beb9486 100644
--- a/lab-remil/app/index.html
+++ b/lab-remil/app/index.html
@@ -6,10 +6,6 @@
     <title>ayoGRAM</title>
   </head>
   <header>
-    <!-- <div class="inner">
-      <img src="../assets/cf-logo.png">
-      <h1>ayoGRAM</h1>
-    </div> -->
     <navbar></navbar>
   </header>
   <body>
@@ -17,5 +13,7 @@ <h1>ayoGRAM</h1>
       <ui-view></ui-view>
     </main>
   </body>
-  <footer></footer>
+  <footer>
+    <social-icons social-icons-title="Contact"></social-icons>
+  </footer>
 </html>
diff --git a/lab-remil/app/view/home/home.html b/lab-remil/app/view/home/home.html
index 3a4a902b..1d01675c 100644
--- a/lab-remil/app/view/home/home.html
+++ b/lab-remil/app/view/home/home.html
@@ -6,7 +6,7 @@ <h2>Create New Swaggerry</h2>
 
 
     <h2>Swaggeries</h2>
-    <input ng-model="homeCtrl.gallerySearchTerm" type="text" placeholder="Search Swaggeries" class="input-std">
+    <input ng-model="homeCtrl.gallerySearchTerm" type="text" placeholder="search dem swaggeries" class="input-std">
     <ul>
       <gallery-item
         ng-repeat="item in homeCtrl.galleries | gallerySearch: homeCtrl.gallerySearchTerm"

From 23e2deb7284fa2b7ab7f32dd79159087cf0fd3e7 Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Mon, 10 Apr 2017 15:43:13 -0700
Subject: [PATCH 15/16] added a thumbnail modal ui bootstrap component

---
 .../thumbnail-container.js                    |  20 +
 .../gallery/thumbnail/thumbnail.html          |   3 +-
 .../component/gallery/thumbnail/thumbnail.js  |  13 +-
 .../thumbnail-modal/_thumbnail-modal.scss     |  11 +
 .../thumbnail-modal/thumbnail-modal.html      |   5 +
 .../thumbnail-modal/thumbnail-modal.js        |  18 +
 lab-remil/app/entry.js                        |   5 +-
 .../lib/bootstrap/_custom-bootstrap-vars.scss | 688 ++++++++++++++++++
 .../scss/lib/bootstrap/_custom-bootstrap.scss |  50 ++
 lab-remil/app/scss/main.scss                  |   6 +-
 lab-remil/package.json                        |   2 +
 11 files changed, 814 insertions(+), 7 deletions(-)
 create mode 100644 lab-remil/app/component/thumbnail-modal/_thumbnail-modal.scss
 create mode 100644 lab-remil/app/component/thumbnail-modal/thumbnail-modal.html
 create mode 100644 lab-remil/app/component/thumbnail-modal/thumbnail-modal.js
 create mode 100644 lab-remil/app/scss/lib/bootstrap/_custom-bootstrap-vars.scss
 create mode 100644 lab-remil/app/scss/lib/bootstrap/_custom-bootstrap.scss

diff --git a/lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.js b/lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.js
index fc7ae7cb..ef86e7b3 100644
--- a/lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.js
+++ b/lab-remil/app/component/gallery/thumbnail-container/thumbnail-container.js
@@ -4,8 +4,28 @@ require('./_thumbnail-container.scss');
 
 module.exports = {
   template: require('./thumbnail-container.html'),
+  // controller: ['$log', '$uibModal', ThumbnailContainerController],
   controllerAs: 'thumbnailContainerCtrl',
   bindings: {
     gallery: '<',
   },
 };
+// 
+// function ThumbnailContainerController($log, $uibModal) {
+//   this.open = function () {
+//     var modalInstance = $uibModal.open({
+//       animation: this.animationsEnabled,
+//       ariaLabelledBy: 'modal-title',
+//       ariaDescribedBy: 'modal-body',
+//       templateUrl: 'myModalContent.html',
+//       controller: 'ModalInstanceCtrl',
+//       controllerAs: 'ModalInstanceCtrl',
+//       appendTo: parentElem,
+//       resolve: {
+//         items: function () {
+//           return $ctrl.items;
+//         }
+//       }
+//     });
+//   };
+// }
diff --git a/lab-remil/app/component/gallery/thumbnail/thumbnail.html b/lab-remil/app/component/gallery/thumbnail/thumbnail.html
index 3554de0f..ab5a4145 100644
--- a/lab-remil/app/component/gallery/thumbnail/thumbnail.html
+++ b/lab-remil/app/component/gallery/thumbnail/thumbnail.html
@@ -1,4 +1,5 @@
 <div class="thumbnail">
   <img ng-src="{{ thumbnailCtrl.pic.imageURI }}" alt="{{ thumbnailCtrl.pic.desc }}">
-  <button class="btn-std" ng-click="thumbnailCtrl.deletePic()">delete</button>
+  <button class="btn-sm" ng-click="thumbnailCtrl.deletePic()">delete</button>
+  <button class="btn-sm" ng-click="thumbnailCtrl.open()">modal</button>
 </div>
diff --git a/lab-remil/app/component/gallery/thumbnail/thumbnail.js b/lab-remil/app/component/gallery/thumbnail/thumbnail.js
index 51c38cb8..b3ea234b 100644
--- a/lab-remil/app/component/gallery/thumbnail/thumbnail.js
+++ b/lab-remil/app/component/gallery/thumbnail/thumbnail.js
@@ -4,7 +4,7 @@ require('./_thumbnail.scss');
 
 module.exports = {
   template: require('./thumbnail.html'),
-  controller: ['$log', 'picService', ThumbnailController],
+  controller: ['$log', 'picService', '$uibModal',ThumbnailController],
   controllerAs: 'thumbnailCtrl',
   bindings: {
     pic: '<',
@@ -12,7 +12,7 @@ module.exports = {
   },
 };
 
-function ThumbnailController($log, picService) {
+function ThumbnailController($log, picService, $uibModal) {
   $log.debug('ThumbnailController');
 
   this.deletePic = function() {
@@ -20,4 +20,13 @@ function ThumbnailController($log, picService) {
 
     picService.deletePic(this.gallery,this.pic._id);
   };
+
+  this.open = function() {
+    $uibModal.open({
+      component: 'thumbnail-modal',
+      resolve: {
+        modalPic: this.pic,
+      },
+    });
+  };
 }
diff --git a/lab-remil/app/component/thumbnail-modal/_thumbnail-modal.scss b/lab-remil/app/component/thumbnail-modal/_thumbnail-modal.scss
new file mode 100644
index 00000000..5f41a02d
--- /dev/null
+++ b/lab-remil/app/component/thumbnail-modal/_thumbnail-modal.scss
@@ -0,0 +1,11 @@
+@import '../../scss/lib/theme/vars';
+
+.thumbnail-modal {
+  display: flex;
+  flex-direction: column;
+  text-align:center;
+  img {
+    width: 50%;
+    margin: 0 auto;
+  }
+}
diff --git a/lab-remil/app/component/thumbnail-modal/thumbnail-modal.html b/lab-remil/app/component/thumbnail-modal/thumbnail-modal.html
new file mode 100644
index 00000000..46fe96d8
--- /dev/null
+++ b/lab-remil/app/component/thumbnail-modal/thumbnail-modal.html
@@ -0,0 +1,5 @@
+<div class="thumbnail-modal">
+  <h5>Pic Name: {{ thumbnailModalCtrl.resolve.modalPic.name }}</h2>
+  <h5>Pic Descip: {{ thumbnailModalCtrl.resolve.modalPic.desc }}</h2>
+  <img ng-src="{{ thumbnailModalCtrl.resolve.modalPic.imageURI }}">
+</div>
diff --git a/lab-remil/app/component/thumbnail-modal/thumbnail-modal.js b/lab-remil/app/component/thumbnail-modal/thumbnail-modal.js
new file mode 100644
index 00000000..9046f921
--- /dev/null
+++ b/lab-remil/app/component/thumbnail-modal/thumbnail-modal.js
@@ -0,0 +1,18 @@
+'use strict';
+
+require('./_thumbnail-modal.scss');
+
+module.exports = {
+  template: require('./thumbnail-modal.html'),
+  controller: ['$log', ThumbnailModalController],
+  controllerAs: 'thumbnailModalCtrl',
+  bindings: {
+    modalInstance: '<',
+    resolve: '<',
+  },
+};
+
+function ThumbnailModalController($log) {
+  $log.debug('ThumbnailModalController');
+
+}
diff --git a/lab-remil/app/entry.js b/lab-remil/app/entry.js
index fbbbf2c4..e13db164 100644
--- a/lab-remil/app/entry.js
+++ b/lab-remil/app/entry.js
@@ -10,9 +10,10 @@ const
   uiRouter = require('angular-ui-router'),
   ngTouch = require('angular-touch'),
   ngAnimate = require('angular-animate'),
-  ngFileUpload = require('ng-file-upload');
+  ngFileUpload = require('ng-file-upload'),
+  uiBootstrap = require('angular-ui-bootstrap');
 
-const ayogram = angular.module('ayogram', [ngTouch, ngAnimate, uiRouter, ngFileUpload]);
+const ayogram = angular.module('ayogram', [ngTouch, ngAnimate, uiRouter, ngFileUpload, uiBootstrap]);
 
 
 let context = require.context('./config/', true, /\.js$/);
diff --git a/lab-remil/app/scss/lib/bootstrap/_custom-bootstrap-vars.scss b/lab-remil/app/scss/lib/bootstrap/_custom-bootstrap-vars.scss
new file mode 100644
index 00000000..bf577e0f
--- /dev/null
+++ b/lab-remil/app/scss/lib/bootstrap/_custom-bootstrap-vars.scss
@@ -0,0 +1,688 @@
+$app-primary: #a7f7fa;
+$app-secondary: #7fa7af;
+$app-disabled: #abeaeb;
+$app-active: #fa7fa7;
+$app-success: #a7ff7a;
+$app-error: #ff7a7a;
+$app-warn: #ffa77a;
+$app-info: #7aa7ff;
+$app-white: #fff;
+$app-black: #000;
+$bootstrap-sass-asset-helper: true !default;
+//
+// Variables
+// --------------------------------------------------
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+$gray-base : #000 !default;
+$gray-darker : lighten($gray-base, 13.5%) !default; // #222
+$gray-dark : lighten($gray-base, 20%) !default; // #333
+$gray : lighten($gray-base, 33.5%) !default; // #555
+$gray-light : lighten($gray-base, 46.7%) !default; // #777
+$gray-lighter : lighten($gray-base, 93.5%) !default; // #eee
+$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
+$brand-success : #5cb85c !default;
+$brand-info : #5bc0de !default;
+$brand-warning : #f0ad4e !default;
+$brand-danger : #d9534f !default;
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+//** Background color for `<body>`.
+$body-bg : #fff !default;
+//** Global text color on `<body>`.
+$text-color : $gray-dark !default;
+//** Global textual link color.
+$link-color : $brand-primary !default;
+//** Link hover color set via `darken()` function.
+$link-hover-color : darken($link-color, 15%) !default;
+//** Link hover decoration.
+$link-hover-decoration: underline !default;
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+$font-family-sans-serif : "Helvetica Neue",
+Helvetica,
+Arial,
+sans-serif !default;
+$font-family-serif : Georgia,
+"Times New Roman",
+Times,
+serif !default;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+$font-family-monospace : Menlo,
+Monaco,
+Consolas,
+"Courier New",
+monospace !default;
+$font-family-base : $font-family-sans-serif !default;
+$font-size-base : 14px !default;
+$font-size-large : ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-small : ceil(($font-size-base * 0.85)) !default; // ~12px
+$font-size-h1 : floor(($font-size-base * 2.6)) !default; // ~36px
+$font-size-h2 : floor(($font-size-base * 2.15)) !default; // ~30px
+$font-size-h3 : ceil(($font-size-base * 1.7)) !default; // ~24px
+$font-size-h4 : ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-h5 : $font-size-base !default;
+$font-size-h6 : ceil(($font-size-base * 0.85)) !default; // ~12px
+//** Unit-less `line-height` for use in components like buttons.
+$line-height-base : 1.428571429 !default; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed : floor(($font-size-base * $line-height-base)) !default; // ~20px
+//** By default, this inherits from the `<body>`.
+$headings-font-family : inherit !default;
+$headings-font-weight : 500 !default;
+$headings-line-height : 1.1 !default;
+$headings-color : inherit !default;
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+//** Load fonts from this directory.
+// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
+// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
+$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
+//** File name for all font files.
+$icon-font-name : "glyphicons-halflings-regular" !default;
+//** Element ID within SVG icon file.
+$icon-font-svg-id : "glyphicons_halflingsregular" !default;
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+$padding-base-vertical : 6px !default;
+$padding-base-horizontal : 12px !default;
+$padding-large-vertical : 10px !default;
+$padding-large-horizontal : 16px !default;
+$padding-small-vertical : 5px !default;
+$padding-small-horizontal : 10px !default;
+$padding-xs-vertical : 1px !default;
+$padding-xs-horizontal : 5px !default;
+$line-height-large : 1.3333333 !default; // extra decimals for Win 8.1 Chrome
+$line-height-small : 1.5 !default;
+$border-radius-base : 4px !default;
+$border-radius-large : 6px !default;
+$border-radius-small : 3px !default;
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color : #fff !default;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg : $brand-primary !default;
+//** Width of the `border` for generating carets that indicate dropdowns.
+$caret-width-base : 4px !default;
+//** Carets increase slightly in size for larger components.
+$caret-width-large : 5px !default;
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+//** Padding for `<th>`s and `<td>`s.
+$table-cell-padding : 8px !default;
+//** Padding for cells in `.table-condensed`.
+$table-condensed-cell-padding : 5px !default;
+//** Default background color used for all tables.
+$table-bg : transparent !default;
+//** Background color used for `.table-striped`.
+$table-bg-accent : #f9f9f9 !default;
+//** Background color used for `.table-hover`.
+$table-bg-hover : #f5f5f5 !default;
+$table-bg-active : $table-bg-hover !default;
+//** Border color for table and cell borders.
+$table-border-color : #ddd !default;
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+$btn-font-weight : normal !default;
+$btn-default-color : #333 !default;
+$btn-default-bg : #fff !default;
+$btn-default-border : #ccc !default;
+$btn-primary-color : #fff !default;
+$btn-primary-bg : $brand-primary !default;
+$btn-primary-border : darken($btn-primary-bg, 5%) !default;
+$btn-success-color : #fff !default;
+$btn-success-bg : $brand-success !default;
+$btn-success-border : darken($btn-success-bg, 5%) !default;
+$btn-info-color : #fff !default;
+$btn-info-bg : $brand-info !default;
+$btn-info-border : darken($btn-info-bg, 5%) !default;
+$btn-warning-color : #fff !default;
+$btn-warning-bg : $brand-warning !default;
+$btn-warning-border : darken($btn-warning-bg, 5%) !default;
+$btn-danger-color : #fff !default;
+$btn-danger-bg : $brand-danger !default;
+$btn-danger-border : darken($btn-danger-bg, 5%) !default;
+$btn-link-disabled-color : $gray-light !default;
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius-base : $border-radius-base !default;
+$btn-border-radius-large : $border-radius-large !default;
+$btn-border-radius-small : $border-radius-small !default;
+//== Forms
+//
+//##
+//** `<input>` background color
+$input-bg : #fff !default;
+//** `<input disabled>` background color
+$input-bg-disabled : $gray-lighter !default;
+//** Text color for `<input>`s
+$input-color : $gray !default;
+//** `<input>` border color
+$input-border : #ccc !default;
+// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
+//** Default `.form-control` border radius
+// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
+$input-border-radius : $border-radius-base !default;
+//** Large `.form-control` border radius
+$input-border-radius-large : $border-radius-large !default;
+//** Small `.form-control` border radius
+$input-border-radius-small : $border-radius-small !default;
+//** Border color for inputs on focus
+$input-border-focus : #66afe9 !default;
+//** Placeholder text color
+$input-color-placeholder : #999 !default;
+//** Default `.form-control` height
+$input-height-base : ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
+//** Large `.form-control` height
+$input-height-large : (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
+//** Small `.form-control` height
+$input-height-small : (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
+//** `.form-group` margin
+$form-group-margin-bottom : 15px !default;
+$legend-color : $gray-dark !default;
+$legend-border-color : #e5e5e5 !default;
+//** Background color for textual input addons
+$input-group-addon-bg : $gray-lighter !default;
+//** Border color for textual input addons
+$input-group-addon-border-color: $input-border !default;
+//** Disabled cursor for form controls and buttons.
+$cursor-disabled : not-allowed !default;
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+//** Background for the dropdown menu.
+$dropdown-bg : #fff !default;
+//** Dropdown menu `border-color`.
+$dropdown-border : rgba(0, 0, 0, .15) !default;
+//** Dropdown menu `border-color` **for IE8**.
+$dropdown-fallback-border : #ccc !default;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg : #e5e5e5 !default;
+//** Dropdown link text color.
+$dropdown-link-color : $gray-dark !default;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color : darken($gray-dark, 5%) !default;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg : #f5f5f5 !default;
+//** Active dropdown menu item text color.
+$dropdown-link-active-color : $component-active-color !default;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg : $component-active-bg !default;
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color : $gray-light !default;
+//** Text color for headers within dropdown menus.
+$dropdown-header-color : $gray-light !default;
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+$dropdown-caret-color : #000 !default;
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+$zindex-navbar : 1000 !default;
+$zindex-dropdown : 1000 !default;
+$zindex-popover : 1060 !default;
+$zindex-tooltip : 1070 !default;
+$zindex-navbar-fixed : 1030 !default;
+$zindex-modal-background : 1040 !default;
+$zindex-modal : 1050 !default;
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs : 480px !default;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min : $screen-xs !default;
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone : $screen-xs-min !default;
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm : 768px !default;
+$screen-sm-min : $screen-sm !default;
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet : $screen-sm-min !default;
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md : 992px !default;
+$screen-md-min : $screen-md !default;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop : $screen-md-min !default;
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg : 1200px !default;
+$screen-lg-min : $screen-lg !default;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop : $screen-lg-min !default;
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max : ($screen-sm-min - 1) !default;
+$screen-sm-max : ($screen-md-min - 1) !default;
+$screen-md-max : ($screen-lg-min - 1) !default;
+//== Grid system
+//
+//## Define your custom responsive grid.
+//** Number of columns in the grid.
+$grid-columns : 12 !default;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width : 30px !default;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint : $screen-sm-min !default;
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+// Small screen / tablet
+$container-tablet : (720px + $grid-gutter-width) !default;
+//** For `$screen-sm-min` and up.
+$container-sm : $container-tablet !default;
+// Medium screen / desktop
+$container-desktop : (940px + $grid-gutter-width) !default;
+//** For `$screen-md-min` and up.
+$container-md : $container-desktop !default;
+// Large screen / wide desktop
+$container-large-desktop : (1140px + $grid-gutter-width) !default;
+//** For `$screen-lg-min` and up.
+$container-lg : $container-large-desktop !default;
+//== Navbar
+//
+//##
+// Basics of a navbar
+$navbar-height : 50px !default;
+$navbar-margin-bottom : $line-height-computed !default;
+$navbar-border-radius : $border-radius-base !default;
+$navbar-padding-horizontal : floor(($grid-gutter-width / 2)) !default;
+$navbar-padding-vertical : (($navbar-height - $line-height-computed) / 2) !default;
+$navbar-collapse-max-height : 340px !default;
+$navbar-default-color : #777 !default;
+$navbar-default-bg : #f8f8f8 !default;
+$navbar-default-border : darken($navbar-default-bg, 6.5%) !default;
+// Navbar links
+$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;
+$navbar-default-link-active-bg : darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-link-disabled-color : #ccc !default;
+$navbar-default-link-disabled-bg : transparent !default;
+// Navbar brand label
+$navbar-default-brand-color : $navbar-default-link-color !default;
+$navbar-default-brand-hover-color : darken($navbar-default-brand-color, 10%) !default;
+$navbar-default-brand-hover-bg : transparent !default;
+// Navbar toggle
+$navbar-default-toggle-hover-bg : #ddd !default;
+$navbar-default-toggle-icon-bar-bg : #888 !default;
+$navbar-default-toggle-border-color : #ddd !default;
+//=== Inverted navbar
+// Reset inverted navbar basics
+$navbar-inverse-color : lighten($gray-light, 15%) !default;
+$navbar-inverse-bg : #222 !default;
+$navbar-inverse-border : darken($navbar-inverse-bg, 10%) !default;
+// Inverted navbar links
+$navbar-inverse-link-color : lighten($gray-light, 15%) !default;
+$navbar-inverse-link-hover-color : #fff !default;
+$navbar-inverse-link-hover-bg : transparent !default;
+$navbar-inverse-link-active-color : $navbar-inverse-link-hover-color !default;
+$navbar-inverse-link-active-bg : darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-link-disabled-color : #444 !default;
+$navbar-inverse-link-disabled-bg : transparent !default;
+// Inverted navbar brand label
+$navbar-inverse-brand-color : $navbar-inverse-link-color !default;
+$navbar-inverse-brand-hover-color : #fff !default;
+$navbar-inverse-brand-hover-bg : transparent !default;
+// Inverted navbar toggle
+$navbar-inverse-toggle-hover-bg : #333 !default;
+$navbar-inverse-toggle-icon-bar-bg : #fff !default;
+$navbar-inverse-toggle-border-color : #333 !default;
+//== Navs
+//
+//##
+//=== Shared nav styles
+$nav-link-padding : 10px 15px !default;
+$nav-link-hover-bg : $gray-lighter !default;
+$nav-disabled-link-color : $gray-light !default;
+$nav-disabled-link-hover-color : $gray-light !default;
+//== Tabs
+$nav-tabs-border-color : #ddd !default;
+$nav-tabs-link-hover-border-color : $gray-lighter !default;
+$nav-tabs-active-link-hover-bg : $body-bg !default;
+$nav-tabs-active-link-hover-color : $gray !default;
+$nav-tabs-active-link-hover-border-color : #ddd !default;
+$nav-tabs-justified-link-border-color : #ddd !default;
+$nav-tabs-justified-active-link-border-color : $body-bg !default;
+//== Pills
+$nav-pills-border-radius : $border-radius-base !default;
+$nav-pills-active-link-hover-bg : $component-active-bg !default;
+$nav-pills-active-link-hover-color : $component-active-color !default;
+//== Pagination
+//
+//##
+$pagination-color : $link-color !default;
+$pagination-bg : #fff !default;
+$pagination-border : #ddd !default;
+$pagination-hover-color : $link-hover-color !default;
+$pagination-hover-bg : $gray-lighter !default;
+$pagination-hover-border : #ddd !default;
+$pagination-active-color : #fff !default;
+$pagination-active-bg : $brand-primary !default;
+$pagination-active-border : $brand-primary !default;
+$pagination-disabled-color : $gray-light !default;
+$pagination-disabled-bg : #fff !default;
+$pagination-disabled-border : #ddd !default;
+//== Pager
+//
+//##
+$pager-bg : $pagination-bg !default;
+$pager-border : $pagination-border !default;
+$pager-border-radius : 15px !default;
+$pager-hover-bg : $pagination-hover-bg !default;
+$pager-active-bg : $pagination-active-bg !default;
+$pager-active-color : $pagination-active-color !default;
+$pager-disabled-color : $pagination-disabled-color !default;
+//== Jumbotron
+//
+//##
+$jumbotron-padding : 30px !default;
+$jumbotron-color : inherit !default;
+$jumbotron-bg : $gray-lighter !default;
+$jumbotron-heading-color : inherit !default;
+$jumbotron-font-size : ceil(($font-size-base * 1.5)) !default;
+$jumbotron-heading-font-size : ceil(($font-size-base * 4.5)) !default;
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+$state-success-text : #3c763d !default;
+$state-success-bg : #dff0d8 !default;
+$state-success-border : darken(adjust-hue($state-success-bg, -10), 5%) !default;
+$state-info-text : #31708f !default;
+$state-info-bg : #d9edf7 !default;
+$state-info-border : darken(adjust-hue($state-info-bg, -10), 7%) !default;
+$state-warning-text : #8a6d3b !default;
+$state-warning-bg : #fcf8e3 !default;
+$state-warning-border : darken(adjust-hue($state-warning-bg, -10), 5%) !default;
+$state-danger-text : #a94442 !default;
+$state-danger-bg : #f2dede !default;
+$state-danger-border : darken(adjust-hue($state-danger-bg, -10), 5%) !default;
+//== Tooltips
+//
+//##
+//** Tooltip max width
+$tooltip-max-width : 200px !default;
+//** Tooltip text color
+$tooltip-color : #fff !default;
+//** Tooltip background color
+$tooltip-bg : #000 !default;
+$tooltip-opacity : .9 !default;
+//** Tooltip arrow width
+$tooltip-arrow-width : 5px !default;
+//** Tooltip arrow color
+$tooltip-arrow-color : $tooltip-bg !default;
+//== Popovers
+//
+//##
+//** Popover body background color
+$popover-bg : #fff !default;
+//** Popover maximum width
+$popover-max-width : 276px !default;
+//** Popover border color
+$popover-border-color : rgba(0, 0, 0, .2) !default;
+//** Popover fallback border color
+$popover-fallback-border-color : #ccc !default;
+//** Popover title background color
+$popover-title-bg : darken($popover-bg, 3%) !default;
+//** Popover arrow width
+$popover-arrow-width : 10px !default;
+//** Popover arrow color
+$popover-arrow-color : $popover-bg !default;
+//** Popover outer arrow width
+$popover-arrow-outer-width : ($popover-arrow-width + 1) !default;
+//** Popover outer arrow color
+$popover-arrow-outer-color : fade_in($popover-border-color, 0.05) !default;
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color : darken($popover-fallback-border-color, 20%) !default;
+//== Labels
+//
+//##
+//** Default label background color
+$label-default-bg : $gray-light !default;
+//** Primary label background color
+$label-primary-bg : $brand-primary !default;
+//** Success label background color
+$label-success-bg : $brand-success !default;
+//** Info label background color
+$label-info-bg : $brand-info !default;
+//** Warning label background color
+$label-warning-bg : $brand-warning !default;
+//** Danger label background color
+$label-danger-bg : $brand-danger !default;
+//** Default label text color
+$label-color : #fff !default;
+//** Default text color of a linked label
+$label-link-hover-color : #fff !default;
+//== Modals
+//
+//##
+//** Padding applied to the modal body
+$modal-inner-padding : 15px !default;
+//** Padding applied to the modal title
+$modal-title-padding : 15px !default;
+//** Modal title line-height
+$modal-title-line-height : $line-height-base !default;
+//** Background color of modal content area
+$modal-content-bg : #fff !default;
+//** Modal content border color
+$modal-content-border-color : rgba(0, 0, 0, .2) !default;
+//** Modal content border color **for IE8**
+$modal-content-fallback-border-color : #999 !default;
+//** Modal backdrop background color
+$modal-backdrop-bg : #000 !default;
+//** Modal backdrop opacity
+$modal-backdrop-opacity : .5 !default;
+//** Modal header border color
+$modal-header-border-color : #e5e5e5 !default;
+//** Modal footer border color
+$modal-footer-border-color : $modal-header-border-color !default;
+$modal-lg : 900px !default;
+$modal-md : 600px !default;
+$modal-sm : 300px !default;
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+$alert-padding : 15px !default;
+$alert-border-radius : $border-radius-base !default;
+$alert-link-font-weight : bold !default;
+$alert-success-bg : $state-success-bg !default;
+$alert-success-text : $state-success-text !default;
+$alert-success-border : $state-success-border !default;
+$alert-info-bg : $state-info-bg !default;
+$alert-info-text : $state-info-text !default;
+$alert-info-border : $state-info-border !default;
+$alert-warning-bg : $state-warning-bg !default;
+$alert-warning-text : $state-warning-text !default;
+$alert-warning-border : $state-warning-border !default;
+$alert-danger-bg : $state-danger-bg !default;
+$alert-danger-text : $state-danger-text !default;
+$alert-danger-border : $state-danger-border !default;
+//== Progress bars
+//
+//##
+//** Background color of the whole progress component
+$progress-bg : #f5f5f5 !default;
+//** Progress bar text color
+$progress-bar-color : #fff !default;
+//** Variable for setting rounded corners on progress bar.
+$progress-border-radius : $border-radius-base !default;
+//** Default progress bar color
+$progress-bar-bg : $brand-primary !default;
+//** Success progress bar color
+$progress-bar-success-bg : $brand-success !default;
+//** Warning progress bar color
+$progress-bar-warning-bg : $brand-warning !default;
+//** Danger progress bar color
+$progress-bar-danger-bg : $brand-danger !default;
+//** Info progress bar color
+$progress-bar-info-bg : $brand-info !default;
+//== List group
+//
+//##
+//** Background color on `.list-group-item`
+$list-group-bg : #fff !default;
+//** `.list-group-item` border color
+$list-group-border : #ddd !default;
+//** List group border radius
+$list-group-border-radius : $border-radius-base !default;
+//** Background color of single list items on hover
+$list-group-hover-bg : #f5f5f5 !default;
+//** Text color of active list items
+$list-group-active-color : $component-active-color !default;
+//** Background color of active list items
+$list-group-active-bg : $component-active-bg !default;
+//** Border color of active list elements
+$list-group-active-border : $list-group-active-bg !default;
+//** Text color for content within active list items
+$list-group-active-text-color : lighten($list-group-active-bg, 40%) !default;
+//** Text color of disabled list items
+$list-group-disabled-color : $gray-light !default;
+//** Background color of disabled list items
+$list-group-disabled-bg : $gray-lighter !default;
+//** Text color for content within disabled list items
+$list-group-disabled-text-color: $list-group-disabled-color !default;
+$list-group-link-color : #555 !default;
+$list-group-link-hover-color : $list-group-link-color !default;
+$list-group-link-heading-color: #333 !default;
+//== Panels
+//
+//##
+$panel-bg : #fff !default;
+$panel-body-padding : 15px !default;
+$panel-heading-padding : 10px 15px !default;
+$panel-footer-padding : $panel-heading-padding !default;
+$panel-border-radius : $border-radius-base !default;
+//** Border color for elements within panels
+$panel-inner-border : #ddd !default;
+$panel-footer-bg : #f5f5f5 !default;
+$panel-default-text : $gray-dark !default;
+$panel-default-border : #ddd !default;
+$panel-default-heading-bg : #f5f5f5 !default;
+$panel-primary-text : #fff !default;
+$panel-primary-border : $brand-primary !default;
+$panel-primary-heading-bg : $brand-primary !default;
+$panel-success-text : $state-success-text !default;
+$panel-success-border : $state-success-border !default;
+$panel-success-heading-bg : $state-success-bg !default;
+$panel-info-text : $state-info-text !default;
+$panel-info-border : $state-info-border !default;
+$panel-info-heading-bg : $state-info-bg !default;
+$panel-warning-text : $state-warning-text !default;
+$panel-warning-border : $state-warning-border !default;
+$panel-warning-heading-bg : $state-warning-bg !default;
+$panel-danger-text : $state-danger-text !default;
+$panel-danger-border : $state-danger-border !default;
+$panel-danger-heading-bg : $state-danger-bg !default;
+//== Thumbnails
+//
+//##
+//** Padding around the thumbnail image
+$thumbnail-padding : 4px !default;
+//** Thumbnail background color
+$thumbnail-bg : $body-bg !default;
+//** Thumbnail border color
+$thumbnail-border : #ddd !default;
+//** Thumbnail border radius
+$thumbnail-border-radius : $border-radius-base !default;
+//** Custom text color for thumbnail captions
+$thumbnail-caption-color : $text-color !default;
+//** Padding around the thumbnail caption
+$thumbnail-caption-padding : 9px !default;
+//== Wells
+//
+//##
+$well-bg : #f5f5f5 !default;
+$well-border : darken($well-bg, 7%) !default;
+//== Badges
+//
+//##
+$badge-color : #fff !default;
+//** Linked badge text color on hover
+$badge-link-hover-color : #fff !default;
+$badge-bg : $gray-light !default;
+//** Badge text color in active nav link
+$badge-active-color : $link-color !default;
+//** Badge background color in active nav link
+$badge-active-bg : #fff !default;
+$badge-font-weight : bold !default;
+$badge-line-height : 1 !default;
+$badge-border-radius : 10px !default;
+//== Breadcrumbs
+//
+//##
+$breadcrumb-padding-vertical : 8px !default;
+$breadcrumb-padding-horizontal: 15px !default;
+//** Breadcrumb background color
+$breadcrumb-bg : #f5f5f5 !default;
+//** Breadcrumb text color
+$breadcrumb-color : #ccc !default;
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color : $gray-light !default;
+//** Textual separator for between breadcrumb elements
+$breadcrumb-separator : "/" !default;
+//== Carousel
+//
+//##
+$carousel-text-shadow : 0 1px 2px rgba(0, 0, 0, .6) !default;
+$carousel-control-color : #fff !default;
+$carousel-control-width : 15% !default;
+$carousel-control-opacity : .5 !default;
+$carousel-control-font-size : 20px !default;
+$carousel-indicator-active-bg : #fff !default;
+$carousel-indicator-border-color : #fff !default;
+$carousel-caption-color : #fff !default;
+//== Close
+//
+//##
+$close-font-weight : bold !default;
+$close-color : #000 !default;
+$close-text-shadow : 0 1px 0 #fff !default;
+//== Code
+//
+//##
+$code-color : #c7254e !default;
+$code-bg : #f9f2f4 !default;
+$kbd-color : #fff !default;
+$kbd-bg : #333 !default;
+$pre-bg : #f5f5f5 !default;
+$pre-color : $gray-dark !default;
+$pre-border-color : #ccc !default;
+$pre-scrollable-max-height : 340px !default;
+//== Type
+//
+//##
+//** Horizontal offset for forms and lists.
+$component-offset-horizontal: 180px !default;
+//** Text muted color
+$text-muted : $gray-light !default;
+//** Abbreviations and acronyms border color
+$abbr-border-color : $gray-light !default;
+//** Headings small color
+$headings-small-color : $gray-light !default;
+//** Blockquote small color
+$blockquote-small-color : $gray-light !default;
+//** Blockquote font size
+$blockquote-font-size : ($font-size-base * 1.25) !default;
+//** Blockquote border color
+$blockquote-border-color : $gray-lighter !default;
+//** Page header border color
+$page-header-border-color : $gray-lighter !default;
+//** Width of horizontal description list titles
+$dl-horizontal-offset : $component-offset-horizontal !default;
+//** Point at which .dl-horizontal becomes horizontal
+$dl-horizontal-breakpoint : $grid-float-breakpoint !default;
+//** Horizontal line color.
+$hr-border : $gray-lighter !default;
diff --git a/lab-remil/app/scss/lib/bootstrap/_custom-bootstrap.scss b/lab-remil/app/scss/lib/bootstrap/_custom-bootstrap.scss
new file mode 100644
index 00000000..d4af9c48
--- /dev/null
+++ b/lab-remil/app/scss/lib/bootstrap/_custom-bootstrap.scss
@@ -0,0 +1,50 @@
+@import "custom-bootstrap-vars";
+
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
+
+// Reset and dependencies
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/normalize";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/print";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
+
+// Core CSS
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/type";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/code";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/tables";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/forms";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons";
+
+// Components
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/navs";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/navbar";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/pagination";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/pager";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/labels";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/badges";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/alerts";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/media";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/list-group";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/panels";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/wells";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/close";
+
+// Components w/ JavaScript
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/carousel";
+
+// Utility classes
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/utilities";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
diff --git a/lab-remil/app/scss/main.scss b/lab-remil/app/scss/main.scss
index 167190ca..34d8024e 100644
--- a/lab-remil/app/scss/main.scss
+++ b/lab-remil/app/scss/main.scss
@@ -1,10 +1,12 @@
 //:::: BASE ::::
 @import './lib/base/reset',
-        './lib/base/base';
+        './lib/base/base',
+        './lib/bootstrap/custom-bootstrap';
 
 //:::: LAYOUT ::::
 @import './lib/layout/layout',
         './lib/layout/header',
         './lib/layout/main',
         './lib/layout/footer';
- 
+
+//:::: BOOTSTRAP :::::
diff --git a/lab-remil/package.json b/lab-remil/package.json
index 3f853e8a..d8d66f36 100644
--- a/lab-remil/package.json
+++ b/lab-remil/package.json
@@ -18,10 +18,12 @@
     "angular-animate": "^1.6.3",
     "angular-route": "^1.6.3",
     "angular-touch": "^1.6.3",
+    "angular-ui-bootstrap": "^2.5.0",
     "angular-ui-router": "^0.4.2",
     "babel-core": "^6.24.0",
     "babel-loader": "^6.4.1",
     "babel-preset-es2015": "^6.24.0",
+    "bootstrap-sass": "^3.3.7",
     "camelcase": "^4.0.0",
     "clean-webpack-plugin": "^0.1.16",
     "css-loader": "^0.27.3",

From 3bb5ceae42e4cc16b0ec9ddfee67dc0cb5f8d0c2 Mon Sep 17 00:00:00 2001
From: Remil Marzan <remilonwheels@gmail.com>
Date: Tue, 11 Apr 2017 13:13:27 -0700
Subject: [PATCH 16/16] added angular-material to package.json

---
 lab-remil/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lab-remil/package.json b/lab-remil/package.json
index d8d66f36..8f04fad2 100644
--- a/lab-remil/package.json
+++ b/lab-remil/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "angular": "^1.6.3",
     "angular-animate": "^1.6.3",
+    "angular-material": "^1.1.3",
     "angular-route": "^1.6.3",
     "angular-touch": "^1.6.3",
     "angular-ui-bootstrap": "^2.5.0",