Merge pull request #371 from cultuurnet/fix/modal-under-header

fix: modal appearing under header
cultuurnet · Oct 30, 2023 · 6092d80 · 6092d80
2 parents 9084694 + 226db5f
commit 6092d80
Show file tree

Hide file tree

Showing 11 changed files with 32 additions and 24 deletions.
diff --git a/app/index.html b/app/index.html
@@ -73,6 +73,7 @@
 
     <!-- Utilities -->
     <script src="scripts/utilities/ubr.utilities.module.js"></script>
+    <script src="scripts/utilities/iframe-utils.js"></script>
     <!-- Controllers-->
     <script src="scripts/utilities/app.controller.js"></script>
     <script src="scripts/utilities/login.controller.js"></script>

diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -74,7 +74,7 @@ angular
             controllerAs: 'psc'
           },
           header: {
-            templateUrl: 'views/header.html'
+            templateUrl: isRunningInIframe() ? '' : 'views/header.html'
           }
         },
         params: {
@@ -146,7 +146,7 @@ angular
     nfcService.init();
     eIDService.init();
 
-    var runningInIframe = window !== window.parent;
+    var runningInIframe = isRunningInIframe();
 
     $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
       // Don't block any state changes if not running inside an iframe

diff --git a/app/scripts/counter/activities/ubr.activities.module.js b/app/scripts/counter/activities/ubr.activities.module.js
@@ -64,7 +64,7 @@ angular
             templateUrl: 'views/counter-activities/sidebar-counter-activities.html'
           },
           header: {
-            templateUrl: 'views/header.html'
+            templateUrl: isRunningInIframe() ? '' : 'views/header.html'
           }
         }
       }

diff --git a/app/scripts/counter/checkin-devices/ubr.checkin-devices.module.js b/app/scripts/counter/checkin-devices/ubr.checkin-devices.module.js
@@ -32,7 +32,7 @@ angular
             templateUrl: 'views/checkindevices/sidebar-checkindevices.html'
           },
           header: {
-            templateUrl: 'views/header.html'
+            templateUrl: isRunningInIframe() ? '' : 'views/header.html'
           }
         }
       }

diff --git a/app/scripts/counter/membership/ubr.counter-membership.module.js b/app/scripts/counter/membership/ubr.counter-membership.module.js
@@ -15,7 +15,6 @@ angular
   ])
   /* @ngInject */
   .config(function ($stateProvider) {
-
     /* @ngInject */
     function showCreateMembershipModal($uibModal, $state) {
       $uibModal
@@ -49,7 +48,7 @@ angular
             templateUrl: 'views/counter-membership/sidebar-info.html'
           },
           header: {
-            templateUrl: 'views/header.html'
+            templateUrl: isRunningInIframe() ? '' : 'views/header.html'
           }
         },
         params: {

diff --git a/app/scripts/counter/statistics/ubr.counter-statistics.module.js b/app/scripts/counter/statistics/ubr.counter-statistics.module.js
@@ -14,8 +14,9 @@ angular
     'ubr.counter',
     'daterangepicker'
   ])
+  .constant('isRunningInIframe', isRunningInIframe())
   /* @ngInject */
-  .config(function ($stateProvider) {
+  .config(function ($stateProvider, isRunningInIframe) {
 
     $stateProvider
       .state('counter.statistics', {
@@ -31,7 +32,7 @@ angular
             templateUrl: 'views/counter-statistics/sidebar-info.html'
           },
           header: {
-            templateUrl: 'views/header.html'
+            templateUrl: isRunningInIframe ? '' : 'views/header.html'
           }
         }
       })
@@ -49,7 +50,7 @@ angular
             templateUrl: 'views/counter-statistics/sidebar-info.html'
           },
           header: {
-            templateUrl: 'views/header.html'
+            templateUrl: isRunningInIframe ? '' : 'views/header.html'
           }
         }
       })
