fix(sidebar): validate size of box name if sidebar is minimized

sensebox · Dec 7, 2017 · aee118d · aee118d
1 parent 9012f7a
commit aee118d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 11 deletions.
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -63,18 +63,20 @@ angular
       })
       .state('explore.map.sidebar', {
         url: 'explore',
-        resolve: {
-          Sidebar: function () {
+        resolve: { /* @ngInject */
+          Sidebar: function ($rootScope, $window) {
             var vm = this;
             vm.title = '';
             vm.translationId = '';
             vm.actions = [];
+
             return {
               getTitle: function () {
                 return vm.title;
               },
               setTitle: function (title) {
                 vm.title = title;
+                $rootScope.$broadcast('sidebar:titleChanged', {});
               },
               setTranslationId: function (id) {
                 vm.translationId = id;

diff --git a/app/scripts/controllers/sidebar.js b/app/scripts/controllers/sidebar.js
@@ -5,12 +5,14 @@
     .module('openSenseMapApp')
     .controller('SidebarController', SidebarController);
 
-  SidebarController.$inject = ['Sidebar'];
+  SidebarController.$inject = ['$scope', '$timeout', '$window', 'Sidebar'];
 
-  function SidebarController (Sidebar) {
+  function SidebarController ($scope, $timeout, $window, Sidebar) {
     var vm = this;
     vm.minimized = false;
     vm.Sidebar = Sidebar;
+    vm.top = 100;
+    vm.height = 50;
 
     vm.minimize = minimize;
 
@@ -24,6 +26,26 @@
     function minimize () {
       vm.minimized = !vm.minimized;
       Sidebar.minimized = vm.minimized;
+      invalidateSize();
     }
+
+    function invalidateSize () {
+      var elem = $window.document.querySelector('#sidebar-title');
+      var elemHeight = angular.element(elem)[0].clientHeight;
+
+      if (elemHeight > 50) {
+        vm.height = elemHeight + 5;
+      } else {
+        vm.height = 50;
+      }
+    }
+
+    ////
+
+    $scope.$on('sidebar:titleChanged', function () {
+      $timeout(function () {
+        invalidateSize();
+      });
+    });
   }
 })();
diff --git a/app/styles/main.css b/app/styles/main.css
@@ -290,15 +290,11 @@ a:hover {
 }
 
 .maximized {
-  height: calc(100% - 100px);
-  top: 100px;
   overflow: auto;
 }
 
 .minimized {
-  top: calc(100% - 50px);
   overflow: hidden;
-  height: 50px;
 }
 
 #sidebar .row {

diff --git a/app/views/sidebar.html b/app/views/sidebar.html
@@ -1,8 +1,12 @@
-<div id="sidebar" style="background-position: 0px -5px;" ng-class="{'maximized': !sidebar.minimized, 'minimized': sidebar.minimized}" ng-cloak>
-  <div class="row">
+<div id="sidebar"
+  style="background-position: 0px -5px;"
+  ng-style="{'top': {true: 'calc(100% - '+sidebar.height+'px)',false:sidebar.top + 'px'}[sidebar.minimized] , 'height': {true: 'calc(100% - '+sidebar.top+'px)',false:sidebar.height + 'px'}[!sidebar.minimized]}"
+  ng-class="{'maximized': !sidebar.minimized, 'minimized': sidebar.minimized}"
+  ng-cloak>
+  <div class="row" id="sidebar-title">
     <div class="col-xs-12 col-sm-12 col-md-12">
       <div class="col-xs-8 col-sm-8 col-md-8" style="padding-left: 0px;" ng-click="sidebar.minimize()">
-        <h4>{{sidebar.Sidebar.getTranslationId() | translate}}{{sidebar.Sidebar.getTitle()}}</h4>
+        <h4 class="sidebar-title-text">{{sidebar.Sidebar.getTranslationId() | translate}}{{sidebar.Sidebar.getTitle()}}</h4>
       </div>
       <div class="col-xs-4 col-sm-4 col-md-4" style="padding-right: 0px;">
         <h5>