home: more compact cards
This commit is contained in:
parent
65bb5732ca
commit
1495189199
|
@ -2,7 +2,7 @@ package components
|
||||||
|
|
||||||
templ Doctype() {
|
templ Doctype() {
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html data-theme="light">
|
<html>
|
||||||
{ children... }
|
{ children... }
|
||||||
</html>
|
</html>
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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] + "..."
|
||||||
|
|
Loading…
Reference in a new issue