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

view: better card handling and truncate title

Browse source
This commit is contained in:
Tigor Hutasuhut 2024-04-30 12:54:16 +07:00
parent 0073306563
commit b2f3c9bbdf
2 changed files with 32 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
views/homeview/homeview.templ
View file

@ -4,6 +4,7 @@ import "github.com/tigorlazuardi/redmage/views/components"
import "github.com/tigorlazuardi/redmage/views" import "github.com/tigorlazuardi/redmage/views"
import "github.com/tigorlazuardi/redmage/views/utils" import "github.com/tigorlazuardi/redmage/views/utils"
import "strconv" import "strconv"
import "fmt"
templ Home(c *views.Context, data Data) { templ Home(c *views.Context, data Data) {
@components.Doctype() { @components.Doctype() {
@ -27,8 +28,8 @@ templ HomeContent(c *views.Context, data Data) {
<div <div
class="flex content-center gap-8" class="flex content-center gap-8"
hx-get="/" hx-get="/"
hx-target="main" hx-target="#recently-added-images"
hx-select="main" hx-select="#recently-added-images"
hx-swap="outerHTML" hx-swap="outerHTML"
hx-trigger="change" hx-trigger="change"
hx-include="this" hx-include="this"
@ -41,6 +42,7 @@ templ HomeContent(c *views.Context, data Data) {
@recentRangeInput(c) @recentRangeInput(c)
@nsfwToggle(c, data) @nsfwToggle(c, data)
</div> </div>
<div id="recently-added-images">
if data.TotalImages == 0 { if data.TotalImages == 0 {
<h2 class="mt-4">There are no recently added images in the current time range.</h2> <h2 class="mt-4">There are no recently added images in the current time range.</h2>
} }
@ -48,10 +50,16 @@ templ HomeContent(c *views.Context, data Data) {
<div class="divider"></div> <div class="divider"></div>
<h2 class="mt-4">{ recently.Device.Name }</h2> <h2 class="mt-4">{ recently.Device.Name }</h2>
for _, subreddit := range recently.Subreddits { for _, subreddit := range recently.Subreddits {
<h4>{ subreddit.Subreddit.Name } - { strconv.Itoa(len(subreddit.Images)) } images</h4> <h4>
<a class="text-primary" href={ templ.SafeURL(fmt.Sprintf("/subreddits/details/%s?device=%d", subreddit.Subreddit.Name, recently.Device.ID)) }>
{ subreddit.Subreddit.Name }
</a>
- { strconv.Itoa(len(subreddit.Images)) } images
</h4>
@RecentlyAddedImageList(subreddit.Images, 0) @RecentlyAddedImageList(subreddit.Images, 0)
} }
} }
</div>
</section> </section>
<section> <section>
<h1>Subreddits</h1> <h1>Subreddits</h1>
@ -99,11 +107,11 @@ templ nsfwToggle(c *views.Context, data Data) {
class="select select-ghost select-bordered" class="select select-ghost select-bordered"
> >
if (c.Request.URL.Query().Get("sfw") == "1") || data.SFW { if (c.Request.URL.Query().Get("sfw") == "1") || data.SFW {
<option value="0">NSFW - ON</option> <option value="0">NSFW - Show</option>
<option selected="selected" value="1">NSFW - Off</option> <option selected="selected" value="1">NSFW - Hide</option>
} else { } else {
<option selected="selected" value="0">NSFW - ON</option> <option selected="selected" value="0">NSFW - Show</option>
<option value="1">NSFW - Off</option> <option value="1">NSFW - Hide</option>
} }
</select> </select>
} }

9
views/homeview/recently_added_image.templ
View file

@ -37,7 +37,7 @@ templ RecentlyAddedImageCard(data *models.Image, opts ImageCardOption) {
<a <a
href={ templ.URL(data.PostURL) } href={ templ.URL(data.PostURL) }
class="card-title font-bold underline text-base text-primary" class="card-title font-bold underline text-base text-primary"
>{ data.Title }</a> >{ truncateTitle(data.Title) }</a>
} }
<a class="text-primary underline" href={ templ.URL(data.PosterURL) }>{ data.Poster }</a> <a class="text-primary underline" href={ templ.URL(data.PosterURL) }>{ data.Poster }</a>
<div> <div>
@ -57,6 +57,13 @@ templ RecentlyAddedImageCard(data *models.Image, opts ImageCardOption) {
</div> </div>
} }
func truncateTitle(title string) string {
if len(title) > 50 {
return title[:50] + "..."
}
return title
}
templ RecentlyAddedImageList(images models.ImageSlice, opts ImageCardOption) { templ RecentlyAddedImageList(images models.ImageSlice, opts ImageCardOption) {
<div class="overflow-x-auto flex gap-4 p-6 shadow-inner bg-base-300 rounded-2xl w-[85vw] md:w-full"> <div class="overflow-x-auto flex gap-4 p-6 shadow-inner bg-base-300 rounded-2xl w-[85vw] md:w-full">
for _, data := range images { for _, data := range images {