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

#95 PhotoCarousel

Browse source
This commit is contained in:
Jon McClure 2023-07-30 11:21:26 +01:00
parent f2fea5da9a
commit e178a81930
1 changed files with 17 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/components/PhotoCarousel/PhotoCarousel.svelte
View file

@ -98,7 +98,7 @@
</script> </script>
<Block width="{width}" id="{id}" class="photo-carousel {cls}"> <Block width="{width}" id="{id}" class="photo-carousel {cls}">
<div class="carousel-container" bind:clientWidth="{containerWidth}"> <div class="carousel-container mb-2" bind:clientWidth="{containerWidth}">
<Splide <Splide
hasTrack="{false}" hasTrack="{false}"
options="{{ options="{{
@ -114,9 +114,13 @@
<SplideTrack> <SplideTrack>
{#each photos as photo, i} {#each photos as photo, i}
<SplideSlide> <SplideSlide>
<div class="photo-slide"> <div class="photo-slide w-full h-full relative">
<figure style="height: {carouselHeight}px;"> <figure
class="m-0 w-full relative"
style="height: {carouselHeight}px;"
>
<img <img
class="w-full h-full"
data-splide-lazy="{photo.src}" data-splide-lazy="{photo.src}"
alt="{photo.altText}" alt="{photo.altText}"
style:object-fit="{photo.objectFit || style:object-fit="{photo.objectFit ||
@ -128,7 +132,7 @@
<slot name="credit" credit="{photo.credit}" /> <slot name="credit" credit="{photo.credit}" />
{:else} {:else}
<span <span
class="credit" class="credit absolute m-0 leading-tighter font-note text-xxs"
class:contain-fit="{photo.objectFit === 'contain' || class:contain-fit="{photo.objectFit === 'contain' ||
defaultImageObjectFit === 'contain'}" defaultImageObjectFit === 'contain'}"
>{photo.credit}</span >{photo.credit}</span
@ -149,7 +153,10 @@
/> />
{:else} {:else}
{#key activeImageIndex} {#key activeImageIndex}
<p class="caption" in:fly|local="{{ x: 20, duration: 175 }}"> <p
class="caption font-note text-secondary text-xs mb-0 mx-0 mt-0.5"
in:fly|local="{{ x: 20, duration: 175 }}"
>
{photos[activeImageIndex].caption} {photos[activeImageIndex].caption}
</p> </p>
{/key} {/key}
@ -178,30 +185,14 @@
@import '../../scss/mixins'; @import '../../scss/mixins';
.carousel-container { .carousel-container {
margin-bottom: 10px;
.photo-slide { .photo-slide {
height: 100%;
width: 100%;
position: relative;
figure { figure {
margin: 0;
width: 100%;
position: relative;
img {
height: 100%;
width: 100%;
}
span.credit { span.credit {
position: absolute;
bottom: 4px; bottom: 4px;
left: 10px; left: 10px;
margin: 0;
font-size: 0.7rem;
color: white; color: white;
letter-spacing: 0.75px;
text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333,
1px 1px 0 #333; 1px 1px 0 #333;
@include font-note;
&.contain-fit { &.contain-fit {
left: 50%; left: 50%;
transform: translate(-50%, 0%); transform: translate(-50%, 0%);
@ -223,7 +214,7 @@
padding-top: 4px; padding-top: 4px;
button { button {
display: flex; display: flex;
font-size: 12px; font-size: 14px;
height: 30px; height: 30px;
width: 30px; width: 30px;
padding: 0; padding: 0;
@ -232,11 +223,12 @@
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 50%; border-radius: 50%;
background-color: transparent; background-color: transparent;
cursor: pointer;
@include text-secondary; @include text-secondary;
opacity: 0.4; opacity: 0.4;
&:hover { &:hover {
opacity: 1; opacity: 1;
border-color: var(--theme-colour-text-secondary); border-color: $theme-colour-text-secondary;
@include text-secondary; @include text-secondary;
} }
&:disabled { &:disabled {
@ -262,8 +254,8 @@
border-radius: 0; border-radius: 0;
margin: 0 0px; margin: 0 0px;
padding: 0; padding: 0;
border: 1px solid var(--theme-colour-background); border: 1px solid $theme-colour-background;
background: var(--theme-colour-text-secondary); background: $theme-colour-text-secondary;
opacity: 0.4; opacity: 0.4;
&.is-active { &.is-active {
opacity: 1; opacity: 1;
@ -272,13 +264,5 @@
} }
} }
} }
p.caption {
margin: 5px 0 0;
@include font-note;
@include text-secondary;
font-size: 0.85rem;
line-height: 1.1rem;
font-weight: 300;
}
} }
</style> </style>