wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

#95 PhotoPack

Browse source
This commit is contained in:
Jon McClure 2023-07-30 10:22:45 +01:00
parent 4d3b1ee61f
commit 1d08b2d460
1 changed files with 15 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/components/PhotoPack/PhotoPack.svelte
View file

@ -90,22 +90,29 @@
</script> </script>
<Block width="{width}" id="{id}" class="photopack {cls}"> <Block width="{width}" id="{id}" class="photopack {cls}">
<div class="photopack-container" bind:clientWidth="{containerWidth}"> <div
class="photopack-container w-full mb-2"
bind:clientWidth="{containerWidth}"
>
{#each rows as row, ri} {#each rows as row, ri}
<div <div
class="photopack-row" class="photopack-row flex justify-between"
style:gap="0 {gap}px" style:gap="0 {gap}px"
style:margin-bottom="{gap + 'px'}" style:margin-bottom="{gap + 'px'}"
> >
{#each row as img, i} {#each row as img, i}
<figure aria-labelledby="{id}-figure-{ri}-{i}"> <figure
class="relative m-0 p-0 flex-1"
aria-labelledby="{id}-figure-{ri}-{i}"
>
<img <img
class="m-0 w-full h-full"
src="{img.src}" src="{img.src}"
alt="{img.altText}" alt="{img.altText}"
style:max-height="{img.maxHeight ? img.maxHeight + 'px' : ''}" style:max-height="{img.maxHeight ? img.maxHeight + 'px' : ''}"
/> />
{#if !img.altText} {#if !img.altText}
<div class="alt-warning">altText</div> <div class="alt-warning absolute text-xxs py-1 px-2">altText</div>
{/if} {/if}
</figure> </figure>
{/each} {/each}
@ -118,7 +125,7 @@
{#each rows as row, ri} {#each rows as row, ri}
{#each row as img, i} {#each row as img, i}
{#if img.caption} {#if img.caption}
<div id="{id}-figure-{ri}-{i}" class="caption"> <div id="{id}-figure-{ri}-{i}" class="caption mt-0 mx-0 fmb-2">
{@html marked(img.caption)} {@html marked(img.caption)}
</div> </div>
{/if} {/if}
@ -133,33 +140,16 @@
@import '../../scss/mixins'; @import '../../scss/mixins';
div.photopack-container { div.photopack-container {
display: block;
width: 100%;
margin-bottom: 10px;
div.photopack-row { div.photopack-row {
display: flex;
justify-content: space-between;
figure { figure {
flex: 1;
margin: 0;
padding: 0;
position: relative;
img { img {
margin: 0;
width: 100%;
height: 100%;
object-fit: cover; object-fit: cover;
} }
div.alt-warning { div.alt-warning {
@include font-sans;
padding: 5px 10px;
background-color: red; background-color: red;
color: white; color: white;
position: absolute;
top: 0; top: 0;
right: 0; right: 0;
font-size: 14px;
line-height: 16px;
} }
} }
} }
@ -167,17 +157,15 @@
div.captions-container { div.captions-container {
div.caption { div.caption {
margin: 0 0 0.6rem;
&:last-of-type { &:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
:global(p) { :global(p) {
font-size: 0.85rem; @include text-xs;
line-height: 1.1rem; @include leading-tight;
@include font-sans; @include font-note;
@include text-secondary; @include text-secondary;
margin: 0; margin: 0;
font-weight: 300;
} }
} }
} }