Merge pull request #252 from JoeForks/feature/responsive-sidebar

Feature/responsive sidebar

app/assets/sass/main.scss

@@ -25,6 +25,7 @@ html, body {
 
 // Styles for plugins
 @import "plugins/messenger";
+@import "plugins/animate";
 
 // Status Page will need to override certain styles.
 @import "status-page";

app/assets/sass/partials/_sidebar.scss

@@ -98,6 +98,57 @@ body.dashboard {
         }
     }
 
+    // Sidebar media queries
+    @media (max-width: $screen-sm-max) {
+        .sidebar {
+            width: 80px;
+            .sidebar-inner {
+                .profile .avatar img {
+                    width: 40px;
+                }
+                .profile .username {
+                    @extend .hidden-xs;
+                    @extend .hidden-sm;
+                }
+                .quick-add-incident {
+                    .btn {
+                        padding: 3px 6px;
+                    }
+                    i {
+                        @extend .visible-xs;
+                        @extend .visible-sm;
+                        font-size: 20px;
+                    }
+                    span {
+                        @extend .hidden-xs;
+                        @extend .hidden-sm;
+                    }
+                }
+                & > ul > li > a {
+                    text-align: center;
+                    & > i {
+                        font-size: 25px;
+                    }
+                    & > span {
+                        @extend .hidden-xs;
+                        @extend .hidden-sm;
+                    }
+                }
+            }
+            .bottom-menu-sidebar {
+                @extend .hidden-xs;
+                @extend .hidden-sm;
+            }
+        }
+    }
+
+    // Sidebar media queries
+    @media (max-width: $screen-sm-max) {
+        .sidebar {
+            @extend .hidden-xs;
+        }
+    }
+
     .sub-sidebar {
         left: 0;
         top: 0;
@@ -147,5 +198,9 @@ body.dashboard {
             padding: 24px 50px;
             padding-bottom: 80px;
         }
+
+        @media (max-width: $screen-sm-max) {
+
+        }
     }
 }

app/assets/sass/plugins/_animate.scss

@@ -0,0 +1,13 @@
+@import "../../bower_components/animate-sass/animate";
+
+body {
+	-webkit-backface-visibility: hidden; // Addresses a small issue in webkit: http://bit.ly/NEdoDq
+}
+.animated {
+	@include animate-prefixer(animation-duration, $base-duration);
+	@include animate-prefixer(animation-fill-mode, both);
+
+	&.hinge {
+		@include animate-prefixer(animation-duration, $base-duration * 2);
+	}
+}

app/views/partials/dashboard/sidebar.blade.php

@@ -20,18 +20,21 @@
         <div class="clearfix"></div>
         <div class="quick-add-incident">
             <a class="btn btn-block btn-default uppercase" href="{{ route('dashboard.incidents.add') }}">
-                {{ trans('cachet.dashboard.incident-add') }}
+                <i class="icon ion-android-checkmark-circle visible-sm"></i>
+                <span class="hidden-sm">{{ trans('cachet.dashboard.incident-add') }}</span>
             </a>
         </div>
         <ul>
             <li {{ set_active('dashboard') }}>
                 <a href="{{ route('dashboard') }}">
-                    <i class="icon ion-speedometer"></i> {{ trans('cachet.dashboard.dashboard') }}
+                    <i class="icon ion-speedometer"></i>
+                    <span>{{ trans('cachet.dashboard.dashboard') }}</span>
                 </a>
             </li>
             <li {{ set_active('dashboard/incidents*') }}>
                 <a href="{{ route('dashboard.incidents') }}">
-                    <i class="icon ion-android-alert"></i> {{ trans('cachet.dashboard.incidents') }}
+                    <i class="icon ion-android-alert"></i>
+                    <span>{{ trans('cachet.dashboard.incidents') }}</span>
                 </a>
             </li>
             {{-- <li {{ set_active('dashboard/incidents/templates') }}>
@@ -41,7 +44,8 @@
             </li> --}}
             <li {{ set_active('dashboard/components*') }}>
                 <a href="{{ route('dashboard.components') }}">
-                    <i class="icons ion-ios-keypad"></i> {{ trans('cachet.dashboard.components') }}
+                    <i class="icons ion-ios-keypad"></i>
+                    <span>{{ trans('cachet.dashboard.components') }}</span>
                 </a>
             </li>
             {{-- <li {{ set_active('dashboard/metrics') }}>
@@ -56,7 +60,10 @@
             </li> --}}
             <li {{ set_active('dashboard/settings*') }}>
                 <a href="{{ route('dashboard.settings.setup') }}">
-                    <i class="icon ion-gear-a"></i> {{ trans('cachet.dashboard.settings') }}
+                    <i class="icon ion-gear-a"></i>
+                    <span>
+                        {{ trans('cachet.dashboard.settings') }}
+                    </span>
                 </a>
             </li>
         </ul>

bower.json

@@ -1,16 +1,17 @@
 {
-  "name": "Cachet",
-  "dependencies": {
-    "bootstrap-sass-official": "3.3.*",
-    "chartjs": "0.2.*",
-    "humane-js": "~3.2.2",
-    "ionicons": "~2.0.0",
-    "jquery": "~2.1.1",
-    "jquery-minicolors": "2.1.10",
-    "jquery-serialize-object": "2.4.3",
-    "lodash": "~2.4.1",
-    "messenger": "~1.4.1",
-    "rivets": "0.7.*",
-    "Sortable": "1.0.0"
-  }
+    "name": "Cachet",
+    "dependencies": {
+        "bootstrap-sass-official": "3.3.*",
+        "chartjs": "0.2.*",
+        "humane-js": "~3.2.2",
+        "ionicons": "~2.0.0",
+        "jquery": "~2.1.1",
+        "jquery-minicolors": "2.1.10",
+        "jquery-serialize-object": "2.4.3",
+        "lodash": "~2.4.1",
+        "messenger": "~1.4.1",
+        "rivets": "0.7.*",
+        "Sortable": "1.0.0",
+        "animate-sass": "~0.6.2"
+    }
 }

public/build/rev-manifest.json

@@ -1,4 +1,4 @@
 {
-  "css/all.css": "css/all-84f50550.css",
+  "css/all.css": "css/all-3c34adf6.css",
   "js/all.js": "js/all-8dfe8cf3.js"
 }