aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--pkg/list/list.go19
-rw-r--r--scss/main.scss17
-rw-r--r--templates/album.qtpl9
-rw-r--r--templates/media.qtpl9
4 files changed, 42 insertions, 12 deletions
diff --git a/pkg/list/list.go b/pkg/list/list.go
index dfc3fb7..3aa9d65 100644
--- a/pkg/list/list.go
+++ b/pkg/list/list.go
@@ -13,6 +13,25 @@ type Pair[T, U any] struct {
Right U
}
+func Chunck[T any](slice []T, size int) [][]T {
+ chuncks := make([][]T, size)
+
+ for i := 0; i < len(slice); i += size {
+ for x := 0; x < size; x++ {
+ end := i + x
+
+ if end > len(slice) {
+ break
+ }
+
+ chuncks[x] = append(chuncks[x], slice[end])
+ }
+
+ }
+
+ return chuncks
+}
+
func Zip[T, U any](left []T, right []U) []Pair[T, U] {
// pick the array with the smaller length
l := len(left)
diff --git a/scss/main.scss b/scss/main.scss
index addae37..8220af6 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,9 +1,9 @@
$breakpoint: 360px;
-$tablet: $breakpoint;
+$tablet: 480px;
$body-font-size: 1rem;
$radius-rounded: 0;
-$container-max-width: 920px;
+$container-max-width: 1080px;
$navbar-breakpoint: $breakpoint;
@@ -34,15 +34,16 @@ $title-weight: normal;
body {
font-family: $family-primary;
- padding-bottom: 10px;
}
.input, .button{
border-radius: 0;
}
+
.wide-column {
width: 100%;
}
+
.is-mono {
font-family: monospace;
}
@@ -71,17 +72,17 @@ a.is-danger {
.card-image {
- margin: 5px;
+ padding: 5px;
}
.image.is-fit {
height: auto;
- width: 130px;
+ width: 100%;
+}
- @include until($breakpoint) {
- width: auto;
- }
+.column {
+ padding: 0;
}
th {
diff --git a/templates/album.qtpl b/templates/album.qtpl
index 9f4c0bd..328c6d4 100644
--- a/templates/album.qtpl
+++ b/templates/album.qtpl
@@ -1,4 +1,5 @@
{% import "git.sr.ht/~gabrielgio/img/pkg/database/repository" %}
+{% import "git.sr.ht/~gabrielgio/img/pkg/list" %}
{% code
type AlbumPage struct {
@@ -26,8 +27,10 @@ func (m *AlbumPage) PreloadAttr() string {
<a href="/album/?albumId={%s FromUInttoString(&a.ID) %}" class="tag text-size-2">{%s a.Name %}</a>
{% endfor %}
</div>
-<div class="columns is-multiline">
-{% for _, media := range p.Medias %}
+<div class="columns">
+{% for _, c := range list.Chunck(p.Medias, 4) %}
+ <div class="column is-3">
+ {% for _, media := range c %}
<div class="card-image">
{% if media.IsVideo() %}
<video class="image is-fit" controls muted="true" poster="/media/thumbnail/?path_hash={%s media.PathHash %}" preload="{%s p.PreloadAttr() %}">
@@ -39,6 +42,8 @@ func (m *AlbumPage) PreloadAttr() string {
</figure>
{% endif %}
</div>
+ {% endfor %}
+ </div>
{% endfor %}
</div>
<div>
diff --git a/templates/media.qtpl b/templates/media.qtpl
index 11fc9bc..7dcdf54 100644
--- a/templates/media.qtpl
+++ b/templates/media.qtpl
@@ -1,4 +1,5 @@
{% import "git.sr.ht/~gabrielgio/img/pkg/database/repository" %}
+{% import "git.sr.ht/~gabrielgio/img/pkg/list" %}
{% code
type MediaPage struct {
@@ -18,8 +19,10 @@ func (m *MediaPage) PreloadAttr() string {
{% func (p *MediaPage) Title() %}Media{% endfunc %}
{% func (p *MediaPage) Content() %}
-<div class="columns is-multiline">
-{% for _, media := range p.Medias %}
+<div class="columns">
+{% for _, c := range list.Chunck(p.Medias, 4) %}
+ <div class="column is-3">
+ {% for _, media := range c %}
<div class="card-image">
{% if media.IsVideo() %}
<video class="image is-fit" controls muted="true" poster="/media/thumbnail/?path_hash={%s media.PathHash %}" preload="{%s p.PreloadAttr() %}">
@@ -31,6 +34,8 @@ func (m *MediaPage) PreloadAttr() string {
</figure>
{% endif %}
</div>
+ {% endfor %}
+ </div>
{% endfor %}
</div>
<div>