beta v1.2 - fixed mobile view

Author: gitpushjoe

about.html

@@ -15,12 +15,12 @@
     <div class="banner-extra" id="banner-extra">
         <p id="about" class="banner-text">about</p>
         <p class="banner-text unitalic">•</p>
-        <p id="source" class="banner-text">source code</p>
+        <a href="https://github.com/thechesslibrary/thechesslibrary.github.io"><p id="source" class="banner-text">source code</p></a>
         <p class="banner-text unitalic">•</p>
         <a href="../donate.html"><p id="donate" class="banner-text">donate</p></a>
     </div>
     <div class="about-text">
-        <p style="color: aqua">beta v1.1<br></p>
+        <p style="color: aqua">beta v1.2<br></p>
         <p style="display: inline-block;">The Chess Library is an open-source database of 700,000+ chess games, run by 
         <a href="https://www.github.com/gitpushjoe" style="word-wrap: break-word;"><nobr>a single college student.</nobr></a> It's currently in open beta testing right now so if you have any suggestions, bug findings, questions, or would like to help expand the database,
         please share using the donate link above. (Note: The back-end web scraping and data formatting scripts will be up soon.)<br>&nbsp;<br><br>Sources:<br>

database.js

@@ -85,7 +85,7 @@ const b64FourChrToInt = (str) => {
 
 $(document).on("boards-update", (event, boards) => {
     if (mainGame.currentBoard != 0)
-        $(".banner-extra").css("visibility", "hidden");
+        $(".banner-extra").css("visibility", "collapse");
     const task = new ScheduledTask(prepareDirectory, [event.detail.boards]).setLock(1).setNewSession(1).setSleep(10);
     scheduler.force(task); // force will add the current token to the task, which will be carried down the task chain
 });

donate.html

@@ -15,7 +15,7 @@
     <div class="banner-extra" id="banner-extra">
         <a href="../about.html"><p id="about" class="banner-text">about</p></a>
         <p class="banner-text unitalic">•</p>
-        <p id="source" class="banner-text">source code</p>
+        <a href="https://github.com/thechesslibrary/thechesslibrary.github.io"><p id="source" class="banner-text">source code</p></a>
         <p class="banner-text unitalic">•</p>
         <p id="donate" class="banner-text">donate</p>
     </div>

index.html

@@ -23,7 +23,7 @@
     <div class="banner-extra" id="banner-extra">
         <a href="../about.html"><p id="about" class="banner-text">about</p></a>
         <p class="banner-text unitalic">•</p>
-        <p id="source" class="banner-text">source code</p>
+        <a href="https://github.com/thechesslibrary/thechesslibrary.github.io"><p id="source" class="banner-text">source code</p></a>
         <p class="banner-text unitalic">•</p>
         <a href="../donate.html"><p id="donate" class="banner-text">donate</p></a>
     </div>

move-display.js

@@ -45,16 +45,17 @@ function createBranch(id, move, white, draw, black, percentage, visibility='visi
 function updateBranch(id, move, white=0, draw=100, black=0, percentage=0, visibility='hidden') {
     let $branch = $(`.branch${id}`);
     if (!move) {
-        $branch.css('visibility', 'hidden');
+        $branch.css('visibility', 'collapse').css('display', 'none').css('height', '0px').css('min-height', '0px').css('padding-bottom', '0px');
         return;
     }
     $branch.find('.branch.text').text(move);
     $branch.find('.white-percentage').css('width', `${white}%`);
     $branch.find('.draw-percentage').css('width', `${draw}%`);
     $branch.find('.black-percentage').css('width', `${black}%`);
-    percnetage = Math.round(percentage)
+    percentage = Math.round(percentage)
     $branch.find('.branch.text.no-right-padding').text(`${Math.round(percentage)}%`);
-    $branch.css('visibility', visibility);
+    const display = visibility == 'hidden' ? 'none' : 'grid';
+    $branch.css('visibility', visibility).css('display', display).css('height', '10%').css('min-height', '10%').css('padding-bottom', '1.5%');
 }
 
 $(document).on("boards-update", (event, hoverGame = null) => {