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">
<section class="mb-4 mx-auto">
<h1>Recently Added</h1>
<div class="flex gap-4 flex-wrap pb-4 pr-8 w-[100vw] lg:w-[80vw] justify-around">
for _, image := range data.RecentlyAddedImages.Images {
@RecentlyAddedImageCard(image, 0)
}
</div>
@RecentlyAddedImageList(data.RecentlyAddedImages.Images, 0)
</section>
<section>
<h1>Subreddits</h1>

30
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) {
<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>
<a
href={ templ.URL(fmt.Sprintf("/img/%s", data.ImageRelativePath)) }
>
<img
class="object-contain w-[250px] h-[250px]"
class="object-contain w-[256px] h-[256px]"
src={ fmt.Sprintf("/img/%s", data.ThumbnailRelativePath) }
alt={ data.Title }
/>
@ -34,18 +34,28 @@ templ RecentlyAddedImageCard(data *models.Image, opts ImageCardOption) {
if !opts.Has(HideTitle) {
<a
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>
}
<a class="text-primary-content underline" href={ templ.URL(data.PosterURL) }>{ data.Poster }</a>
if data.R.Subreddit != nil {
if !opts.Has(HideSubreddit) {
<a
class="text-primary-content underline text-base"
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 class="card-actions justify-between">
if data.R.Subreddit != nil {
if !opts.Has(HideSubreddit) {
<a
class="badge badge-outline"
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>
}
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>
}