Update Pages to Work With Bootstrap 5

Author: RoboticMind

_includes/_header.htm

@@ -39,10 +39,7 @@
         <script src="/assets/js/core/bootstrap-5.1.3.bundle.min.js" type="text/javascript"></script>
         <script src="/assets/js/details-element-polyfill.js" type="text/javascript"></script>
         <script> //open dropdown by default if on Desktop, but not on Mobile
-            const breakpoint = parseInt(
-                getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-xl')
-            );
-            if (screen.width >= breakpoint){
+            if (screen.width >= 1200){ //xl breakpoint is 1200px
                 document.getElementById("docs-menu").open = true;
             }
         </script>

_layouts/wiki-de.html

@@ -39,10 +39,7 @@
         <script src="/assets/js/core/bootstrap-5.1.3.bundle.min.js" type="text/javascript"></script>
         <script src="/assets/js/details-element-polyfill.js" type="text/javascript"></script>
         <script> //open by dropdown default if on Desktop, but not on Mobile
-            const breakpoint = parseInt(
-                getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-xl')
-            );
-            if (screen.width >= breakpoint){
+            if (screen.width >= 1200){  //xl breakpoint is 1200px
                 document.getElementById("docs-menu").open = true;
             }
         </script>

_layouts/wiki-sv.html

@@ -39,10 +39,7 @@
         <script src="/assets/js/core/bootstrap-5.1.3.bundle.min.js" type="text/javascript"></script>
         <script src="/assets/js/details-element-polyfill.js" type="text/javascript"></script>
         <script> //open by dropdown default if on Desktop, but not on Mobile
-            const breakpoint = parseInt(
-                getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-xl')
-            );
-            if (screen.width >= breakpoint){
+            if (screen.width >= 1200){ //xl breakpoint is 1200px
                 document.getElementById("docs-menu").open = true;
             }
         </script>

_layouts/wiki.html

@@ -154,6 +154,20 @@ dfn{
     padding-bottom: 25px;
     background-image:linear-gradient(#9013FE,#360166);
 }
+.table-custom-dark{
+    --bs-table-bg: #343a40;
+    --bs-table-striped-bg: #3e444a;
+    --bs-table-striped-color: #fff;
+    --bs-table-active-bg: #373b3e;
+    --bs-table-active-color: #fff;
+    --bs-table-hover-bg: #43494e;
+    --bs-table-hover-color: #fff;
+    color: #fff;
+    border-color: #373b3e;
+}
+.text-brighter-green{ /* brighter than bootstrap text-success */
+    color:#28a745;
+}
 /*----End index.htm----*/
 
 /*Contact.htm*/
@@ -228,17 +242,22 @@ dfn{
     font-weight: bold;
 }
 .table-color-yes{
-    background-color: green;
+    --bs-table-bg: green;
+    --bs-table-striped-bg: green;
+    --bs-table-hover-bg:#009100;
 }
 .table-color-no{
-    background-color: darkred;
+    --bs-table-bg: darkred;
+    --bs-table-striped-bg: darkred;
+    --bs-table-hover-bg:#aa0000;
 }
 .table-color-gdpr-yes{ /* warns that you need to enable stats */
-    background-color: #999900;
+    --bs-table-bg: #999900;
+    --bs-table-striped-bg: #999900;
+    --bs-table-hover-bg:#c1c100;
 }
-.table-color-gdpr-yes a{ /* makes the link underlined and not a hard to read blue*/
+.table-color-gdpr-yes a{ /* change color to match table text because blue is hard to read*/
     color: inherit;
-    text-decoration: underline;
 }
 
 /*----end whitelist.erb----*/
@@ -460,4 +479,7 @@ dfn{
 .search-container li{
     list-style-type: none;
 }
+.max-width-25{
+    max-width: 25%;
+}
 /* end search.html */

assets/css/gridcoin.css

@@ -51,6 +51,6 @@ function getLatestRelease() {
  $(document).ready(function () {
     getLatestRelease();
     $(function () {
-        $('[data-toggle="tooltip"]').tooltip(); //Enabled bootstrap tooltips.
+        $('[data-bs-toggle="tooltip"]').tooltip(); //Enabled bootstrap tooltips.
     })
 });

assets/js/fetch-release.js

@@ -9,7 +9,7 @@
     <div class="container">
         <div class="row">
             <div class="col-12 text-center">
-                <h4 class="font-weight-bold">Terminology Guide</h4>
+                <h4 class="fw-bold">Terminology Guide</h4>
             </div>
         </div>
     </div>
@@ -21,7 +21,7 @@ <h4 class="font-weight-bold">Terminology Guide</h4>
         <div class="row">
             <div class="col-12">
                 <!--Content-->
-                <table class="table table-sm table-dark table-hover table-striped table-bordered">
+                <table class="table table-sm table-custom-dark table-hover table-striped table-bordered">
                     <thead>
                         <tr>
                             <th class="text-center" colspan="2"><h4>BOINC Terminology</h4></th>
@@ -1207,7 +1207,7 @@ <h4 class="font-weight-bold">Terminology Guide</h4>
                 <!--End of boinc-->
                 <br />
                 <!--Start of Crypto-->
-                <table class="table table-sm table-dark table-hover table-striped table-bordered">
+                <table class="table table-sm table-custom-dark table-hover table-striped table-bordered">
                     <thead>
                         <tr>
                             <th class="text-center" colspan="2"><h4>CryptoCurrency Terminology</h4></th>

guides/terminology.htm

@@ -47,7 +47,7 @@ <h2 class="mb-2 anchor-adjust" id="projects">Whitelisted Projects</h2>
     <div class="container">
         <div class="row text-center mb-5">
             <div class="col-12 d-none d-md-block">
-                <table class="table table-sm table-dark table-hover table-striped table-bordered">
+                <table class="table table-sm table-custom-dark table-hover table-striped table-bordered">
                     <thead>
                         <tr>
                             <th>
@@ -122,7 +122,7 @@ <h2 class="mb-2 anchor-adjust" id="projects">Whitelisted Projects</h2>
             </div>
 
             <div class="col-12 d-none d-sm-block d-md-none">
-                <table class="table table-sm table-dark table-hover table-striped table-bordered">
+                <table class="table table-sm table-custom-dark table-hover table-striped table-bordered">
                     <thead>
                         <tr>
                             <th>
@@ -173,7 +173,7 @@ <h2 class="mb-2 anchor-adjust" id="projects">Whitelisted Projects</h2>
             </div>
 
             <div class="col-12 d-sm-none">
-                <table class="table table-sm table-dark table-hover table-striped table-bordered">
+                <table class="table table-sm table-custom-dark table-hover table-striped table-bordered">
                     <thead>
                         <tr>
                             <th>

guides/whitelist.htm

@@ -5,10 +5,10 @@
 <!-- Intro-->
 <section class="intro">
     <div class="container">
-        <div class="row">
-            <div class="col-12 text-center">
+        <div class="row justify-content-center">
+            <div class="col-sm-10 w-xs-100 text-center">
                 <img class="img-fluid" src="/assets/img/gridcoinblocks-header.svg" alt="Gridcoin logo with coloured blocks behind it. Gridcoin is written in large, bold characters below the image.">
-                <h1 class="h2 pt-3 font-weight-bold">Rewarding Volunteer Distributed Computing</h1>
+                <h1 class="h2 pt-3 fw-bold">Rewarding Volunteer Distributed Computing</h1>
             </div>
         </div>
     </div>
@@ -18,17 +18,17 @@ <h1 class="h2 pt-3 font-weight-bold">Rewarding Volunteer Distributed Computing</
 <!--What is Gridcoin section-->
 <section class="grc-bgcolor grclink">
     <div class="container">
-        <div class="row text-center">
-            <div class="col-12 py-3">
-                <h3 class="h2 font-weight-bold py-3">What is Gridcoin?</h3>
+        <div class="row text-center justify-content-center">
+            <div class="col-11 py-3">
+                <h3 class="h2 fw-bold py-3">What is Gridcoin?</h3>
                 <p>
                     Gridcoin is an open source <a href="https://en.wikipedia.org/wiki/Cryptocurrency">cryptocurrency</a> (Ticker: GRC) that rewards <a href="https://en.wikipedia.org/wiki/Volunteer_computing">volunteer computing</a> for science through the <a href="https://boinc.berkeley.edu/">BOINC platform</a>.
                 </p>
-                <h3 class="h2 font-weight-bold py-3">What is BOINC?</h3>
+                <h3 class="h2 fw-bold py-3">What is BOINC?</h3>
                 <p>
                     <a href="https://boinc.berkeley.edu/">BOINC</a> is an open source platform for volunteer computing that lets individuals use their computers & phones to help science research. It is free to use and already home to 30+ projects over a range of scientific disciplines. Examples include protein structure prediction (<a href="https://boinc.bakerlab.org/rosetta/">Rosetta@home</a>), mapping the Milky Way galaxy (<a href="https://milkyway.cs.rpi.edu/milkyway/">Milkyway@home</a>), and tackling problems in public health and clean energy (<a href="https://www.worldcommunitygrid.org/discover.action">World Community Grid</a>).
                 </p>
-                <h3 class="h2 font-weight-bold py-3">How can I participate?</h3>
+                <h3 class="h2 fw-bold py-3">How can I participate?</h3>
                 <p>
                     <b>Individuals:</b> 
                     Join BOINC and start earning Gridcoin for your contributions! See the table below for more information
@@ -46,12 +46,12 @@ <h3 class="h2 font-weight-bold py-3">How can I participate?</h3>
 <!-- BOINC Content -->
 <section class="grc-bgcolor">
     <div class="container">
-        <div class="row text-center">
-            <div class="col-12">
+        <div class="row text-center justify-content-center">
+            <div class="col-11">
                 <a class="anchor-adjust" id="ways-to-join"></a>
-                <h3 class="h2 font-weight-bold pt-3">Comparison of Ways to Join</h3>
+                <h3 class="h2 fw-bold pt-3">Comparison of Ways to Join</h3>
                 <p>Comparison of the ways for individuals to join. Click or hover on dotted text for a definition</p>
-                <table class="table table-sm table-dark table-hover table-striped table-bordered">
+                <table class="table table-sm table-custom-dark table-hover table-striped table-bordered">
                     <thead>
                         <tr class="d-none d-md-table-row">
                             <th>
@@ -260,7 +260,7 @@ <h3 class="h2 font-weight-bold pt-3">Comparison of Ways to Join</h3>
     <div class="container text-center">
         <div class="row">
             <div class="col-12">
-                <h3 class="font-weight-bold">Read More</h3>
+                <h3 class="fw-bold">Read More</h3>
                 <p class="mb-2">More in-depth information about Gridcoin</p>
                 <a href="/assets/docs/whitepaper.pdf" target="_blank"><button class="btn rounded-pill grcbtn">Gridcoin Whitepaper</button></a>
                 <a href="/wiki/" target="_blank"><button class="btn rounded-pill grcbtn">Gridcoin Wiki</button></a>
@@ -276,10 +276,10 @@ <h3 class="font-weight-bold">Read More</h3>
             <div class="col-12">
                 <a name="Downloads" class="anchor-adjust"></a> 
                 <h3 class="text-center mb-3">Downloads</h3>
-                <h4 class="font-weight-bold">
+                <h4 class="fw-bold">
                     Latest Gridcoin Research Client
                 </h4>
-                <p class="text-success font-weight-bold" id="wallet-version">
+                <p class="text-brighter-green fw-bold" id="wallet-version">
                 </p>
             </div>
         </div>

index.htm

@@ -5,15 +5,14 @@
 ---
 <div class="row justify-content-center">
   <noscript><div class="col-12 mb-5"><b class="h1">This requires Javascript to work since searching is done client side. Either enable Javascript or try using a search engine and prefix it with <code>site:gridcoin.us</code> instead</b></div></noscript>
-  <div class="col-md-8 offset-md-3 col-auto">
-    <label class="sr-only" for="search-box">Search</label>
+  <div class="col-md-5 col-auto">
+    <label class="visually-hidden" for="search-box">Search</label>
     <form action="/search.htm" class="form-inline" method="get">
-        <div class="input-group col-md-8">
-          <div class="input-group-prepend">
-            <div class="input-group-text"><span class="oi oi-magnifying-glass"></span></div>
-          </div>
+        <div class="input-group">
+          
+          <div class="input-group-text"><span class="oi oi-magnifying-glass"></span></div>
           <input type="text" placeholder="your search" id="search-box" name="query" class="form-control text-dark">
-          <input type="submit" value="search" class="form-control btn btn-primary col-md-3">
+          <input type="submit" value="search" class="form-control btn btn-primary max-width-25">
         </div>
     </form>
   </div>