@@ -66,7 +67,7 @@ angular
             templateUrl: 'views/counter-statistics/sidebar-info.html'
           },
           header: {
-            templateUrl: 'views/header.html'
+            templateUrl: isRunningInIframe ? '' : 'views/header.html'
           }
         }
       })
@@ -83,7 +84,7 @@ angular
             templateUrl: 'views/counter-statistics/sidebar-info.html'
           },
           header: {
-            templateUrl: 'views/header.html'
+            templateUrl: isRunningInIframe ? '' : 'views/header.html'
           }
         }
       });

diff --git a/app/scripts/utilities/app.controller.js b/app/scripts/utilities/app.controller.js
@@ -58,7 +58,7 @@ function appController($rootScope, $location, $state, $stateParams, appConfig, u
   app.user = undefined;
   app.counter = undefined;
   app.buildNumber = appConfig.buildNumber;
-  app.runningInIframe = window !== window.parent;
+  app.runningInIframe = isRunningInIframe();
 
   function browserEngineIsOlderThan(requiredEngineVersion){
     var matches = navigator.userAgent.match(/(.*)\/(.*)$/);

diff --git a/app/scripts/utilities/iframe-utils.js b/app/scripts/utilities/iframe-utils.js
@@ -0,0 +1,3 @@
+window.isRunningInIframe = function () {
+  return window !== window.parent;
+};
diff --git a/app/scripts/utilities/uitid.service.js b/app/scripts/utilities/uitid.service.js
@@ -26,7 +26,7 @@ function uitidService($q, $window, $http, appConfig) {
    */
   uitId.getUser = function() {
     var deferredUser = $q.defer();
-    var runningInIframe = window !== window.parent;
+    var runningInIframe = isRunningInIframe();
 
     if (uitId.user) {
       deferredUser.resolve(uitId.user);

diff --git a/app/styles/components/_layout.scss b/app/styles/components/_layout.scss
@@ -8,15 +8,10 @@ body {
   background-color: $white;
 }
 
-.main-content {
+.main-content--iframe {
   min-height: 100%;
   position: relative;
-  @include breakpoint(map-get($breakpoints, sml)) {
-    padding-top: 50px;
-  }
-  @include breakpoint(map-get($breakpoints, med)) {
-    padding-top: 60px;
-  }
+
   @include breakpoint(map-get($breakpoints, sml)) {
     > .main,
     > .footer {
@@ -28,7 +23,6 @@ body {
       position: fixed;
       height: 100%;
       top: 0;
-      padding-top: 50px;
       left: 0;
       z-index: 700;
     }
@@ -49,6 +43,16 @@ body {
       padding-right: 15px;
     }
   }
+}
+
+.main-content {
+  @extend .main-content--iframe;
+  @include breakpoint(map-get($breakpoints, sml)) {
+    padding-top: 50px;
+  }
+  @include breakpoint(map-get($breakpoints, med)) {
+    padding-top: 60px;
+  }
   @include breakpoint(768px) {
     > .sidebar {
       padding-top: 60px;
@@ -65,8 +69,8 @@ body {
     padding-top: 60px;
   } */
 }
-.navbar { 
-  @include breakpoint(660px) { 
+.navbar {
+  @include breakpoint(660px) {
     position: fixed;
     left: 0;
     top: 0;

diff --git a/app/views/split-view.html b/app/views/split-view.html
@@ -1,7 +1,7 @@
 <header ui-view="header" class="header" role="banner" ng-show="app.user">
 </header> <!--/ .header -->
 
-<div class="main-content clearfix">
+<div ng-class="{'main-content--iframe': app.runningInIframe, 'main-content': !app.runningInIframe}" class="clearfix">
 
     <aside role="complementary" class="sidebar grid__12 grid--bp-sml__5 grid--bp-med__4 grid--bp-xlr__3">
         <div ui-view="sidebar" class="inside" ng-show="app.user">