aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--pkg/list/list.go18
-rw-r--r--scss/main.scss50
-rw-r--r--templates/album.qtpl16
-rw-r--r--templates/media.qtpl2
-rw-r--r--templates/mosaic.qtpl27
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 %}