Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: start to update tailwindcss to latest version

Browse source
This commit is contained in:
Valentin Kaelin 2023-09-20 23:43:14 +02:00
parent 0b459cbcab
commit 57e3e15121
17 changed files with 379 additions and 1616 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
client/index.html
View file

@ -1,26 +1,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<head> <meta name="msapplication-TileColor" content="#38b2ac" />
<meta charset="utf-8"> <meta name="theme-color" content="#ffffff" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="msapplication-TileColor" content="#38b2ac"> <title>LeagueStats.gg</title>
<meta name="theme-color" content="#ffffff"> <meta
name="description"
content="LeagueStats.gg is an Open source website for League of Legends Summoners statistics."
/>
</head>
<title>LeagueStats.gg</title> <body class="relative bg-blue-900 min-w-1200">
<meta name="description" <noscript>
content="LeagueStats.gg is an Open source website for League of Legends Summoners statistics."> <strong
</head> >We're sorry but LeagueStats doesn't work properly without JavaScript enabled. Please enable
it to continue.</strong
>
</noscript>
<div id="app"></div>
<body class="relative bg-blue-900 min-w-1200"> <script type="module" src="/src/main.js"></script>
<noscript> </body>
<strong>We're sorry but LeagueStats doesn't work properly without JavaScript enabled. Please enable it to </html>
continue.</strong>
</noscript>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

1817
client/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
client/package.json
View file

@ -20,7 +20,7 @@
"eslint-plugin-vue": "^9.17.0", "eslint-plugin-vue": "^9.17.0",
"postcss": "^8.4.30", "postcss": "^8.4.30",
"postcss-import": "^12.0.1", "postcss-import": "^12.0.1",
"tailwindcss": "^1.9.6", "tailwindcss": "^3.3.3",
"vite": "^4.4.5", "vite": "^4.4.5",
"vite-plugin-eslint": "^1.8.1" "vite-plugin-eslint": "^1.8.1"
}, },

8
client/src/components/Form/LoadingButton.vue
View file

@ -9,16 +9,16 @@
<slot>Send</slot> <slot>Send</slot>
<span class="spinner absolute opacity-0 left-auto"> <span class="spinner absolute opacity-0 left-auto">
<span <span
class="inline-block absolute right-0 w-4 h-4 opacity-100 border-3 border-white rounded-full" class="inline-block absolute right-0 w-4 h-4 opacity-100 border-[3px] border-white rounded-full"
></span> ></span>
<span <span
class="inline-block absolute right-0 w-4 h-4 opacity-100 border-3 border-white rounded-full" class="inline-block absolute right-0 w-4 h-4 opacity-100 border-[3px] border-white rounded-full"
></span> ></span>
<span <span
class="inline-block absolute right-0 w-4 h-4 opacity-100 border-3 border-white rounded-full" class="inline-block absolute right-0 w-4 h-4 opacity-100 border-[3px] border-white rounded-full"
></span> ></span>
<span <span
class="inline-block absolute right-0 w-4 h-4 opacity-100 border-3 border-white rounded-full" class="inline-block absolute right-0 w-4 h-4 opacity-100 border-[3px] border-white rounded-full"
></span> ></span>
</span> </span>
</button> </button>

5
client/src/components/Form/SearchFormDropdown.vue
View file

