Started migration to bootstrap 5

IGBIllinois · Oct 1, 2024 · a515af6 · a515af6
1 parent 437fdd4
commit a515af6
Show file tree

Hide file tree

Showing 21 changed files with 69 additions and 62 deletions.
diff --git a/composer.json b/composer.json
@@ -17,7 +17,7 @@
 		"components/jqueryui": "1.12.1",
 		"select2/select2": "4.0.13",
 		"ttskch/select2-bootstrap4-theme": "1.5.2",
-		"twbs/bootstrap": "v4.6.2",
+		"twbs/bootstrap": "v5.3.3",
 		"twig/twig": "v3.4.3",
 		"fortawesome/font-awesome": "5.15.4",
 		"igbillinois/igbillinois-php": "1.4.0"

diff --git a/composer.lock b/composer.lock
diff --git a/html/add_data_dir.php b/html/add_data_dir.php
@@ -47,7 +47,7 @@
 	<div class='form-group row'>
 		<label class='col-sm-4 col-form-label' for='project_input'>Project:</label>
 		<div class='col-sm-8'>
-		<select class='custom-select' name='project_id' id='project_input'>
+		<select class='form-select' name='project_id' id='project_input'>
 			<?php echo $projects_html; ?>
 		</select>
 		</div>

diff --git a/html/add_project.php b/html/add_project.php
@@ -57,7 +57,7 @@
 
 
 $users = user_functions::get_users($db);
