Kibibit · thatkookooguy · Aug 1, 2016 · Jul 25, 2016 · Jul 25, 2016 · Jul 25, 2016
diff --git a/bower.json b/bower.json
@@ -21,7 +21,9 @@
     "ng-device-detector": "~3.0.1",
     "viewerjs": "fengyuanchen/viewerjs#~0.4.0",
     "opentype.js": "^0.6.3",
-    "underscore": "^1.8.3"
+    "underscore": "^1.8.3",
+    "angular-material-icons": "^0.7.1",
+    "svg-morpheus": "^0.3.2"
   },
   "resolutions": {
     "angular": "1.5.8"

diff --git a/public/app/app.js b/public/app/app.js
@@ -1,20 +1,21 @@
 angular.module('kibibitCodeEditor',
-	['angular-loading-bar',
-	'ngAnimate',
-	'app.routes',
-	'treeControl',
-	'ui.ace',
-	'ngDialog',
-	'ngMaterial',
-	'FBAngular',
-	'ui.layout',
-	'ngScrollbars',
+  ['angular-loading-bar',
+  'ngAnimate',
+  'app.routes',
+  'treeControl',
+  'ui.ace',
+  'ngDialog',
+  'ngMaterial',
+  'FBAngular',
+  'ui.layout',
+  'ngScrollbars',
   'ngSanitize',
   'hc.marked',
   'emoji',
   'jsonFormatter',
   'ngclipboard',
-  'ng.deviceDetector'])
+  'ng.deviceDetector',
+  'ngMdIcons'])
 
 .config(['$compileProvider', function($compileProvider) {
   $compileProvider.debugInfoEnabled(false);

diff --git a/public/app/components/fileTree/fileTree.js b/public/app/components/fileTree/fileTree.js
@@ -6,7 +6,8 @@ angular.module('kibibitCodeEditor')
     bindToController: {
       path: '=kbFileTreePath',
       selection: '=kbFileTreeSelection',
-      userOptions: '=kbFileTreeOptions'
+      userOptions: '=kbFileTreeOptions',
+      onFileSelection: '&kbOnFileSelection'
     },
     controller: 'fileTreeController',
     controllerAs: 'fileTreeCtrl',
@@ -71,11 +72,13 @@ angular.module('kibibitCodeEditor')
 
         if (vm.options.selectionMode == 'folder') {
           vm.selection = folder.path;
+          vm.onFileSelection();
         }
       } else {
         file = treeNode;
         if (vm.options.selectionMode == 'file') {
           vm.selection =  file.path;
+          vm.onFileSelection();
         }
       }
     };

diff --git a/public/app/components/menuBar/menuBar.js b/public/app/components/menuBar/menuBar.js
@@ -35,6 +35,10 @@ angular.module('kibibitCodeEditor')
 
   var vm = this;
 
+  vm.svgMorphOptions = {
+    duration: 375
+  };
+
   vm.sampleAction = function(name, ev) {
     ngDialog.open({
       template: '<p>You triggered the "' + name + '" action</p>',

diff --git a/public/app/components/menuBar/menuBarTemplate.html b/public/app/components/menuBar/menuBarTemplate.html
@@ -11,6 +11,13 @@
         <div>
             <h2 class="md-toolbar-tools">{{main.projectFolderPath}}</h2>
             <md-menu-bar>
+                <button class="menu-button">
+                    <ng-md-icon
+                    icon="{{ main.isSidebarOpen ? 'arrow_back' : 'menu' }}"
+                    size="24px"
+                    options='{{ menuBarCtrl.svgMorphOptions }}'
+                    ng-click="main.isSidebarOpen = !main.isSidebarOpen"></ng-md-icon>
+                </button>
                 <md-menu>
                     <button ng-click="$mdOpenMenu()">
                         File

diff --git a/public/app/components/projectFolderModal/projectFolderModalTemplate.html b/public/app/components/projectFolderModal/projectFolderModalTemplate.html
@@ -8,7 +8,7 @@
 <div class="buttons">
     <button 
       class="btn" 
-      ng-click="closeThisDialog(ngDialogData.selectedProjectFolder)">
+      ng-click="closeThisDialog(ngDialogData.selectedProjectFolder); main.isSidebarOpen = true;">
         Select
     </button>
     <button class="btn" ng-click="closeThisDialog(0)">Close</button>

diff --git a/public/app/controllers/mainCtrl.js b/public/app/controllers/mainCtrl.js
@@ -19,6 +19,7 @@ angular.module('kibibitCodeEditor')
 
     vm.openFile = '';
     vm.openProject = {};
+    vm.isSidebarOpen = false; // for mobile view
 
     vm.settings = SettingsService.settings;
 

diff --git a/public/app/views/index.html b/public/app/views/index.html
@@ -3,6 +3,7 @@
 
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Kibibit Code Editor</title>
     <!-- FOR ANGULAR ROUTING -->
     <base href="/">
@@ -35,14 +36,14 @@
           <div ui-layout-container size="104px" class="menu-bar-container">
             <kb-menu-bar></kb-menu-bar>
           </div>
-
-          <div ui-layout-container="central" style="z-index: 6;"> 
+          <div ui-layout-container="central" class="main-area" style="z-index: 6;"> 
             <div ui-layout="{ flow : 'column', dividerSize: '10' }">
               <div ui-layout-container class="sidebar-container" size="20%">
-                  <div class="sidebar" ng-scrollbars>
+                  <div class="sidebar mobile-sidebar" ng-class="{'open': main.isSidebarOpen}" ng-scrollbars>
                     <kb-file-tree 
                       kb-file-tree-path="main.projectFolderPath"
-                      kb-file-tree-selection="main.openFile">
+                      kb-file-tree-selection="main.openFile"
+                      kb-on-file-selection="main.isSidebarOpen = false;">
                     </kb-file-tree>
                 </div>
               </div>
@@ -115,6 +116,8 @@
     <script type="text/javascript" src="assets/lib/bower_components/viewerjs/dist/viewer.js"></script>
     <script type="text/javascript" src="assets/lib/bower_components/underscore/underscore-min.js"></script>
     <script type="text/javascript" src="assets/lib/bower_components/opentype.js/dist/opentype.min.js"></script>
+    <script type="text/javascript" src="assets/lib/bower_components/angular-material-icons/angular-material-icons.js"></script>
+    <script type="text/javascript" src="assets/lib/bower_components/svg-morpheus/compile/minified/svg-morpheus.js"></script>
 
     <!-- Kibibit Code Editor -->
     <!-- Initialize -->
@@ -152,4 +155,4 @@
     <script type="text/javascript" src="app/services/eventManagerService.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/public/assets/sass/_components/_fontView.scss b/public/assets/sass/_components/_fontView.scss
@@ -9,6 +9,10 @@ kb-font-viewer {
 
   .main-section {
     display: flex;
+
+    @include phone {
+      flex-wrap: wrap;
+    }
   }
 
   .glyphs-table-container {
@@ -21,6 +25,10 @@ kb-font-viewer {
       overflow-y: auto;
       padding-bottom: 1px;
 
+      @include phone {
+        height: auto;
+      }
+
       .glyph-list-end {
         clear: both;
       }

diff --git a/public/assets/sass/_components/_menuBar.scss b/public/assets/sass/_components/_menuBar.scss
@@ -2,10 +2,28 @@
 // scss-lint:disable SelectorDepth
 // scss-lint:disable ColorVariable
 kb-menu-bar {
+  @include phone {
+    md-menu-bar {
+      padding: 0;
+    }
+  }
+
   .project-logo-container {
     height: 105px;
     width: 105px;
 
+    @include phone {
+      height: 46px;
+      margin-left: 7px;
+      width: 46px;
+
+      .logo {
+        margin-top: 11px;
+        // TODO(@thatkookooguy): need to change this at some point since it's bad practice ?
+        zoom: 47%;
+      }
+    }
+
     .logo {
       align-items: center;
       background-color: rgba(0, 0, 0, 0.3);

diff --git a/public/assets/sass/_components/_searchProject.scss b/public/assets/sass/_components/_searchProject.scss
@@ -11,6 +11,10 @@ kb-search-project {
   padding: 0;
   position: relative;
 
+  @include phone {
+    display: none;
+  }
+
   .search-btn {
     background-color: transparent;
     border: 0;

diff --git a/public/assets/sass/_components/_sidebar.scss b/public/assets/sass/_components/_sidebar.scss
@@ -4,11 +4,45 @@
   height: 100%;
   white-space: nowrap;
   width: 100%;
+
+  @include phone {
+    background: $color1;
+    bottom: 0;
+    display: block;
+    height: 100vh;
+    left: 0;
+    position: fixed;
+    top: 45px;
+    transform: translateX(-150vw);
+    transition: transform ease-in-out 250ms;
+    width: 100vw;
+    z-index: 91;
+
+    &.open {
+      transform: none;
+    }
+
+    .tree-container {
+      padding: 24px;
+    }
+
+    .close {
+      color: $primary;
+      padding: 5px;
+      position: fixed;
+      right: 10px;
+      top: 10px;
+    }
+  }
 }
 
 .sidebar-container {
   background: $color1;
   color: $primary;
   overflow: hidden;
   padding: 10px;
+
+  @include phone {
+    overflow: auto;
+  }
 }
diff --git a/public/assets/sass/style.scss b/public/assets/sass/style.scss
@@ -43,6 +43,15 @@ $color1: rgb(70, 70, 70);
 $color2: #808080;
 $color3: rgb(38, 38, 38);
 
+$tablet-width: 768px;
+$desktop-width: 1024px;
+
+@mixin phone {
+  @media (max-width: #{$tablet-width - 1px}) {
+    @content;
+  }
+}
+
 .main-app-container {
   opacity: 0;
   transition: opacity 0.5s ease;
@@ -95,6 +104,22 @@ body,
 .menu-bar-container {
   background: $color1;
   overflow: hidden;
+
+  @include phone {
+    // scss-lint:disable ImportantRule
+    height: 48px !important;
+    overflow: hidden;
+    // scss-lint:enable ImportantRule
+  }
+}
+
+@include phone {
+  // scss-lint:disable ImportantRule
+  .main-area {
+    height: calc(100vh - 52px - 30px) !important;
+    top: 52px !important;
+  }
+  // scss-lint:enable ImportantRule
 }
 
 .main-view-container {
@@ -104,6 +129,31 @@ body,
   flex-direction: column;
   flex-wrap: nowrap;
   overflow: hidden;
+
+  @include phone {
+    // scss-lint:disable ImportantRule
+    border-left: 10px solid $color1;
+    bottom: 0;
+    left: 0 !important;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100% !important;
+    z-index: 90;
+    // scss-lint:enable ImportantRule
+  }
+}
+
+.menu-button {
+  color: $primary;
+  display: none;
+  fill: $primary;
+
+  @include phone {
+    display: inline-block;
+    position: relative;
+    top: 9px;
+  }
 }
 
 .tabs {
@@ -126,6 +176,10 @@ md-toolbar {
   h2 {
     &.md-toolbar-tools {
       color: $primary;
+
+      @include phone {
+        display: none;
+      }
     }
   }
 }
@@ -182,11 +236,12 @@ treecontrol {
 
   &.ngdialog-theme-default .ngdialog-content {
     bottom: 0;
-    left: calc(50vw - 225px);
+    left: 0;
     margin: auto;
     max-height: 600px;
     overflow: hidden;
     position: absolute;
+    right: 0;
     top: 0;
     z-index: 10;
 
@@ -292,3 +347,4 @@ md-input-container {
 // scss-lint:enable IdSelector
 // scss-lint:enable NestingDepth
 // scss-lint:enable SelectorDepth
+