Merge pull request CodewarsClone#84 from CodewarsClone/mon1.2.2

Mon1.2.2

Author: Jon Myrick

gulpfile.js

@@ -24,7 +24,7 @@ const paths = {
   // indexFiles: './src/index.html',
   scssFiles: './src/**/**/*.scss',
   // index: './src/index.html',
-  // htmlFiles: './src/**/*.html',
+  htmlFiles: './src/**/*.html',
   dist: './src/dist',
 };
 

npm-debug.log

@@ -15,12 +15,18 @@
           <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>
+
+    <!--~~~~~~~~~~~~ TOP MENU ~~~~~~~~~~~~~~~~~-->
     <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>{{userPic}}</li><li>kyu</li><li>lvl</li></li>
-      </ul>
+      <div class='ul-top'>
+        <div class='li65'><img src='./assets/imgs/asset_30.png' class='li65-img'></div>
+        <div class='li65'><img src='./assets/imgs/asset_31.png'class='li65-img'></div>
+        <div class='li170'>
+          <img src='{{userPic}}' class='li170-img'>
+          <div>{{userKyu}}</div>
+          <div>{{userPoints}}<div>
+        </div>
+      </div>
     </div>
     <main>
       <ui-view class='main-div'></ui-view>

src/components/menus/menu.html

@@ -34,7 +34,7 @@ cursor: pointer;
   background-color: $sidebar-color;
   height: 100vh;
   width: 55px;
-  padding: 5px;
+  padding: 5px 0 0 0;
   float: left;
   position: fixed;
   left: 0;
@@ -56,6 +56,7 @@ cursor: pointer;
     height:35px;
     left:50px;
     cursor: pointer;
+    
 }
 .side-menu-icon {
 //   width: 20px;
@@ -88,22 +89,33 @@ cursor: pointer;
 }
 .li65 {
     width: 65px;
+    margin:auto;
+    display: flex;
+    justify-content: center;
 }
 .li65-img {
     margin:auto;
     vertical-align: center;
     height: 25px;
+    align-self:center;
+    
 }
 
 .li170 {
     width: 170px;
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
+    margin: auto;
+    justify-content: center;
 }
 
 .li170-img {
     vertical-align: center;
+    height: 40px;
+    border-radius: 10px;
+    margin:  5px auto;
+    align-self: center;
+    
 }
 
 .li170-1 {

src/components/menus/menu.scss

@@ -1,2 +1,5 @@
 angular.module('app').controller('menuCtrl', function($scope, $state, mainService, $stateParams){
+    $scope.userPic = mainService.user.picture_url;
+    $scope.userKyu = mainService.user.kyu_level;
+    $scope.userPoints = mainService.user.points;
 });