@dcrackel/meyersquaredui 1.0.78 → 1.0.80

package/package.json

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

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

@@ -1,15 +1,15 @@
 <template>
-  <section class="flex flex-col md:bg-white w-full border-b pb-2 mb-2 pt-1 cursor-pointer last:border-b-0" @click="handleCardClick">
-    <div class="flex">
+  <section class="flex flex-col md:bg-white w-full border-b pb-2 mb-2 pl-1 pt-1 cursor-pointer last:border-b-0" @click="handleCardClick">
+    <div class="flex pt-1">
       <img :src="tournamentImage" :alt="imageAltText" class="w-24 h-16 md:w-32 md:h-20 object-cover rounded mr-2 md:mr-4 flex-shrink-0" />
       <div class="flex flex-col">
-        <div class="flex items-center mb-2"><BaseText color="primary" tag="h2" size="2xl" weight="bold">{{ tournamentName }}</BaseText></div>
-        <div class="hidden md:flex items-center text-sm text-gray-600 mb-2"><BaseText color="primary" tag="p" size="lg" weight="bold">{{ addressName }}</BaseText></div>
+        <div class="flex items-center mb-0"><BaseText color="primary" tag="h2" size="2xl" weight="bold">{{ tournamentName }}</BaseText></div>
+        <div class="hidden md:flex items-center text-sm text-gray-600 mb-2"><BaseText color="primary" tag="p" size="md" weight="normal">{{ addressName }}</BaseText></div>
       </div>
     </div>
 
     <!-- Participants and Date Section -->
-    <div class="hidden md:flex mt-3">
+    <div class="hidden md:flex mt-3 mb-1">
       <div class="flex flex-row w-full">
         <div class="flex items-center mr-10">
           <Icon icon="fa-users" size="sm" color="accent" class="mr-4" />
@@ -25,7 +25,7 @@
     <!-- Mobile Participants and Date Section -->
     <div class="flex flex-col md:hidden mt-2">
       <div class="flex items-center pb-2">
-        <BaseText color="primary" tag="p" size="sm" weight="bold">{{ addressName }}</BaseText>
+        <BaseText color="primary" tag="p" size="sm" weight="normal">{{ addressName }}</BaseText>
       </div>
       <div class="flex flex-row">
         <div class="flex items-center mr-4">

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/Templates/HomePage/HomePage.vue

@@ -22,7 +22,7 @@
         :cardComponent="FencerCard"
         :items="topFencers"
         :maxColumns="5"
-        :mobileHorizontal="true"
+        :mobileHorizontal="mobileHorizontal"
         :isLoading="topFencersIsLoading"
         moreButtonLabel="Leaderboards"
         title="Top Fencers"
@@ -34,19 +34,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>
@@ -126,12 +128,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/TournamentDetailPage/TournamentDetailPage.vue

@@ -26,7 +26,7 @@
               :isLoading="false"
               :whiteStyle="true"
               :title="'Events'"
-              topBoxClass="w-full pl-2 pr-6"
+              topBoxClass="w-full pl-2 pr-8"
           />
         </div>
         <div v-if="RegistrationLink" class="w-full flex justify-center md:mb-20">

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 />