Skip to content

Commit

Permalink
mobile styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@wesolowski
wesolowski committed Jun 18, 2024
1 parent 335b032 commit 24bb14d
Show file tree
Hide file tree
Showing 8 changed files with 33 additions and 31 deletions.
2 changes: 1 addition & 1 deletion src/components/Logo.astro
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
---

<div class="flex justify-center">
<div class="flex-row flex justify-center">
<div class="p-4">
<div class="italic text-4xl font-bold">
Euro ‘24
Expand Down
8 changes: 4 additions & 4 deletions src/components/ShortTable.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,22 @@ const { topThree, userAndNeighbors, langenfeld, mannheim, mainz } = await getRat
<section class="flex flex-row flex-wrap">

<input id="tab-one" type="radio" name="tabs" class="peer/tab-one opacity-0 absolute" checked />
<label for="tab-one" class="text-zinc-400 px-8 hover:font-black peer-checked/tab-one:border-b-red-500 peer-checked/tab-one:text-white peer-checked/tab-one:font-extrabold peer-checked/tab-one:border-b-2 cursor-pointer p-4 block ">
<label for="tab-one" class="text-zinc-400 px-3 xs:px-8 hover:font-black peer-checked/tab-one:border-b-red-500 peer-checked/tab-one:text-white peer-checked/tab-one:font-extrabold peer-checked/tab-one:border-b-2 cursor-pointer p-4 block ">
Global
</label>

<input id="tab-two" type="radio" name="tabs" class="peer/tab-two opacity-0 absolute" />
<label for="tab-two" class="text-zinc-400 px-8 hover:font-black peer-checked/tab-two:border-b-red-500 peer-checked/tab-two:text-white peer-checked/tab-two:font-extrabold peer-checked/tab-two:border-b-2 cursor-pointer p-4 block ">
<label for="tab-two" class="text-zinc-400 px-3 xs:px-8 hover:font-black peer-checked/tab-two:border-b-red-500 peer-checked/tab-two:text-white peer-checked/tab-two:font-extrabold peer-checked/tab-two:border-b-2 cursor-pointer p-4 block ">
Langenfeld
</label>

<input id="tab-three" type="radio" name="tabs" class="peer/tab-three opacity-0 absolute" />
<label for="tab-three" class="text-zinc-400 px-8 hover:font-black peer-checked/tab-three:border-b-red-500 peer-checked/tab-three:text-white peer-checked/tab-three:font-extrabold peer-checked/tab-three:border-b-2 cursor-pointer p-4 block ">
<label for="tab-three" class="text-zinc-400 px-3 xs:px-8 hover:font-black peer-checked/tab-three:border-b-red-500 peer-checked/tab-three:text-white peer-checked/tab-three:font-extrabold peer-checked/tab-three:border-b-2 cursor-pointer p-4 block ">
Mannheim
</label>

<input id="tab-four" type="radio" name="tabs" class="peer/tab-four opacity-0 absolute" />
<label for="tab-four" class="text-zinc-400 px-8 hover:font-black peer-checked/tab-four:border-b-red-500 peer-checked/tab-four:text-white peer-checked/tab-four:font-extrabold peer-checked/tab-four:border-b-2 cursor-pointer p-4 block ">
<label for="tab-four" class="text-zinc-400 px-3 xs:px-8 hover:font-black peer-checked/tab-four:border-b-red-500 peer-checked/tab-four:text-white peer-checked/tab-four:font-extrabold peer-checked/tab-four:border-b-2 cursor-pointer p-4 block ">
Mainz
</label>

Expand Down
11 changes: 8 additions & 3 deletions src/layouts/LogginLayout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,14 @@ const currentPath = Astro.url.pathname;
</head>
<body class="bg-black text-gray-100">

