Merge pull request #238 from GrahamDumpleton/upgrade-bootstrap

Upgrade bootstrap and fontawesome versions.
educates · Dec 18, 2023 · 26bf950 · 26bf950
2 parents 0e826b3 + ed399d0
commit 26bf950
Show file tree

Hide file tree

Showing 78 changed files with 55,525 additions and 17,971 deletions.
diff --git a/training-portal/src/project/apps/workshops/static/workshops/scripts/catalog.js b/training-portal/src/project/apps/workshops/static/workshops/scripts/catalog.js
@@ -0,0 +1,9 @@
+// Once the document is ready rewrite the URL to remove the query string.
+
+document.addEventListener("DOMContentLoaded", function (event) {
+    if (window.location.search) {
+        var currentURLWithoutQueryString = window.location.origin + window.location.pathname;
+        console.log("Replacing page URL with: " + currentURLWithoutQueryString);
+        window.history.replaceState({}, document.title, currentURLWithoutQueryString);
+    }
+});
diff --git a/training-portal/src/project/apps/workshops/static/workshops/scripts/session.js b/training-portal/src/project/apps/workshops/static/workshops/scripts/session.js
@@ -15,11 +15,11 @@ function check_readiness(session_url, restart_url, startup_timeout) {
       type: 'GET',
       url: session_url + "/session/poll",
       cache: false,
-      success: function(data, textStatus, xhr) {
-        setTimeout(function(){poll_session(session_url);}, 15000);
+      success: function (data, textStatus, xhr) {
+        setTimeout(function () { poll_session(session_url); }, 15000);
       },
-      error: function() {
-        setTimeout(function(){poll_session(session_url);}, 15000);
+      error: function () {
+        setTimeout(function () { poll_session(session_url); }, 15000);
       }
     });
   }
@@ -29,18 +29,18 @@ function check_readiness(session_url, restart_url, startup_timeout) {
       type: 'GET',
       url: session_url + "/session/poll",
       cache: false,
-      success: function(data, textStatus, xhr) {
+      success: function (data, textStatus, xhr) {
         if (xhr.status == 200) {
-          $("#session").attr("src", session_url+"/");
-          setTimeout(function(){$("#startup-cover-panel").hide();}, 500)
-          setTimeout(function(){poll_session();}, 15000);
+          $("#session").attr("src", session_url + "/");
+          setTimeout(function () { $("#startup-cover-panel").hide(); }, 500)
+          setTimeout(function () { poll_session(); }, 15000);
         }
         else {
-          setTimeout(function(){retry_readiness();}, 1000);
+          setTimeout(function () { retry_readiness(); }, 1000);
         }
       },
-      error: function() {
-        setTimeout(function(){retry_readiness();}, 1000);
+      error: function () {
+        setTimeout(function () { retry_readiness(); }, 1000);
       }
     });
   }