@ -282,9 +282,6 @@ export default {
<style scoped> <style scoped>
.key { .key {
padding: 0.2rem 0.45rem; padding: 0.2rem 0.45rem;
box-shadow: box-shadow: 0 2px 0 0 #3182ce, 0 5px 3px 0 rgba(0, 0, 0, 0.1), 0 5px 2px 0 rgba(0, 0, 0, 0.06);
0 2px 0 0 #3182ce,
0 5px 3px 0 rgba(0, 0, 0, 0.1),
0 5px 2px 0 rgba(0, 0, 0, 0.06);
} }
</style> </style>

8
client/src/components/Match/DetailedMatchTeam.vue
View file

@ -21,7 +21,7 @@
<svg class="items-center w-4 h-4"> <svg class="items-center w-4 h-4">
<use xlink:href="#award" /> <use xlink:href="#award" />
</svg> </svg>
<span class="ml-2px">VICTORY</span> <span class="ml-0.5">VICTORY</span>
</div> </div>
</div> </div>
</th> </th>
@ -144,7 +144,7 @@
<div <div
@click="selectRunes(player)" @click="selectRunes(player)"
:class="{ 'cursor-pointer': player.perks }" :class="{ 'cursor-pointer': player.perks }"
class="flex flex-col justify-around cursor-pointer ml-2px" class="flex flex-col justify-around cursor-pointer ml-0.5"
> >
<div <div
:style="[ :style="[
@ -185,12 +185,12 @@
:class="{ :class="{
'font-semibold text-yellow-400': account.id === player.summonerId, 'font-semibold text-yellow-400': account.id === player.summonerId,
}" }"
class="overflow-hidden text-xs text-left text-white whitespace-no-wrap w-22 text-overflow hover:text-blue-200" class="overflow-hidden text-xs text-left text-white whitespace-nowrap w-[5.5rem] text-overflow hover:text-blue-200"
>{{ player.name }}</router-link >{{ player.name }}</router-link
> >
<div <div
v-else v-else
class="overflow-hidden text-xs text-left text-white whitespace-no-wrap w-22 text-overflow" class="overflow-hidden text-xs text-left text-white whitespace-nowrap w-[5.5rem] text-overflow"
> >
{{ player.name }} {{ player.name }}
</div> </div>

6
client/src/components/Match/LiveMatch.vue
View file

@ -68,7 +68,7 @@
}" }"
class="flex items-center pl-6 pr-4 -ml-2 text-base text-blue-200 cursor-pointer live-game-link bg-gradient-x hover:bg-blue-800 hover:text-blue-100" class="flex items-center pl-6 pr-4 -ml-2 text-base text-blue-200 cursor-pointer live-game-link bg-gradient-x hover:bg-blue-800 hover:text-blue-100"
> >
<div class="-mt-2px">more</div> <div class="-mt-0.5">more</div>
<svg class="w-4 h-4 ml-1 transition-transform duration-200 ease-in-out transform"> <svg class="w-4 h-4 ml-1 transition-transform duration-200 ease-in-out transform">
<use xlink:href="#arrow-right" /> <use xlink:href="#arrow-right" />
</svg> </svg>
@ -102,9 +102,7 @@ export default {
} }
.vs { .vs {
text-shadow: text-shadow: 3px 2px 0px rgba(49, 130, 206, 0.8), -3px 2px 0px rgba(229, 62, 62, 0.8);
3px 2px 0px rgba(49, 130, 206, 0.8),
-3px 2px 0px rgba(229, 62, 62, 0.8);
} }
.live-game-link:hover svg { .live-game-link:hover svg {

8
client/src/components/Match/Match.vue
View file

@ -140,13 +140,13 @@
params: { region: $route.params.region, name: ally.name }, params: { region: $route.params.region, name: ally.name },
}" }"
:class="isSummonerProfile(ally.account_id)" :class="isSummonerProfile(ally.account_id)"
class="w-16 overflow-hidden text-xs font-medium text-right whitespace-no-wrap hover:text-white text-overflow" class="w-16 overflow-hidden text-xs font-medium text-right whitespace-nowrap hover:text-white text-overflow"
>{{ ally.name }}</router-link >{{ ally.name }}</router-link
> >
<div <div
v-else v-else
:class="isSummonerProfile(ally.account_id)" :class="isSummonerProfile(ally.account_id)"
class="w-16 overflow-hidden text-xs font-medium text-right whitespace-no-wrap text-overflow" class="w-16 overflow-hidden text-xs font-medium text-right whitespace-nowrap text-overflow"
> >
{{ ally.name }} {{ ally.name }}
</div> </div>
@ -174,12 +174,12 @@
name: 'summoner', name: 'summoner',
params: { region: $route.params.region, name: data.enemyTeam[index].name }, params: { region: $route.params.region, name: data.enemyTeam[index].name },
}" }"
class="w-16 ml-1 overflow-hidden text-xs font-medium text-left text-blue-200 whitespace-no-wrap hover:text-white text-overflow" class="w-16 ml-1 overflow-hidden text-xs font-medium text-left text-blue-200 whitespace-nowrap hover:text-white text-overflow"
>{{ data.enemyTeam[index].name }}</router-link >{{ data.enemyTeam[index].name }}</router-link
> >
<div <div
v-else v-else
class="w-16 ml-1 overflow-hidden text-xs font-medium text-left text-blue-200 whitespace-no-wrap text-overflow" class="w-16 ml-1 overflow-hidden text-xs font-medium text-left text-blue-200 whitespace-nowrap text-overflow"
> >
{{ data.enemyTeam[index].name }} {{ data.enemyTeam[index].name }}
</div> </div>

