SAK-49733 Fixed bootstrap css lib loading issue & added dark mode to …

…gateway pages
sakaiproject · Feb 13, 2024 · 4033648 · 4033648
1 parent 72a2f00
commit 4033648
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 60 deletions.
diff --git a/library/src/webapp/content/gateway/about.html b/library/src/webapp/content/gateway/about.html
@@ -5,26 +5,13 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="/library/js/headscripts.js"></script>
+    <link rel="stylesheet" href="/library/content/gateway/gateway.scss">
 </head>
 <script>
-    includeWebjarLibrary('bootstrap');
+	includeWebjarLibrary("bootstrap", {includeCss: true});
 </script>
-
-<style>
-    .icon-container {
-        width: 150px;
-        height: 150px;
-        background-color:#dee2e6;
-    }
-
-    a {
-        color: #0e4466;
-    }
-</style>
-
-
 <body>
-<div class="p-3 bg-dark p-2 text-dark bg-opacity-10">
+<div class="p-3 p-2 bg-opacity-10 border-bottom">
     <h1 class="display-6">About Sakai</h1>
     <p>
         Sakai is a set of software tools designed to help instructors,

diff --git a/library/src/webapp/content/gateway/acknowledgements.html b/library/src/webapp/content/gateway/acknowledgements.html
@@ -6,20 +6,15 @@
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<script src="/library/js/headscripts.js"></script>
+	<link rel="stylesheet" href="/library/content/gateway/gateway.scss">
 </head>
 
 <script>
-	includeWebjarLibrary("bootstrap");
+	includeWebjarLibrary("bootstrap", {includeCss: true});
 </script>
 
-<style>
-	a {
-		color: #0e4466;
-	}
-</style>
-
 <body>
-	<div class="p-3 bg-dark p-2 text-dark bg-opacity-10">
+	<div class="p-3 p-2 bg-opacity-10 border-bottom">
 		<h3 class="display-6">Acknowledgements</h3>
 		<p class="text-muted">
 			Copyright 2003-<span id="year">current Year</span> The Apereo Foundation. All rights reserved.

diff --git a/library/src/webapp/content/gateway/features.html b/library/src/webapp/content/gateway/features.html
@@ -1,23 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  	<title>Features</title>
+	<title>Features</title>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<script src="/library/js/headscripts.js"></script>
+	<link rel="stylesheet" href="/library/content/gateway/gateway.scss">
 </head>
 <script>
-	includeWebjarLibrary("bootstrap");
+	includeWebjarLibrary('bootstrap', {includeCss: true});
 </script>
 
-<style>
-	.btn-primary {
-		background-color: #0e4466;
-	}
-</style>
-
 <body>
-	<div class="p-3 bg-dark p-2 text-dark bg-opacity-10">
+	<div class="p-3 p-2 bg-opacity-10 border-bottom">
 		<h3 class="display-6">Features</h3>
 		<p>
 			Sakai’s breadth of features means you can choose the tools that meet your needs. 

diff --git a/library/src/webapp/content/gateway/gateway.scss b/library/src/webapp/content/gateway/gateway.scss
@@ -0,0 +1,57 @@
+:root.sakaiUserTheme-dark {
+
+  body {
+    background-color: #1f2225;
+    color: #e0e0e0;
+  }
+
+  a, a:hover, a:focus {
+    color: #c2c2c2;
+  }
+
+  .btn-primary {
+    background-color: #144E72;
+    border-color: #144E72;
+  }
+
+  .card, .modal-content {
+    background-color: #31353b;
+    color: #e0e0e0;
+  }
+
+  .card-header, .modal-header, .modal-footer {
+    background-color: #333;
+    border-color: #333;
+  }
+
+  .jumbotron, .jtop {
+    background-color: #2C2C2C;
+    color: #e0e0e0;
+  }
+
+  .border-bottom, .btn-close {
+    border-color: #444;
+  }
+
+  .btn-close {
+    filter: invert(1);
+  }
+}
+
+.icon-container {
+  width: 150px;
+  height: 150px;
+} 
+.jtop{
+  padding: 1rem 3rem;
+  margin-bottom: 2rem;
+  border-radius: 0.3rem;
+}
+
+.jtop > h1 {
+  font-size:36px;
+}
+
+.jtop > p {
+  font-size:18px;
+}
diff --git a/library/src/webapp/content/server_info.html b/library/src/webapp/content/server_info.html
@@ -5,35 +5,11 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="/library/js/headscripts.js"></script>
+    <link rel="stylesheet" href="/library/content/gateway/gateway.scss">
 </head>
 <script>
-    includeLatestJQuery('server_info.html');
-    includeWebjarLibrary('bootstrap');
+    includeWebjarLibrary("bootstrap", {includeCss: true});
 </script>
-<script type="text/javascript" language="JavaScript" src="/library/js/sakai-iframe-copy-classes.js"></script>
-<style type="text/css">
-
-.jtop{
-    padding: 1rem 3rem;
-    margin-bottom: 2rem;
-    background-color: #e9ecef;
-    border-radius: 0.3rem;
-}
-
-.jtop > h1 {
-    font-size:36px;
-}
-
-.jtop > p {
-    font-size:18px;
-}
-
-a {
-    color: #0e4466;
-}
-
-</style>
-
 <body>
 <div class="jumbotron jtop">
     <h1>Welcome to Sakai</h1>&nbsp;

diff --git a/library/src/webapp/js/headscripts.js b/library/src/webapp/js/headscripts.js
@@ -696,17 +696,21 @@ function includeLatestJQuery(where) {
 	}
 }
 
-function includeWebjarLibrary(library) {
+function includeWebjarLibrary(library, options = {}) {
 	let webjars = (window.portal && window.portal.pageWebjarsPath) ? window.portal.pageWebjarsPath : '/library/webjars/';
 	let ver = (window.portal && window.portal.portalCDNQuery) ? window.portal.portalCDNQuery : '';
 	let libraryVersion = '';
 	const jsReferences = [];
 	const cssReferences = [];
 
+	// Include the CSS if requested
+	const includeCss = options.includeCss || false;
+
 	switch(library) {
 		case 'bootstrap':
 			libraryVersion = "5.2.0";
 			jsReferences.push('/js/bootstrap.bundle.min.js');
+			includeCss && cssReferences.push('/css/bootstrap.min.css');
 			break;
 		case 'bootstrap-multiselect':
 			libraryVersion = "1.1.1";