diff options
| -rw-r--r-- | pkg/list/list.go | 19 | ||||
| -rw-r--r-- | scss/main.scss | 17 | ||||
| -rw-r--r-- | templates/album.qtpl | 9 | ||||
| -rw-r--r-- | templates/media.qtpl | 9 |
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> |