2
client/src/components/Match/MatchItems.vue
View file

@ -6,7 +6,7 @@
<div <div
:style="{ backgroundImage: itemLink(item) }" :style="{ backgroundImage: itemLink(item) }"
:class="[ :class="[
oneRow ? 'ml-2px w-6 h-6' : 'ml-1 w-8 h-8', oneRow ? 'ml-0.5 w-6 h-6' : 'ml-1 w-8 h-8',
{ 'cursor-pointer': item !== null }, { 'cursor-pointer': item !== null },
]" ]"
class="relative z-10 bg-center bg-cover rounded-md bg-blue-1000" class="relative z-10 bg-center bg-cover rounded-md bg-blue-1000"

2
client/src/components/Match/Runes/RuneStyle.vue
View file

@ -49,7 +49,7 @@
</Tooltip> </Tooltip>
</ul> </ul>
</div> </div>
<div v-if="primary && index == 0" class="w-full mt-4 bg-gray-500 bg-opacity-25 h-2px"></div> <div v-if="primary && index == 0" class="w-full mt-4 bg-gray-500 bg-opacity-25 h-0.5"></div>
</div> </div>
<div v-if="!primary"> <div v-if="!primary">

2
client/src/components/Summoner/Champions/ChampionsTable.vue
View file

@ -61,7 +61,7 @@
</td> </td>
<td :style="bgColor(champion, 'kda')" class="px-2 py-3 text-sm text-white"> <td :style="bgColor(champion, 'kda')" class="px-2 py-3 text-sm text-white">
<div>{{ champion.kda | round }}</div> <div>{{ champion.kda | round }}</div>
<div class="mt-1 text-blue-200 whitespace-no-wrap text-xxs"> <div class="mt-1 text-blue-200 whitespace-nowrap text-xxs">
{{ (champion.kills / champion.count) | round(1) }} {{ (champion.kills / champion.count) | round(1) }}
/ /
{{ (champion.deaths / champion.count) | round(1) }} {{ (champion.deaths / champion.count) | round(1) }}

6
client/src/components/Summoner/Live/LiveTeam.vue
View file

@ -49,7 +49,7 @@
<div <div
v-if="player.role && player.role !== 'NONE'" v-if="player.role && player.role !== 'NONE'"
:class="borderChampion(player.summonerId)" :class="borderChampion(player.summonerId)"
class="absolute border rounded-full p-2px bg-blue-1000" class="absolute border rounded-full p-0.5 bg-blue-1000"
style="bottom: -5px; right: -5px" style="bottom: -5px; right: -5px"
> >
<div <div
@ -94,7 +94,7 @@
<svg class="w-5 h-5"> <svg class="w-5 h-5">
<use :xlink:href="`#rank-${player.rank.soloQ.tier.toLowerCase()}`" /> <use :xlink:href="`#rank-${player.rank.soloQ.tier.toLowerCase()}`" />
</svg> </svg>
<div class="text-xs font-semibold text-blue-300 mt-2px"> <div class="text-xs font-semibold text-blue-300 mt-0.5">
{{ player.rank.soloQ.shortName }} {{ player.rank.soloQ.shortName }}
</div> </div>
</div> </div>
@ -117,7 +117,7 @@
<svg class="w-5 h-5"> <svg class="w-5 h-5">
<use :xlink:href="`#rank-${player.rank.flex5v5.tier.toLowerCase()}`" /> <use :xlink:href="`#rank-${player.rank.flex5v5.tier.toLowerCase()}`" />
</svg> </svg>
<div class="text-xs font-semibold text-blue-300 mt-2px"> <div class="text-xs font-semibold text-blue-300 mt-0.5">
{{ player.rank.flex5v5.shortName }} {{ player.rank.flex5v5.shortName }}
</div> </div>
</div> </div>

