@dcrackel/hematournamentui 1.0.52 → 1.0.54

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.52",
+  "version": "1.0.54",
   "type": "module",
   "main": "dist/HemaTouranmentUI-lib.umd.js",
   "module": "dist/HemaTouranmentUI-lib.es.js",

package/src/mocks/tournamentMock.js

@@ -44,7 +44,7 @@ const mockTournaments = [
     "Name": "Test Tournament",
     "StartDate": "2023-12-30",
     "EndDate": "2023-12-31",
-    "Description": "<p>asdfasdfa</p>",
+    "Description": "<p>asdfasdfa ajhasd;likjfh;jkh asdlkjha;fdslkh ;asd;lkjfha;lksdhf ;alksh;lkjha;sdolfkjh;'asdklj f'as'lkj as'ldkj' asdkjlasd'fklja'dkljf sad'</p>",
     "ClubId": 1,
     "AddressId": 2,
     "Club.Name": "Test Club",

package/src/stories/Molecules/Buttons/BaseButton/BaseButton.vue

@@ -62,7 +62,7 @@ export default {
       admin: 'px-2.5 py-2 items-center rounded-md gap-2.5 text-center my-1 text-neutral hover:bg-primaryHighlight ' +
           (props.selected ? 'bg-primary' : 'bg-primary'),
 
-      adminSecondary: 'px-2.5 py-0.5 items-center gap-2.5 text-center my-1 pb-0.5 border-b border-secondary hover:border-b hover:border-neutral w-11/12 text-neutral ' +
+      adminSecondary: 'px-2.5 py-2 rounded-xl items-center gap-2.5 text-center my-1 pb-2 border-b border-secondary hover:bg-bright w-11/12 text-neutral ' +
           (props.selected ? 'bg-primary' : 'bg-primary'),
 
       iconOnly: 'px-0.5 items-center rounded-full text-center text-tertiary shadow border border-dropdownSelect justify-center bg-primaryHighlight',

package/src/stories/Molecules/Cards/Detail/TournamentCardDetail.vue

@@ -3,7 +3,12 @@
     <BaseText :text="detail.Name" color="primary" size="xl" weight="semi-bold" />
     <BaseText :text="detail.Address && detail.Address[0].Name" color="primary" size="sm" weight="normal" />
     <div class="mt-4 flex flex-col">
-      <div class="mt-4 flex flex-col" v-html="detail.Description"></div>
+      <div class="mt-4 flex flex-col h-20" >
+        <span v-html="formattedDescription"></span>
+        <span v-if="isTruncated" @click="toggleDescription" class="text-blue-500 cursor-pointer text-right mr-2">
+        {{ showMoreDescription ? ' << less ' : 'more >>' }}
+      </span>
+      </div>
     </div>
     <div class="mt-4 flex flex-col">
       <BaseText :text="`${detail.StartDate}`" color="primaryHighlight" size="sm" weight="light" />
@@ -49,9 +54,28 @@ export default {
       })
     }
   },
+  data() {
+    return {
+      showMoreDescription: false,
+    };
+  },
+  computed: {
+    formattedDescription() {
+      if (!this.showMoreDescription && this.detail.Description.length > 64) {
+        return this.detail.Description.substring(0, 64) + '...';
+      }
+      return this.detail.Description;
+    },
+    isTruncated() {
+      return this.detail.Description.length > 64;
+    }
+  },
   methods: {
     onClick() {
       this.$emit('edit', this.detail);
+    },
+    toggleDescription() {
+      this.showMoreDescription = !this.showMoreDescription;
     }
   }
 };

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center p-4 border border-gray-300 rounded-lg shadow-md w-full mb-5">
+  <div class="flex items-center p-4 border border-dropdownSelect rounded-lg shadow-md w-full mb-5">
     <div class="w-full flex flex-row justify-between">
       <section class="flex flex-row justify-start">
        <div class="flex flex-col pl-4">
@@ -19,19 +19,19 @@
          <div class="flex flex-row">
             <section class="w-20 h-16 bg-eventBoxBlue rounded-xl m-1">
               <div class="flex flex-col justify-between h-14 py-2 pl-1">
