Training views

Author: SterlingChin

gulpfile.js

@@ -38,7 +38,11 @@ gulp.task('build-css', function () {
 });
 
 gulp.task('clean', function (cb) {
-  del([paths.dist], cb);
+  return del([
+    'src/dist/**'
+  ], cb).then(() => {
+    gulp.start(['build-css', 'build-js']);
+  });
 });
 
 // gulp.task('build-html', function () {
@@ -62,7 +66,7 @@ gulp.task('build-js', function () {
 gulp.task('build', ['clean', 'build-css', 'build-js']);
 
 gulp.task('watch', function () {
-  return gulp.watch([paths.jsSource, paths.cssFiles, paths.scssFiles], ['clean', 'build-css', 'build-js']);
+  return gulp.watch([paths.jsSource, paths.cssFiles, paths.scssFiles], ['clean']);
 });
 
-gulp.task('default', ['clean', 'build-css', 'build-js', 'watch']);
+gulp.task('default', ['clean', 'watch']);

src/components/directive.js

@@ -13,10 +13,17 @@ angular.module('app').directive('animateDir', function () {
         $('.side-menu-container').on('mouseleave', function () {
           console.log("it's all gone");
           $('.side-menu-container').css('width', '0px');
-        })
-      $('.top-menu').on('mouseenter', function(){
-        console.log('You have entered the twilight zone');
-      })
+        });
+        $('.top-menu').on('mouseenter', function () {
+          console.log('You have entered the twilight zone');
+        });
+
+        $('.solutions-icon').on('mouseclick', function () {
+          console.log("This is working");
+        });
+
+
+
       })
     }
   }

src/components/training/animateDir.js

@@ -0,0 +1,15 @@
+angular.module('app').directive('trainingAnimateDir', function () {
+  return {
+    scope: {
+      trainingAnimate: "="
+    },
+    restrict: 'EA',
+    link: function (scope, elems, attrs) {
+      $(document).ready(function () {
+        $('.solutions-icon').on('mouseclick', function () {
+          console.log("This is working");
+        });
+      })
+    }
+  }
+});

src/components/training/training.html

@@ -1,46 +1,37 @@
 <section class="training-main">
-
   <div class="training-body">
-
-    <div class="training-top">
-
+    <div class="training-top" ng-style='allGone'>
       <div class="kata-name-container">
-
         <div class="kata-name-container-top">
           <img src="./assets/imgs/5_kyu_icon.png" alt="Difficulty" id="difficulty-icon">
           <h3 class="font16-reg" id="kata-name">
             Name of Kata
           </h3>
         </div>
-
-
         <div class="kata-stats">
           <p>Here's where stats go</p>
           <p>Here's where stats go</p>
           <p>Here's where stats go</p>
         </div>
-
-      </div> <!--End kata-name-container div-->
-
+      </div>
+      <!--End kata-name-container div-->
       <div class="selection-div">
-        <select class="language-select-dropdown select-dropdown" ng-init="selectedLanguage = languages[0]" ng-model="selectedLanguage" ng-options="x for x in languages">
+        <select class="language-select-dropdown select-dropdown" ng-init="selectedLanguage = languages[0]" ng-model="selectedLanguage"
+          ng-options="x for x in languages">
 
         </select>
-        <select class="language-version-select-dropdown select-dropdown" ng-init="selectedVersion = versions[0]" ng-model="selectedVersion" ng-options="x for x in versions">
+        <select class="language-version-select-dropdown select-dropdown" ng-init="selectedVersion = versions[0]" ng-model="selectedVersion"
+          ng-options="x for x in versions">
 
         </select>
       </div>
-
       <div class="assorted-options">
         <div class="view-options">Here's where view options go</div>
         <div class="view-options">Here's where view options go</div>
         <div class="view-options">Here's where view options go</div>
       </div>
-
     </div>
-
     <div class="kata">
-
       <!-- <div class="instructions">
         <div class="instructions-head">
           <button class="instructions-selector font13-reg-gray">Instructions</button>
@@ -56,39 +47,36 @@ <h2 class="font20-reg">Name of Kata</h2>
           </div>
         </div>
       </div> -->
