Add definitions for larger screen sizes.
Some checks are pending
Build / build (push) Waiting to run

This commit is contained in:
Trenton Zimmer 2025-01-24 21:16:43 -05:00
parent a490596d0a
commit 37f2b5d14b
4 changed files with 10 additions and 6 deletions

View File

@ -129,7 +129,7 @@ function filterUserProfiles(userProfiles) {
main
/>
<div
class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 mb-6"
class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 3xl:grid-cols-6 mb-6"
>
<CardBoxWidget :number="cumulativePlays" label="Cumulative Plays" />
<CardBoxWidget :number="userProfiles.length" label="Games Played" />
@ -138,7 +138,7 @@ function filterUserProfiles(userProfiles) {
<SectionTitleLine :icon="mdiGamepad" title="Showcase" main />
<div
class="grid grid-flow-row auto-rows-auto grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-5 mb-5"
class="grid grid-flow-row auto-rows-auto grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 3xl:grid-cols-4 4xl:grid-cols-6 gap-5 mb-5"
>
<CardBoxGameStat
v-for="profile of filterUserProfiles(userProfiles)"

View File

@ -88,7 +88,7 @@ const copyToClipboard = (text) => {
<SectionTitleLine
:icon="mdiCreditCardPlusOutline"
title="Register Card"
title="Add a Card"
main
/>
<CardBox is-form class="row-span-2 mb-6" @submit.prevent="submitCard()">
@ -110,7 +110,7 @@ const copyToClipboard = (text) => {
</FormField>
<template #footer>
<BaseButton type="submit" color="success" label="Add Card" />
<BaseButton type="submit" color="success" label="Add" />
<BaseIcon
v-if="cardLoading"
:path="mdiLoading"
@ -134,7 +134,7 @@ const copyToClipboard = (text) => {
<div
v-if="cardData"
class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6"
class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6 4xl:grid-cols-7 gap-6"
>
<div
v-for="card of cardData"

View File

@ -79,7 +79,7 @@ function filterContent(data) {
<div
v-if="content.data?.status == 'uploaded'"
class="w-full grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6 place-items-center"
class="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6 3xl:grid-cols-7 4xl:grid-cols-8 gap-6 place-items-center"
>
<div
v-for="image in content.data?.filelist"

View File

@ -39,6 +39,10 @@ module.exports = {
"fade-out": "fade-out 250ms ease-in-out",
"fade-in": "fade-in 250ms ease-in-out",
},
screens: {
"3xl": "1900px",
"4xl": "2400px",
},
},
},
plugins: [