[Rt-commit] rt branch, 5.0/IE11-fixes, created. rt-5.0.0alpha1-205-g6c1777b215

[Blaine Motsinger]

The branch, 5.0/IE11-fixes has been created
        at  6c1777b21557ea30e3dad5aac86e0dce11cbd953 (commit)

- Log -----------------------------------------------------------------
commit 6c1777b21557ea30e3dad5aac86e0dce11cbd953
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Fri May 1 18:46:24 2020 -0500

    Fix flex-wrap for query builder in IE11
    
    The Add Criteria box in query builder for IE11 doesn't wrap
    correctly for windows smaller than around 1560px.
    
    Additionally, targeting in CSS for IE11 isn't the cleanest or
    easiest to do. If the browser is IE11, we're adding a class to the
    body through util.js to detect via media rule css to set nowrap.

diff --git a/share/static/css/elevator-light/ticket-search.css b/share/static/css/elevator-light/ticket-search.css
index 7166f0c712..92e72a97af 100644
--- a/share/static/css/elevator-light/ticket-search.css
+++ b/share/static/css/elevator-light/ticket-search.css
@@ -13,3 +13,13 @@
 #pick-criteria .value {
     max-width: 500px;
 }
+
+/* The Add Criteria box in query builder for IE11 doesn't wrap correctly for windows smaller than around 1560px.
+   The IE11 class is added through util.js if the browser is IE11.  The CSS then can more easily detect with the media
+   query below. */
+ at media only screen and (max-width: 1560px) {
+    body.IE11 #pick-criteria div.form-row {
+        -ms-flex-wrap: nowrap !important;
+        flex-wrap: nowrap !important;
+    }
+}
diff --git a/share/static/js/util.js b/share/static/js/util.js
index 06da0c3b0a..0b435d51cf 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -1001,3 +1001,17 @@ function toggle_bookmark(url, id) {
         jQuery('.toggle-bookmark-' + id).replaceWith(data);
     });
 }
+
+// Targeting in CSS for IE11 isn't the cleanest or easiest to do.  If the browser is IE11, we're adding
+// a class to the body to easily detect in media queries.
+jQuery(function() {
+    var ua = window.navigator.userAgent;
+    if (ua.indexOf('Trident/') > 0) {
+        var rv = ua.indexOf('rv:');
+        var version = parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
+
+        if (version === 11) {
+            jQuery('body').addClass('IE11');
+        }
+    }
+});

-----------------------------------------------------------------------