Fixed some cross browser flexbox popup issues

Set min height for poor IE & safari flexbox support.
Fixes #105.

diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js
index ace0dcdd2642868430c55fd0af8b32e395c79707..9ca335ee7c4546f39b902b807d69c60ab4eff366 100644 (file)
--- a/resources/assets/js/global.js
+++ b/resources/assets/js/global.js
@@ -134,17 +134,24 @@ $(function () {
     $('.popup-close').click(function() {
         $(this).closest('.overlay').fadeOut(240);
     });
-
     $('.overlay').click(function(event) {
         if (!$(event.target).hasClass('overlay')) return;
         $(this).fadeOut(240);
     });
 
+    // Prevent markdown display link click redirect
     $('.markdown-display').on('click', 'a', function(event) {
         event.preventDefault();
         window.open($(this).attr('href'));
     });
 
+    // Detect IE for css
+    if(navigator.userAgent.indexOf('MSIE')!==-1
+        || navigator.appVersion.indexOf('Trident/') > 0
+        || navigator.userAgent.indexOf('Safari') !== -1){
+        $('body').addClass('flexbox-support');
+    }
+
 });
 
 // Page specific items

diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss
index 544001261eea480d2a3a3a971ed54b21780d3b73..ccb69b44e3f91ddef14344a8290678b504cb51d3 100644 (file)
--- a/resources/assets/sass/_components.scss
+++ b/resources/assets/sass/_components.scss
@@ -16,6 +16,10 @@
   display: none;
 }
 
+.popup-body-wrap {
+  display: flex;
+}
+
 .popup-body {
   background-color: #FFF;
   max-height: 90%;
@@ -39,6 +43,10 @@
   }
 }
 
+//body.ie .popup-body {
+//  min-height: 100%;
+//}
+
 .corner-button {
   position: absolute;
   top: 0;
@@ -50,19 +58,28 @@
 }
 
 .popup-header, .popup-footer {
-  display: block;
+  display: block !important;
   position: relative;
   height: 40px;
+  flex: none !important;
   .popup-title {
     color: #FFF;
     padding: 8px $-m;
   }
 }
+body.flexbox-support #entity-selector-wrap .popup-body .form-group {
+  height: 444px;
+  min-height: 444px;
+}
 #entity-selector-wrap .popup-body .form-group {
   margin: 0;
 }
+//body.ie #entity-selector-wrap .popup-body .form-group {
+//  min-height: 60vh;
+//}
+
 .image-manager-body {
-  min-height: 60vh;
+  min-height: 70vh;
 }
 
 #image-manager .dropzone-container {

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 26cfc25ff1cbc06a80d237452452b7da87332398..231c12d4d7469d2468058e369bb0e6e5ea50bab5 100644 (file)
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -29,6 +29,10 @@ body.flexbox {
   flex: 1;
 }
 
+//body.ie .flex-child > div {
+//  flex: 1 0 0px;
+//}
+
 /** Rules for all columns */
 div[class^="col-"] img {
   max-width: 100%;

diff --git a/resources/views/partials/image-manager.blade.php b/resources/views/partials/image-manager.blade.php
index 1b3fb0cfb5f02ffd7530c2518637bcaadcb4f6b1..83625ad88d0ec665d68092e5062cb55d15e42b72 100644 (file)
--- a/resources/views/partials/image-manager.blade.php
+++ b/resources/views/partials/image-manager.blade.php
@@ -4,7 +4,7 @@
 
             <div class="popup-header primary-background">
                 <div class="popup-title">Image Select</div>
-                <button class="popup-close neg button">x</button>
+                <button class="popup-close neg corner-button button">x</button>
             </div>
 
             <div class="flex-fill image-manager-body">
@@ -31,7 +31,7 @@
                                 <img ng-src="@{{image.thumbs.gallery}}" ng-attr-alt="@{{image.title}}" ng-attr-title="@{{image.name}}">
                                 <div class="image-meta">
                                     <span class="name" ng-bind="image.name"></span>
-                                    <span class="date">Uploaded @{{ getDate(image.created_at) | date:'mediumDate' }}</span>
+                                    <span class="date">Uploaded @{{ getDate(image.created_at)  }}</span>
                                 </div>
                             </div>
                         </div>
@@ -70,7 +70,7 @@
 
                             <div class="clearfix">
                                 <form class="float left" ng-submit="deleteImage($event)">
-                                    <button class="button neg"><i class="zmdi zmdi-delete"></i></button>
+                                    <button class="button icon neg"><i class="zmdi zmdi-delete"></i></button>
                                 </form>
                                 <button class="button pos anim fadeIn float right" ng-show="selectedImage" ng-click="selectButtonClick()">
                                     <i class="zmdi zmdi-square-right"></i>Select Image