@dcrackel/meyersquaredui 1.0.79 → 1.0.81

package/package.json

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

package/src/index.js

@@ -11,6 +11,7 @@ export { default as PageHeader } from './stories/Organisms/Headers/PageHeader/Pa
 export { default as HostColumn } from './stories/Organisms/Column/HostColumn.vue'
 export { default as ClubHeader } from './stories/Organisms/Headers/ClubHeader/ClubHeader.vue'
 export { default as TournamentHeader } from './stories/Organisms/Headers/TournamentHeader/TournamentHeader.vue'
+export { default as ScrollNav } from './stories/Organisms/Headers/ScrollNav/ScrollNav.vue'
 export { default as TournamentDetailsBanner } from './stories/Organisms/HeroBanners/TournamentDetails/TournamentDetailsBanner.vue'
 export { default as TournamentBanner } from './stories/Organisms/HeroBanners/Tournaments/TournamentBanner.vue'
 

package/src/stories/Atoms/BaseButton/BaseButton.vue

@@ -47,7 +47,7 @@ export default {
     color: {
       type: String,
       default: 'primary',
-      validator: (value) => ['primary', 'secondary', 'accent'].includes(value),
+      validator: (value) => ['primary', 'secondary', 'accent', 'white'].includes(value),
     },
     hoverColor: {
       type: String,
@@ -104,6 +104,7 @@ export default {
         primary: 'bg-primary hover:bg-accent text-secondary hover:text-secondary',
         secondary: 'bg-secondary hover:bg-primary text-primary hover:text-secondary',
         accent: 'bg-accent hover:bg-accent hover:text-secondary',
+        white: 'bg-white hover:bg-primary text-primary hover:text-secondary',
       };
       return colorMap[this.backgroundColor] || 'bg-primary';
     },

package/src/stories/Atoms/InputField/InputField.vue

@@ -3,12 +3,7 @@
       :type="type"
       :placeholder="placeholder"
       :value="modelValue"
-      :class="[
-        color === 'primary'
-        ? 'bg-primary text-secondary border-b-2 border-secondary focus:outline-none focus:border-accent w-full placeholder-secondary px-2 hover:border-accent duration-300 ease-in-out placeholder:text-xl'
-        : 'text-primary bg-white border-b-2 border-secondary focus:outline-none focus:border-accent w-full placeholder-primary px-2 hover:border-accent duration-300 ease-in-out placeholder:text-xl'
-,
-      ]"
+      :class="[inputClass]"
       @input="$emit('update:modelValue', $event.target.value)"
   />
 </template>
@@ -33,14 +28,24 @@ export default {
       type: String,
       default: 'primary',
       validator: (value) => ['primary', 'secondary'].includes(value),
+    },
+    textSize: {
+      type: String,
+      default: 'text-md',
+      validator: (value) => ['text-sm', 'text-md', 'text-lg', 'text-xl', 'text-2xl'].includes(value),
     }
   },
   computed: {
-    bgClass() {
-      return this.mode === 'primary' ? 'bg-primary text-secondary border-b-2 border-secondary focus:outline-none focus:border-accent w-full placeholder-secondary px-2 hover:border-accent duration-300 ease-in-out' : 'bg-secondary';
-    },
-    textClass() {
-      return this.mode === 'primary' ? 'text-primary' : 'text-primary';
+    inputClass() {
+      const baseClasses = 'w-full border-b-2 focus:outline-none focus:border-accent px-2 hover:border-accent duration-300 ease-in-out';
+
+      const colorClass = this.color === 'primary'
+          ? 'bg-primary text-secondary border-secondary placeholder-secondary'
+          : 'bg-white text-primary border-secondary placeholder-primary';
+
+      const textSizeClass = this.textSize;
+
+      return `${baseClasses} ${colorClass} ${textSizeClass}`;
     }
   }
 };

package/src/stories/Molecules/SearchBox/SearchBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative flex items-center w-full max-w-md">
-    <InputField v-model="searchQuery" placeholder="Search" color="primary"/>
-    <Icon icon="fa-search" color="secondary" size="md" class="absolute right-2" @click="onSearch" />
+    <InputField v-model="searchQuery" :text-size="textSize" placeholder="Search" :color="inputColor"/>
+    <Icon icon="fa-search" :color="iconColor" :size="iconSize" class="absolute right-2" @click="onSearch" />
   </div>
 </template>
 
@@ -15,6 +15,24 @@ export default {
     InputField,
     Icon,
   },
+  props: {
+    textSize: {
+      type: String,
+      default: 'text-md',
+    },
+    iconSize: {
+      type: String,
+      default: 'md',
+    },
+    inputColor: {
+      type: String,
+      default: 'primary',
+    },
+    iconColor: {
+      type: String,
+      default: 'secondary',
+    },
+  },
   data() {
     return {
       searchQuery: '',

package/src/stories/Organisms/Cards/TournamentDetails/TournamentDetails.vue

@@ -54,9 +54,21 @@ export default {
       ],
     },
   },