-                <p class="flex flex-row justify-center w-full"><BaseText :text="event.Present" size="md" color="quinary" weight="bold" /></p>
+                <p class="flex flex-row justify-center w-full pb-1"><BaseText :text="event.Present" size="lg" color="quinary" weight="bold" /></p>
                 <p class="flex flex-row justify-center w-full"><BaseText text="PRESENT" size="xs" color="quinary" /></p>
               </div>
             </section>
             <section class="w-20 h-16 bg-eventBoxGreen rounded-xl m-1">
               <div class="flex flex-col justify-between h-14 py-2 pl-1">
-                <p class="flex flex-row justify-center w-full"><BaseText :text="event.Absent" size="md" color="quinary" weight="bold" /></p>
+                <p class="flex flex-row justify-center w-full pb-1"><BaseText :text="event.Absent" size="lg" color="quinary" weight="bold" /></p>
                 <p class="flex flex-row justify-center w-full"><BaseText text="ABSENT" size="xs" color="quinary" /></p>
               </div>
             </section>
             <section class="w-20 h-16 bg-eventBoxRed rounded-xl m-1">
               <div class="flex flex-col justify-between h-14 py-2 pl-1">
-                <p class="flex flex-row justify-center w-full"><BaseText :text="event.Removed" size="md" color="quinary" weight="bold" /></p>
+                <p class="flex flex-row justify-center w-full pb-1"><BaseText :text="event.Removed" size="lg" color="quinary" weight="bold" /></p>
                 <p class="flex flex-row justify-center w-full"><BaseText text="REMOVED" size="xs" color="quinary" /></p>
               </div>
             </section>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-xl w-72 shadow border hover:border-bright" @click="listEvents">
+  <div class="rounded-xl w-72 shadow border border-dropdownSelect hover:border-bright" @click="listEvents">
     <TournamentHeader :artwork="detail.images && detail.images.length > 0 ? detail.images[0].URL : ''" :tags="detail.tags" />
     <TournamentDetail :detail="detail" @click="onClick"/>
   </div>

package/src/stories/Organisms/Grids/GridContainer.vue

@@ -12,7 +12,6 @@
       </div>
     </div>
   </div>
-
 </template>
 
 

package/src/stories/Templates/Menus/Admin/AdminLeftMenu.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="bg-secondary w-64 h-screen flex flex-col justify-between">
+  <div class="bg-secondary min-h-screen flex flex-col justify-between">
     <section class="h-28 border-b border-neutral">
       <div class="flex flex-col justify-center h-28">
-        <div class="ml-8">
-          <img class="w-32" src="https://ferrotas.com/assets/ferrotas-white-small-720502db.png"  alt="logo"/>
+        <div class="flex justify-center">
+          <img alt="Logo" class="w-24" :src="logoImage" />
         </div>
       </div>
     </section>
@@ -38,6 +38,7 @@
 
 <script>
 import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import logoImage from '../../../../assets/M2b.png';
 
 export default {
   name: 'AdminLeftMenu',
@@ -48,6 +49,11 @@ export default {
       default: () => []
     }
   },