<header class="p-8 border-b border-b-gray-700">
<nav class="mx-auto flex items-center justify-between p-6 lg:px-8" aria-label="Global">
<header class="p-2 xs:p-8 border-b border-b-gray-700">
<a href="/" class="sm:hidden">
<Logo/>
</a>
<nav class="mx-auto flex items-center justify-between p-6 lg:px-8" aria-label="Global">
<a href="/" class="hidden sm:block">
<Logo/>
</a>
<!--<div class="flex lg:hidden">-->
<!-- <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">-->
<!-- <span class="sr-only">Open main menu</span>-->
Expand All @@ -34,7 +39,7 @@ const currentPath = Astro.url.pathname;
<!-- </button>-->
<!--</div>-->
<!--<div class="hidden lg:flex lg:gap-x-12">-->
<div class="flex gap-x-12">
<div class="flex gap-x-5 md:gap-x-12">
<a href="/" class={`text-sm ${currentPath === '/' ? 'pb-1 px-4 border-b-2 border-b-red-500' : 'text-zinc-400'}`}>Dashboard</a>
<a href="/table" class={`text-sm ${currentPath === '/table' ? 'px-4 pb-1 border-b-2 border-b-red-500' : 'text-zinc-400'}`}>Tabelle</a>
<a href=`/user/${user.id}` class={`text-sm ${currentPath === `/user/${user.id}` ? 'px-4 pb-1 border-b-2 border-b-red-500' : 'text-zinc-400'}`}>Mein Konto</a>
Expand Down
20 changes: 10 additions & 10 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,8 @@ if(liveMatches.length > 0) {

{liveMatchesInfo.length > 0 && (
<div class="info-grid mt-8 pl-4 text-zinc-400 mb-4">
<div class="info-date ">{formatDate(liveMatchesInfo[0].utcDate)}</div>
<div class="info-score">Ergebnis</div>
<div class="info-date hidden sm:block">{formatDate(liveMatchesInfo[0].utcDate)}</div>
<div class="info-score col-start-2 xs:col-start-3 sm:col-start-4">Ergebnis</div>
<div class="info-tip">Dein Tipp</div>
</div>
)}
Expand All @@ -113,8 +113,8 @@ if(liveMatches.length > 0) {
<div class="match-score-team-1 pt-5">{game.score_home}</div>
<div class="match-score-team-2 pb-5">{game.score_away}</div>
<div class="match-tip py-5">
<div class="match-tip-grid info-tip-score">
<div class="match-tip-grid-score1 score1 ">{game.tip_home}</div>
<div class="grid match-tip-grid info-tip-score">
<div class="match-tip-grid-score1 score1 text-center sm:text-left">{game.tip_home}</div>
<div class="match-tip-grid-score-last-box text-center">
<div class={`seven-segmnet text-xl mx-auto
${game.score === 4 ? 'text-green-500' :
Expand All @@ -128,7 +128,7 @@ if(liveMatches.length > 0) {
</div>
<div class="text-white bg-red-500 p-1 mx-auto w-12 rounded-lg">Live</div>
</div>
<div class="match-tip-grid-score2 score2">{game.tip_away}</div>
<div class="match-tip-grid-score2 score2 text-center sm:text-left">{game.tip_away}</div>
</div>
</div>
</div>
Expand All @@ -139,8 +139,8 @@ if(liveMatches.length > 0) {
{Object.entries(groupedGames).map(([date, games]) => (
<>
<div class="info-grid mt-8 pl-4 text-zinc-400 mb-4">
<div class="info-date ">{date}</div>
<div class="info-tip">Dein Tipp</div>
<div class="info-date">{date}</div>
<div class="info-tip hidden xs:block">Dein Tipp</div>
</div>
{games.map(game => (
<div class="error pl-4 pb-2 text-red-500 hidden" id=`form-error-${game.id}`></div>
Expand All @@ -152,7 +152,7 @@ if(liveMatches.length > 0) {
<Flag iso={game.awayTla} /> {game.awayTeam}
</div>
<div class="match-tip">
<form class={`match-tip-grid form-tip-score ${game.tipHome !== null && game.tipAway !== null ? 'hidden' : ''}`} method="POST" data-form-id={game.id} action={`/api/tip/${game.id}`}>
<form class={`grid match-tip-grid form-tip-score ${game.tipHome !== null && game.tipAway !== null ? 'hidden' : ''}`} method="POST" data-form-id={game.id} action={`/api/tip/${game.id}`}>
<div class="match-tip-grid-score1 pr-4 pt-2">
<Input type="number" name="tip1" value={game.tipHome} background="bg-neutral-900" extraAttributes={{ min: 0, max: 20 }}/>
</div>
Expand All @@ -165,14 +165,14 @@ if(liveMatches.length > 0) {
</div>
</div>
</form>
<div class={`match-tip-grid info-tip-score cursor-pointer ${game.tipHome !== null && game.tipAway !== null ? '' : 'hidden'}`}>
<div class={`grid match-tip-grid info-tip-score cursor-pointer ${game.tipHome !== null && game.tipAway !== null ? '' : 'hidden'}`}>
<div class="match-tip-grid-score1 score1">{game.tipHome}</div>
<div class="match-tip-grid-score-last-box">
<div class="seven-segmnet text-2xl">{game.time}</div>
</div>
<div class="match-tip-grid-score2 score2">{game.tipAway}</div>
</div>
<div class="match-tip-grid mt-10 ml-8 hidden loading-spinner" >
<div class="grid match-tip-grid mt-10 ml-8 hidden loading-spinner" >
<div class="loading"/>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/match/[id].astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,16 @@ data.sort((a, b) => b.score - a.score);
<Flag iso={game.awayTeam.tla} /> {game.awayTeam.name}
</div>
<div class="match-tip py-5">
<div class="match-tip-grid info-tip-score">
<div class="match-tip-grid-score1 score1 ">{game.homeScore}</div>
<div class="grid match-tip-grid info-tip-score">
<div class="match-tip-grid-score1 score1 text-center sm:text-left">{game.homeScore}</div>
<div class="match-tip-grid-score-last-box">
{game.status !== 'IN_PLAY' ?
<div class="seven-segmnet text-xl">{extractTime(game.utcDate)}</div>
:
<div class="rounded-lg bg-red-500 mx-5 py-2 text-sm">LIVE</div>
}
</div>
<div class="match-tip-grid-score2 score2">{game.awayScore}</div>
<div class="match-tip-grid-score2 score2 text-center sm:text-left">{game.awayScore}</div>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/pages/user/[id].astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const userInfo = await getUserById(id);

<div class="info-grid">
<div class="info-date"></div>
<div class="info-score">Ergebnis</div>
<div class="info-score col-start-3 sm:col-start-4">Ergebnis</div>
<div class="info-tip">Dein Tipp</div>
</div>

Expand All @@ -85,12 +85,12 @@ const userInfo = await getUserById(id);
<div class="match-score-team-1 pt-5">{game.score_home}</div>
<div class="match-score-team-2 pb-5">{game.score_away}</div>
<div class="match-tip py-5">
<div class="match-tip-grid info-tip-score">
<div class="match-tip-grid-score1 score1 ">{game.tip_home}</div>
<div class="grid match-tip-grid info-tip-score">
<div class="match-tip-grid-score1 score1 text-center sm:text-left">{game.tip_home}</div>
<div class="match-tip-grid-score-last-box">
<div class="seven-segmnet text-xl">{game.score} Punkte</div>
</div>
<div class="match-tip-grid-score2 score2">{game.tip_away}</div>
<div class="match-tip-grid-score2 score2 text-center sm:text-left" >{game.tip_away}</div>
</div>
</div>
</div>
Expand Down
6 changes: 0 additions & 6 deletions src/styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@
}

.match-tip-grid {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
gap: 0px;
Expand Down Expand Up @@ -99,7 +98,6 @@

.info-score {
grid-row-start: 1;
grid-column-start: 4;
grid-row-end: 2;
grid-column-end: 5;
text-align: center;
Expand All @@ -126,7 +124,3 @@
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}

.hidden {
display: none;
}
3 changes: 3 additions & 0 deletions tailwind.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {
screens: {
xs: '450px',
},
fontFamily: {
sans: ['Chakra Petch', 'sans-serif'],
italic: ['Chakra Petch', 'sans-serif']
Expand Down

0 comments on commit 24bb14d

Please sign in to comment.