home: more compact cards

This commit is contained in:
Tigor Hutasuhut 2024-05-01 14:27:09 +07:00
parent 65bb5732ca
commit 1495189199
3 changed files with 19 additions and 11 deletions

View file

@ -2,7 +2,7 @@ package components
templ Doctype() { templ Doctype() {
<!DOCTYPE html> <!DOCTYPE html>
<html data-theme="light"> <html>
{ children... } { children... }
</html> </html>
} }

View file

@ -49,7 +49,7 @@ templ HomeContent(c *views.Context, data Data) {
<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>
} else { } else {
<h2 class="mt-4"> <h2 class="mt-4">
Added Images: { strconv.FormatInt(data.TotalImages, 10) } { strconv.FormatInt(data.TotalImages, 10) } Images
</h2> </h2>
} }
for _, recently := range data.RecentlyAddedImages { for _, recently := range data.RecentlyAddedImages {

View file

@ -3,8 +3,6 @@ package homeview
import "github.com/tigorlazuardi/redmage/models" import "github.com/tigorlazuardi/redmage/models"
import "fmt" import "fmt"
import "github.com/tigorlazuardi/redmage/views/utils" import "github.com/tigorlazuardi/redmage/views/utils"
import "strconv"
import "github.com/alecthomas/units"
type ImageCardOption uint type ImageCardOption uint
@ -45,18 +43,28 @@ templ RecentlyAddedImageCard(data *models.Image, opts ImageCardOption) {
<div class="flex w-full justify-end"> <div class="flex w-full justify-end">
@utils.RelativeTimeNode(fmt.Sprintf("relative-time-%s", data.PostName), data.CreatedAt, "text-sm") @utils.RelativeTimeNode(fmt.Sprintf("relative-time-%s", data.PostName), data.CreatedAt, "text-sm")
</div> </div>
<div class="grid grid-cols-2 gap-x-4"> <div class="grid grid-cols-2">
<p class="text-xs">Width</p> <p class="text-xs">{ fmt.Sprintf("%d \u00d7 %d", data.ImageWidth, data.ImageHeight) } px</p>
<p class="text-xs text-end">{ strconv.Itoa(int(data.ImageWidth)) } px</p> <p class="text-xs text-end">{ formatByteSize(data.ImageSize) }</p>
<p class="text-xs">Height</p>
<p class="text-xs text-end">{ strconv.Itoa(int(data.ImageHeight)) } px</p>
<p class="text-xs">Size</p>
<p class="text-xs text-end">{ units.MetricBytes(data.ImageSize).Round(1).String() }</p>
</div> </div>
</div> </div>
</div> </div>
} }
func formatByteSize(size int64) string {
if size < 1024 {
return fmt.Sprintf("%d B", size)
}
if size < 1024*1024 {
return fmt.Sprintf("%.2f KiB", float64(size)/1024)
}
if size < 1024*1024*1024 {
return fmt.Sprintf("%.2f MiB", float64(size)/(1024*1024))
}
return fmt.Sprintf("%.2f GiB", float64(size)/(1024*1024*1024))
}
func truncateTitle(title string) string { func truncateTitle(title string) string {
if len(title) > 50 { if len(title) > 50 {
return title[:50] + "..." return title[:50] + "..."