2nd go: add browser warning for IE 10 (#3764)

* add browser warning for IE 10

* use double quotes for javascript strings

* use correct element id name

* prevent docready callbacks

* fix linting errors

* use an id that does not clash with class name

* put unsupportedBrowser inline in doc-ready.js

* actually call the function unsupportedBrowser, do not just pass it around

* Simplification

Author: contrepoint

warehouse/static/js/warehouse/index.js

@@ -44,6 +44,19 @@ import searchFilterToggle from "warehouse/utils/search-filter-toggle";
 import YouTubeIframeLoader from "youtube-iframe";
 import RepositoryInfo from "warehouse/utils/repository-info";
 
+
+// Show unsupported browser warning if necessary
+docReady(() => {
+  if (navigator.appVersion.includes("MSIE 10")) {
+    if (document.getElementById("unsupported-browser") !== null) return;
+
+    let warning_div = document.createElement("div");
+    warning_div.innerHTML = "<div id='unsupported-browser' class='notification-bar notification-bar--danger'><span class='notification-bar__icon'><i class='fa fa-exclamation-triangle' aria-hidden='true'></i><span class='sr-only'>Warning:</span></span><span class='notification-bar__message'>You are using an unsupported browser, please upgrade to a newer version.</span></div>";
+
+    document.getElementById("sticky-notifications").appendChild(warning_div);
+  }
+});
+
 // Human-readable timestamps for project histories
 docReady(() => {
   timeAgo();

warehouse/templates/base.html

@@ -102,7 +102,7 @@
       Switch to mobile version
     </button>
 
-    <section class="stick-to-top js-stick-to-top">
+    <section id="sticky-notifications" class="stick-to-top js-stick-to-top">
       <!-- Add browser warning. Will show for ie9 and below -->
       <!--[if IE]>
       <div class="notification-bar notification-bar--danger">