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

[Blaine Motsinger]

The branch, 5.0/IE11-fixes has been created
        at  7b0c448aaaf057dd07427cc8cb0751eaeee8531e (commit)

- Log -----------------------------------------------------------------
commit 3b59cb0295110f66662bd2d935519403ed46c4e2
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Mon May 4 11:37:05 2020 -0500

    Fix col overlap for ticket display in IE11
    
    The create-linked-ticket container in the Links portlet on Ticket
    Display was incorrectly overlapping it's child divs. This commit
    sets col-auto to make the child divs align correctly.

diff --git a/share/html/Elements/ShowLinks b/share/html/Elements/ShowLinks
index bc5fe0cb6d..7d5b2b22ac 100644
--- a/share/html/Elements/ShowLinks
+++ b/share/html/Elements/ShowLinks
@@ -72,7 +72,7 @@
     <div class="col-auto label">
       <&|/l&>Create new</&>
     </div>
-    <div class="col">
+    <div class="col-auto">
       <select name="LinkType" class="selectpicker form-control">
         <option value="DependsOn-new"><% loc('Depends on') %></option>
         <option value="new-DependsOn"><% loc('Depended on by') %></option>
@@ -85,10 +85,10 @@
     <div class="col-auto label">
       <&|/l&>Ticket in</&>
     </div>
-    <div class="col">
+    <div class="col-auto">
       <& /Elements/SelectNewTicketQueue, Name => 'CloneQueue' &>
     </div>
-    <div class="col">
+    <div class="col-auto">
       <input type="submit" value="<&|/l&>Create</&>" name="SpawnLinkedTicket" class="form-control button btn btn-primary">
     </div>
   </div>

commit 1088cc557140add24d73eae2e584dc31a38a442e
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Tue May 5 19:00:42 2020 -0500

    Fix missing chevrons in menus for IE11
    
    IE11 is a lot more specific about what it allows for svg url
    background definitions. Rather than change the svg we know works
    for every other browser, load the chevron pngs for IE11 only.
    
    Targeting IE11 in CSS is much easier and cleaner to do in JS. If
    IE11, add the 'IE11' class to body to make for easier selector
    specificity.

diff --git a/share/static/css/elevator-light/nav.css b/share/static/css/elevator-light/nav.css
index 00b1ff5573..d6450cb24c 100644
--- a/share/static/css/elevator-light/nav.css
+++ b/share/static/css/elevator-light/nav.css
@@ -378,6 +378,19 @@ ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
     right: 5px;
 }
 
+/* IE11 only, top and child nav down and right arrows.
+   IE11 is a lot more specific about what it allows for svg url background definitions.
+   We know png works for IE11, so rather than change what works for every other browser, just use png where it's needed.
+   Both the pngs and specific definitions for the chevrons can be removed once IE11 is EOL.
+*/
+body.IE11 ul.toplevel.sf-menu > li > a.sf-with-ul:after {
+    background: url("../../../static/images/chevron-down.png") no-repeat center center;
+}
+
+body.IE11 ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
+    background: url("../../../static/images/chevron-right.png") no-repeat center center;
+}
+
 @media (max-width: 900px) {
     #topactions .create-wide   { display: none; }
     #topactions .create-medium { display: block; }
diff --git a/share/static/images/chevron-down.png b/share/static/images/chevron-down.png
new file mode 100644
index 0000000000..801d2bcf03
Binary files /dev/null and b/share/static/images/chevron-down.png differ
diff --git a/share/static/images/chevron-right.png b/share/static/images/chevron-right.png
new file mode 100644
index 0000000000..8b827f5406
Binary files /dev/null and b/share/static/images/chevron-right.png differ
diff --git a/share/static/js/util.js b/share/static/js/util.js
index 06da0c3b0a..1cbd739e53 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -1001,3 +1001,18 @@ function toggle_bookmark(url, id) {
         jQuery('.toggle-bookmark-' + id).replaceWith(data);
     });
 }
+
+// Targeting IE11 in CSS isn't the cleanest or easiest to do.
+// If the browser is IE11, add a class to the body to easily detect.
+// This could easily be added to for other browser versions if need.
+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) {
+            document.body.classList.add('IE11');
+        }
+    }
+});

commit 7b0c448aaaf057dd07427cc8cb0751eaeee8531e
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Thu May 7 11:19:27 2020 -0500

    Fix max-width for query builder in IE11
    
    The Add Criteria box in query builder for IE11 doesn't wrap
    correctly for windows smaller than around 1560px.
    
    Removing the max-width fixes the wrap for IE11, as well as making
    the rows extend to the edge of the div which looks better anyway.

diff --git a/share/static/css/elevator-light/ticket-search.css b/share/static/css/elevator-light/ticket-search.css
index 7166f0c712..01470c1700 100644
--- a/share/static/css/elevator-light/ticket-search.css
+++ b/share/static/css/elevator-light/ticket-search.css
@@ -9,7 +9,3 @@
 #pick-criteria .value .form-row {
     margin-top: 0;
 }
-
-#pick-criteria .value {
-    max-width: 500px;
-}

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