home: update recently added cards to be horizontally placed
This commit is contained in:
parent
f8921b0cc9
commit
141abc130e
|
@ -29,11 +29,7 @@ templ home(_ *views.Context, data Data) {
|
||||||
<div class="prose">
|
<div class="prose">
|
||||||
<section class="mb-4 mx-auto">
|
<section class="mb-4 mx-auto">
|
||||||
<h1>Recently Added</h1>
|
<h1>Recently Added</h1>
|
||||||
<div class="flex gap-4 flex-wrap pb-4 pr-8 w-[100vw] lg:w-[80vw] justify-around">
|
@RecentlyAddedImageList(data.RecentlyAddedImages.Images, 0)
|
||||||
for _, image := range data.RecentlyAddedImages.Images {
|
|
||||||
@RecentlyAddedImageCard(image, 0)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h1>Subreddits</h1>
|
<h1>Subreddits</h1>
|
||||||
|
|
|
@ -18,13 +18,13 @@ const (
|
||||||
)
|
)
|
||||||
|
|
||||||
templ RecentlyAddedImageCard(data *models.Image, opts ImageCardOption) {
|
templ RecentlyAddedImageCard(data *models.Image, opts ImageCardOption) {
|
||||||
<div class="not-prose card bg-base-100 shadow-xl w-[250px]">
|
<div class="not-prose card card-bordered bg-base-100 shadow-xl w-[256px] min-w-[256px]">
|
||||||
<figure>
|
<figure>
|
||||||
<a
|
<a
|
||||||
href={ templ.URL(fmt.Sprintf("/img/%s", data.ImageRelativePath)) }
|
href={ templ.URL(fmt.Sprintf("/img/%s", data.ImageRelativePath)) }
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
class="object-contain w-[250px] h-[250px]"
|
class="object-contain w-[256px] h-[256px]"
|
||||||
src={ fmt.Sprintf("/img/%s", data.ThumbnailRelativePath) }
|
src={ fmt.Sprintf("/img/%s", data.ThumbnailRelativePath) }
|
||||||
alt={ data.Title }
|
alt={ data.Title }
|
||||||
/>
|
/>
|
||||||
|
@ -34,18 +34,28 @@ templ RecentlyAddedImageCard(data *models.Image, opts ImageCardOption) {
|
||||||
if !opts.Has(HideTitle) {
|
if !opts.Has(HideTitle) {
|
||||||
<a
|
<a
|
||||||
href={ templ.URL(data.PostURL) }
|
href={ templ.URL(data.PostURL) }
|
||||||
class="card-title font-normal underline text-base text-primary-content"
|
class="card-title font-bold underline text-base text-primary-content"
|
||||||
>{ data.Title }</a>
|
>{ data.Title }</a>
|
||||||
}
|
}
|
||||||
<a class="text-primary-content underline" href={ templ.URL(data.PosterURL) }>{ data.Poster }</a>
|
<a class="text-primary-content underline" href={ templ.URL(data.PosterURL) }>{ data.Poster }</a>
|
||||||
if data.R.Subreddit != nil {
|
<div class="card-actions justify-between">
|
||||||
if !opts.Has(HideSubreddit) {
|
if data.R.Subreddit != nil {
|
||||||
<a
|
if !opts.Has(HideSubreddit) {
|
||||||
class="text-primary-content underline text-base"
|
<a
|
||||||
href={ templ.URL(fmt.Sprintf("https://reddit.com/%s/%s", reddit.SubredditType(data.R.Subreddit.Subtype), data.R.Subreddit.Name)) }
|
class="badge badge-outline"
|
||||||
>{ data.R.Subreddit.Name } </a>
|
href={ templ.URL(fmt.Sprintf("https://reddit.com/%s/%s", reddit.SubredditType(data.R.Subreddit.Subtype), data.R.Subreddit.Name)) }
|
||||||
|
>{ data.R.Subreddit.Name } </a>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
templ RecentlyAddedImageList(images models.ImageSlice, opts ImageCardOption) {
|
||||||
|
<div class="w-[100vw] lg:w-[80vw] overflow-x-scroll flex gap-4 p-8 shadow-inner bg-base-300">
|
||||||
|
for _, data := range images {
|
||||||
|
@RecentlyAddedImageCard(data, opts)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
Loading…
Reference in a new issue