6
client/src/components/Summoner/Overview/SummonerChampions.vue
View file

@ -64,7 +64,7 @@
<div class="text-xs text-purple-400">{{ champion.count }}</div> <div class="text-xs text-purple-400">{{ champion.count }}</div>
<div <div
:style="{ width: widthBar(champion.count, mostPlayed) }" :style="{ width: widthBar(champion.count, mostPlayed) }"
class="h-1 bg-purple-400 rounded-full mt-2px" class="h-1 bg-purple-400 rounded-full mt-0.5"
></div> ></div>
</div> </div>
<div class="w-winrate"> <div class="w-winrate">
@ -73,7 +73,7 @@
</div> </div>
<div <div
:style="{ width: widthBar(champion.wins, champion.count) }" :style="{ width: widthBar(champion.wins, champion.count) }"
class="h-1 bg-green-400 rounded-full mt-2px" class="h-1 bg-green-400 rounded-full mt-0.5"
></div> ></div>
</div> </div>
<div class="w-kda"> <div class="w-kda">
@ -84,7 +84,7 @@
:style="{ :style="{
width: widthBar(kda(champion.kills, champion.deaths, champion.assists), bestKda), width: widthBar(kda(champion.kills, champion.deaths, champion.assists), bestKda),
}" }"
class="h-1 bg-blue-400 rounded-full mt-2px" class="h-1 bg-blue-400 rounded-full mt-0.5"
></div> ></div>
</div> </div>
</li> </li>

6
client/src/components/Summoner/Overview/SummonerStats.vue
View file

@ -98,19 +98,19 @@
<div class="w-1/4">{{ (stat / stats.global.count) | round }}</div> <div class="w-1/4">{{ (stat / stats.global.count) | round }}</div>
</li> </li>
<li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760"> <li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760">
<div class="w-1/4 text-left whitespace-no-wrap">Time</div> <div class="w-1/4 text-left whitespace-nowrap">Time</div>
<div class="w-1/4">{{ stats.global.time | secToHours }}</div> <div class="w-1/4">{{ stats.global.time | secToHours }}</div>
<div class="w-1/4"></div> <div class="w-1/4"></div>
<div class="w-1/4">{{ (stats.global.time / stats.global.count) | secToTime(true) }}</div> <div class="w-1/4">{{ (stats.global.time / stats.global.count) | secToTime(true) }}</div>
</li> </li>
<li class="flex items-center justify-between px-4 py-1 leading-tight"> <li class="flex items-center justify-between px-4 py-1 leading-tight">
<div class="w-1/4 text-left whitespace-no-wrap">KDA</div> <div class="w-1/4 text-left whitespace-nowrap">KDA</div>
<div class="w-1/4"> <div class="w-1/4">
{{ ((stats.global.kills + stats.global.assists) / stats.global.deaths) | round }} {{ ((stats.global.kills + stats.global.assists) / stats.global.deaths) | round }}
</div> </div>
</li> </li>
<li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760"> <li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760">
<div class="w-1/4 text-left whitespace-no-wrap">Kill participation</div> <div class="w-1/4 text-left whitespace-nowrap">Kill participation</div>
<div class="w-1/4">{{ stats.global.kp | percent }}</div> <div class="w-1/4">{{ stats.global.kp | percent }}</div>
</li> </li>
</ul> </ul>

2
client/src/components/Summoner/SummonerRanked.vue
View file

@ -9,7 +9,7 @@
> >
<div class="relative p-1 bg-blue-900 rounded-full w-11 h-11"> <div class="relative p-1 bg-blue-900 rounded-full w-11 h-11">
<div <div
class="h-full bg-center bg-cover mt-2px" class="h-full bg-center bg-cover mt-0.5"
:style="{ backgroundImage: `url(${selectedLeague.rankImgLink})` }" :style="{ backgroundImage: `url(${selectedLeague.rankImgLink})` }"
></div> ></div>
</div> </div>

4
client/src/layouts/Default.vue
View file