+  data() {
+    return {
+      logoImage,
+    };
+  },
   methods: {
     handleButtonClick(button) {
       this.$emit('button-click', button);

package/src/stories/Templates/TournamentManagement/EditTournament/ListEvents/ListEvents.vue

@@ -4,7 +4,7 @@
     <section class="w-full">
       <div class="w-full flex flex-col justify-center items-center mb-6" style="text-align: center">
         <div v-if="events.length === 0">
-          <img alt="Small desert scene with wind blowing." class="w-96 " src="/src/assets/empty_desert_icon.png">
+          <img alt="Small desert scene with wind blowing." class="w-96" :src="emptyDesertIcon" />
           <BaseText :color="'primaryHighlight'" :size="'lf'" :text="'0 events added yet.'"
                     :weight="'normal'" data-testid="text-num-events"/>
           <BaseText :color="'primaryHighlight'" :size="'lf'" :text="'Click below to add first event.'"
@@ -30,6 +30,7 @@ import EditTournamentMenu from "../../../Menus/EditTournamentMenu/EditTournament
 import BaseText from "../../../../Atoms/Text/BaseText.vue";
 import BaseButton from "../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
 import EventCard from "../../../../Organisms/Cards/EventCard/EventCard.vue";
+import emptyDesertIcon from '../../../../../assets/empty_desert_icon.png';
 
 export default {
   components: {
@@ -42,6 +43,11 @@ export default {
     tournamentId: Number,
     events: Array,
   },
+  data() {
+    return {
+      emptyDesertIcon,
+    };
+  },
   methods: {
     handleAddEvent() {
      this.$emit('addEvent', this.tournamentId);

package/tailwind.config.js

@@ -1,65 +1,65 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-  ],
-  safelist: [
-    'text-accepted',
-    'bg-acceptedHighlight',
-    'hover:text-alarm'
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont']
-      },
-      lineHeight: {
-        'h1': '1.25',
-        'h2': '1.5',
-        'h3': '1.75'
-      },
-      colors: {
-        accepted: '#1D7E64',
-        acceptedBorder: '#ADCFC6',
-        acceptedHighlight: '#E5F6F1',
-        alarm: '#FD546F',
-        alarmText: '#F90229',
-        alert: '#FFD255',
-        bright: '#6190f2',
-        dropdownSelect: '#D5E4EE',
-        neutral: '#FFFFFF',
-        primary: '#141B33',
-        primaryHighlight: '#52586C',
-        quaternary: '#8991AC',
-        quinary : '#989daa',
-        secondary: '#2B324B',
-        tertiary: '#F6FAFD',
-        eventBoxBlue: '#eff4f7',
-        eventBoxGreen: '#f2f7ef',
-        eventBoxRed: '#f7efef',
-      },
-      boxShadow: {
-        custom: 'var(--tw-shadow)',
-      },
-    },
-  },
-  plugins: [
-    function ({ addBase, theme }) {
-      addBase({
-        h1: {
-          fontSize: theme('fontSize.3xl'),
-          lineHeight: theme('lineHeight.leading-h1'),
-        },
-        h2: {
-          fontSize: theme('fontSize.2xl'),
-          lineHeight: theme('lineHeight.h2'),
+    content: [
+        "./index.html",
+        "./src/**/*.{vue,js,ts,jsx,tsx}",
+    ],
+    safelist: [
+        'text-accepted',
+        'bg-acceptedHighlight',
+        'hover:text-alarm'
+    ],
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont']
+            },
+            lineHeight: {
+                'h1': '1.25',
+                'h2': '1.5',
+                'h3': '1.75'
+            },
+            colors: {
+                accepted: '#1D7E64',
+                acceptedBorder: '#ADCFC6',
+                acceptedHighlight: '#E5F6F1',
+                alarm: '#FD546F',
+                alarmText: '#F90229',
+                alert: '#FFD255',
+                bright: '#6190f2',
+                dropdownSelect: '#D5E4EE',
+                neutral: '#FFFFFF',
+                primary: '#141B33',
+                primaryHighlight: '#52586C',
+                quaternary: '#8991AC',
+                quinary: '#989daa',
+                secondary: '#2B324B',
+                tertiary: '#F6FAFD',
+                eventBoxBlue: '#eff4f7',
+                eventBoxGreen: '#f2f7ef',
+                eventBoxRed: '#f7efef',
+            },
+            boxShadow: {
+                custom: 'var(--tw-shadow)',
+            },
         },
-        h3: {
-          fontSize: theme('fontSize.xl'),
-          lineHeight: theme('lineHeight.h3'),
-        },
-      });
     },
-  ],
+    plugins: [
+        function ({addBase, theme}) {
+            addBase({
+                h1: {
+                    fontSize: theme('fontSize.3xl'),
+                    lineHeight: theme('lineHeight.leading-h1'),
+                },
+                h2: {
+                    fontSize: theme('fontSize.2xl'),
+                    lineHeight: theme('lineHeight.h2'),
+                },
+                h3: {
+                    fontSize: theme('fontSize.xl'),
+                    lineHeight: theme('lineHeight.h3'),
+                },
+            });
+        },
+    ],
 }