Add style to Photo Viewer page
This commit is contained in:
7
src/components/atoms/ButtonCircle.svelte
Normal file
7
src/components/atoms/ButtonCircle.svelte
Normal file
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<button class="button-circle" on:click>
|
||||
<slot />
|
||||
</button>
|
||||
@@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
|
||||
export let color: string = undefined
|
||||
export let flip: boolean = false
|
||||
</script>
|
||||
|
||||
<svg class="arrow arrow--{color}" width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg class="arrow arrow--{color}" class:arrow--flip={flip} width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.67961 11.8224C4.34487 12.1571 4.34487 12.6999 4.67961 13.0346C5.01434 13.3693 5.55705 13.3693 5.89179 13.0346L11.3204 7.60602C11.6551 7.27129 11.6551 6.72857 11.3204 6.39384L5.89179 0.965267C5.55705 0.630532 5.01434 0.630532 4.67961 0.965267C4.34487 1.3 4.34487 1.84271 4.67961 2.17745L8.64494 6.14279L1.2857 6.14279C0.812311 6.14279 0.428555 6.52654 0.428555 6.99993C0.428555 7.47332 0.812311 7.85707 1.2857 7.85707L8.64494 7.85707L4.67961 11.8224Z" fill="#000"/>
|
||||
</svg>
|
||||
|
||||
@@ -4,6 +4,8 @@
|
||||
import advancedFormat from 'dayjs/plugin/advancedFormat.js'
|
||||
// Components
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
import IconArrow from '$components/atoms/IconArrow.svelte'
|
||||
import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
|
||||
|
||||
export let photos: any[]
|
||||
export let location: any
|
||||
@@ -40,32 +42,49 @@
|
||||
</script>
|
||||
|
||||
|
||||
<h1>Title</h1>
|
||||
<p>{currentPhoto.title}</p>
|
||||
<main class="viewer-photo grid">
|
||||
<div class="viewer-photo__carousel">
|
||||
<div class="viewer-photo__images">
|
||||
<Image
|
||||
class="photo"
|
||||
id={currentPhoto.image.id}
|
||||
alt={currentPhoto.title}
|
||||
sizeKey="photo-list"
|
||||
sizes={{
|
||||
small: { width: 500 },
|
||||
medium: { width: 850 },
|
||||
large: { width: 1280 },
|
||||
}}
|
||||
ratio={1.5}
|
||||
/>
|
||||
|
||||
<h2>Location</h2>
|
||||
<p>{location.name}, {location.country.name}</p>
|
||||
<span style="vertical-align: middle;">·</span>
|
||||
<time class="text-date" datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>
|
||||
{dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}
|
||||
</time>
|
||||
<div class="viewer-photo__controls">
|
||||
<ButtonCircle on:click={goToPrevious}>
|
||||
<IconArrow
|
||||
color="pink"
|
||||
flip={true}
|
||||
/>
|
||||
</ButtonCircle>
|
||||
<ButtonCircle on:click={goToPrevious}>
|
||||
<IconArrow
|
||||
color="pink"
|
||||
/>
|
||||
</ButtonCircle>
|
||||
</div>
|
||||
|
||||
<button on:click={goToPrevious}>Previous</button>
|
||||
<button on:click={goToNext}>Next</button>
|
||||
<p class="viewer-photo__index title-index">{currentIndex + 1}</p>
|
||||
</div>
|
||||
|
||||
<Image
|
||||
id={currentPhoto.image.id}
|
||||
alt={currentPhoto.title}
|
||||
sizeKey="photo-list"
|
||||
sizes={{
|
||||
small: { width: 500 },
|
||||
medium: { width: 850 },
|
||||
large: { width: 1280 },
|
||||
}}
|
||||
ratio={1.5}
|
||||
/>
|
||||
|
||||
<p>index: {currentIndex + 1}</p>
|
||||
<div class="viewer-photo__info">
|
||||
<h1 class="title-medium">{currentPhoto.title}</h1>
|
||||
|
||||
<div class="detail text-date">
|
||||
<img src="/images/icons/map-pin.svg" alt=""><span>{location.name}, {location.country.name}</span> <span class="sep">·</span> <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<script context="module" lang="ts">
|
||||
|
||||
@@ -6,4 +6,14 @@
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&--pink {
|
||||
path {
|
||||
fill: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
&--flip {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
15
src/style/atoms/_button-circle.scss
Normal file
15
src/style/atoms/_button-circle.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.button-circle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background-color: #fff;
|
||||
border-radius: 100vh;
|
||||
|
||||
& > * {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
141
src/style/pages/_viewer-photo.scss
Normal file
141
src/style/pages/_viewer-photo.scss
Normal file
@@ -0,0 +1,141 @@
|
||||
.viewer-photo {
|
||||
height: 100vh;
|
||||
|
||||
@include bp (md, max) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Carousel
|
||||
&__carousel {
|
||||
display: grid;
|
||||
grid-row-gap: 20px;
|
||||
margin: auto 8px;
|
||||
height: 100%;
|
||||
|
||||
@include bp (md) {
|
||||
margin: auto 0;
|
||||
grid-column: 3 / span 16;
|
||||
}
|
||||
}
|
||||
|
||||
// Images
|
||||
&__images {
|
||||
position: relative;
|
||||
margin: auto 0 0;
|
||||
|
||||
.photo {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 12px 12px rgba(#000, 0.15),
|
||||
0 20px 20px rgba(#000, 0.15),
|
||||
0 48px 48px rgba(#000, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
// Infos
|
||||
&__info {
|
||||
margin-top: auto;
|
||||
margin-bottom: 40px;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
|
||||
@include bp (md) {
|
||||
margin-top: 26px;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
@include bp (lg) {
|
||||
display: grid;
|
||||
grid-template-columns: 55% 45%;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $color-secondary;
|
||||
font-size: rem(32px);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
// Details
|
||||
.detail {
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
margin-top: 24px;
|
||||
color: $color-tertiary;
|
||||
line-height: 1.5;
|
||||
|
||||
@include bp (lg) {
|
||||
margin-top: 0;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
// Icon
|
||||
img {
|
||||
display: inline-block;
|
||||
margin-top: -5px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
// Separator
|
||||
.sep {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Index
|
||||
&__index {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
bottom: calc(92% + 1vw);
|
||||
line-height: 1;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
color: rgba($color-tertiary, 0.4);
|
||||
|
||||
@include bp (md, max) {
|
||||
font-size: clamp(#{rem(80px)}, 24vw, #{rem(120px)});
|
||||
}
|
||||
@include bp (md) {
|
||||
top: 50%;
|
||||
left: 95%;
|
||||
width: 350px;
|
||||
text-align: center;
|
||||
bottom: auto;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Controls
|
||||
&__controls {
|
||||
display: none;
|
||||
|
||||
@include bp (md) {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
left: -28px;
|
||||
right: -28px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
// Image
|
||||
.photo {
|
||||
grid-column: 3 / span 16;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -35,6 +35,7 @@
|
||||
// Atomic Design System
|
||||
// Atoms
|
||||
@import "atoms/button";
|
||||
@import "atoms/button-circle";
|
||||
@import "atoms/badge";
|
||||
@import "atoms/arrow";
|
||||
@import "atoms/discover";
|
||||
@@ -59,7 +60,7 @@
|
||||
|
||||
|
||||
// Pages
|
||||
// @import "pages/page";
|
||||
@import "pages/viewer-photo";
|
||||
|
||||
// Misc
|
||||
@import "animations";
|
||||
Reference in New Issue
Block a user