feat: Simplify mosaic

The old implementation was not good and would render the list on mobile
in the wrong order

5 files changed, 66 insertions, 47 deletions

diff --git a/pkg/list/list.go b/pkg/list/list.go
index 482e5bf..8f3d875 100644
--- a/pkg/list/list.go
+++ b/pkg/list/list.go
@@ -31,6 +31,24 @@ func Distribuite[T any](slice []T, size int) [][]T {
 	return chuncks
 }
 
+func Chunck[T any](slice []T, size int) [][]T {
+	var divided [][]T
+
+	chunkSize := (len(slice) + size - 1) / size
+
+	for i := 0; i < len(slice); i += chunkSize {
+		end := i + chunkSize
+
+		if end > len(slice) {
+			end = len(slice)
+		}
+
+		divided = append(divided, slice[i:end])
+	}
+
+	return divided
+}
+
 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 532a38a..95db99f 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -15,6 +15,8 @@ $card-content-padding: 0;
 $table-cell-padding: 0.5em;
 $table-cell-border-width: 0;
 
+$section-padding: 0 1.5rem;
+
 $tag-delete-margin: 15px;
 
 $title-weight: normal;
@@ -57,19 +59,6 @@ a.is-danger {
     margin-top: 30px;
 }
 
-.card-image {
-    padding: 5px;
-}
-
-.image.is-fit {
-  height: auto;
-  width: 100%;
-}
-
-.column {
-    padding: 0;
-}
-
 th {
     font-weight: normal;
 }
@@ -79,10 +68,6 @@ form {
     padding-right: 15px;
 }
 
-.img {
-    object-fit: cover;
-}
-
 .text-size-1{
     @extend .is-size-4 !optional;
 }
@@ -90,3 +75,34 @@ form {
 .text-size-2{
     @extend .is-size-5 !optional;
 }
+
+.gallary_container{
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
+  grid-auto-rows: 15.5em;  
+  padding: 10px;
+}
+
+.image_container img{
+  width: 100%;
+  height: 100%; 
+    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
+  object-fit: cover;
+}
+
+@media screen and (min-width: $breakpoint) {
+  .image-tall {
+    grid-row: span 2 / auto;
+  }
+
+  .image-wide {
+    grid-column: span 2 / auto;
+  }
+}
+
+// Fix horizontal scroll on iOS
+.scrolling-element {
+    overflow-x: scroll; /* Must be 'scroll' not 'auto' */
+    -webkit-overflow-scrolling: touch;
+}
diff --git a/templates/album.qtpl b/templates/album.qtpl
index 58fc499..246c77c 100644
--- a/templates/album.qtpl
+++ b/templates/album.qtpl
@@ -20,15 +20,15 @@ func (m *AlbumPage) PreloadAttr() string {
 {% func (p *AlbumPage) Title() %}Media{% endfunc %}
 
 {% func (p *AlbumPage) Content() %}
-<h1 class="title text-size-1">{%s p.Name %}</h1>
-<div class="tags are-large">
-{% for _, a := range p.Albums %}
-  <a href="/album?albumId={%s FromUInttoString(&a.ID) %}" class="tag text-size-2">{%s a.Name %}</a>
-{% endfor %}
-</div>
-<div class="columns">
+<section class="section">
+    <h1 class="title text-size-1">{%s p.Name %}</h1>
+    <div class="tags are-large">
+    {% for _, a := range p.Albums %}
+      <a href="/album?albumId={%s FromUInttoString(&a.ID) %}" class="tag text-size-2">{%s a.Name %}</a>
+    {% endfor %}
+    </div>
+</section>
 {%= Mosaic(p.Medias, p.PreloadAttr()) %}
-</div>
 <div>
     <a href="/album?albumId={%s FromUInttoString(p.Next.AlbumID) %}&page={%d p.Next.Page %}" class="button is-pulled-right">next</a>
 </div>
diff --git a/templates/media.qtpl b/templates/media.qtpl
index 737d03d..6a13827 100644
--- a/templates/media.qtpl
+++ b/templates/media.qtpl
@@ -18,9 +18,7 @@ func (m *MediaPage) PreloadAttr() string {
 {% func (p *MediaPage) Title() %}Media{% endfunc %}
 
 {% func (p *MediaPage) Content() %}
-<div class="columns">
 {%= Mosaic(p.Medias, p.PreloadAttr()) %}
-</div>
 <div>
     <a href="/media?page={%d p.Next.Page %}" class="button is-pulled-right">next</a>
 </div>
diff --git a/templates/mosaic.qtpl b/templates/mosaic.qtpl
index 21a8bae..9e941b6 100644
--- a/templates/mosaic.qtpl
+++ b/templates/mosaic.qtpl
@@ -1,26 +1,13 @@
 {% import "git.sr.ht/~gabrielgio/img/pkg/database/repository" %}
-{% import "git.sr.ht/~gabrielgio/img/pkg/list" %}
 
 {% func Mosaic(medias []*repository.Media, preloadAttr string) %}
-<div class="columns">
-{% for _, c := range list.Distribuite(medias, 6) %}
-    <div class="column is-2">
-    {% for _, media := range c %}
-    <div class="card-image">
-       <a href="/detail?path_hash={%s media.PathHash %}">
-       {% if media.IsVideo() %}
-       <video class="image is-fit" controls muted="true" poster="/media/thumbnail?path_hash={%s media.PathHash %}" preload="{%s preloadAttr %}">
-           <source src="/media/image?path_hash={%s media.PathHash %}" type="{%s media.MIMEType %}">
-       </video>
-       {% else %}
-       <figure class="image is-fit">
-           <img src="/media/thumbnail?path_hash={%s media.PathHash %}">
-       </figure>
-       </a>
-        {% endif %}
-    </div>
-    {% endfor %}
-    </div>
+<div class="gallary_container">
+{% for _, media := range medias %}
+    <a href="/detail?path_hash={%s media.PathHash %}">
+        <figure class="image_container">
+            <img src="/media/thumbnail?path_hash={%s media.PathHash %}" >
+        </figure>
+    </a>
 {% endfor %}
 </div>
 {% endfunc %}