Merge branch 'master' into home

Author: Steven-Nagie

src/assets/imgs/asset_23.png

@@ -16,6 +16,7 @@ $blue-color: #6795DE;
 $orange-color: #CF4B32;
 $clone-wars-color: rgb(217, 217, 217);
 $grey-color: #C0C0C0;
+$green-color: #5F8120;
 // Thin 100 Italic
 // Light 300
 // Light 300 Italic
@@ -34,7 +35,6 @@ body {
 main {
     width: calc(100vw - 55px);
     margin-left: 55px;
-//   width: 100vw;
 }
 
 a {
@@ -44,6 +44,14 @@ a {
 
 /*********FONTSFONTSFONTSFONTSFONTS*********/
 
+.font40-reg {
+  color: #efefef;
+  font-family: $font;
+  font-size: 40px;
+  line-height: 28px;
+  font-weight: 400;
+}
+
 .font20-reg {
   color: #efefef;
   font-family: $font;
@@ -68,6 +76,13 @@ a {
   font-weight: 700;
 }
 
+.font16-reg {
+  color: white;
+  font-family: $font;
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 400;
+}
 .font16-reg {
   color: white;
   font-family: $font;
@@ -153,140 +168,4 @@ a {
   font-size: 12px;
   line-height: 12px;
   font-weight: 400;
-}
-
-.font10-reg-gray {
-  color: $grey-color;
-  font-family: $font;
-  font-size: 10px;
-  font-weight: 400;
-  line-height: 20px;
-}
-
-/**************SIDE MENU**************/
-.view {
-display:flex;
-flex-direction: row;
-
-}
-
-.side-menu {
-  background-color: $sidebar-color;
-  height: 100%;
-  width: 55px;
-  padding: 5px;
-  float: left;
-  position: fixed;
-  left: 0;
-//   display:none;
-}
-
-.side-menu-icon {
-  width: 35px;
-  height: 35px;
-  margin: auto;
-  align-content: center;
-}
-
-.side-menu-container {
-  background-color: $sidebar-color;
-  height: 100vh;
-  width: 0px;
-  top: 0px;
-  display: flex;
-  overflow: hidden;
-  transition: width 0.5s;
-  position: fixed;
-  left:55px;
-}
-
-.menu-items{
-
-}
-
-/**************TOP MENU**************/
-
-.top-menu {
-  background-color: $sidebar-color;
-  position: fixed;
-  top: 0px;
-  right: 0px;
-  width: 150px;
-  height: 50px;
-}
-
-/**************MAIN AREA**************/
-
-.main {
-  height: 100vh;
-  width: calc(100vw-55px);
-  background-color: $main-background;
-  display: flex;
-}
-
-.main-div {
-
-    height: 100vh;
-    width: 100%;
-    margin: auto;
-    float: right;
-    // position: absolute;
-    // right: 0;
-}
-
-/**************LOGIN PAGE**************/
-
-.middle {
-  background-color: $container1;
-  display: block;
-  width: 330px;
-  height: 85vh;
-  margin: auto;
-}
-
-.logo {
-  display: block;
-  margin: auto;
-  border-radius: 10px;
-  text-shadow: 5px;
-}
-
-.logo-padding {
-  padding: 75px 75px 10px 75px;
-}
-
-.logo-font {
-  color: $clone-wars-color;
-  font-size: 35px;
-  text-align: center;
-}
-
-.button {
-  background-color: $button1;
-  width: 280px;
-  height: 30px;
-  border-radius: 5px;
-  margin: auto;
-  color: $orange-color;
-  text-align: center;
-  vertical-align: middle;
-  line-height: 30px;
-  // flex-direction: row;
-  align-content: center;
-}
-
-.button-icon {
-  height: 20px;
-  width: 20px;
-}
-
-.center {
-  text-align: center;
-  color: $grey-color;
-}
-
-.bottom-links {
-  text-align: center;
-  display: flex;
-  color: white;
-}
+}

src/assets/imgs/asset_30.png

@@ -7,15 +7,21 @@ angular.module('app').directive('animateDir', function () {
     link: function (scope, elems, attrs) {
       $(document).ready(function () {
         $('.side-menu').on('mouseenter', function () {
-          console.log('this is working');
-          $('.side-menu-container').css('width', '160px');
+          $('.side-menu').css('width', '215px');
+          setTimeout(function(){
+          $('.menu-items').css('display','flex');
+          },200);
         });
-        $('.side-menu-container').on('mouseleave', function () {
-          console.log("it's all gone");
-          $('.side-menu-container').css('width', '0px');
+        $('.side-menu').on('mouseleave', function () {
+          $('.side-menu').css('width', '55px');
+          $('.menu-items').css('display','none');
         });
         $('.top-menu').on('mouseenter', function () {
-          console.log('You have entered the twilight zone');
+          $('.top-menu').css('background-color', '#222222')
+        });
+
+        $('.top-menu').on('mouseleave', function () {
+          $('.top-menu').css('background-color', 'rgba(0,0,0,0)')
         });
 
         $('.solutions-icon').on('mouseclick', function () {

src/assets/imgs/asset_31.png

@@ -24,8 +24,7 @@ angular.module('app').controller('homeCtrl', function($scope, $state, mainServic
     // If there is a button you can link the button to $scope.getRandomKata
 
 
-    $scope.init = () => {
-        $scope.getUser();
-    }
+    $scope.getUser();
+
 
 });

src/assets/scss/styles.scss

@@ -1,8 +1,8 @@
-<div class='main'>
+<div class='login-main'>
   <div class='middle'>
     <div>
       <img src='./assets/imgs/ST-R.png' class='logo logo-padding'>
-      <p class='font16-reg logo-font logo'>clonewars</p><br><br>
+      <p class='font40-reg logo-font logo'>clonewars</p><br><br>
     </div>
     <div>
       <a href='/auth/github'>
@@ -13,7 +13,7 @@
           </div>
         </div>
       </a>
-      <div class="font14-reg center">
+      <div class="font14-lit-gray center">
         <br>
         <p><a href='https://github.com/join' class='center'>-sign up-</a></p>
       </div>

src/components/directive.js

@@ -0,0 +1,80 @@
+/**************LOGIN PAGE**************/
+$sidebar-color: #222222;
+$main-background: #303133;
+$container1: #262729;
+$container2: #2B2C2E;
+$container3: #3C3C3C;
+$container4: #1D1D1F;
+$blueContainer: #363749;
+$button1: #1E1F21;
+
+$font: 'Lato', sans-serif;
+
+$yellow-color: #ECB613;
+$blue-color: #6795DE;
+$orange-color: #CF4B32;
+$clone-wars-color: rgb(217, 217, 217);
+$grey-color: #C0C0C0;
+
+.login-main {
+  height: 100vh;
+  width: 100vw;
+  background-color: $main-background;
+  display: flex;
+
+//   margin:auto;
+}
+.middle {
+  background-color: $container1;
+  width: 330px;
+  height: 85vh;
+  margin: auto;
+
+}
+
+.logo {
+  display: block;
+  margin: auto;
+  border-radius: 10px;
+  text-shadow: 5px;
+}
+
+.logo-padding {
+  padding: 75px 75px 10px 75px;
+}
+
+.logo-font {
+  color: $clone-wars-color;
+  font-size: 35px;
+  text-align: center;
+}
+
+.button {
+  background-color: $button1;
+  width: 280px;
+  height: 30px;
+  border-radius: 5px;
+  margin: auto;
+  color: $orange-color;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 30px;
+  // flex-direction: row;
+  align-content: center;
+}
+
+.button-icon {
+  height: 20px;
+  width: 20px;
+}
+
+.center {
+  text-align: center;
+  color: $grey-color;
+}
+
+.bottom-links {
+  text-align: center;
+  display: flex;
+  color: white;
+}

src/components/home/homeCtrl.js

@@ -1,27 +1,28 @@
 <animate-dir settings='settings'></animate-dir>
 <div class='view'>
-<div class='menu'>
-  <div class="side-menu font14-reg menu-items">
-    <ul class='center'>
-      <li><img src='./assets/imgs/ST-R.png' class='side-menu-icon'></li>
-      <li><img src='./assets/imgs/arrow_icon.png' class='side-menu-icon'></li>
-      <li><img src='./assets/imgs/kumite_icon.png' class='side-menu-icon'></li>
-      <li><img src='./assets/imgs/blurb_icon.png' class='side-menu-icon'></li>
-      <li><img src='./assets/imgs/ST-R.png' class='side-menu-icon'></li>
-    </ul>
-  </div>
-  <div class='side-menu-container font14-reg'>
-    <ul>
-      <li>Home</li>
-      <li>Kata</li>
-      <li>Kumite</li>
-      <li>Forum</li>
-      <li>Docs</li>
-    </ul>
-  </div>
-  <div class="top-menu">
-  </div>
-  <main>
-    <ui-view class='main-div'></ui-view>
-  </main>
+  <div class='menu'>
+    <div class="side-menu font16-reg">
+      <ul>
+        <li class='ul'>
+          <div class='icon-div'><img src='./assets/imgs/ST-R.png' class='main-icon li'></div><span class='menu-items li'>Home</span></li><br>
+        <li class="ul">
+          <div class='icon-div'><img src='./assets/imgs/arrow_icon.png' class='side-menu-icon li' id='icon1'></div><span class='menu-items'>Kata</span></li><br>
+        <li class="ul">
+          <div class='icon-div'><img src='./assets/imgs/kumite_icon.png' class='side-menu-icon li' id='icon2'></div><span class='menu-items'>Kumite</span></li><br>
+        <li class="ul">
+          <div class='icon-div'><img src='./assets/imgs/blurb_icon.png' class='side-menu-icon li' id='icon3'></div><span class='menu-items'>Forum</span></li><br>
+        <li class="ul">
+          <div class='icon-div'><img src='./assets/imgs/asset_23.png' class='side-menu-icon li' id='icon4'></div><span class='menu-items'>Docs</span></li><br>
+      </ul>
+    </div>
+    <div class="top-menu">
+      <ul class='ul-top'>
+        <li><div class='li65'><img src='./assets/imgs/asset_30.png' class='li65-img'></div></li>
+        <li><div class='li65'><img src='./assets/imgs/asset_31.png'class='li65-img'></div></li>
+        <li class='li170'><li>img</li><li>kyu</li><li>lvl</li></li>
+      </ul>
+    </div>
+    <main>
+      <ui-view class='main-div'></ui-view>
+    </main>
   </div>