@@ -49,11 +49,11 @@ function check_readiness(session_url, restart_url, startup_timeout) {
     if (startup_timeout) {
       current_time_ms = Date.now();
 
-      percentage = Math.floor((100*(current_time_ms-start_time_ms)/1000) / startup_timeout)
+      percentage = Math.floor((100 * (current_time_ms - start_time_ms) / 1000) / startup_timeout)
 
       startup_progress_bar.style.width = percentage + "%";
 
-      if ((current_time_ms - start_time_ms)/ 1000 > startup_timeout) {
+      if ((current_time_ms - start_time_ms) / 1000 > startup_timeout) {
         window.top.location.href = restart_url;
 
         return

diff --git a/training-portal/src/project/apps/workshops/templates/workshops/catalog.html b/training-portal/src/project/apps/workshops/templates/workshops/catalog.html
@@ -11,70 +11,62 @@
   {% if notification == "session-deleted" %}
     <div id="notification" class="alert alert-success alert-dismissible fade show" role="alert">
       <strong>Your session was deleted.</strong> Start a new workshop to continue.
-      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
+      <button type="button" class="btn btn-close" data-bs-dismiss="alert" aria-label="Close">
       </button>
     </div>
   {% endif %}
   {% if notification == "session-unavailable" %}
     <div id="notification" class="alert alert-warning alert-dismissible fade show" role="alert">
       <strong>No session available.</strong> Select a different workshop or try again.
-      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
+      <button type="button" class="btn btn-close" data-bs-dismiss="alert" aria-label="Close">
       </button>
     </div>
   {% endif %}
   {% if notification == "session-invalid" %}
     <div id="notification" class="alert alert-danger alert-dismissible fade show" role="alert">
       <strong>Session invalid or expired.</strong> Start a new workshop to continue.
-      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
+      <button type="button" class="btn btn-close" data-bs-dismiss="alert" aria-label="Close">
       </button>
     </div>
   {% endif %}
   {% if notification == "workshop-invalid" %}
     <div id="notification" class="alert alert-danger alert-dismissible fade show" role="alert">
       <strong>Invalid workshop.</strong> Start a new workshop to continue.
-      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
+      <button type="button" class="btn btn-close" data-bs-dismiss="alert" aria-label="Close">
       </button>
     </div>
   {% endif %}
   {% if notification == "startup-timeout" %}
   <div id="notification" class="alert alert-danger alert-dismissible fade show" role="alert">
     <strong>Startup timeout.</strong> Select a different workshop or try again.
-    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" class="btn btn-close" data-bs-dismiss="alert" aria-label="Close">
     </button>
   </div>
 {% endif %}
 
-  <div class="jumbotron jumbotron-fluid">
+  <div class="jumbotron jumbotron-fluid bg-light">
     <div class="container">
       {% if catalog %}
-        <div class="row justify-content-center">
+        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-3 row-cols-xl-4 mt-1 g-3">
           {% for entry in catalog %}
-            <div class="card-deck col-lg-4">
-              <div class="card mb-4">
+            <div class="col">
+              <div class="card h-100">
                 <div class="card-body d-flex flex-column">
-                  <h5 class="card-title">{{ entry.workshop.title }}
+                  <h5 class="card-title">
                       {% if entry.session %}
-                      <span class="float-right green-light"></span>
+                      <span class="float-end green-light"></span>
                       {% elif entry.capacity != 0 %}
-                      <span class="float-right orange-light"></span>
+                      <span class="float-end orange-light"></span>
                       {% else %}
-                      <span class="float-right red-light"></span>
+                      <span class="float-end red-light"></span>
                       {% endif %}
+                      {{ entry.workshop.title }}
                   </h5>
                   <p class="card-text">{{ entry.workshop.description }}</p>
-                  <a href="{% url 'workshops_environment' entry.environment %}" class="btn btn-primary mt-auto start-workshop">Start workshop</a>
+                  <a href="{% url 'workshops_environment' entry.environment %}" class="btn btn-primary mt-auto start-workshop w-100">Start workshop</a>
                 </div>
               </div>
             </div>
-            {% if forloop.counter|divisibleby:3 %}
-        </div>
-        <div class="row justify-content-center">
-            {% endif %}
           {% endfor %}
         </div>
       {% else %}
@@ -87,5 +79,6 @@ <h5 class="card-title">{{ entry.workshop.title }}
 {% endblock %}
 
 {% block body_scripts %}
+  <script src="{% static "workshops/scripts/catalog.js" %}" crossorigin="anonymous"></script>
   <script src="{% static "workshops/theme/training-portal.js" %}" crossorigin="anonymous"></script>
 {% endblock %}
diff --git a/training-portal/src/project/apps/workshops/templates/workshops/session.html b/training-portal/src/project/apps/workshops/templates/workshops/session.html
@@ -73,7 +73,9 @@
   </head>
   <body>
     <div id="startup-cover-panel">
-      <div><button id="startup-cover-panel-dismiss" class="close text-danger" type="button" aria-label="Delete"><a aria-hidden="true" href="delete">&#x1f6d1;</a></button></div>
+      <div>
+        <a id="startup-cover-panel-dismiss" class="btn btn-close btn-close-white float-end" role="button" aria-label="Delete" href="delete"></a>
+      </div>
       <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
       <div id="startup-cover-panel-message" class="text-white">
         <h5>Waiting for deployment...</h5>
@@ -86,7 +88,7 @@ <h5>Waiting for deployment...</h5>
       <iframe id="session" width="100%" height="100%" frameborder="0" allowfullscreen allow="clipboard-read; clipboard-write"></iframe>
     </div>
 
-    <script src="{% static "scripts/jquery-3.4.1.min.js" %}" crossorigin="anonymous"></script>
+    <script src="{% static "scripts/jquery-3.7.1.min.js" %}" crossorigin="anonymous"></script>
     <script src="{% static "scripts/popper.min.js" %}" crossorigin="anonymous"></script>
     <script src="{% static "scripts/bootstrap.min.js" %}" crossorigin="anonymous"></script>
     <script src="{% static "workshops/scripts/session.js" %}" crossorigin="anonymous"></script>