Got main page flex set up so components are displaying properly.

Author: Steven-Nagie

gulpfile.js

@@ -20,45 +20,49 @@ var cachebust = new CacheBuster();
 
 const paths = {
   jsSource: ['./src/components/**/*.js', './src/components/*.js'],
-  cssFiles: ['./src/assets/scss/*.scss', './src/components/**/*.scss', './src/components/*.scss'],
+  cssFiles: './src/**/*.css',
+  indexFiles: './src/index.html',
+  scssFiles: './src/**/**/*.scss',
   index: './src/index.html',
   htmlFiles: './src/**/*.html',
   dist: './dist',
 };
 
-gulp.task('build-css', function(){
-    return gulp.src(paths.cssFiles)
-        .pipe(sourcemaps.init())
-        .pipe(sass())
-        .pipe(cachebust.resources())
-        .pipe(concat('styles.css'))
-        .pipe(gulp.dest(paths.dist));
+gulp.task('build-css', function () {
+  return gulp.src([paths.scssFiles, paths.cssFiles])
+    .pipe(sourcemaps.init())
+    .pipe(sass())
+    .pipe(cachebust.resources())
+    .pipe(concat('styles.css'))
+    .pipe(gulp.dest(paths.dist));
 });
 
 gulp.task('clean', function (cb) {
-    del([
-        'dist'
-    ], cb);
+  del([
+    'dist'
+  ], cb);
 });
 
-gulp.task('build-html', function(){
-    return gulp.src([paths.htmlFiles, paths.index])
+gulp.task('build-html', function () {
+  return gulp.src([paths.htmlFiles, paths.indexFiles])
     .pipe(gulp.dest(paths.dist))
 });
 
-gulp.task('build-js', function() {
+gulp.task('build-js', function () {
   return gulp.src(paths.jsSource)
-      .pipe(sourcemaps.init())
-      .pipe(print())
-      .pipe(babel({ presets: ['es2015'] }))
-      .pipe(concat('bundle.js'))
+    .pipe(sourcemaps.init())
+    .pipe(print())
+    .pipe(babel({
+      presets: ['es2015']
+    }))
+    .pipe(concat('bundle.js'))
     //   .pipe(uglify())
-      .pipe(sourcemaps.write('./'))
-      .pipe(gulp.dest(paths.dist));
+    .pipe(sourcemaps.write('./'))
+    .pipe(gulp.dest(paths.dist));
 });
 
-gulp.task('watch', function() {
-    return gulp.watch([paths.jsSource, paths.cssFiles, paths.index, paths.htmlFiles],['clean', 'build-css', 'build-js', 'build-html']);
+gulp.task('watch', function () {
+  return gulp.watch([paths.jsSource, paths.cssFiles, paths.scssFiles, paths.indexFiles, paths.htmlFiles], ['clean', 'build-css', 'build-js', 'build-html']);
 });
 
 gulp.task('default', ['clean', 'build-css', 'build-js', 'build-html', 'watch']);

src/assets/scss/reset.css

@@ -0,0 +1,43 @@
+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;
+}

src/assets/scss/styles.scss

@@ -1 +1,71 @@
+$sidebar-color: #222222;
+$main-background: #303133;
+$container1: #262729;
+$container2: #2B2C2E;
+$container3: #3C3C3C;
+$container4: #1D1D1F;
+$blueContainer: #363749;
 
+$font: 'Lato', sans-serif;
+$yellow-color: #ECB613;
+$blue-color: #6795DE;
+
+
+// Thin 100 Italic
+// Light 300
+// Light 300 Italic
+// Regular 400
+// Regular 400 Italic
+// Bold 700
+// Bold 700 Italic
+
+
+
+body {
+    display: flex;
+}
+
+main {
+  background-color: $main-background;
+  width: calc(100vw - 55px);
+}
+
+.font16-reg {
+    color:white;
+    font-family: $font;
+    font-size: 16px;
+    line-height: 22px;
+    font-weight: 400;
+}
+
+.font14-reg {
+    color:white;
+    font-family: $font;
+    font-size: 14px;
+    line-height: 22px;
+    font-weight: 400;
+}
+
+.font14-bold {
+    color:white;
+    font-family: $font;
+    font-size: 14px;
+    line-height: 28px;
+    font-weight: 700;
+    position: absolute;
+}
+
+.side-menu {
+    background-color: $sidebar-color;
+    height: 100vh;
+    width: 55px;
+}
+
+.top-menu {
+    background-color: $sidebar-color;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    width: 150px;
+    height: 50px;
+}

src/components/training/training.scss

@@ -3,6 +3,9 @@
   width: 40vw;
 }
 
+
 .training-body {
   background-color: red;
+  height: 50vh;
+  width: 50vw;
 }

src/components/training/trainingCtrl.js

@@ -5,7 +5,7 @@ angular.module('app').controller('trainingCtrl', function($scope, $state, mainSe
   $scope.sendSolution = function(input) {
     // mainService.getTest(input).then((response) => console.log(response));
     input = JSON.stringify(input);
-    // input = input.replace("\n", " ");
+    input = input.replace("\n", " ");
     console.log(input);
   }
 

src/index.html

@@ -1,16 +1,28 @@
 <html ng-app='app'>
 <header>
-
-
-<link rel="stylesheet" href="./styles.css">
+  <link rel="stylesheet" href="./styles.css">
+  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 </header>
+
 <body>
+  <div class="side-menu font14-reg">
+    <ul>
+      <li>Home</li>
+      <li>Kata</li>
+      <li>Kumite</li>
+      <li>Forum</li>
+      <li>Docs</li>
+    </ul>
+  </div>
 
-<div>
+  <main>
+    <div class="top-menu">
+    </div>
     <ui-view></ui-view>
-</div>
+  </main>
 </body>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
 <script type='text/javascript' src='./bundle.js'></script>
+
 </html>