@ -2,7 +2,7 @@
<div class="flex flex-col min-h-screen overflow-hidden bg-blue-900"> <div class="flex flex-col min-h-screen overflow-hidden bg-blue-900">
<LazyBackground <LazyBackground
image-source="/img/bg-homepage-1.jpg" image-source="/img/bg-homepage-1.jpg"
image-class="absolute z-0 w-full h-200" image-class="absolute z-0 w-full h-[50rem]"
more-backgrounds="linear-gradient(180deg, rgba(42, 67, 101, 0) 0%, #2A4365 50%)," more-backgrounds="linear-gradient(180deg, rgba(42, 67, 101, 0) 0%, #2A4365 50%),"
transition-name="fade" transition-name="fade"
></LazyBackground> ></LazyBackground>
@ -12,7 +12,7 @@
class="fixed left-0 right-0 z-20 px-4 text-teal-100 transition-colors duration-100 ease-in-out border-b-2 header" class="fixed left-0 right-0 z-20 px-4 text-teal-100 transition-colors duration-100 ease-in-out border-b-2 header"
style="border-color: rgba(144, 205, 244, 0.4)" style="border-color: rgba(144, 205, 244, 0.4)"
> >
<div class="flex items-center justify-between py-2 -mb-2px"> <div class="flex items-center justify-between py-2 -mb-0.5">
<div class="flex flex-1"> <div class="flex flex-1">
<router-link to="/"> <router-link to="/">
<img class="block h-10" src="/img/Logo.svg" alt="LeagueStats logo" /> <img class="block h-10" src="/img/Logo.svg" alt="LeagueStats logo" />

69
client/tailwind.config.js
View file

@ -7,7 +7,24 @@
const defaultTheme = require('tailwindcss/defaultTheme') const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = { module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: { theme: {
fontSize: {
'xxs': ['0.625rem'],
'xs': ['0.75rem'],
'sm': ['0.875rem'],
'base': ['1rem'],
'lg': ['1.125rem'],
'xl': ['1.25rem'],
'2xl': ['1.5rem'],
'3xl': ['1.875rem'],
'4xl': ['2.25rem'],
'5xl': ['3rem'],
'6xl': ['3.75rem'],
'7xl': ['4.5rem'],
'8xl': ['6rem'],
'9xl': ['8rem'],
},
customForms: (theme) => ({ customForms: (theme) => ({
default: { default: {
checkbox: { checkbox: {
@ -31,52 +48,36 @@ module.exports = {
extend: { extend: {
colors: { colors: {
teal: { teal: {
...defaultTheme.colors.teal, 100: '#E6FFFA',
200: '#B2F5EA',
300: '#81E6D9',
400: '#4FD1C5',
500: '#38B2AC',
600: '#319795',
700: '#2C7A7B',
800: '#285E61',
900: '#234E52',
flashy: '#24e8cc', flashy: '#24e8cc',
}, },
blue: { blue: {
...defaultTheme.colors.blue, 100: '#EBF8FF',
200: '#BEE3F8',
300: '#90CDF4',
400: '#63B3ED',
500: '#4299E1',
600: '#3182CE',
700: '#2B6CB0',
800: '#2C5282',
900: '#2A4365',
760: '#2C5C94', 760: '#2C5C94',
850: '#2B4B74', 850: '#2B4B74',
1000: '#17314f', 1000: '#17314f',
}, },
}, },
spacing: {
'2px': '2px',
'3p5': '0.875rem',
'4b': '1.15rem',
'11': '2.75rem',
},
borderWidth: {
3: '3px',
},
fontFamily: { fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans], sans: ['Inter', ...defaultTheme.fontFamily.sans],
}, },
fontSize: {
xxs: '0.625rem',
},
height: {
'200': '50rem',
'1/2': '50%',
},
maxWidth: {
12: '3rem',
},
width: {
22: '5.5rem',
},
}, },
}, },
variants: {
textColor: ['responsive', 'hover', 'focus', 'group-hover'],
},
plugins: [require('@tailwindcss/custom-forms')], plugins: [require('@tailwindcss/custom-forms')],
purge: {
enabled: process.env.NODE_ENV === 'production',
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
},
future: {
removeDeprecatedGapUtilities: true,
},
} }