set height of the sidebar dynamic

* height of sidebar is set dynamic through dynamicElementHeightComponent Directive * styled out layout dynamicly through ng-class="{'sidebar-active': sidebarEnabled == 'true'}"
andrzuk · Apr 11, 2018 · 0d8ecca · 0d8ecca
1 parent 7fa7cab
commit 0d8ecca
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 3 deletions.
diff --git a/app/app.module.js b/app/app.module.js
@@ -2,6 +2,7 @@ angular.module('MainApp', [
     'appRoutes',
     'config',
     'mainDirective',
+    'uxDirectives',
     'mainFilter',
     'navController',
     'navService',

diff --git a/app/shared/directives/uxDirectives.js b/app/shared/directives/uxDirectives.js
@@ -0,0 +1,50 @@
+angular.module('uxDirectives', ['config'])
+
+.directive('dynamicElementHeightComponent', [ '$rootScope', function( $rootScope ) {
+	return {
+		restrict: 'EA',
+    scope: {},
+		link: function(scope, element, attributes) {
+      angular.element(document).ready( function () {
+
+        function changeSidebarHeigthDynamicly() {
+              element.height(Math.max($("body").height(), $("aside").height()));
+        }
+
+        function ifBigScreenAdaptedSidebarHeightElseSetToAuto () {
+          if ( window.innerWidth > 800 ) {
+          	changeSidebarHeigthDynamicly();
+          }
+          else {
+            element.css('height','auto');
+          }
+        }
+
+				// on init
+        setTimeout( function () {
+          ifBigScreenAdaptedSidebarHeightElseSetToAuto();
+        }, 200 );
+
+				// if window become resized reset height of sidebar
+        var lastWidth = $(window).width();
+
+      	$(window).resize(function() {
+      		if ( window.innerWidth != lastWidth) {
+      				lastWidth = window.innerWidth;
+              setTimeout( function () {
+                ifBigScreenAdaptedSidebarHeightElseSetToAuto();
+              }, 200 );
+      		}
+      	})
+
+
+        $rootScope.$on('$locationChangeStart', function (event, next, current) {
+          setTimeout( function () {
+            ifBigScreenAdaptedSidebarHeightElseSetToAuto();
+          }, 300 );
+      	});
+
+      })
+		}
+	}
+}])
diff --git a/app/templates/content.html b/app/templates/content.html
@@ -1,3 +1,3 @@
-<main class="container">
+<main ng-class="{'sidebar-active': sidebarEnabled == 'true'}">
     <div ng-view></div>
 </main>
diff --git a/app/templates/header.html b/app/templates/header.html
@@ -54,6 +54,6 @@
     <div ng-include="sidebarTemplate"></div>
 </div>
 
-<div ng-if="carouselEnabled == 'true'">
+<div ng-if="carouselEnabled == 'true'" ng-class="{'sidebar-active': sidebarEnabled == 'true'}">
     <div ng-include="carouselTemplate"></div>
 </div>
diff --git a/index.html b/index.html
@@ -53,6 +53,7 @@
 
     <!-- directives -->
     <script src="app/shared/directives/mainDirective.js"></script>
+    <script src="app/shared/directives/uxDirectives.js"></script>
 
     <!-- filters -->
     <script src="app/shared/filters/mainFilter.js"></script>
@@ -96,7 +97,7 @@
 
 </head>
 
-<body ng-controller="MainController">
+<body ng-controller="MainController" class="container-fluid">
 
     <div ng-include="layout.header"></div>