ref: Update mosaic to remove empty spaces

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>