owenrees/echecsfrance
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/echecsfrance.git synced 2026-07-23 04:26:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix display when font-size increased

Browse Source
This commit is contained in:
Timothy Armes
2023-07-20 11:56:35 +02:00
parent 6cd1df40aa
commit e76f451dbe
5 changed files with 82 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/components/Footer.tsx
+3 -3
View File
@@ -8,11 +8,11 @@ export default function Footer() {
return ( return (
<footer <footer
className="fixed bottom-0 z-30 flex h-20 w-full flex-col items-center justify-center justify-items-center bg-primary-600 px-5 py-2 text-white dark:bg-gray-700" className="fixed bottom-0 z-30 flex h-20 w-[100vw] flex-col items-center justify-center justify-items-center bg-primary-600 px-5 py-2 text-white dark:bg-gray-700"
data-test="footer" data-test="footer"
> >
<div> <div className="text-center">
<p>&copy; {new Date().getFullYear()} - Owen Rees & Timothy Armes</p> &copy; {new Date().getFullYear()} - Owen&nbsp;Rees & Timothy&nbsp;Armes
</div> </div>
<div className="flex items-center py-2"> <div className="flex items-center py-2">
app/[lang]/page.tsx
+4 -4
View File
@@ -8,8 +8,8 @@ export default function Home() {
const t = useTranslations("Home"); const t = useTranslations("Home");
return ( return (
<header className="relative flex h-content items-center justify-center"> <header className="relative mb-20 flex min-h-content items-center justify-center">
<div className="absolute h-full w-full brightness-[0.2]"> <div className="absolute h-full w-full py-4 brightness-[0.2]">
<Image <Image
src={bgImage} src={bgImage}
alt="Background image of France" alt="Background image of France"
@@ -17,7 +17,7 @@ export default function Home() {
style={{ objectFit: "cover" }} style={{ objectFit: "cover" }}
/> />
</div> </div>
<div className="z-10 text-center text-white"> <div className="z-10 py-4 text-center text-white">
<h1 className="p-5 font-title text-5xl" data-test="header1"> <h1 className="p-5 font-title text-5xl" data-test="header1">
{t("title")} {t("title")}
</h1> </h1>
@@ -33,7 +33,7 @@ export default function Home() {
</h3> </h3>
<Link <Link
href="/tournois" href="/tournois"
className="mb-2 mr-2 rounded-lg bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-800" className="mb-2 rounded-lg bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-800"
> >
{t("mapLink")} {t("mapLink")}
</Link> </Link>
app/[lang]/tournois/SearchBar.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ const SearchBar = () => {
<input <input
type="search" type="search"
id="table-search" id="table-search"
className="block w-80 rounded-lg border border-gray-300 bg-gray-50 p-2.5 px-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500" className="block rounded-lg border border-gray-300 bg-gray-50 p-2.5 px-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
placeholder={t("searchPlaceholder")} placeholder={t("searchPlaceholder")}
value={searchString} value={searchString}
onChange={(e) => setSearchString(e.target.value)} onChange={(e) => setSearchString(e.target.value)}
app/[lang]/tournois/TournamentTable.tsx
+72 -66
View File
@@ -87,75 +87,81 @@ export default function TournamentTable() {
<ScrollToTopButton /> <ScrollToTopButton />
<table <div className="overflow-x-scroll">
className="relative w-full table-fixed text-center text-xs" <table
data-test="tournament-table" className="relative table-fixed text-center text-xs lg:w-full"
> data-test="tournament-table"
<thead> >
<tr> <thead>
<th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600"> <tr>
{t("date")} <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
</th> {t("date")}
<th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600"> </th>
{t("town")} <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
</th> {t("town")}
<th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600"> </th>
{t("tournament")} <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
</th> {t("tournament")}
<th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600"> </th>
{t("timeControl")} <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
</th> {t("timeControl")}
<th className="sticky top-0 w-[50px] bg-primary-600 p-3 text-white dark:bg-gray-600"></th> </th>
</tr> <th className="sticky top-0 w-[50px] bg-primary-600 p-3 text-white dark:bg-gray-600"></th>
</thead>
<tbody>
{filteredTournaments.length === 0 ? (
<tr className="bg-white text-gray-900 dark:bg-gray-800 dark:text-white">
<td colSpan={4} className="p-3">
{t("noneFound")}
</td>
</tr> </tr>
) : ( </thead>
filteredTournaments.map((tournament) => (
<tr <tbody>
key={tournament.id} {filteredTournaments.length === 0 ? (
id={tournament.id} <tr className="bg-white text-gray-900 dark:bg-gray-800 dark:text-white">
data-group-id={tournament.groupId} <td colSpan={4} className="p-3">
onMouseEnter={() => setHoveredListTournamentId(tournament.id)} {t("noneFound")}
onMouseLeave={() => setHoveredListTournamentId(null)}
className={twMerge(
"scroll-m-20 bg-white text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900",
hoveredMapTournamentGroupId === tournament.groupId &&
"bg-gray-200 dark:bg-gray-900",
)}
>
<td className="p-3">{tournament.date}</td>
<td className="p-3">{tournament.town}</td>
<td className="p-3">
<span>
{tournament.norm && (
<FaTrophy
className="mr-2 inline-block h-4 w-4"
data-norm="norm"
/>
)}
{tournament.tournament}
</span>
</td>
<td className="p-3">
{t("timeControlEnum", { tc: tournament.timeControl })}
</td>
<td className="p-3">
<a href={tournament.url} target="_blank">
<FaExternalLinkAlt />
</a>
</td> </td>
</tr> </tr>
)) ) : (
)} filteredTournaments.map((tournament) => (
</tbody> <tr
</table> key={tournament.id}
id={tournament.id}
data-group-id={tournament.groupId}
onMouseEnter={() => setHoveredListTournamentId(tournament.id)}
onMouseLeave={() => setHoveredListTournamentId(null)}
className={twMerge(
"scroll-m-20 bg-white text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900",
hoveredMapTournamentGroupId === tournament.groupId &&
"bg-gray-200 dark:bg-gray-900",
)}
>
<td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
{tournament.date}
</td>
<td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
{tournament.town}
</td>
<td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
<span>
{tournament.norm && (
<FaTrophy
className="mr-2 inline-block h-4 w-4"
data-norm="norm"
/>
)}
{tournament.tournament}
</span>
</td>
<td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
{t("timeControlEnum", { tc: tournament.timeControl })}
</td>
<td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
<a href={tournament.url} target="_blank">
<FaExternalLinkAlt />
</a>
</td>
</tr>
))
)}
</tbody>
</table>
</div>
<Tooltip anchorSelect="[data-norm='norm']"> <Tooltip anchorSelect="[data-norm='norm']">
<div className="flex items-center"> <div className="flex items-center">
tailwind.config.js
+2 -2
View File
@@ -31,10 +31,10 @@ module.exports = {
minHeight: { minHeight: {
// We use 100svh, falling back to vh for old browsers // We use 100svh, falling back to vh for old browsers
// The 144px is for the header and footer // The 144px is for the header and footer
content: ["calc(100vh - 144px)", "calc(100svh - 144px)"], content: ["calc(100vh - 9rem)", "calc(100svh - 9rem)"],
}, },
height: { height: {
content: ["calc(100vh - 144px)", "calc(100svh - 144px)"], content: ["calc(100vh - 9rem)", "calc(100svh - 9rem)"],
}, },
}, },
}, },