tigor/Redmage
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

home: update recently added cards to be horizontally placed

Browse source
This commit is contained in:
Tigor Hutasuhut 2024-04-28 10:25:09 +07:00
parent f8921b0cc9
commit 141abc130e
2 changed files with 21 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
views/homeview/homeview.templ
View file

@ -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
views/homeview/recently_added_image_card.templ → views/homeview/recently_added_image.templ
View file

@ -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>
<div class="card-actions justify-between">
if data.R.Subreddit != nil { if data.R.Subreddit != nil {
if !opts.Has(HideSubreddit) { if !opts.Has(HideSubreddit) {
<a <a
class="text-primary-content underline text-base" class="badge badge-outline"
href={ templ.URL(fmt.Sprintf("https://reddit.com/%s/%s", reddit.SubredditType(data.R.Subreddit.Subtype), data.R.Subreddit.Name)) } 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> >{ 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>
} }