-$owner_html = "<select name='owner' id='owner_input' class='form-control custom-select'>";
+$owner_html = "<select name='owner' id='owner_input' class='form-select'>";
 $owner_html .= "<option></option>";
 foreach ($users as $owner) {
 	if ((isset($_POST['owner'])) && ($_POST['owner'] == $owner['user_id'])) {

diff --git a/html/add_user.php b/html/add_user.php
@@ -73,7 +73,7 @@
 
 //Code to get list of supervisors to choose from.
 $supervisors = user_functions::get_supervisors($db);
-$supervisors_html = "<select class='custom-select' name='supervisor_id' id='supervisors_input'>";
+$supervisors_html = "<select class='form-select' name='supervisor_id' id='supervisors_input'>";
 $supervisors_html .= "<option></option>";
 $supervisors_html .= "<option value='-1'></option>";
 foreach ($supervisors as $supervisor) {

diff --git a/html/data_billing.php b/html/data_billing.php
@@ -18,15 +18,15 @@
 
 //////Year////////
 $min_year = data_functions::get_minimal_year($db);
-$year_html = "<select class='form-control' name='year'>";
+$year_html = "<select class='form-select' name='year'>";
 for ($i=$min_year; $i<=date("Y");$i++) {
         if ($i == $year) { $year_html .= "<option value='" . $i . "' selected='true'>" . $i . "</option>"; }
         else { $year_html .= "<option value='" . $i . "'>" . $i . "</option>"; }
 }
 $year_html .= "</select>";
 
 ///////Month///////
-$month_html = "<select class='form-control' name='month'>";
+$month_html = "<select class='form-select' name='month'>";
 for ($i=1;$i<=12;$i++) {
         if ($i == $month) { $month_html .= "<option value='$i' selected='true'>" . $i . " - " . date('F', mktime(0, 0, 0, $i, 10)) . "</option>"; }
         else { $month_html .= "<option value='$i'>" . $i . " - " . date('F', mktime(0, 0, 0, $i, 10)) . "</option>"; }
@@ -124,7 +124,7 @@
 <form class='form-inline' action='report.php' method='post'>
         <input type='hidden' name='month' value='<?php echo $month; ?>'>
 	<input type='hidden' name='year' value='<?php echo $year; ?>'>
-	<select class='custom-select' name='report_type'>
+	<select class='form-select' name='report_type'>
                 <option value='xlsx'>Excel</option>
                 <option value='csv'>CSV</option>
         </select>&nbsp;

diff --git a/html/edit_project.php b/html/edit_project.php
@@ -101,10 +101,10 @@
 $owner_html = "";
 
 if ($project->get_default()) {
-	$owner_html = "<select class='custom-select' name='owner_id' id='owner_input' disabled>";
+	$owner_html = "<select class='form-select' name='owner_id' id='owner_input' disabled>";
 }
 else {
-	$owner_html = "<select class='custom-select' name='owner_id' id='owner_input'>";
+	$owner_html = "<select class='form-select' name='owner_id' id='owner_input'>";
 }
 $owner_html .= "<option></option>";
 foreach ($users as $owner) {
@@ -136,15 +136,15 @@
 
 //////Year////////
 $min_year = job_bill::get_minimal_year($db);
-$year_html = "<select class='form-control' name='year'>";
+$year_html = "<select class='form-select' name='year'>";
 for ($i=$min_year; $i<=date("Y");$i++) {
         if ($i == $year) { $year_html .= "<option value='" . $i . "' selected='true'>" . $i . "</option>"; }
         else { $year_html .= "<option value='" . $i . "'>" . $i . "</option>"; }
 }
 $year_html .= "</select>&nbsp;";
 
 ///////Month///////
-$month_html = "<select class='form-control' name='month'>";
+$month_html = "<select class='form-select' name='month'>";
 for ($i=1;$i<=12;$i++) {
         if ($i == $month) { $month_html .= "<option value='$i' selected='true'>" . $i . " - " . date('F', mktime(0, 0, 0, $i, 10)) . "</option>"; }
         else { $month_html .= "<option value='$i'>" . $i . " - " . date('F', mktime(0, 0, 0, $i, 10)) . "</option>"; }

diff --git a/html/includes/about.inc.php b/html/includes/about.inc.php
@@ -9,8 +9,7 @@
         <div class='modal-content'>
         <div class='modal-header'>
                 <h5 class='modal-title'>About</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
-                <span aria-hidden="true">&times;</span>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
 <div class='modal-body'>
 

diff --git a/html/includes/header.inc.php b/html/includes/header.inc.php
@@ -23,14 +23,16 @@
 <body class='d-flex flex-column min-vh-100' style='padding-top: 70px; padding-bottom: 60px;'>
 <?php require_once __DIR__ . '/about.inc.php'; ?>
 <nav class='navbar fixed-top navbar-dark bg-dark'>
+	<div class='container-fluid'>
 	<a class='navbar-brand py-0' href='#'><?php echo settings::get_title(); ?></a>
 	<span class='navbar-text py-0'>Version <?php echo settings::get_version(); ?>&nbsp;
 	<?php if ($login_user->is_admin()) {
-		echo "<button type='button' class='btn btn-sm btn-secondary' data-toggle='modal' data-target='#aboutModal'><i class='fas fa-info-circle'></i> About</button>";
+		echo "<button type='button' class='btn btn-sm btn-secondary' data-bs-toggle='modal' data-bs-target='#aboutModal'><i class='fas fa-info-circle'></i> About</button>";
 	}
 	?>
 		<a class='btn btn-danger btn-sm' role="button" href='logout.php'><i class='fas fa-sign-out-alt'></i>Logout</a>
 	</span>
+	</div>
 </nav>
 <p>
 <div class='container-fluid'>

diff --git a/html/index.php b/html/index.php
@@ -50,14 +50,19 @@
 }
 require_once 'includes/header.inc.php';
 ?>
-<div class='jumbotron col-sm-10 col-md-10 col-lg-10 col-xl-10'>
+<div class='row'>
+<div class='col-sm-10 col-md-10 col-lg-10 col-xl-10'>
+<div class='container text-sm-left p-5 bg-light'>
 	<h1 class='display-4'>
 		<img src="images/imark_bw.gif"
 			style="padding: 0 10px 10px 0; vertical-align: text-top;">Biocluster
 		Accounting
 	</h1>
 	<p>View, manage, and bill Biocluster usage and storage</p>
 </div>
+</div>
+</div>
+<br>
 <div class='col-sm-10 col-md-10 col-lg-10 col-xl-10'>
 <h3>Current and Pending Jobs</h3>
 <p>List of jobs currenting running or pending with the estimated current cost of the job.  Updated every 10 minutes</p>

diff --git a/html/job_billing.php b/html/job_billing.php
@@ -19,15 +19,15 @@
 
 //////Year////////
 $min_year = job_bill::get_minimal_year($db);
-$year_html = "<select class='form-control' name='year'>";
+$year_html = "<select class='form-select' name='year'>";
 for ($i=$min_year; $i<=date("Y");$i++) {
 	if ($i == $year) { $year_html .= "<option value='" . $i . "' selected='true'>" . $i . "</option>"; }
 	else { $year_html .= "<option value='" . $i . "'>" . $i . "</option>"; }
 }
 $year_html .= "</select>";
 
 ///////Month///////
-$month_html = "<select class='form-control' name='month'>";
+$month_html = "<select class='form-select' name='month'>";
 for ($i=1;$i<=12;$i++) {
 	if ($i == $month) { $month_html .= "<option value='$i' selected='true'>" . $i . " - " . date('F', mktime(0, 0, 0, $i, 10)) . "</option>"; }
 	else { $month_html .= "<option value='$i'>" . $i . " - " . date('F', mktime(0, 0, 0, $i, 10)) . "</option>"; }
@@ -121,7 +121,7 @@
 <form class='form-inline' action='report.php' method='post'>
 	<input type='hidden' name='month' value='<?php echo $month; ?>'>
 	<input type='hidden' name='year' value='<?php echo $year; ?>'>
-	<select name='report_type' class='form-control custom-select'>
+	<select name='report_type' class='form-select'>
 		<option value='xlsx'>Excel</option>
 		<option value='csv'>CSV</option>
 	</select>&nbsp;

diff --git a/html/list_users.php b/html/list_users.php
@@ -75,7 +75,7 @@
 
 <div class='row'>
 <form class='form-inline' method='post' action='report.php'>
-                <select class='form-control custom-select' name='report_type'>
+                <select class='form-select' name='report_type'>
                 <option value='xlsx'>Excel</option>
                 <option value='csv'>CSV</option>
         </select> <input class='btn btn-primary' type='submit'

diff --git a/html/login.php b/html/login.php
@@ -103,24 +103,27 @@ function my_autoloader($class_name) {
 </head>
 <body class='d-flex flex-column min-vh-100' OnLoad="document.login.username.focus();" style='padding-top: 70px; padding-bottom: 60px;'>
 <nav class='navbar fixed-top navbar-dark bg-dark'>
+	<div class='container-fluid'>
 	<a class="navbar-brand py-0" href="#"><?php echo settings::get_title(); ?></a>
 	<span class="navbar-text py-0">Version <?php echo settings::get_version(); ?></span>
+	</div>
 </nav>
 <br>
 
 <div class='container'>
 	<div class='row'>
 		<div class='col-sm-10 col-md-10 col-lg-10 col-xl-10'>
-			<div class='jumbotron'>
-        		<h1 class='display-4'>
-	                <img src="images/imark_bw.gif"
-        	                style="padding: 0 10px 10px 0; vertical-align: text-top;">Biocluster
-                	Accounting
-	        	</h1>
-        		<p>View, manage, and bill Biocluster usage and storage</p>
+			<div class='container text-sm-left p-5 bg-light'>
+        			<h1 class='display-4'>
+	        	        <img src="images/imark_bw.gif"
+        	        	        style="padding: 0 10px 10px 0; vertical-align: text-top;">Biocluster
+	                	Accounting
+		        	</h1>
+        			<p class='lead'>View, manage, and bill Biocluster usage and storage</p>
 			</div>
 		</div>
 	</div>
+	<br>
 	<div class='row'>
 		<div class='col-sm-10 col-md-10 col-lg-10 col-xl-10'>
 		<div class='card'>
@@ -152,8 +155,9 @@ function my_autoloader($class_name) {
 			</div>
 			<br>		
 			<div class='form-group'>
+
 				<button type='submit' name='login' class='btn btn-primary'>Login</button>
-				<div class='float-right'><?php if (settings::get_password_reset_url()) {
+				<div class='float-end'><?php if (settings::get_password_reset_url()) {
 					echo "<a class='pull-right' target='_blank' href='" . settings::get_password_reset_url() . "'>Forgot Password?</a>";
 				}
 				?>

diff --git a/html/projects.php b/html/projects.php
@@ -125,7 +125,7 @@
         <input type='hidden' name='search' value='<?php echo $search; ?>'>
 	<input type='hidden' name='custom' value='<?php echo $custom; ?>'>
         <div class='form-group'>
-        <select class='custom-select custom-select-sm' name='report_type'>
+        <select class='form-select' name='report_type'>
                 <option value='xlsx'>Excel</option>
                 <option value='csv'>CSV</option>
         </select>

diff --git a/html/reports.php b/html/reports.php
@@ -11,15 +11,15 @@
 
 //////Year////////
 $min_year = data_functions::get_minimal_year($db);
-$year_html = "<select class='form-control' name='year'>";
+$year_html = "<select class='form-select' name='year'>";
 for ($i=$min_year; $i<=date("Y");$i++) {
         if ($i == $year) { $year_html .= "<option value='" . $i . "' selected='true'>" . $i . "</option>"; }
         else { $year_html .= "<option value='" . $i . "'>" . $i . "</option>"; }
 }
 $year_html .= "</select>";
 
 ///////Month///////
-$month_html = "<select class='form-control' name='month'>";
+$month_html = "<select class='form-select' name='month'>";
 for ($i=1;$i<=12;$i++) {
         if ($i == $month) { $month_html .= "<option value='$i' selected='true'>" . $i . " - " . date('F', mktime(0, 0, 0, $i, 10)) . "</option>"; }
         else { $month_html .= "<option value='$i'>" . $i . " - " . date('F', mktime(0, 0, 0, $i, 10)) . "</option>"; }
@@ -35,7 +35,7 @@
 <h4>User Reports</h4>
 <div class='row'>
 	<div class='col-sm-3 col-md-3 col-lg-3 col-xl-3'>
-                <select class='form-control custom-select' name='report_type'>
+                <select class='form-select' name='report_type'>
                 <option value='xlsx'>Excel</option>
                 <option value='csv'>CSV</option>
         </select>
@@ -55,7 +55,7 @@
 		<?php echo $month_html; ?>
 	</div>
 	<div class='col-sm-3 col-md-3 col-lg-3 col-xl-3'>
-        <select name='report_type' class='form-control custom-select'>
+        <select name='report_type' class='form-select'>
                 <option value='xlsx'>Excel</option>
                 <option value='csv'>CSV</option>
         </select>

diff --git a/html/stats_accumulated.php b/html/stats_accumulated.php
@@ -41,11 +41,11 @@
 $graph_image = "<img src='graph.php?" . http_build_query($get_array) . "'>";
 
 $graph_form = "<form name='select_graph' id='select_graph' method='post' action='" . $_SERVER['PHP_SELF'] . "?year=" . $year . "'>";
-$graph_form .= "<select class='custom-select' name='graph_type' onChange='document.select_graph.submit();'>";
+$graph_form .= "<select class='form-select' name='graph_type' onChange='document.select_graph.submit();'>";
 
 $graph_form = "<form class='form-inline' name='select_graph' id='select_graph' method='post' action='" . $_SERVER['PHP_SELF'];
 $graph_form .= "?year=" . $selected_year->format("Y") . "'>";
-$graph_form .= "<select class='custom-select' name='graph_type' onChange='document.select_graph.submit();'>";
+$graph_form .= "<select class='form-select' name='graph_type' onChange='document.select_graph.submit();'>";
 
 foreach ($graph_type_array as $graph) {
         $graph_form .= "<option value='" . $graph['type'] . "' ";

diff --git a/html/stats_fiscal.php b/html/stats_fiscal.php
@@ -15,7 +15,7 @@
 
 //////Year////////
 $min_year = job_bill::get_minimal_year($db);
-$year_html = "<select class='form-control' name='year'>";
+$year_html = "<select class='form-select' name='year'>";
 for ($i=$min_year; $i<=date("Y");$i++) {
         if ($i == $year) { $year_html .= "<option value='" . $i . "' selected='true'>" . $i . "</option>"; }
         else { $year_html .= "<option value='" . $i . "'>" . $i . "</option>"; }
@@ -60,7 +60,7 @@
 
 $graph_form = "<form class='form-inline' name='select_graph' id='select_graph' method='post' action='" . $_SERVER['PHP_SELF'];
 $graph_form .= "?year=" . $selected_year->format("Y") . "'>";
-$graph_form .= "<select class='custom-select' name='graph_type' onChange='document.select_graph.submit();'>";
+$graph_form .= "<select class='form-select' name='graph_type' onChange='document.select_graph.submit();'>";
 
 foreach ($graph_type_array as $graph) {
         $graph_form .= "<option value='" . $graph['type'] . "' ";

diff --git a/html/stats_monthly.php b/html/stats_monthly.php
@@ -19,15 +19,15 @@
 
 //////Year////////
 $min_year = job_bill::get_minimal_year($db);
-$year_html = "<select class='form-control' name='year'>";
+$year_html = "<select class='form-select' name='year'>";
 for ($i=$min_year; $i<=date("Y");$i++) {
         if ($i == $year) { $year_html .= "<option value='" . $i . "' selected='true'>" . $i . "</option>"; }
         else { $year_html .= "<option value='" . $i . "'>" . $i . "</option>"; }
 }
 $year_html .= "</select>";
 
 ///////Month///////
-$month_html = "<select class='form-control' name='month'>";
+$month_html = "<select class='form-select' name='month'>";
 for ($i=1;$i<=12;$i++) {
         if ($i == $month) { $month_html .= "<option value='$i' selected='true'>" . $i . " - " . date('F', mktime(0, 0, 0, $i, 10)) . "</option>"; }
         else { $month_html .= "<option value='$i'>" . $i . " - " . date('F', mktime(0, 0, 0, $i, 10)) . "</option>"; }
@@ -67,7 +67,7 @@
 
 $graph_form = "<form class='form-inline' name='select_graph' id='select_graph' method='post' action='" . $_SERVER['PHP_SELF'];
 $graph_form .= "?year=" . $selected_month->format("Y") . "&month=" . $selected_month->format("m") . "'>";
-$graph_form .= "<select class='custom-select' name='graph_type' onChange='document.select_graph.submit();'>";
+$graph_form .= "<select class='form-select' name='graph_type' onChange='document.select_graph.submit();'>";
 
 foreach ($graph_type_array as $graph) {
         $graph_form .= "<option value='" . $graph['type'] . "' ";

diff --git a/html/stats_yearly.php b/html/stats_yearly.php
@@ -15,7 +15,7 @@
 
 //////Year////////
 $min_year = job_bill::get_minimal_year($db);
-$year_html = "<select class='form-control' name='year'>";
+$year_html = "<select class='form-select' name='year'>";
 for ($i=$min_year; $i<=date("Y");$i++) {
         if ($i == $year) { $year_html .= "<option value='" . $i . "' selected='true'>" . $i . "</option>"; }
         else { $year_html .= "<option value='" . $i . "'>" . $i . "</option>"; }
@@ -60,7 +60,7 @@
 
 $graph_form = "<form class='form-inline' name='select_graph' id='select_graph' method='post' action='" . $_SERVER['PHP_SELF'];
 $graph_form .= "?year=" . $selected_year->format("Y") . "'>";
-$graph_form .= "<select class='custom-select' name='graph_type' onChange='document.select_graph.submit();'>";
+$graph_form .= "<select class='form-select' name='graph_type' onChange='document.select_graph.submit();'>";
 
 foreach ($graph_type_array as $graph) {
         $graph_form .= "<option value='" . $graph['type'] . "' ";