Update styling with new nav (#49)

Author: AdamJ

index.html

@@ -28,6 +28,7 @@
   <link href="/assets/mana.min.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css" />
   <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace-autoloader.js"></script>
+
   <style>
     /* Hide the message by default */
     .safari-ios-message {
@@ -58,7 +59,6 @@
         button below, then select "Add to Home Screen".
         <span class="result"></span>
       </p>
-      <sl-button variant="primary" id="share-sheet">Share</sl-button>
     </sl-card>
     <br /><br />
     <sl-card>
@@ -104,48 +104,6 @@
       window.localStorage.clear();
       alert("Browser cache and local storage has been cleared.");
     });
-
-    // Check if the Web Share API is supported
-    if (navigator.share) {
-      // Only create the shareData object if the Web Share API is supported
-      const shareData = {
-        title: "Moonsilver Waypoints",
-        text: "Check out this great app for tracking Magic: The Gathering games!",
-        url: "https://www.adamjolicoeur.me/",
-      };
-
-      // Get the share button and the result paragraph
-      const shareButton = document.getElementById("share-sheet");
-      const resultPara = document.querySelector(".result");
-
-      // If the button or paragraph is missing, log an error and return early
-      if (!shareButton || !resultPara) {
-        console.error("Error: Share button or result paragraph not found in the DOM.");
-      }
-
-      // Add a click event listener to the share button
-      shareButton.addEventListener("click", async () => {
-        try {
-          // Attempt to use the Web Share API
-          await navigator.share(shareData);
-
-          // If sharing is successful, update the result paragraph
-          resultPara.textContent = "Shared successfully!";
-        } catch (err) {
-          // If an error occurs during sharing, update the result paragraph with the error
-          if (err.name === "AbortError") {
-              resultPara.textContent = "Sharing was canceled.";
-          } else {
-              resultPara.textContent = `Error: ${err}`;
-          }
-          console.error("Sharing failed:", err); // Log the error to the console
-        }
-      });
-    } else {
-      // If navigator.share is not supported, log a message to the console and hide the "Share" button
-      console.warn("Web Share API not supported in this browser.");
-      document.getElementById("share-sheet").classList.add("hide");
-    }
   </script>
 </body>
 

public/assets/scripts/share.js

@@ -0,0 +1,24 @@
+(function () {
+  'use strict';
+  //Check if share API is supported or not
+  if (navigator.share !== undefined) {
+    document.addEventListener('DOMContentLoaded', function() {
+      var shareBtn = document.querySelector('.share');
+      //Share button event listener
+      shareBtn.addEventListener('click', function(event) {
+        //Web share API
+        navigator.share({
+          title: "Moonsilver Waypoints",
+          text: "Check out this great app for tracking Magic: The Gathering games!",
+          url: "https://www.adamjolicoeur.me/"
+        })
+        .then(function() {
+          console.info('Shared successfully.');
+        })
+        .catch(function (error) {
+          console.error('Error in sharing: ', error);
+        })
+      });
+    });
+  }
+})();

src/components/game-tracker/standings-tracker.ts

@@ -266,20 +266,18 @@ export class StandingsTracker extends LitElement {
 
     return html `
       <div class="page-header">
-        <sl-button-group label="game actions">
-          <sl-button variant="success" size="small" pill label="export standings" @click=${this.exportStandings}>
-            <sl-icon slot="prefix" library="default" name="file-earmark-excel-fill" label="Export Standings"></sl-icon>
-            Export <span class="hide-at-800">Standings</span>
+        <h1>Tournament Tracker</h1>
+        <div class="button-group" label="game-actions">
+          <sl-button variant="success" size="medium" circle label="export standings" @click=${this.exportStandings}>
+            <sl-icon library="default" name="file-earmark-excel-fill" label="Export Standings"></sl-icon>
           </sl-button>
-          <sl-button variant="warning" size="small" pill label="action to clear standings"  @click=${this.clearStandingsConfirmed}>
-            <sl-icon slot="prefix" library="default" name="trash-fill" label="Clear Standings"></sl-icon>
-            <span class="hide-at-800">Clear</span> Standings
+          <sl-button variant="warning" size="medium" circle label="action to clear standings"  @click=${this.clearStandingsConfirmed}>
+            <sl-icon library="default" name="trash-fill" label="Clear Standings"></sl-icon>
           </sl-button>
-          <sl-button variant="danger" size="small" pill label="launch a modal to confirm clearing of match data" @click=${this.openConfirmationModal}>
-          <sl-icon slot="prefix" library="default" name="trash-fill" label="Clear All Data"></sl-icon>
-          <span class="hide-at-800">Clear All</span> Data
+          <sl-button variant="danger" size="medium" circle label="launch a modal to confirm clearing of match data" @click=${this.openConfirmationModal}>
+          <sl-icon library="default" name="trash-fill" label="Clear All Data"></sl-icon>
           </sl-button>
-        </sl-button-group>
+        </div>
       </div>
       <div style="display: flex; flex-direction: column; grid-gap: 1rem;">
         <sl-details summary="Match Results" open>
@@ -319,7 +317,7 @@ export class StandingsTracker extends LitElement {
       <edit-modal .match=${this.editMatchIndex !== null ? this.matchHistory[this.editMatchIndex] : null} .isOpen=${this.editModalOpen} @match-edited=${(e: CustomEvent) => this.editMatch(e.detail)} @close=${() => this.editModalOpen = false}></edit-modal>
       <confirmation-modal
         .isOpen=${this.confirmationModalOpen}
-        message="Are you sure you want to clear the match data? This will also clear all related information."
+        message="Are you sure you want to clear the match data? Standings and History will be deleted. Players must be removed individually."
         @confirm=${this.clearMatchResultsConfirmed}
         @close=${this.closeConfirmationModal}
       ></confirmation-modal>

src/components/header.ts

@@ -63,7 +63,6 @@ export class AppHeader extends LitElement {
           ${document.title}
         </div>
         <sl-button-group label="Navigation" style="margin-right: 1rem;">
-
         ${this.enableBack ? html`
           <sl-button variant="default" size="small" pill aria-label="Back to start" label="Back to start" href="${resolveRouterPath()}">
             <sl-icon slot="prefix" name="house"></sl-icon>