rework layout, minor refactoring

Author: micrum

src/app/stylesheets/_custom.scss

@@ -24,6 +24,10 @@ $green: #269f19;
 }
 
 
+// VARIABLES
+$left-sidenav-width: 150px;
+
+
 // panel-widget options animation
 .options {
   -webkit-transition:all linear 0.5s;
@@ -40,7 +44,7 @@ $green: #269f19;
   position: relative;
 
   &-content {
-    height: 600px;
+    height: 500px;
   }
 }
 
@@ -53,3 +57,9 @@ md-radio-group {
 md-icon {
   height: auto;
 }
+
+md-sidenav.md-locked-open.md-sidenav-left {
+  width: $left-sidenav-width;
+  min-width: $left-sidenav-width;
+  max-width: $left-sidenav-width;
+}

src/app/views/dashboard.html

@@ -44,9 +44,6 @@ <h2 layout-padding>Memory load</h2>
 </div>
 
 <div layout-gt-md="row">
-  <panel-widget flex-gt-md="60" title="Messages" template="app/views/partials/messages.html"></panel-widget>
-  <div layout="column" flex>
-    <panel-widget title="Performance" template="app/views/partials/progress.html" options="true"></panel-widget>
-    <panel-widget flex title="TODO list" template="app/views/partials/checkboxes.html"></panel-widget>
-  </div>
+  <panel-widget flex-gt-md="50" title="Performance" template="app/views/partials/progress.html" options="true"></panel-widget>
+  <panel-widget flex title="TODO list" template="app/views/partials/checkboxes.html"></panel-widget>
 </div>

src/app/views/main.html

@@ -1,17 +1,17 @@
 <md-sidenav md-is-locked-open="$mdMedia('gt-sm')" md-component-id="left"
             class="md-whiteframe-z2 md-sidenav-left">
   <md-toolbar class="md-accent">
-    <h1 class="md-toolbar-tools">Angular Material Dashboard</h1>
+    <h1 class="md-toolbar-tools">AMD</h1>
   </md-toolbar>
   <md-list>
     <md-item ng-repeat="item in vm.menuItems">
       <md-item-content layout="row">
-        <md-button layout="row" flex ng-click="vm.selectItem(item)"
+        <md-button layout="column" layout-align="center center" flex ng-click="vm.selectItem(item)"
                    ui-sref-active="md-accent" ui-sref="{{item.sref}}">
-          <div hide-sm hide-md flex="20" class="md-tile-content">
+          <div hide-sm hide-md class="md-tile-content">
             <md-icon md-svg-icon="{{item.icon}}"></md-icon>
           </div>
-          <div layout="row" class="md-tile-content">
+          <div class="md-tile-content">
             {{item.name}}
           </div>
         </md-button>
@@ -38,17 +38,24 @@ <h1 class="md-toolbar-tools">Angular Material Dashboard</h1>
     </md-button>
 
     <h2 class="md-toolbar-tools">{{vm.title}}</h2>
-
-    <md-select hide-sm hide-md layout-fill flex="10" layout="row" placeholder="Admin" ng-model="admin">
-      <md-option ui-sref="home.profile" value="1">Profile</md-option>
-      <md-option ng-click="vm.showActions($event)" value="2">Actions</md-option>
-    </md-select>
-
-    <!-- TODO: replace md-icon to ng-src and fix images paths in build -->
-    <md-icon hide-sm hide-md flex="10" md-svg-icon="user"></md-icon>
   </md-toolbar>
 
   <md-content flex class="md-padding">
     <div ui-view></div>
   </md-content>
 </div>
+
+<md-sidenav md-is-locked-open="$mdMedia('gt-sm')" md-component-id="right"
+            class="md-whiteframe-z2 md-sidenav-right">
+  <md-toolbar class="md-accent" layout="row">
+    <!-- TODO: replace md-icon to ng-src and fix images paths in build -->
+    <md-icon hide-sm hide-md md-svg-icon="user"></md-icon>
+
+    <md-select hide-sm hide-md placeholder="Admin" ng-model="admin">
+      <md-option ui-sref="home.profile" value="1">Profile</md-option>
+      <md-option ng-click="vm.showActions($event)" value="2">Actions</md-option>
+    </md-select>
+  </md-toolbar>
+
+  <panel-widget flex-gt-md="60" title="Messages" template="app/views/partials/messages.html"></panel-widget>
+</md-sidenav>

src/app/views/partials/messages.html

@@ -8,7 +8,7 @@
         <md-item ng-repeat="message in vm.messages">
           <md-divider></md-divider>
           <md-item-content>
-            <md-icon flex-gt-md="10" flex="20" md-svg-icon="user"></md-icon>
+            <md-icon flex="20" md-svg-icon="user"></md-icon>
             <div class="md-tile-content">
               <h3>{{message.subject}}</h3>
               <h4>{{message.userName}}</h4>
@@ -25,7 +25,7 @@ <h4>{{message.userName}}</h4>
         <md-item ng-repeat="message in vm.messages">
           <md-divider></md-divider>
           <md-item-content>
-            <md-icon flex-gt-md="10" flex="20" md-svg-icon="user"></md-icon>
+            <md-icon flex="20" md-svg-icon="user"></md-icon>
             <div class="md-tile-content">
               <h3>{{message.subject}}</h3>
               <h4>{{message.userName}}</h4>
@@ -42,7 +42,7 @@ <h4>{{message.userName}}</h4>
         <md-item ng-repeat="message in vm.messages">
           <md-divider></md-divider>
           <md-item-content>
-            <md-icon flex-gt-md="10" flex="20" md-svg-icon="user"></md-icon>
+            <md-icon flex="20" md-svg-icon="user"></md-icon>
             <div class="md-tile-content">
               <h3>{{message.subject}}</h3>
               <h4>{{message.userName}}</h4>
@@ -59,7 +59,7 @@ <h4>{{message.userName}}</h4>
         <md-item ng-repeat="message in vm.messages">
           <md-divider></md-divider>
           <md-item-content>
-            <md-icon flex-gt-md="10" flex="20" md-svg-icon="user"></md-icon>
+            <md-icon flex="20" md-svg-icon="user"></md-icon>
             <div class="md-tile-content">
               <h3>{{message.subject}}</h3>
               <h4>{{message.userName}}</h4>