@dcrackel/meyersquaredui 1.0.61 → 1.0.63

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/meyersquaredui",
   "private": false,
-  "version": "1.0.61",
+  "version": "1.0.63",
   "type": "module",
   "main": "dist/meyersquaredui.cjs.js",
   "module": "dist/meyersquaredui.esm.js",

package/src/mocks/getClubById.js

@@ -5,6 +5,7 @@ const mockGetClubById =
             "Name": "Acme Fencing Club",
             "ShortName": "ACME",
             "Description": "<b>ACME Fencing Club</b> is the premier destination for historical European martial arts (HEMA), offering specialized classes in longsword, rapier, and saber. With a focus on both traditional techniques and modern applications, ACME provides top-tier instruction from some of the best HEMA instructors in the field.\n<br><br>\nClasses are available three nights a week, tailored to specific weapon disciplines:\n<br>\n<b>Monday</b>: Saber<br>\n<b>Wednesday</b>: Longsword<br>\n<b>Thursday</b>: Rapier<br><br>\nIn addition to formal classes, ACME hosts open sparring every Saturday, giving students a chance to apply their skills in a friendly, competitive environment. Whether you're new to HEMA or an experienced fencer, ACME Fencing Club offers a welcoming community and expert instruction to help you refine your craft.",
+            "TagLine": "The premier destination for HEMA",
             "AddressId": 1,
             "Color1": "navy",
             "Color2": "rose",

package/src/stories/Molecules/DropDowns/BasicDropDown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative w-48" ref="dropdownContainer">
+  <div :class="`relative ${width}`" ref="dropdownContainer">
     <div @click="toggleDropdown" class="flex items-center cursor-pointer">
       <BaseText
           class="border-b-2 border-transparent hover:border-accent pb-1 duration-300 ease-in-out"
@@ -13,20 +13,40 @@
       <Icon icon="fa-chevron-down" size="sm" color="primary" class="ml-4" />
     </div>
 
-    <!-- Dropdown Menu -->
-    <div v-if="dropdownOpen" class="absolute top-full mt-1 w-48 bg-secondary border rounded-lg border-lineGrey shadow-xl z-20">
+    <!-- Dropdown Menu for PC -->
+    <div v-if="dropdownOpen" class="absolute top-full mt-1 w-full bg-secondary border rounded-lg border-lineGrey shadow-xl z-50 hidden md:block">
       <ul>
-        <li v-for="item in items"
+        <li
+            v-for="item in items"
             :key="item"
             @click="selectWeapon(item)"
-            class="px-4 py-2 cursor-pointer hover:bg-hoverColor">
+            class="px-4 py-2 cursor-pointer hover:bg-hoverColor"
+        >
           <BaseText color="primary" size="xs sm" tag="p" weight="bold">{{ item }}</BaseText>
         </li>
       </ul>
     </div>
+
+    <!-- Modal Dropdown for Mobile -->
+    <div v-if="dropdownOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 md:hidden">
+      <!-- Dropdown content -->
+      <div class="bg-secondary border rounded-lg border-lineGrey shadow-xl z-50 w-3/4 max-w-lg p-6">
+        <ul>
+          <li
+              v-for="item in items"
+              :key="item"
+              @click="selectWeapon(item)"
+              class="px-4 py-2 cursor-pointer hover:bg-hoverColor"
+          >
+            <BaseText color="primary" size="xs sm" tag="p" weight="bold">{{ item }}</BaseText>
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 </template>
 
+
 <script>
 import BaseText from '../../Atoms/BaseText/BaseText.vue';
 import Icon from '../../Atoms/Icon/Icon.vue';
@@ -46,6 +66,10 @@ export default {
       type: String,
       default: ''
     },
