sorted tailwind classes
This commit is contained in:
+32
-32
@@ -13,31 +13,31 @@ templ TemplEventPage(e event.Event, upcoming []event.ListUpcomingEventsRow) {
|
|||||||
<title>MMA Schedule</title>
|
<title>MMA Schedule</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="h-screen overflow-scroll bg-neutral-focus text-neutral-content fill-neutral-content">
|
<div class="h-screen overflow-scroll bg-neutral-focus fill-neutral-content text-neutral-content">
|
||||||
<div class="drawer drawer-mobile">
|
<div class="drawer drawer-mobile">
|
||||||
<input id="my-drawer-3" type="checkbox" class="drawer-toggle"/>
|
<input id="my-drawer-3" type="checkbox" class="drawer-toggle"/>
|
||||||
<div class="drawer-content flex flex-col">
|
<div class="drawer-content flex flex-col">
|
||||||
<div class="w-full navbar bg-neutral sticky top-0 shadow-2xl z-50 text-neutral-content">
|
<div class="navbar sticky top-0 z-50 w-full bg-neutral text-neutral-content shadow-2xl">
|
||||||
<div class="flex-none lg:hidden">
|
<div class="flex-none lg:hidden">
|
||||||
<label for="my-drawer-3" class="btn btn-square btn-ghost text-xl">
|
<label for="my-drawer-3" class="btn btn-square btn-ghost text-xl">
|
||||||
<svg class="inline w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
<svg class="inline h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||||
<path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path>
|
<path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<a href="/" class="btn btn-ghost normal-case text-xl">MMA Schedule</a>
|
<a href="/" class="btn btn-ghost text-xl normal-case">MMA Schedule</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden lg:block">
|
<div class="hidden lg:block">
|
||||||
<div
|
<div
|
||||||
class="h-[450px] 2xl:h-[550px] bg-cover bg-[center_top_-14rem] text-white fill-white"
|
class="h-[450px] bg-cover bg-[center_top_-14rem] fill-white text-white 2xl:h-[550px]"
|
||||||
style={ "background-image: url(" + e.Image + ");" }
|
style={ "background-image: url(" + e.Image + ");" }
|
||||||
>
|
>
|
||||||
<div class="h-full w-full bg-black/50 grid px-32">
|
<div class="grid h-full w-full bg-black/50 px-32">
|
||||||
<div class="place-self-center flex flex-col">
|
<div class="flex flex-col place-self-center">
|
||||||
<p class="text-6xl font-light tracking-tighter border-b pb-4">
|
<p class="border-b pb-4 text-6xl font-light tracking-tighter">
|
||||||
{ e.Name }
|
{ e.Name }
|
||||||
</p>
|
</p>
|
||||||
<div class="pt-3 text-lg font-extrabold tracking-tighter grid justify-items-left gap-1 w-fit place-self-center">
|
<div class="justify-items-left grid w-fit gap-1 place-self-center pt-3 text-lg font-extrabold tracking-tighter">
|
||||||
<p>
|
<p>
|
||||||
@TemplIconCalendar("mr-2")
|
@TemplIconCalendar("mr-2")
|
||||||
@TemplTimestamp(e.Date)
|
@TemplTimestamp(e.Date)
|
||||||
@@ -53,22 +53,22 @@ templ TemplEventPage(e event.Event, upcoming []event.ListUpcomingEventsRow) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="py-4 px-2 mx-auto container">
|
<div class="container mx-auto px-2 py-4">
|
||||||
<div class="lg:hidden">
|
<div class="lg:hidden">
|
||||||
<div class="hero bg-neutral mb-4 rounded">
|
<div class="hero mb-4 rounded bg-neutral">
|
||||||
<div class="hero-content flex-col justify-between">
|
<div class="hero-content flex-col justify-between">
|
||||||
<div class="flex-1 grow">
|
<div class="flex-1 grow">
|
||||||
<img
|
<img
|
||||||
src={ e.Image }
|
src={ e.Image }
|
||||||
class="rounded-lg shadow-2xl object-cover aspect-[16/9]"
|
class="aspect-[16/9] rounded-lg object-cover shadow-2xl"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 grow py-2 w-full flex flex-col items-center">
|
<div class="flex w-full flex-1 grow flex-col items-center py-2">
|
||||||
<p class="text-3xl font-bold border-b-4 w-fit pb-3 border-red-500">
|
<p class="w-fit border-b-4 border-red-500 pb-3 text-3xl font-bold">
|
||||||
{ e.Name }
|
{ e.Name }
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<div class="pt-3 flex align-top content-center">
|
<div class="flex content-center pt-3 align-top">
|
||||||
@TemplIconCalendar("mr-2")
|
@TemplIconCalendar("mr-2")
|
||||||
@TemplTimestamp(e.Date)
|
@TemplTimestamp(e.Date)
|
||||||
</div>
|
</div>
|
||||||
@@ -92,10 +92,10 @@ templ TemplEventPage(e event.Event, upcoming []event.ListUpcomingEventsRow) {
|
|||||||
</div>
|
</div>
|
||||||
<div class="drawer-side">
|
<div class="drawer-side">
|
||||||
<label for="my-drawer-3" class="drawer-overlay"></label>
|
<label for="my-drawer-3" class="drawer-overlay"></label>
|
||||||
<ul class="menu p-4 w-80 bg-neutral text-neutral-content">
|
<ul class="menu w-80 bg-neutral p-4 text-neutral-content">
|
||||||
<li>
|
<li>
|
||||||
<a>
|
<a>
|
||||||
<p class="text-2xl mb-2 pb-2 border-b-2 border-accent rounded-b-none">
|
<p class="mb-2 rounded-b-none border-b-2 border-accent pb-2 text-2xl">
|
||||||
Upcoming Events
|
Upcoming Events
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
@@ -120,19 +120,19 @@ templ TemplEventPage(e event.Event, upcoming []event.ListUpcomingEventsRow) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
templ TemplFightRow(f *event.Fight) {
|
templ TemplFightRow(f *event.Fight) {
|
||||||
<div class="w-full px-4 pb-4 pt-1 rounded bg-neutral text-neutral-content">
|
<div class="w-full rounded bg-neutral px-4 pb-4 pt-1 text-neutral-content">
|
||||||
<div class="w-full flex justify-center">
|
<div class="flex w-full justify-center">
|
||||||
<p
|
<p
|
||||||
class="pb-1 mb-4 text-lg font-extrabold border-b border-neutral-content w-fit"
|
class="mb-4 w-fit border-b border-neutral-content pb-1 text-lg font-extrabold"
|
||||||
>
|
>
|
||||||
{ f.Weight }
|
{ f.Weight }
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-5">
|
<div class="grid grid-cols-5">
|
||||||
@TemplFighterCol(f.FighterA, false)
|
@TemplFighterCol(f.FighterA, false)
|
||||||
<div class="px-2 flex">
|
<div class="flex px-2">
|
||||||
<div class="self-center w-full">
|
<div class="w-full self-center">
|
||||||
<p class="text-2xl font-extrabold text-center">VS</p>
|
<p class="text-center text-2xl font-extrabold">VS</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@TemplFighterCol(f.FighterB, true)
|
@TemplFighterCol(f.FighterB, true)
|
||||||
@@ -161,27 +161,27 @@ templ TemplFighterCol(f *event.Fighter, right bool) {
|
|||||||
loading="lazy"
|
loading="lazy"
|
||||||
alt=""
|
alt=""
|
||||||
if right {
|
if right {
|
||||||
class="h-32 w-32 object-cover object-top rounded lg:order-2"
|
class="h-32 w-32 rounded object-cover object-top lg:order-2"
|
||||||
} else {
|
} else {
|
||||||
class="h-32 w-32 object-cover object-top rounded"
|
class="h-32 w-32 rounded object-cover object-top"
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
if right {
|
if right {
|
||||||
class=" mt-3 pt-1 border-t-8
|
class=" mt-3 border-t-8 border-blue-500
|
||||||
lg:mx-5 lg:mt-0 lg:pt-0 lg:border-t-0
|
pt-1 text-right lg:order-1 lg:mx-5
|
||||||
|
|
||||||
border-blue-500 lg:border-r-8 lg:pr-5 lg:order-1 text-right
|
lg:mt-0 lg:border-r-8 lg:border-t-0 lg:pr-5 lg:pt-0
|
||||||
"
|
"
|
||||||
} else {
|
} else {
|
||||||
class=" mt-3 pt-1 border-t-8
|
class=" mt-3 border-t-8 border-red-500
|
||||||
lg:mx-5 lg:mt-0 lg:pt-0 lg:border-t-0
|
pt-1 lg:mx-5 lg:mt-0 lg:border-l-8
|
||||||
|
|
||||||
border-red-500 lg:border-l-8 lg:pl-5
|
lg:border-t-0 lg:pl-5 lg:pt-0
|
||||||
"
|
"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<p class="text-xl font-semibold mb-1 lg:mb-4">
|
<p class="mb-1 text-xl font-semibold lg:mb-4">
|
||||||
{ f.Name }
|
{ f.Name }
|
||||||
</p>
|
</p>
|
||||||
if len(f.Country) > 0 {
|
if len(f.Country) > 0 {
|
||||||
|
|||||||
Reference in New Issue
Block a user