@dcrackel/meyersquaredui 1.0.79 → 1.0.80

package/package.json

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

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