+    width: {
+      type: String,
+      default: 'w-48'
+    },
     boldText: {
       type: Boolean,
       default: false
@@ -66,15 +90,24 @@ export default {
   methods: {
     toggleDropdown() {
       this.dropdownOpen = !this.dropdownOpen;
+
+      // Check if we are on mobile (below md) and disable scroll only for mobile modal
+      if (window.innerWidth < 768 && this.dropdownOpen) {
+        document.body.style.overflow = 'hidden';  // Disable body scroll on mobile
+      } else {
+        document.body.style.overflow = '';  // Re-enable body scroll for larger screens
+      }
     },
     selectWeapon(weapon) {
       this.$emit('item-select', weapon);
       this.selectedItem = weapon;
       this.dropdownOpen = false;
+      document.body.style.overflow = '';  // Re-enable body scroll when modal is closed
     },
     handleClickOutside(event) {
       if (this.dropdownOpen && !this.$refs.dropdownContainer.contains(event.target)) {
         this.dropdownOpen = false;
+        document.body.style.overflow = '';  // Re-enable body scroll when clicking outside
       }
     }
   }

package/src/stories/Organisms/Footer/Footer.vue

@@ -115,7 +115,7 @@
 
     <div class="w-full flex flex-col items-center ">
       <!-- Subscribe Section -->
-      <div class="w-full max-w-xs flex flex-col items-center pt-8">
+      <div class="w-full max-w-xs flex flex-col items-center pt-8 px-6">
         <BaseText color="secondary" size="md" tag="p" weight="thin" class="pb-4 w-full">Subscribe for Updates</BaseText>
         <InputField placeholder="Email" type="email" class="w-full" />
       </div>

package/src/stories/Organisms/GridLayout/GridLayout.vue

@@ -78,12 +78,12 @@ export default {
   emits: ['grid-click', 'grid-card-click'],
   computed: {
     topClasses() {
-      let retClass = "max-w-[1200px] mx-auto overflow-x-auto";
+      let retClass = "max-w-[1200px] mx-auto overflow-x-auto mt-8";
       if (this.whiteStyle) retClass = `w-full md:mr-10 md:mt-10`;
       return retClass;
     },
     headerClasses() {
-      let retClasses = "w-full flex py-4 md:pb-10 ml-2 md:ml-0";
+      let retClasses = "w-full flex py-4 md:pb-10 ml-2 md:ml-0 mb-4";
       if (!this.whiteStyle) retClasses = `${retClasses} justify-center`;
       return retClasses;
     },

package/src/stories/Organisms/Headers/ClubHeader/ClubHeader.vue

@@ -1,38 +1,42 @@
 <template>
-  <div class="flex items-center justify-center space-x-4 bg-white py-6">
-    <!-- Search Bar -->
-    <div class="flex items-center pb-1.5 mr-10">
-      <BaseText class="mr-2" color="primary" size="xs md" tag="p" weight="bold">
-        Search:
-      </BaseText>
-      <InputField type="text" placeholder="By Name" color="secondary" v-model="searchQuery" class="px-2 py-1 focus:outline-none" />
-    </div>
+  <div class="flex w-full items-center justify-between bg-white py-6 overflow-x-auto md:overflow-visible">
+    <!-- Spacer (Left) - Visible only on larger screens -->
+    <div class="hidden md:block w-[150px] flex-shrink-0"></div>
 
-    <!-- Distance Dropdown -->
-    <div class="flex items-center mr-10">
-      <BaseText class="mr-2 pb-1.5" color="primary" size="xs md" tag="p" weight="bold">
-        Within:
-      </BaseText>
-      <Dropdown :items="distances" :defaultSelectedItem="selectedDistance" @distance-select="selectDistance" />
-    </div>
+    <!-- Center Section -->
+    <section class="flex w-full md:max-w-none md:flex-grow overflow-x-auto md:overflow-visible md:justify-around md:items-center">
+      <!-- Search Bar -->
+      <div class="flex items-center pb-1.5 mr-8 flex-shrink-0 md:flex-grow">
+        <BaseText class="w-20 mr-2" color="primary" size="xs md" tag="p" weight="bold">Search:</BaseText>
+        <InputField type="text" placeholder="By Name" color="secondary" v-model="searchQuery" class="px-2 py-1 focus:outline-none placeholder:text-sm lg:placeholder:text-sm w-full" />
+      </div>
 
-    <!-- Weapon Dropdown -->
-    <div class="flex items-center">
-      <BaseText class="mr-2 pb-1.5" color="primary" size="xs md" tag="p" weight="bold">
-        By Weapon:
-      </BaseText>
-      <Dropdown :items="weapons" :defaultSelectedItem="selectedWeapon" @weapon-select="selectWeapon" />
-    </div>
+      <!-- Distance Dropdown -->
+      <div class="flex justify-center items-center flex-shrink-0 md:flex-grow">
+        <BaseText class="mr-2 pb-1.5" color="primary" size="xs md" tag="p" weight="bold">Within:</BaseText>
+        <Dropdown :items="distances" :defaultSelectedItem="selectedDistance" @distance-select="selectDistance" />
+      </div>
+
+      <!-- Weapon Dropdown -->
+      <div class="flex justify-end flex-shrink-0 md:flex-grow pt-2">
+        <BaseText class="mr-2 pb-1.5" color="primary" size="xs md" tag="p" weight="bold">By Weapon:</BaseText>
+        <Dropdown :items="weapons" width="w-32" :defaultSelectedItem="selectedWeapon" @weapon-select="selectWeapon" />
+      </div>
+    </section>
+
+    <!-- Spacer (Right) - Visible only on larger screens -->
+    <div class="hidden md:block w-[150px]"></div>
   </div>
 </template>
-
 <script>
 import BaseText from '../../../Atoms/BaseText/BaseText.vue';
 import Dropdown from '../../../Molecules/DropDowns/BasicDropDown.vue';
 import InputField from "../../../Atoms/InputField/InputField.vue";
+import Icon from "../../../Atoms/Icon/Icon.vue";
 export default {
   name: 'ClubHeader',
   components: {
+    Icon,
     InputField,
     BaseText,
     Dropdown

package/src/stories/Organisms/HeroBanners/HomePage/HeroBanner.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="relative w-full h-3/4 flex justify-center bg-primary m-0" :style="backgroundStyle">
+  <section class="relative w-full h-3/4 flex justify-center bg-primary md:m-0 mt-6 " :style="backgroundStyle">
     <!-- Spacer (Left) -->
     <div class="hidden md:block w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
 
@@ -23,16 +23,16 @@
       </section>
 
       <!-- Mobile Overlay -->
-      <div v-if="isMobile" class="flex justify-center text-left w-full px-6 py-8">
+      <div v-if="isMobile" class="flex justify-center text-left w-full px-6 py-4">
         <div class="w-full">
-          <BaseText color="secondary" tag="h1" size="xl" weight="bold" class="mb-2 w-48">{{ title }}</BaseText>
-          <BaseText color="secondary" tag="p" size="xs" weight="normal" class="mb-6 w-48">{{ description }}</BaseText>
+          <BaseText color="secondary" tag="h1" size="md" weight="bold" class="mb-2 w-40 mt-16">{{ title }}</BaseText>
+          <BaseText color="secondary" tag="p" size="xs" weight="normal" class="mb-2 w-48">{{ description }}</BaseText>
           <BaseButton
               :label="buttonLabel"
               size="xs"
               color="secondary"
               border="gradient1"
-              class="w-1/2 m-auto"
+              class="w-32 m-auto"
               @click="onClick"
           />
         </div>

package/src/stories/Organisms/HeroBanners/TournamentDetails/TournamentDetailsBanner.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="relative w-full flex justify-center bg-primary m-0 bg-top" :style="backgroundStyle">
+  <section class="hidden md:flex relative w-full justify-center bg-primary m-0 bg-top" :style="backgroundStyle">
     <!-- Left Spacer -->
     <div class="hidden md:block w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
 
@@ -45,6 +45,16 @@
     <!-- Right Spacer -->
     <div class="hidden md:block w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
   </section>
+  <section class="md:hidden w-full flex justify-center mt-10">
+    <div class="w-full md:w-2/3 flex-col justify-center pl-2">
+      <BaseText color="primary" tag="h1" size="md" weight="bold" class="">{{ formattedDate }}</BaseText>
+      <BaseText color="primary" tag="h1" size="2xl" weight="bold" class="mb-1">{{ title }}</BaseText>
+      <div class="flex">
+        <BaseText color="primary" tag="p" size="xs" weight="normal" class="mr-2">Hosted by:</BaseText>
+        <BaseText color="primary" tag="p" size="xs" weight="bold">{{ hostingClubName }}</BaseText>
+      </div>
+    </div>
+  </section>
 </template>
 
 <script>
@@ -99,7 +109,6 @@ export default {
   },
   computed: {
     formattedDate() {
-      // Format the date using plain JavaScript
       const date = new Date(this.tournamentStartDate);
       const options = {weekday: 'long', year: 'numeric', month: 'short', day: 'numeric'};
       return date.toLocaleDateString('en-US', options);

package/src/stories/Organisms/HeroBanners/Tournaments/TournamentBanner.vue

@@ -8,13 +8,13 @@
       <section class="hidden md:flex absolute inset-0 items-center justify-start px-8 pt-32">
         <div class="text-left text-white max-w-lg">
           <BaseText color="secondary" tag="h1" size="4xl" weight="bold" class="mb-4">{{ title }}</BaseText>
-          <BaseText color="secondary" tag="p" size="xl" weight="normal" class="mb-6" v-html="description"></BaseText>
+          <BaseText color="secondary" tag="p" size="xl" weight="normal" class="mb-8" v-html="description"></BaseText>
         </div>
       </section>
       <div v-if="isMobile" class="flex justify-center text-left w-full px-4 mt-32">
         <div class="w-full mb-4">
-          <BaseText color="secondary" tag="h1" size="lg" weight="bold" class="mb-0 w-1/2">{{ title }}</BaseText>
-          <BaseText color="secondary" tag="p" size="xs" weight="normal" class="w-8/12">{{ description }}</BaseText>
+          <BaseText color="secondary" tag="h1" size="xl" weight="bold" class="mb-0 w-1/2">{{ title }}</BaseText>
+          <BaseText color="secondary" tag="p" size="xs" weight="normal" class="w-6/12 mt-1 mb-1">{{ description }}</BaseText>
         </div>
       </div>
     </div>
@@ -36,6 +36,11 @@ export default {
       type: String,
       required: true
     },
+    mobileImageSrc: {
+      type: String,
+      required: false,
+      default: 'https://meyersquared.com/images/banners/leaderboardm.png'
+    },
     title: {
       type: String,
       required: true,
@@ -54,8 +59,9 @@ export default {
   },
   computed: {
     backgroundStyle() {
+      const background = this.isMobile ? `url(${this.mobileImageSrc})` : `url(${this.imageSrc})`;
       return {
-        backgroundImage: `url(${this.imageSrc})`,
+        backgroundImage: background,
         backgroundSize: 'cover',
         backgroundPosition: 'top',
         backgroundRepeat: 'no-repeat',

package/src/stories/Organisms/SectionBanners/DoubleButtonBanner/DoubleButtonBanner.vue

@@ -13,7 +13,7 @@
     <div class="relative w-full border-b border-l border-r border-lineGrey">
       <section class="hidden md:flex h-80 justify-between items-center p-14">
         <div class="text-left text-white max-w-lg w-96">
-          <BaseText color="secondary" tag="h1" size="5xl" weight="semibold" class="mb-4">{{ title }}</BaseText>
+          <BaseText color="secondary" tag="h1" size="5xl" weight="normal" class="mb-4">{{ title }}</BaseText>
         </div>
         <div class="flex flex-col w-1/3 align-right">
           <BaseButton
@@ -62,7 +62,7 @@
   <!-- Mobile Overlay -->
   <section class="flex justify-center md:hidden text-left bg-primary w-full">
     <div class="w-full px-6 py-8 text-center flex flex-col justify-center items-center">
-      <BaseText color="secondary" tag="h1" size="2xl" weight="bold" class="mb-2">{{ title }}</BaseText>
+      <BaseText color="secondary" tag="h1" size="2xl" weight="normal" class="mb-2">{{ title }}</BaseText>
       <BaseText color="secondary" tag="p" size="sm" weight="normal" class="mb-6">{{ description }}</BaseText>
       <BaseButton
           :label="buttonLabelOne"

package/src/stories/Organisms/SectionBanners/SingleButtonBanner/SingleButtonBanner.vue

@@ -1,7 +1,36 @@
 <template>
-  <section class="relative bg-cover bg-top h-80 max-w-[1200px] mx-auto rounded-lg overflow-hidden mb-10" :style="{ backgroundImage: 'url(' + imageUrl + ')' }">
-    <div class="flex flex-col justify-center items-center md:items-start h-full w-full text-center md:text-left px-6 md:px-20">
-      <BaseText color="secondary" tag="h3" size="5xl" weight="normal" class="mb-8" v-html="description" />
+  <section
+      class="relative h-80 max-w-[1200px] mx-auto rounded-lg overflow-hidden mb-10 bg-primary"
+  >
+    <!-- Background Image for Non-Mobile -->
+    <div
+        class="hidden md:block bg-cover bg-top h-full w-full"
+        :style="{ backgroundImage: 'url(' + imageUrl + ')' }"
+    ></div>
+
+    <!-- Solid Black Background for Mobile -->
+    <div
+        class="block md:hidden bg-black h-full w-full"
+    ></div>
+
+    <!-- Content -->
+    <div class="absolute inset-0 flex flex-col justify-center items-center md:items-start text-center md:text-left px-6 md:px-20">
+      <BaseText
+          color="secondary"
+          tag="h3"
+          size="5xl"
+          weight="normal"
+          class="hidden md:block mb-8"
+          v-html="description"
+      />
+      <BaseText
+          color="secondary"
+          tag="h3"
+          size="3xl"
+          weight="normal"
+          class="md:hidden mb-8"
+          v-html="description"
+      />
       <BaseButton
           :label="buttonLabel"
           size="xs"

package/src/stories/Templates/ClubDetailPage/ClubDetailPage.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="m-0 w-full bg-secondary">
     <Header />
-    <TournamentBanner :title="title" :description="description" :imageSrc="imageSrc" />
+    <TournamentBanner :title="ClubTitle" :description="ClubTagLine" :imageSrc="ClubHeaderImage" :mobileImageSrc="ClubHeaderImage" />
 
-    <div class="w-full flex justify-center">
-      <div class="flex flex-col md:flex-row w-full max-w-7xl mt-16 mb-20">
+    <div class="flex justify-center pl-4 md:pl-0">
+      <div class="flex flex-col md:flex-row justify-center md:w-3/4 mt-16 mb-20">
 
-        <section class="w-full md:w-2/3 pr-8">
+        <section class="w-full md:w-2/3 pr-4 md:pr-8">
           <div class="mb-16">
             <BaseText size="xl" color="primary" weight="bold" class="mb-10">{{ club.Name }}</BaseText>
             <BaseText size="md" color="primary" weight="normal" v-html="club.Description"></BaseText>
@@ -14,7 +14,6 @@
 
           <div class="w-full mb-16">
             <BaseText size="xl" color="primary" weight="bold" class="mb-10">Location</BaseText>
-            adsfs{{club.Address.Coordinates}}
             <Mapbox
                 :apiKey="apiKey"
                 :coordinates="{ lat: 50.7128, lng: -94.006 }"
@@ -48,8 +47,7 @@
             />
           </div>
         </section>
-
-        <section class="w-full md:w-1/3 mt-8 md:mt-0 flex flex-col justify-start">
+        <section class="w-full pr-4 md:w-1/3 md:mt-8 flex flex-col justify-start">
           <SocialMediaLinkCard :socialMedia="club.SocialMedia"/>
         </section>
       </div>
@@ -115,8 +113,16 @@ export default {
     },
     ClubListCard() {
       return ClubListCard
+    },
+    ClubHeaderImage() {
+      return this.club.Images && this.club.Images[0] ? this.club.Images[0].URL : this.imageSrc
+    },
+    ClubTitle() {
+      return this.club.Name ? this.club.Name : this.title
+    },
+    ClubTagLine() {
+      return this.club.TagLine ? this.club.TagLine : this.description
     }
-
   },
   data() {
     return {

package/src/stories/Templates/ClubListPage/ClubListPage.stories.js

@@ -24,8 +24,9 @@ const Template = (args) => ({
 export const Default = Template.bind({});
 Default.args = {
     title: 'Local Clubs',
-    description: 'Explore clubs near you<br> and join the community!',
-    imageSrc: 'https://meyersquared.com/images/banners/largebanner03.jpg',
+    description: 'Explore clubs near you and join the community!',
+    imageSrc: 'https://meyersquared.com/images/banners/clubmembers.png',
+    mobileImageSrc: 'https://meyersquared.com/images/banners/clubmembersm.png',
     clubs: mockAllClubs,
     clubsIsLoading: false,
 };

package/src/stories/Templates/ClubListPage/ClubListPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="m-0 w-full bg-secondary">
     <Header />
-    <TournamentBanner :title="title" :description="description" :imageSrc="imageSrc" />
+    <TournamentBanner :title="title" :description="description" :imageSrc="imageSrc" :mobileImageSrc="mobileImageSrc" />
     <ClubHeader />
 
     <div class="w-full flex justify-center">
@@ -61,6 +61,10 @@ export default {
       type: String,
       default: 'https://meyersquared.com/images/Banner2.png'
     },
+    mobileImageSrc: {
+      type: String,
+      default: 'https://meyersquared.com/images/Banner2.png'
+    },
     clubs: {
       type: Array,
       default: () => []

package/src/stories/Templates/Leaderboard/Leaderboard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="m-0 w-full bg-secondary">
     <Header @search="onSearch"/>
-    <TournamentBanner :title="title" :description="description" :imageSrc="imageSrc" />
+    <TournamentBanner :title="title" :description="description" :imageSrc="imageSrc" isMo />
     <LeaderboardHeader  :weapons="['Longsword', 'Rapier', 'Saber', 'Sword & Buckler', 'Dagger']" @weaponSelected="changeLeaderBoarder"/>
 
     <div class="w-full flex justify-center">