@rileybathurst/paddle 1.9.12 → 1.9.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.9.12",
+  "version": "1.9.14",
   "type": "module",
   "scripts": {
     "dev": "tsc --noEmit && stay-gold && vite",

package/src/paddle-location.tsx

@@ -119,12 +119,12 @@ const Content = ({
   phone,
 }: ContentTypes) => {
   return (
-    <>
+    <React.Fragment>
       <div className="svg">
         <SVG src={svg} />
       </div>
 
-      <div className="location_details">
+      <div className="location-details">
         <h3>{name}</h3>
 
         {streetAddress ||
@@ -161,7 +161,7 @@ const Content = ({
           <Phone phone={phone} />
         )}
       </div>
-    </>
+    </React.Fragment>
   );
 };
 
@@ -202,23 +202,32 @@ export const PaddleLocation = ({
       season_end={season_end}
       offSeasonDetails={offSeasonDetails}
       weatherPermitting={weatherPermitting}
-      phone={phoneDidgits}
     />
   );
 
   return link.includes("http") ? (
-    <a
-      href={link}
-      className="location"
-      target="_blank"
-      rel="noopener noreferrer"
-      title={name}
-    >
-      {content}
-    </a>
+    <div className={`location-wrapper ${phone ? 'phone-spacer' : ''}`}>
+      <a
+        href={link}
+        className="location"
+        target="_blank"
+        rel="noopener noreferrer"
+        title={name}
+      >
+        {content}
+      </a>
+      {phone && (
+        <Phone phone={phoneDidgits} />
+      )}
+    </div>
   ) : (
-    <Link to={link} className="location">
-      {content}
-    </Link>
+    <div className={`location-wrapper ${phone ? 'phone-spacer' : ''}`}>
+      <Link to={link} className="location">
+        {content}
+      </Link>
+      {phone && (
+        <Phone phone={phoneDidgits} />
+      )}
+    </div>
   );
 };

package/src/paddle-purchase.tsx

@@ -1,10 +1,8 @@
 import * as React from "react";
 import { Link } from "gatsby";
 import { GatsbyImage } from "gatsby-plugin-image";
-import type { PaddleGatsbyImageType } from "./types/paddle-gatsby-image-type";
 import { PaddleInchesRemainder } from "./paddle-inches-remainder";
 import { PaddleTextureBackgrounds } from "./paddle-texture-backgrounds";
-import { PaddlePurchaseTypes } from "./types/paddle-purchase-types";
 import { PaddlePurchaseAndImageTypes } from "./types/paddle-purchase-image-types";
 
 // TODO: I'm not sure if this is needed or I can loop it easier

package/src/phone.tsx

@@ -19,7 +19,10 @@ type PhoneTypes = {
 
 const Phone = ({ phone }: PhoneTypes) => {
   return (
-    <a href={`tel:${phone}`} rel="norel norefferer" className="button">
+    <a href={`tel:${phone}`}
+    rel="noopener noreferrer"
+    className="button location-phone"
+    >
       Phone: <FormatPhoneNumber phoneNumberString={phone} />
     </a>
   );

package/src/styles/layout.css

@@ -409,12 +409,23 @@ header {
 
 .location-deck {
   margin-block-end: var(--kilimanjaro);
+      display: flex;
+    flex-direction: column;
+    gap: var(--vinson);
 }
 
 .location:not(:last-child) {
   margin-block-end: var(--kosciuszko);
 }
 
+.location-wrapper {
+  display: grid;
+
+  > * {
+    grid-column: 1;
+  }
+}
+
 .location {
   display: flex;
   flex-flow: row;
@@ -442,6 +453,19 @@ header {
   }
 }
 
+/* * this whole things works but is kinda a hack */
+/* It works around having a nested link in a link */
+.location-wrapper.phone-spacer .location {
+  grid-row: 1/3;
+  padding-block-end: 6.5rem; /* this is a guess and check, it needs to be big enough to accomodate the phone number but not too big that it looks weird when there is no phone number */
+}
+
+.button.location-phone {
+  grid-row: 2;
+  margin-inline-start: 5.5rem;
+  margin-block-end: 2.5rem;
+}
+
 /*------------------*/
 /* #COMPOSITION */
 /*------------------*/