+  mounted() {
+    this.preloadImage(this.imageSrc);
+  },
   data() {
     return {
     };
   },
+  methods: {
+    preloadImage(imageUrl) {
+      const link = document.createElement('link');
+      link.rel = 'preload';
+      link.as = 'image';
+      link.href = imageUrl;
+      document.head.appendChild(link);
+    }
+  }
 };
 </script>

package/src/stories/Organisms/Cards/TournamentListCard/TournamentListCard.vue

@@ -76,7 +76,7 @@ export default {
       return '00:00 AM'; // Replace with actual time if available in the data object
     },
     tournamentImage() {
-      return this.data.ImagesURLs || 'https://via.placeholder.com/150';
+      return this.data.ImagesURLs || 'https://meyersquared.com/uploads/defaulttournament.png';
     },
     imageAltText() {
       return this.data.ImagesAltTexts || 'Tournament Image';

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

@@ -86,9 +86,12 @@ export default {
   emits: ['grid-click', 'grid-card-click'],
   computed: {
     topClasses() {
-      let retClass = "max-w-[1200px] overflow-x-auto mt-8";
-      if (this.whiteStyle) retClass = `w-full md:mr-10 md:mt-10`;
-      return retClass;
+      if (this.mobileHorizontal) {
+        return "w-screen overflow-x-auto";
+      }
+
+      // For larger screens, limit the width to 1200px
+      return "max-w-[1200px] w-full flex justify-center mx-auto mt-8";
     },
     headerClasses() {
       let retClasses = "w-full flex py-4 md:pb-10 ml-2 md:ml-0 mb-4";
@@ -97,15 +100,17 @@ export default {
     },
     gridClasses() {
       let baseClasses = "md:grid md:gap-x-6 md:gap-y-4";
+
+      // Enable horizontal scrolling for mobile layout
       if (this.mobileHorizontal) {
-        baseClasses = `flex space-x-4 md:grid md:gap-x-6 md:gap-y-4`;
+        baseClasses = `flex space-x-4 overflow-x-auto md:grid md:gap-x-6 md:gap-y-4`;
       }
+
       if (this.whiteStyle) {
         baseClasses = `bg-white p-2 mx-2 md:mx-0 rounded-lg`;
       }
 
       let columnClasses;
-
       switch (this.maxColumns) {
         case 1:
           columnClasses = "grid-cols-1";

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

@@ -7,7 +7,7 @@
 
       <section class="flex w-full items-center border-r border-l border-lineGrey">
         <div class="hidden lg:flex w-1/3 pl-20 mb-3 mt-1">
-          <SearchBox class="w-24 md:w-32 lg:w-52 xl:w-64" @search="onSearch" />
+          <SearchBox class="w-24 md:w-32 lg:w-52 xl:w-64" text-size="text-xl" @search="onSearch" />
         </div>
         <nav class="ml-8 w-2/3 flex justify-around">
           <BaseText color="secondary" size="xl" tag="p" weight="normal" class="border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out" @click="handlePageChange('TournamentList')">Tournaments</BaseText>

package/src/stories/Organisms/Headers/ScrollNav/ScrollNav.stories.js

@@ -0,0 +1,32 @@
+import ScrollNav from './ScrollNav.vue';
+export default {
+    title: 'Organisms/Headers/ScrollNav',
+    component: ScrollNav,
+    argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+    components: { ScrollNav },
+    setup() {
+        return { args };
+    },
+    template: `
+    <div>
+      <!-- Simulating a hero banner -->
+      <div id="hero" class="h-screen bg-gray-400 flex justify-center items-center">
+        <h1 class="text-4xl text-white">Hero Banner</h1>
+      </div>
+      
+      <!-- ScrollNav Component -->
+      <ScrollNav v-bind="args" />
+
+      <!-- Simulate some content to scroll through -->
+      <div class="h-screen bg-gray-100 flex justify-center items-center">
+        <p class="text-2xl">Scroll down to see the Nav Bar appear!</p>
+      </div>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};

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

@@ -0,0 +1,68 @@
+<template>
+  <nav
+      v-show="showNav"
+      class="fixed top-0 left-0 w-full bg-white shadow-md transition-opacity duration-1000 z-50"
+      :class="{ 'opacity-0': !showNav, 'opacity-100': showNav }"
+  >
+    <div class="max-w-7xl mx-auto px-4 py-2">
+      <section class="w-full hidden md:flex">
+        <div class="w-[150px] h-[50px] flex-shrink-0 flex items-center justify-center" @click="handlePageChange('Home')">
+          <img :src="logo" alt="Logo" class="h-10 bg-accent" />
+        </div>
+
+        <section class="flex w-full items-center">
+          <div class="hidden lg:flex w-1/3 pl-20 mb-3 mt-1">
+            <SearchBox inputColor="secondary" iconColor="primary" class="w-24 md:w-32 lg:w-52 xl:w-64" @search="onSearch" />
+          </div>
+          <nav class="ml-8 w-2/3 flex justify-around">
+            <BaseText color="primary" size="sm" tag="p" weight="normal" class="border-b-2 border-white hover:border-accent pb-2 duration-300 ease-in-out" @click="handlePageChange('TournamentList')">Tournaments</BaseText>
+            <BaseText color="primary" size="sm" tag="p" weight="normal" class="border-b-2 border-white hover:border-accent pb-2 duration-300 ease-in-out" @click="handlePageChange('ClubList')">Clubs</BaseText>
+            <BaseText color="primary" size="sm" tag="p" weight="normal" class="border-b-2 border-white hover:border-accent pb-2 duration-300 ease-in-out" @click="handlePageChange('Leaderboard')">Leaderboard</BaseText>
+            <BaseText color="primary" size="sm" tag="p" weight="normal" class="border-b-2 border-white hover:border-accent pb-2 duration-300 ease-in-out" @click="handlePageChange('ContactUs')">Contact</BaseText>
+            <BaseText color="primary" size="sm" tag="p" weight="normal" class="border-b-2 border-white hover:border-accent pb-2 duration-300 ease-in-out" @click="handlePageChange('ContactUs')">Login</BaseText>
+          </nav>
+        </section>
+      </section>
+    </div>
+  </nav>
+</template>
+
+<script>
+import logo from '../../../../assets/images/m2-white.png';
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+import BaseButton from "../../../Atoms/BaseButton/BaseButton.vue";
+import SearchBox from "../../../Molecules/SearchBox/SearchBox.vue";
+
+export default {
+  name: 'ScrollNav',
+  components: {
+    SearchBox, BaseButton, BaseText
+  },
+  props: {
+    buffer: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      logo: logo,
+      showNav: false,
+      heroHeight: 0,
+    };
+  },
+  mounted() {
+    this.heroHeight = document.querySelector('#hero')?.offsetHeight || 600;
+    window.addEventListener('scroll', this.handleScroll);
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll);
+  },
+  methods: {
+    handleScroll() {
+      const scrollPos = window.scrollY;
+      this.showNav = scrollPos > (this.heroHeight + this.buffer);
+    },
+  },
+};
+</script>

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 md:m-0 mt-6 " :style="backgroundStyle">
+  <section id="hero" 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>
 
@@ -97,6 +97,7 @@ export default {
   mounted() {
     this.checkScreenSize();
     window.addEventListener('resize', this.checkScreenSize);
+    this.preloadImage(this.imageSrc);
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.checkScreenSize);
@@ -108,6 +109,13 @@ export default {
     onClick() {
       this.$emit('button-click');
     },
+    preloadImage(imageUrl) {
+      const link = document.createElement('link');
+      link.rel = 'preload';
+      link.as = 'image';
+      link.href = imageUrl;
+      document.head.appendChild(link);
+    }
   },
 };
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section class="hidden md:flex relative w-full justify-center bg-primary m-0 bg-top" :style="backgroundStyle">
+  <section id="hero" 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>
 
@@ -125,11 +125,19 @@ export default {
   mounted() {
     this.checkScreenSize();
     window.addEventListener('resize', this.checkScreenSize);
+    this.preloadImage(this.imageSrc);
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.checkScreenSize);
   },
   methods: {
+    preloadImage(imageUrl) {
+      const link = document.createElement('link');
+      link.rel = 'preload';
+      link.as = 'image';
+      link.href = imageUrl;
+      document.head.appendChild(link);
+    },
     checkScreenSize() {
       this.isMobile = window.innerWidth < 768;
     },

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

@@ -1,5 +1,5 @@
 <template>
-  <section class="relative w-full flex justify-center bg-primary m-0 bg-top" :style="backgroundStyle">
+  <section id="hero" class="relative w-full flex justify-center bg-primary m-0 bg-top" :style="backgroundStyle">
     <div class="hidden md:block w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
 
     <div class="relative w-full md:border-b md:border-l md:border-r border-lineGrey">
@@ -71,6 +71,7 @@ export default {
   mounted() {
     this.checkScreenSize();
     window.addEventListener('resize', this.checkScreenSize);
+    this.preloadImage(this.imageSrc);
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.checkScreenSize);
@@ -79,6 +80,13 @@ export default {
     checkScreenSize() {
       this.isMobile = window.innerWidth < 768;
     },
+    preloadImage(imageUrl) {
+      const link = document.createElement('link');
+      link.rel = 'preload';
+      link.as = 'image';
+      link.href = imageUrl;
+      document.head.appendChild(link);
+    }
   },
 };
 </script>

package/src/stories/Templates/HomePage/HomePage.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="m-0 w-full bg-secondary">
     <PageHeader @changePage="changePage"/>
-    <HeroBanner :title="title" :buttonLabel="buttonLabel" :description="description" :imageSrc="imageSrc"/>
+    <HeroBanner  :title="title" :buttonLabel="buttonLabel" :description="description" :imageSrc="imageSrc"/>
+    <ScrollNav buffer=100 />
     <GridLayout
         :cardComponent="TournamentCard"
         :items="limitedTournaments"
@@ -22,7 +23,7 @@
         :cardComponent="FencerCard"
         :items="topFencers"
         :maxColumns="5"
-        :mobileHorizontal="true"
+        :mobileHorizontal="mobileHorizontal"
         :isLoading="topFencersIsLoading"
         moreButtonLabel="Leaderboards"
         title="Top Fencers"
@@ -34,19 +35,21 @@
                         @handle-button-click-one="changePage('submitresults')"
                         @handle-button-click-two="changePage('runtournament')"
     />
+
     <GridLayout
         :cardComponent="ArticleCard"
         :items="articles"
         :maxColumns="3"
-        :mobileHorizontal="true"
+        :mobileHorizontal="mobileHorizontal"
         :isLoading="articlesIsLoading"
         moreButtonLabel="See More"
         title="Interesting Articles"
         @grid-click="changePage('articles')"
         @grid-card-click="handleGridCardClick"
     />
+    </div>
     <Footer @changePage="changePage"/>
-  </div>
+
 </template>
 
 <script>
@@ -59,6 +62,7 @@ import GridLayout from "../../Organisms/GridLayout/GridLayout.vue";
 import SingleButtonBanner from "../../Organisms/SectionBanners/SingleButtonBanner/SingleButtonBanner.vue";
 import DoubleButtonBanner from "../../Organisms/SectionBanners/DoubleButtonBanner/DoubleButtonBanner.vue";
 import Footer from "../../Organisms/Footer/Footer.vue";
+import ScrollNav from "../../Organisms/Headers/ScrollNav/ScrollNav.vue";
 import {markRaw} from 'vue';
 
 export default {
@@ -72,6 +76,7 @@ export default {
     FencerCard,
     PageHeader,
     HeroBanner,
+    ScrollNav
   },
   props: {
     title: {
@@ -126,12 +131,27 @@ export default {
       return this.tournaments.slice(0, 6);
     }
   },
+  mounted() {
+    // Check initial screen size
+    this.checkScreenSize();
+
+    // Add listener for window resize
+    window.addEventListener('resize', this.checkScreenSize);
+  },
+  beforeUnmount() {
+    // Clean up the event listener when the component is destroyed
+    window.removeEventListener('resize', this.checkScreenSize);
+  },
   data() {
     return {
       TournamentCard: markRaw(TournamentCard),
+      mobileHorizontal: true,
     };
   },
   methods: {
+    checkScreenSize() {
+      this.mobileHorizontal = window.matchMedia('(max-width: 768px)').matches;
+    },
     handleGridCardClick() {
       console.log('Grid Card Clicked');
     },

package/src/stories/Templates/TournamentListPage/TournamentListPage.vue

@@ -5,19 +5,22 @@
     <TournamentHeader :weapons="['All Weapons', 'Longsword', 'Saber', 'Rapier', 'Smallsword', 'Sword and Buckler']" />
 
     <div class="w-full flex justify-center">
-    <section class="w-full md:w-2/3 mb-20 flex">
-      <GridLayout
-          :cardComponent="cardComponent"
-          :items="limitedTournaments"
-          :maxColumns="1"
-          :isLoading="tournamentsIsLoading"
-          :whiteStyle="true"
-          moreButtonLabel="See All Tournaments"
-          :title="formattedDate"
-          @grid-card-click="changePage"
-      />
-      <Calendar :tournaments="tournaments" class="hidden md:block mt-32" />
-    </section>
+      <section class="mb-20 flex w-full md:w-7/12">
+        <GridLayout
+            :cardComponent="cardComponent"
+            :items="limitedTournaments"
+            :maxColumns="1"
+            :isLoading="tournamentsIsLoading"
+            :whiteStyle="true"
+            moreButtonLabel="See All Tournaments"
+            :title="formattedDate"
+            @grid-card-click="handleCardClick"
+            topBoxClass="w-full md:w-3/4 md:mr-10 md:-mt-3"
+        />
+        <div class="flex md:w-60 justify-start">
+          <Calendar :tournaments="tournaments" class="hidden md:block mt-32 items-start" />
+        </div>
+      </section>
     </div>
 
     <Footer />