-
-      <div class="instructions">
-          <div class="instructions-head">
-            <button class="instructions-selector font13-reg-gray" ng-click="showInstructions()">Instructions</button>
-            <button class="instructions-selector font13-reg-gray" ng-click="showOutput()">Output</button>
-          </div>
-          <hr>
-          <show-output ng-hide="showOutputShow"></show-output>
-          <show-instructions ng-hide="showInstructionsShow"></show-instructions>
+      <div class="instructions" ng-style="instructionStyle">
+        <div class="instructions-head">
+          <button class="instructions-selector font13-reg-gray" ng-click="showInstructions()">Instructions</button>
+          <button class="instructions-selector font13-reg-gray" ng-click="showOutput()">Output</button>
+        </div>
+        <hr>
+        <show-output ng-hide="showOutputShow"></show-output>
+        <show-instructions ng-hide="showInstructionsShow"></show-instructions>
       </div>
-
-      <div class="kata-right">
-        <div>
+      <div class="kata-right" ng-style='kataStyle'>
         <div class="solution-div font14-lit-gray">
-          <p>Solution:</p>
+          <div class="solutions-header">
+            <p>Solution:</p>
+            <button value='small' ng-click="kataStyle={'width':'40vw'}; instructionStyle={'width':'60vw'}">small</button>
+            <button value='medium' ng-click="kataStyle={'width':'60vw'}; instructionStyle={'width':'40vw'}">medium</button>
+            <button value='large' ng-click="kataStyle={'width':'100vw'}; instructionStyle={'width':'0vw','margin':'0px'}">large</button>
+            <button value='full-screen' ng-click="kataStyle={'width':'100vw'}; instructionStyle={'width':'0vw','margin':'0px'}; allGone={'display':'none'}">full screen</button>
+          </div> 
           <div>
-            <textarea name="solution" id="solution-input" ng-init="solutionInput = 'var a = 1;'"ng-model="solutionInput"></textarea>
+            <textarea name="solution" id="solution-input" ng-init="solutionInput = 'var a = 1;'" ng-model="solutionInput"></textarea>
           </div>
         </div>
-
         <div class="example-tests-div font14-lit-gray">
           <p>Example Tests:</p>
-          <form>
-            <textarea name="examples" id="example-input" ng-init="examplesInput = 'Test.assertEquals(a, 1);'" id="example-tests-input" ng-model="examplesInput"></textarea>
-          </form>
+          <textarea name="examples" id="example-input" ng-init="examplesInput = 'Test.assertEquals(a, 1);'" id="example-tests-input"
+            ng-model="examplesInput"></textarea>
           <button ng-click="testExamples()" class="test-examples-button font12-reg-blue">RUN EXAMPLES</button>
-          <button ng-click="testSuite()" class="test-suite-button font12-reg-black" style=""><i class="fa fa-caret-right fa-lg" style="margin-right: 2px" aria-hidden="true"></i>ATTEMPT</button>
-        </div>
+          <button ng-click="testSuite()" class="test-suite-button font12-reg-black"><i class="fa fa-caret-right fa-lg" style="margin-right: 2px" aria-hidden="true"></i>ATTEMPT</button>
         </div>
       </div>
-
     </div>
-
   </div>
-
 </section>

src/components/training/training.scss

@@ -74,17 +74,17 @@ $grey-color: #C0C0C0;
   display: flex;
   flex-direction: column;
   padding-top: 2vh;
-  height: calc(100vh - 150px);
-  width: 50vw;
+  height: calc(100vh);
+  width: 60vw;
   background-color: $container1;
-  margin: 15px 15px 15px 0px;
+  margin: 15px;
 }
 
 .instructions {
   // height: calc(100vh - 150px);
-  width: 50vw;
+  width: 40vw;
   overflow: scroll;
-  margin: 15px;
+  margin: 15px 0 15px 15px;
   background-color: $container1;
 }
 
@@ -132,10 +132,24 @@ hr {
   background-color: #91b2e7;
 }
 
-.training-body {
-  // background-color: red;
-}
+// .training-body {
+//   // background-color: red;
+// }
+
+// #text-input {
 
-#text-input {
+// }
 
+.solutions-header {
+
+}
+
+.solutions-icon {
+height: 10px;
+width: 10px;
+background-color: red;
 }
+
+// .examples-icon {
+
+// }