diff options
-rw-r--r-- | pkg/list/list.go | 18 | ||||
-rw-r--r-- | scss/main.scss | 50 | ||||
-rw-r--r-- | templates/album.qtpl | 16 | ||||
-rw-r--r-- | templates/media.qtpl | 2 | ||||
-rw-r--r-- | templates/mosaic.qtpl | 27 |
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 %} |