From ee350841782e9e42cebf90df8fe25e407da09c4e Mon Sep 17 00:00:00 2001 From: Timm Friebe Date: Sat, 4 Jan 2025 13:34:46 +0100 Subject: [PATCH 01/11] Show 1 preview image and collapse the rest into an overlapping list --- src/main/handlebars/feed.handlebars | 15 ++++++++- src/main/handlebars/layout.handlebars | 45 ++++++++++++++++++++++++++- 2 files changed, 58 insertions(+), 2 deletions(-) diff --git a/src/main/handlebars/feed.handlebars b/src/main/handlebars/feed.handlebars index f233b1b..840eb73 100755 --- a/src/main/handlebars/feed.handlebars +++ b/src/main/handlebars/feed.handlebars @@ -42,7 +42,20 @@ {{> partials/weather in=.}} - {{> partials/images in=. first=@first}} + + {{#with images.0}} +
+ {{title}}, {{date meta.dateTime format='d.m.Y H:i'}} +
+ {{/with}} +
+ {{#each images}} + {{#unless (equals @index 0)}} + + {{/unless}} + {{/each}} +
+
{{& content}} diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars index 142d0d9..88cae5c 100755 --- a/src/main/handlebars/layout.handlebars +++ b/src/main/handlebars/layout.handlebars @@ -543,17 +543,19 @@ } .images { + position: relative; margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; + overflow: hidden; &.overview { grid-template-columns: 1fr 1fr 1fr 1fr; padding-bottom: 1rem; } - &.all, &.is-single { + &.all, &.is-single, &.is-preview { grid-template-columns: 1fr; } @@ -571,6 +573,36 @@ border-radius: .25rem; box-shadow: .25rem .25rem 1rem rgb(0 0 0 / .2); } + + .more { + --_size: 10rem; + --_overlap: 8rem; + + position: absolute; + bottom: 1.5rem; + left: 1.5rem; + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; + width: var(--_size); + + img, video { + z-index: 1; + display: block; + border: .25rem solid white; + border-radius: .5rem; + width: var(--_size); + height: var(--_size); + object-fit: cover; + margin-right: calc(-1 * var(--_overlap)); + box-shadow: .5rem .5rem 1rem rgb(0 0 0 / .4); + transition: margin-right ease-in-out 150ms; + } + } + + &:hover .more img, video { + margin-right: 1rem; + } } .marker { @@ -751,6 +783,17 @@ } @media (max-width: 619px) { + .images .more { + --_size: 5rem; + --_overlap: 4rem; + bottom: 1rem; + left: 1rem; + + img { + border-width: .15rem; + } + } + #lightbox { margin-left: 0; margin-right: 0; From 9c1146b01c277371c48024c27f285b940d2a52c8 Mon Sep 17 00:00:00 2001 From: Timm Friebe Date: Sat, 4 Jan 2025 14:25:28 +0100 Subject: [PATCH 02/11] Fix order of images --- src/main/handlebars/feed.handlebars | 2 +- src/main/handlebars/layout.handlebars | 22 +++++++++++----------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/main/handlebars/feed.handlebars b/src/main/handlebars/feed.handlebars index 840eb73..e6f9b85 100755 --- a/src/main/handlebars/feed.handlebars +++ b/src/main/handlebars/feed.handlebars @@ -51,7 +51,7 @@
{{#each images}} {{#unless (equals @index 0)}} - + {{/unless}} {{/each}}
diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars index 88cae5c..5e0d1bd 100755 --- a/src/main/handlebars/layout.handlebars +++ b/src/main/handlebars/layout.handlebars @@ -582,26 +582,26 @@ bottom: 1.5rem; left: 1.5rem; display: flex; - flex-direction: row-reverse; - justify-content: flex-end; - width: var(--_size); + isolation: isolate; - img, video { - z-index: 1; + img { display: block; border: .25rem solid white; border-radius: .5rem; width: var(--_size); - height: var(--_size); + aspect-ratio: 1 / 1; object-fit: cover; - margin-right: calc(-1 * var(--_overlap)); - box-shadow: .5rem .5rem 1rem rgb(0 0 0 / .4); - transition: margin-right ease-in-out 150ms; + box-shadow: .5rem .5rem 1rem rgb(0 0 0 / .2); + transition: margin ease-in-out 150ms; + } + + img:not(:first-child) { + margin-left: calc(-1 * var(--_overlap)); } } - &:hover .more img, video { - margin-right: 1rem; + &:hover .more img:not(:first-child) { + margin-left: 1rem; } } From e9e56d9d7583bfa987254de47b58eceff5dca3d3 Mon Sep 17 00:00:00 2001 From: Timm Friebe Date: Sat, 4 Jan 2025 14:35:49 +0100 Subject: [PATCH 03/11] Fix missing `alt` attribute for preview images --- src/main/handlebars/feed.handlebars | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/handlebars/feed.handlebars b/src/main/handlebars/feed.handlebars index e6f9b85..436516c 100755 --- a/src/main/handlebars/feed.handlebars +++ b/src/main/handlebars/feed.handlebars @@ -45,13 +45,13 @@ {{#with images.0}}
- {{title}}, {{date meta.dateTime format='d.m.Y H:i'}} + {{title}}, {{date meta.dateTime format='d.m.Y H:i'}}
{{/with}}
{{#each images}} {{#unless (equals @index 0)}} - + {{title}}, {{date meta.dateTime format='d.m.Y H:i'}} {{/unless}} {{/each}}
From ff0ffdcd643b103779b31157cd563924fcbb0e47 Mon Sep 17 00:00:00 2001 From: Timm Friebe Date: Sat, 4 Jan 2025 14:44:56 +0100 Subject: [PATCH 04/11] Use `playsinline` attribute for videos --- src/main/handlebars/partials/images.handlebars | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/handlebars/partials/images.handlebars b/src/main/handlebars/partials/images.handlebars index 9a26320..56dcf55 100755 --- a/src/main/handlebars/partials/images.handlebars +++ b/src/main/handlebars/partials/images.handlebars @@ -2,7 +2,7 @@ {{#each in.images}}
{{#if is.video}} - {{#with images.0}}
- {{title}}, {{date meta.dateTime format='d.m.Y H:i'}} + {{#if is.video}} + + {{else}} + {{title}}, {{date meta.dateTime format='d.m.Y H:i'}} + {{/if}}
{{/with}}
From 218f696c384d6525c166d9977acb9da1d4e06fed Mon Sep 17 00:00:00 2001 From: Timm Friebe Date: Sat, 4 Jan 2025 17:59:07 +0100 Subject: [PATCH 06/11] Add "play" button --- src/main/handlebars/feed.handlebars | 10 ++-------- src/main/handlebars/layout.handlebars | 10 ++++++++++ src/main/webapp/static/play.svg | 1 + 3 files changed, 13 insertions(+), 8 deletions(-) create mode 100755 src/main/webapp/static/play.svg diff --git a/src/main/handlebars/feed.handlebars b/src/main/handlebars/feed.handlebars index 66292d5..154c439 100755 --- a/src/main/handlebars/feed.handlebars +++ b/src/main/handlebars/feed.handlebars @@ -44,14 +44,8 @@ {{#with images.0}} -
- {{#if is.video}} - - {{else}} - {{title}}, {{date meta.dateTime format='d.m.Y H:i'}} - {{/if}} +
+ {{title}}, {{date meta.dateTime format='d.m.Y H:i'}}
{{/with}}
diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars index 5e0d1bd..5e86dc6 100755 --- a/src/main/handlebars/layout.handlebars +++ b/src/main/handlebars/layout.handlebars @@ -574,6 +574,16 @@ box-shadow: .25rem .25rem 1rem rgb(0 0 0 / .2); } + .is-video::after { + content: url('/static/play.svg'); + position: absolute; + inset: 0; + margin: auto; + width: max(5%, 2rem); + aspect-ratio: 1 / 1; + filter: drop-shadow(.25rem .25rem .25rem rgb(0 0 0 / .5)); + } + .more { --_size: 10rem; --_overlap: 8rem; diff --git a/src/main/webapp/static/play.svg b/src/main/webapp/static/play.svg new file mode 100755 index 0000000..1676722 --- /dev/null +++ b/src/main/webapp/static/play.svg @@ -0,0 +1 @@ + \ No newline at end of file From 426b3841c539c03917b06dc27a9a57ad3e27c2d0 Mon Sep 17 00:00:00 2001 From: Timm Friebe Date: Sat, 4 Jan 2025 18:15:44 +0100 Subject: [PATCH 07/11] Use is-... classes for preview --- src/main/handlebars/feed.handlebars | 2 +- src/main/handlebars/layout.handlebars | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/handlebars/feed.handlebars b/src/main/handlebars/feed.handlebars index 154c439..6455a76 100755 --- a/src/main/handlebars/feed.handlebars +++ b/src/main/handlebars/feed.handlebars @@ -42,7 +42,7 @@ {{> partials/weather in=.}}
- + {{#with images.0}}
{{title}}, {{date meta.dateTime format='d.m.Y H:i'}} diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars index 5e86dc6..a2b9174 100755 --- a/src/main/handlebars/layout.handlebars +++ b/src/main/handlebars/layout.handlebars @@ -559,7 +559,7 @@ grid-template-columns: 1fr; } - &.is-single video { + &.is-single, &.is-preview .image img, video { aspect-ratio: auto; } From 48b27e98ca8e299aa10fe315715ebe783a95efb6 Mon Sep 17 00:00:00 2001 From: Timm Friebe Date: Sat, 4 Jan 2025 18:24:42 +0100 Subject: [PATCH 08/11] Use :is() --- src/main/handlebars/layout.handlebars | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars index a2b9174..a3a9b66 100755 --- a/src/main/handlebars/layout.handlebars +++ b/src/main/handlebars/layout.handlebars @@ -559,15 +559,19 @@ grid-template-columns: 1fr; } - &.is-single, &.is-preview .image img, video { + &.is-single .image :is(img, video) { aspect-ratio: auto; } - &:where(.is-odd:not(.all)) .image:first-child { + &.is-preview .image :is(img, video) { + aspect-ratio: auto; + } + + &:is(.is-odd:not(.all)) .image:first-child { grid-column: 1 / 3; } - .image img, .image video { + .image :is(img, video) { aspect-ratio: 15 / 10; object-fit: cover; border-radius: .25rem; From cc0b9ffabcc16b10dae370aea146104fd4c30896 Mon Sep 17 00:00:00 2001 From: Timm Friebe Date: Sat, 4 Jan 2025 18:52:37 +0100 Subject: [PATCH 09/11] Fix problem on Safari on iOS --- src/main/handlebars/layout.handlebars | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars index a3a9b66..f4043a4 100755 --- a/src/main/handlebars/layout.handlebars +++ b/src/main/handlebars/layout.handlebars @@ -567,7 +567,7 @@ aspect-ratio: auto; } - &:is(.is-odd:not(.all)) .image:first-child { + &:where(.is-odd:not(.all)) .image:first-child { grid-column: 1 / 3; } From 87f693459b82fe50f1ad2c32c57f28623a210a48 Mon Sep 17 00:00:00 2001 From: Timm Friebe Date: Sun, 5 Jan 2025 09:25:43 +0100 Subject: [PATCH 10/11] Only expland collapsed image list when hovering over it --- src/main/handlebars/layout.handlebars | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars index f4043a4..5815453 100755 --- a/src/main/handlebars/layout.handlebars +++ b/src/main/handlebars/layout.handlebars @@ -612,10 +612,10 @@ img:not(:first-child) { margin-left: calc(-1 * var(--_overlap)); } - } - &:hover .more img:not(:first-child) { - margin-left: 1rem; + &:hover img:not(:first-child) { + margin-left: 1rem; + } } } From e9e1ff8cf3445591a18938daac5ae2d1b62463bb Mon Sep 17 00:00:00 2001 From: Timm Friebe Date: Sun, 5 Jan 2025 09:26:53 +0100 Subject: [PATCH 11/11] Adjust border radius to better fit in with rest of design --- src/main/handlebars/layout.handlebars | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars index 5815453..92c9be5 100755 --- a/src/main/handlebars/layout.handlebars +++ b/src/main/handlebars/layout.handlebars @@ -601,7 +601,7 @@ img { display: block; border: .25rem solid white; - border-radius: .5rem; + border-radius: .35rem; width: var(--_size); aspect-ratio: 1 / 1; object-fit: cover;