Merge pull request #474 from Zemill/develop

Heroes Profile v0.2.0
Heroes-Profile · Nov 20, 2023 · 3765058 · 3765058
2 parents e34a182 + 9563c18
commit 3765058
Show file tree

Hide file tree

Showing 56 changed files with 1,318 additions and 618 deletions.
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -58,15 +58,22 @@ table{
   width:auto ;
   @apply bg-gray-light text-black;
   min-width:1500px;
+  width: 1500px;
   margin-left:auto;
   margin-right:auto;
 
 
 }
 
-tr:not(.bg-hred){
+tr{
 @apply even:bg-gray-xlight ;
 }
+tr.bg-hred{
+  background-color: rgba(214, 142, 124, 0.5);
+}
+tr.bg-yellow{
+  background-color: #d98c40;
+}
 
 th{
   @apply text-left text-sm leading-4  tracking-wider cursor-pointer py-1 px-3 border-b;
@@ -221,7 +228,7 @@ h1{
 
 }
 .quadruple{
-  @apply text-gray-light;
+  @apply text-yellow;
 }
 
 .compare-selection-box:nth-child(1n) .compare-selection-title{
@@ -290,4 +297,5 @@ h1{
 
 a[href*="javascript:void(0)"] {
   cursor: auto;
-}
+}
+
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -9,6 +9,7 @@ import '@fortawesome/fontawesome-free/css/all.css'
 // Register components
 import ExampleComponent from './components/ExampleComponent.vue';
 import MainPage from './components/MainPage.vue';
+import MobileNavHack from './components/MobileNavHack.vue';
 
 //Compare Page
 import Compare from './components/Compare/Compare.vue';

diff --git a/resources/js/components/Battlenet/BattlenetAuthenticate.vue b/resources/js/components/Battlenet/BattlenetAuthenticate.vue
@@ -1,16 +1,18 @@
 <template>
-  <div class="battlenet-login">
-    <h1>Welcome to the App</h1>
+  <div class="battlenet-login mx-auto max-w-[700px]  bg-lighten rounded-lg mt-[10vh]">
+    <h1 class="mb-4 bg-teal p-4 rounded-t-lg">Welcome to the App</h1>
+    <div class="p-4">
     <p>If you want to access your profile, you need to log in through Battle.net.</p>
 
-
+    <div class="flex items-end my-20 justify-center">
     <single-select-filter :values="filters.regions" :text="'Region'" v-model="selectedRegion" @input-changed="handleInputChange"></single-select-filter>
 
-    <custom-button :href="'/redirect/authenticate/battlenet'" :text="'Login with Battle.net'" :alt="'Login with Battle.net'" :size="'medium'" :color="'blue'" :disabled="!selectedRegion"></custom-button>
-
+    <custom-button class="m-2" :href="'/redirect/authenticate/battlenet'" :text="'Login with Battle.net'" :alt="'Login with Battle.net'" :size="'medium'" :color="'blue'" :disabled="!selectedRegion"></custom-button>
+  </div>
 
-    Heroes Profile uses Blizzard's Battle.net OAuth for authentication.  Battle.net OAuth is an authentication and authorization framework used by Blizzard Entertainment for its online gaming platform, Battle.net. It allows users to securely log in to Battle.net and grant third-party applications limited access to their Battle.net accounts without sharing their account credentials.
+   <p class="text-sm"> Heroes Profile uses Blizzard's Battle.net OAuth for authentication.  Battle.net OAuth is an authentication and authorization framework used by Blizzard Entertainment for its online gaming platform, Battle.net. It allows users to securely log in to Battle.net and grant third-party applications limited access to their Battle.net accounts without sharing their account credentials. </p>
   </div>
+</div>
 </template>
 
 <script>

diff --git a/resources/js/components/ContactForm.vue b/resources/js/components/ContactForm.vue
@@ -3,7 +3,7 @@
     <page-heading :infoText1="infoText1" heading="Contact"></page-heading>
 
     <div>
-      <form @submit.prevent="submitForm">
+      <form @submit.prevent="submitForm" class="flex flex-col max-w-[1500px] mx-auto p-4 gap-2">
         <label for="name">Battletag:</label>
         <input class="form-control search-input mr-3 text-black" type="text" id="name" v-model="formData.battletag" required>
 
@@ -13,8 +13,12 @@
         <label for="message">Message:</label>
         <textarea class="form-control search-input mr-3 text-black" id="message" v-model="formData.message" required></textarea>
 
-        <button type="submit">Submit</button>
+        <button type="submit" class="transition-colors text-white rounded text-center bg-blue hover:bg-lblue py-2 px-4 w-auto ml-auto mr-2 my-2">Submit</button>
       </form>
+      <div class="mx-auto max-w-[1500px] bg-teal p-4 text-center">
+        <p>Email Sent Successfully!</p>
+      </div>
+
     </div>
 
   </div>

diff --git a/resources/js/components/CustomButton.vue b/resources/js/components/CustomButton.vue
@@ -2,7 +2,7 @@
     <a 
     :class="[
       staticClasses, 
-      disabled ? 'bg-gray' : colorClass, 
+      disabled ? 'bg-lighten text-lighten' : colorClass, 
       { 
         block: size === 'big', 
         'py-4': size === 'big', 
@@ -48,7 +48,7 @@
     },
     data(){
       return {
-        staticClasses: 'transition-colors text-white rounded',
+        staticClasses: 'transition-colors text-white rounded text-center',
 
       }
     },
@@ -62,7 +62,8 @@
           blue: 'bg-blue hover:bg-lblue',
           red: 'bg-red hover:bg-lred',
           teal: 'bg-teal hover:bg-lteal',
-          yellow: 'bg-yellow hover:bg-lyellow'
+          yellow: 'bg-yellow hover:bg-lyellow',
+          lblue: 'bg-lblue'
         }
         const defaultClass = 'bg-blue hover:bg-lblue';
         return colorToClassMap[this.color] || defaultClass;

diff --git a/resources/js/components/Esports/CCL/CclMain.vue b/resources/js/components/Esports/CCL/CclMain.vue
@@ -3,21 +3,21 @@
     <page-heading :infoText1="infoText1" :heading="'CCL'" :heading-image="'/images/CCL/600-600-HHE_CCL_Logo_rectangle.png'" :heading-image-url="'/Esports/CCL'"></page-heading>
 
       <!---You are going to have to design this better, I am going to use buttons for now -->
-      <div class="flex flex-1">
-        <div class="mx-5">
-          <custom-button @click="setButtonActive('organizations')" :text="'Organizations'" :size="'big'" class="mt-10" :active="organizationsClicked" :ignoreclick="true"></custom-button>
+      <div class="flex flex-1 mx-auto justify-center mb-4 w-full bg-blue">
+        <div class="border-r border-white">
+          <custom-button @click="setButtonActive('organizations')" :text="'Organizations'" :size="'big'" class="rounded-none " :color="activeButton === 'organizations' ? 'lblue' : ''" :active="organizationsClicked" :ignoreclick="true"></custom-button>
         </div>
 
-        <div class="mx-5">
-          <custom-button @click="setButtonActive('recentMatches')" :text="'Recent Matches'" :size="'big'" class="mt-10" :active="recentMatchesClicked" :ignoreclick="true"></custom-button>
+        <div class="border-r border-white">
+          <custom-button @click="setButtonActive('recentMatches')" :text="'Recent Matches'" :size="'big'" class="rounded-none" :color="activeButton === 'recentMatches' ? 'lblue' : ''" :active="recentMatchesClicked" :ignoreclick="true"></custom-button>
         </div>
 
-        <div class="mx-5">
-          <custom-button @click="setButtonActive('overallHeroStats')" :text="'Overall Hero Stats'" :size="'big'" class="mt-10" :active="overallHeroStatsClicked" :ignoreclick="true"></custom-button>
+        <div class="border-r border-white">
+          <custom-button @click="setButtonActive('overallHeroStats')" :text="'Overall Hero Stats'" :size="'big'" class="rounded-none" :active="overallHeroStatsClicked" :color="activeButton === 'overallHeroStats' ? 'lblue' : ''" :ignoreclick="true"></custom-button>
         </div>
 
-      <div class="mx-5">
-          <custom-button @click="setButtonActive('overallTalentStats')" :text="'Overall Talent Stats'" :size="'big'" class="mt-10" :active="overallTalentStatsClicked" :ignoreclick="true"></custom-button>
+      <div class="">
+          <custom-button @click="setButtonActive('overallTalentStats')" :text="'Overall Talent Stats'" :size="'big'" class="rounded-none" :active="overallTalentStatsClicked" :color="activeButton === 'overallTalentStats' ? 'lblue' : ''" :ignoreclick="true"></custom-button>
         </div>
       </div>
 
@@ -55,31 +55,31 @@
     <div v-else>
 
       <div v-if="activeButton === 'organizations'">
-        <div class="flex flex-wrap gap-2">
+        <div class="flex flex-wrap gap-2 max-w-[1500px] justify-center mx-auto items-center mb-10">
           <single-select-filter :values="filters.ccl_seasons" :text="'Seasons'" @input-changed="handleInputChange" :defaultValue="defaultseason"></single-select-filter>
-          <custom-button :disabled="isLoading"  @click="filter()" :text="'Filter'" :size="'big'" class="mt-10" :ignoreclick="true"></custom-button>
+          <custom-button :disabled="isLoading"  @click="filter()" :text="'Filter'" :size="'medium'" class="bg-teal rounded text-white ml-10 px-4 py-2 mt-auto mb-2 hover:bg-lteal" :ignoreclick="true"></custom-button>
         </div>
         <esports-organizations v-if="organizationsData" :data="organizationsData" :esport="'CCL'" :season="season"></esports-organizations>
       </div>
 
       <div v-if="activeButton === 'recentMatches'">
-        <div class="flex flex-wrap gap-2">
+        <div class="flex flex-wrap gap-2 max-w-[1500px] justify-center mx-auto items-center mb-10">
           <single-select-filter :values="filters.ccl_seasons" :text="'Seasons'" @input-changed="handleInputChange" :defaultValue="defaultseason"></single-select-filter>
-          <custom-button :disabled="isLoading"  @click="filter()" :text="'Filter'" :size="'big'" class="mt-10" :ignoreclick="true"></custom-button>
+          <custom-button :disabled="isLoading"  @click="filter()" :text="'Filter'" :size="'medium'" class="bg-teal rounded text-white ml-10 px-4 py-2 mt-auto mb-2 hover:bg-lteal" :ignoreclick="true"></custom-button>
         </div>
 
 
 
 
         <div v-if="recentMatchesData">
-          <ul class="pagination">
-            <li class="page-item" :class="{ disabled: !recentMatchesData.pagination.prev_page_url }">
-              <a class="page-link" @click.prevent="getRecentMatches(recentMatchesData.pagination.current_page - 1)" href="#">
+          <ul class="pagination flex max-w-[1500px] mx-auto justify-between mb-2">
+            <li v-if="recentMatchesData.pagination.current_page != 1" class="page-item underline underline-offset-4 mr-auto" :class="{ disabled: !recentMatchesData.pagination.prev_page_url }">
+              <a class="page-link mr-auto" @click.prevent="getRecentMatches(recentMatchesData.pagination.current_page - 1)" href="#">
                 Previous
               </a>
             </li>
-            <li class="page-item" :class="{ disabled: !recentMatchesData.pagination.next_page_url }">
-              <a class="page-link" @click.prevent="getRecentMatches(recentMatchesData.pagination.current_page + 1)" href="#">
+            <li v-if="recentMatchesData.pagination.current_page != recentMatchesData.pagination.last_page" class="page-item underline underline-offset-4 ml-auto" :class="{ disabled: !recentMatchesData.pagination.next_page_url }">
+              <a class="page-link ml-auto" @click.prevent="getRecentMatches(recentMatchesData.pagination.current_page + 1)" href="#">
                 Next
               </a>
             </li>
@@ -92,9 +92,9 @@
 
 
       <div v-if="activeButton === 'overallHeroStats'">
-        <div class="flex flex-wrap gap-2">
+           <div class="flex flex-wrap gap-2 max-w-[1500px] justify-center mx-auto items-center mb-10">
           <single-select-filter :values="filters.ccl_seasons" :text="'Seasons'" @input-changed="handleInputChange" :defaultValue="defaultseason"></single-select-filter>
-          <custom-button :disabled="isLoading"  @click="filter()" :text="'Filter'" :size="'big'" class="mt-10" :ignoreclick="true"></custom-button>
+          <custom-button :disabled="isLoading"  @click="filter()" :text="'Filter'" :size="'medium'" class="bg-teal rounded text-white ml-10 px-4 py-2 mt-auto mb-2 hover:bg-lteal" :ignoreclick="true"></custom-button>
         </div>
         <esports-hero-stats v-if="heroStatsData" :data="heroStatsData"></esports-hero-stats>
       </div>
@@ -107,10 +107,10 @@
 
         <div v-else>
           <div v-if="talentStatsData">
-            <div class="flex flex-wrap gap-2">
+               <div class="flex flex-wrap gap-2 max-w-[1500px] justify-center mx-auto items-center mb-10">
               <single-select-filter :values="this.filters.heroes" :text="'Heroes'" @input-changed="handleInputChange" :defaultValue="selectedHero.id"></single-select-filter>
               <single-select-filter :values="filters.ccl_seasons" :text="'Seasons'" @input-changed="handleInputChange" :defaultValue="defaultseason"></single-select-filter>
-              <custom-button :disabled="isLoading"  @click="filter()" :text="'Filter'" :size="'big'" class="mt-10" :ignoreclick="true"></custom-button>
+              <custom-button :disabled="isLoading"  @click="filter()" :text="'Filter'" :size="'medium'" class="bg-teal rounded text-white ml-10 px-4 py-2 mt-auto mb-2 hover:bg-lteal" :ignoreclick="true"></custom-button>
             </div>
 
 

diff --git a/resources/js/components/Esports/EsportsHeroStats.vue b/resources/js/components/Esports/EsportsHeroStats.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <table class="">
+    <table class="max-w-[1000px] min-w-[1000px]">
       <thead>
         <tr>
           <th @click="sortTable('hero_id')" class="py-2 px-3  text-left text-sm leading-4 text-gray-500 tracking-wider cursor-pointer">

diff --git a/resources/js/components/Esports/EsportsMain.vue b/resources/js/components/Esports/EsportsMain.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <page-heading :infoText1="infoText1" :heading="'Community Esports'"></page-heading>
-    <div class="flex   p-20 bg-lighten flex-wrap justify-center">
+    <div class="flex p-20 bg-lighten flex-wrap justify-center">
 
       <div class="text-center md:w-[15%] mb-15 mx-5">
         <a :href="'/Esports/NGS'"><img src="/images/NGS/600-600-ngs_large.png" alt="NGS"/></a>

diff --git a/resources/js/components/Esports/EsportsOrganizations.vue b/resources/js/components/Esports/EsportsOrganizations.vue
@@ -3,24 +3,24 @@
     <div class="flex   p-20 bg-lighten flex-wrap justify-center">
 
 
-      <div class="text-center md:w-[15%] mb-15 mx-5"  v-for="(row, index) in data" :key="index">
+      <div class="text-center md:w-[15%] mb-15 mx-5 mb-20"  v-for="(row, index) in data" :key="index">
         <a v-if="esport == 'CCL'" :href="`/Esports/CCL/Organization/${row.team_name}?season=${season}`">
-          <img :src="`/images/CCL/Organizations/Logos/${row.image}`" :alt="row.team_name"/>
+          <img class="h-full" :src="`/images/CCL/Organizations/Logos/${row.image}`" :alt="row.team_name"/>
           <h3>{{ row.team_name }}</h3>
         </a>
 
         <a v-else-if="esport == 'MastersClash'" :href="`/Esports/MastersClash/Team/${row.team_name}?season=${season}`">
-          <img :src="`/images/MCL/${row.image}`" :alt="row.team_name"/>
+          <img class="h-full"  :src="`/images/MCL/${row.image}`" :alt="row.team_name"/>
           <h3>{{ row.team_name }}</h3>
         </a>
 
         <a v-else-if="esport == 'hi'" :href="`/Esports/HeroesInternational/Team/${row.team_name}?tournament=main&season=${season}`">
-          <img :src="`/images/HI/Team/Logos/${row.image}.png`" :alt="row.team_name"/>
+          <img class="h-full"  :src="`/images/HI/Team/Logos/${row.image}.png`" :alt="row.team_name"/>
           <h3>{{ row.team_name }}</h3>
         </a>
 
         <a v-else-if="esport == 'hi_nc'" :href="`/Esports/HeroesInternational/Team/${row.team_name}?tournament=nationscup&season=${season}`">
-          <img :src="`/images/HI/Flags/${row.image}.png`" :alt="row.team_name"/>
+          <img class="h-full"  :src="`/images/HI/Flags/${row.image}.png`" :alt="row.team_name"/>
           <h3>{{ row.team_name }}</h3>
         </a>