94 lines
3.2 KiB
Plaintext
94 lines
3.2 KiB
Plaintext
package page
|
|
|
|
import "projectreshoot/pkg/tmdb"
|
|
import "projectreshoot/internal/view/layout"
|
|
|
|
templ Movie(movie *tmdb.Movie, credits *tmdb.Credits, image *tmdb.Image) {
|
|
@layout.Global(movie.Title) {
|
|
<div class="md:bg-surface0 md:p-2 md:rounded-lg transition-all">
|
|
<div
|
|
id="billedcrew"
|
|
class="hidden"
|
|
>
|
|
for _, billedcrew := range credits.BilledCrew() {
|
|
<span class="flex flex-col text-left w-[130px] md:w-[180px]">
|
|
<span class="font-bold">{ billedcrew.Name }</span>
|
|
<span class="text-subtext1">{ billedcrew.FRoles() }</span>
|
|
</span>
|
|
}
|
|
</div>
|
|
<div class="flex items-start">
|
|
<div class="w-[154px] md:w-[300px] flex-col">
|
|
<img
|
|
class="object-cover aspect-[2/3] w-[154px] md:w-[300px]
|
|
transition-all md:rounded-md shadow-black shadow-2xl"
|
|
src={ movie.GetPoster(image, "w300") }
|
|
alt="Poster"
|
|
/>
|
|
<div
|
|
id="billedcrew-sm"
|
|
class="text-sm md:text-lg text-subtext1 flex gap-6
|
|
mt-5 flex-wrap justify-around flex-col px-5 md:hidden"
|
|
></div>
|
|
<script>
|
|
function moveBilledCrew() {
|
|
const billedCrewMd = document.getElementById('billedcrew-md');
|
|
const billedCrewSm = document.getElementById('billedcrew-sm');
|
|
const billedCrew = document.getElementById('billedcrew');
|
|
|
|
if (window.innerWidth < 768) {
|
|
billedCrewSm.innerHTML = billedCrew.innerHTML;
|
|
billedCrewMd.innerHTML = "";
|
|
} else {
|
|
billedCrewMd.innerHTML = billedCrew.innerHTML;
|
|
billedCrewSm.innerHTML = "";
|
|
}
|
|
}
|
|
|
|
window.addEventListener('load', moveBilledCrew);
|
|
|
|
const resizeObs = new ResizeObserver(() => {
|
|
moveBilledCrew();
|
|
});
|
|
resizeObs.observe(document.body);
|
|
</script>
|
|
</div>
|
|
<div class="flex flex-col flex-1 text-center px-4">
|
|
<span class="text-xl md:text-3xl font-semibold">
|
|
{ movie.Title }
|
|
</span>
|
|
<span class="text-sm md:text-lg text-subtext1">
|
|
{ movie.FGenres() }
|
|
• { movie.FRuntime() }
|
|
• { movie.ReleaseYear() }
|
|
</span>
|
|
<div class="flex justify-center gap-2 mt-2">
|
|
<div
|
|
class="w-20 h-20 md:w-30 md:h-30 bg-overlay2
|
|
transition-all rounded-sm"
|
|
></div>
|
|
<div
|
|
class="w-20 h-20 md:w-30 md:h-30 bg-overlay2
|
|
transition-all rounded-sm"
|
|
></div>
|
|
</div>
|
|
<div class="flex flex-col mt-4">
|
|
<span class="text-sm md:text-lg text-overlay2 italic">
|
|
{ movie.Tagline }
|
|
</span>
|
|
<div
|
|
id="billedcrew-md"
|
|
class="hidden text-sm md:text-lg text-subtext1 md:flex gap-6
|
|
mt-5 flex-wrap justify-around"
|
|
></div>
|
|
<span class="text-lg mt-5 font-semibold">Overview</span>
|
|
<span class="text-sm md:text-lg text-subtext1">
|
|
{ movie.Overview }
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|