From 27f3ce9f799b766aef381bc185d8371904f35ed0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 5 Oct 2021 19:38:14 +0200 Subject: [PATCH 01/11] Fix Newsletter module past issues link --- src/style/organisms/_newsletter.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/style/organisms/_newsletter.scss b/src/style/organisms/_newsletter.scss index e3934f0..2f53827 100644 --- a/src/style/organisms/_newsletter.scss +++ b/src/style/organisms/_newsletter.scss @@ -98,21 +98,23 @@ } a { + display: flex; + align-items: center; text-decoration: none; color: $color-text; } - span { + display: block; + padding-bottom: 2px; font-size: rem(14px); color: $color-text; margin-left: 8px; border-bottom: 1px solid $color-text; @include bp (sm) { - margin-left: 16px; + margin-left: 12px; } } - p { color: $color-gray; line-height: 1.3; From 67046d18fe003a9e3726851517b1b43e9b0dbf53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 5 Oct 2021 19:38:30 +0200 Subject: [PATCH 02/11] Fix controls on Photos page --- src/style/pages/_photos.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index 23a4040..908fb9c 100644 --- a/src/style/pages/_photos.scss +++ b/src/style/pages/_photos.scss @@ -219,7 +219,9 @@ } } - // Controls + /** + * Controls + */ .controls { grid-column: 1 / span var(--columns); display: grid; @@ -231,7 +233,7 @@ --columns: 22; grid-column: 2 / span var(--columns); justify-content: space-between; - margin: 80px auto; + margin: 80px 0; } // Updated Date From 84b37315538807e37d110f5cc39c50f0d29471e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 5 Oct 2021 20:59:49 +0200 Subject: [PATCH 03/11] Shorthand write grid-column when starting from 1 --- src/style/layout/_modules.scss | 2 +- src/style/organisms/_footer.scss | 6 +++--- src/style/pages/_credits.scss | 2 +- src/style/pages/_explore.scss | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/style/layout/_modules.scss b/src/style/layout/_modules.scss index 79bdee8..e89ed5b 100644 --- a/src/style/layout/_modules.scss +++ b/src/style/layout/_modules.scss @@ -11,7 +11,7 @@ } display: block; - grid-column: 1 / span var(--columns); + grid-column: span var(--columns); grid-template-columns: 1fr 40%; grid-column-gap: 48px; padding: 0; diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss index 38c2452..0ba7291 100644 --- a/src/style/organisms/_footer.scss +++ b/src/style/organisms/_footer.scss @@ -13,7 +13,7 @@ } .site-title { - grid-column: 1 / span var(--columns); + grid-column: span var(--columns); grid-row: 1; margin-bottom: 40px; @@ -29,7 +29,7 @@ } &__links { - grid-column: 1 / span var(--columns); + grid-column: span var(--columns); grid-row: 2; @include bp (sm) { @@ -69,7 +69,7 @@ } &__ctf { - grid-column: 1 / span var(--columns); + grid-column: span var(--columns); grid-row: 2; margin-left: auto; margin-top: auto; diff --git a/src/style/pages/_credits.scss b/src/style/pages/_credits.scss index 3081cc2..91009fe 100644 --- a/src/style/pages/_credits.scss +++ b/src/style/pages/_credits.scss @@ -52,7 +52,7 @@ line-height: 1; @include bp (sm) { - grid-column: 1 / span 8; + grid-column: span 8; font-size: rem(28px); } } diff --git a/src/style/pages/_explore.scss b/src/style/pages/_explore.scss index b5dc3d4..1567817 100644 --- a/src/style/pages/_explore.scss +++ b/src/style/pages/_explore.scss @@ -41,7 +41,7 @@ // Modules .grid-modules { - grid-column: 1 / span var(--columns); + grid-column: span var(--columns); margin: 96px 20px 0; padding-bottom: 40px; From 1869bd2eb610fdb6a914ea3dd305628d57d80bbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 5 Oct 2021 21:00:56 +0200 Subject: [PATCH 04/11] Change Switcher position with responsive --- src/style/molecules/_switcher.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/style/molecules/_switcher.scss b/src/style/molecules/_switcher.scss index 4ce1e57..d7d3d7c 100644 --- a/src/style/molecules/_switcher.scss +++ b/src/style/molecules/_switcher.scss @@ -2,10 +2,14 @@ $shadow-color: rgba(0, 0, 0, 0.05); position: fixed; z-index: 999; - bottom: 0; - left: 0; + bottom: 16px; + left: 16px; @include bp (sm) { + bottom: 20px; + left: 20px; + } + @include bp (md) { bottom: 40px; left: 40px; } From 6af5e55be34ae2fd8f9d3453b22ed9972e8962d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 5 Oct 2021 21:02:25 +0200 Subject: [PATCH 05/11] Make selects and reset button reactive on Photos filters --- src/components/molecules/Select.svelte | 16 ++++-- src/routes/photos.svelte | 70 +++++++++++++++++++------- 2 files changed, 65 insertions(+), 21 deletions(-) diff --git a/src/components/molecules/Select.svelte b/src/components/molecules/Select.svelte index fd6e7c0..be4ed53 100644 --- a/src/components/molecules/Select.svelte +++ b/src/components/molecules/Select.svelte @@ -4,19 +4,27 @@ interface Option { value: string name: string + default?: boolean } export let id: string export let name: string - export let base: Option export let options: Option[] + export let value: string = undefined const dispatch = createEventDispatcher() + const defaultOption = options.find(option => option.default) + const defaultOptionIndex = options.findIndex(option => option.default) - let current: number = 0 + let current: number = defaultOptionIndex let currentOptionEl: HTMLElement $: currentOption = options[current] + // Redefine value from parent (when reset) + $: if (value === defaultOption.value) { + current = defaultOptionIndex + } + /** * When changing select value @@ -37,8 +45,8 @@ ({ value: slug, - name + name, })) ]} - on:change={handleLocationChange} + on:change={handleCountryChange} + value={filterCountry} > Earth @@ -67,14 +96,16 @@
    • @@ -82,12 +113,17 @@
    {#if filtered} - {/if}
    @@ -96,7 +132,7 @@
    - {#each Array(21) as _} + {#each Array(22 * 2) as _}
    image @@ -118,7 +154,7 @@
    - +
    From 26e3492c5ec981fa1c782c081f3e79f8f457b6ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 5 Oct 2021 21:05:05 +0200 Subject: [PATCH 06/11] Make Earth icon a reusable component --- src/components/atoms/IconEarth.svelte | 10 ++++++++++ src/routes/index.svelte | 3 ++- src/routes/photos.svelte | 2 +- 3 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 src/components/atoms/IconEarth.svelte diff --git a/src/components/atoms/IconEarth.svelte b/src/components/atoms/IconEarth.svelte new file mode 100644 index 0000000..9b48c5c --- /dev/null +++ b/src/components/atoms/IconEarth.svelte @@ -0,0 +1,10 @@ + + + + + \ No newline at end of file diff --git a/src/routes/index.svelte b/src/routes/index.svelte index f8b79fc..c98fdd8 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -4,6 +4,7 @@ // Components import Metas from '$components/Metas.svelte' import Button from '$components/atoms/Button.svelte' + import IconEarth from '$components/atoms/IconEarth.svelte' import BoxCTA from '$components/atoms/BoxCTA.svelte' import DiscoverText from '$components/atoms/DiscoverText.svelte' import PhotoCard from '$components/molecules/PhotoCard.svelte' @@ -31,7 +32,7 @@

    {settings.description}

    diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte index f4a8a4b..94107a3 100644 --- a/src/routes/photos.svelte +++ b/src/routes/photos.svelte @@ -90,7 +90,7 @@ on:change={handleCountryChange} value={filterCountry} > - Earth +
  • From 9c36b2dbf670b40931710b2084a2eb22ec5890fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 5 Oct 2021 21:05:42 +0200 Subject: [PATCH 07/11] =?UTF-8?q?=F0=9F=94=A5=20Create=20Photos=20grid=20f?= =?UTF-8?q?or=20mobile=20and=20desktop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/molecules/PostCard.svelte | 2 +- src/style/pages/_photos.scss | 130 +++++++++++++++++++---- 2 files changed, 109 insertions(+), 23 deletions(-) diff --git a/src/components/molecules/PostCard.svelte b/src/components/molecules/PostCard.svelte index d1c6db5..94af05c 100644 --- a/src/components/molecules/PostCard.svelte +++ b/src/components/molecules/PostCard.svelte @@ -9,7 +9,7 @@
    - + country

    Houses of
    diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index 908fb9c..897753e 100644 --- a/src/style/pages/_photos.scss +++ b/src/style/pages/_photos.scss @@ -80,9 +80,10 @@ margin: 0 2px; } } - img { - color: #fff; + .icon { + fill: #fff; margin-right: 12px; + transition: fill 0.2s; @include bp (sm) { margin-right: 16px; @@ -107,8 +108,14 @@ height: 100%; cursor: pointer; } + } - &:hover { + // Hover + li:hover { + .icon { + fill: $color-secondary-light; + } + .select { background-color: $color-primary-tertiary20; } } @@ -142,6 +149,10 @@ // Reset link .reset { + padding: 0; + color: rgba($color-tertiary, 0.6); + font-weight: 900; + font-size: rem(14px); transition: color 0.3s; &:hover { @@ -166,18 +177,38 @@ // Content Block &__content { background-color: $color-tertiary; - width: 100%; // margin: 0 12px; - padding: 64px 0; + padding: 20px 0; + border-radius: 6px; + + @include bp (sm) { + padding: 64px 0; + border-radius: 8px; + } } // Photo Grid &__grid { - grid-column: 2 / span 22; display: grid; - grid-template-columns: repeat(4, 1fr); - grid-gap: 40px; + grid-column: span var(--columns); + // Template: 2 / 1-1 + grid-template-columns: repeat(2, 1fr); + grid-gap: 16px; + @include bp (mob-lg) { + grid-gap: 20px; + } + @include bp (sm) { + // Swich to template: 2-1-1 / 1-1-2 / 4 + grid-column: 2 / span 22; + grid-template-columns: repeat(4, 1fr); + grid-gap: 24px; + } + @include bp (sd) { + grid-gap: 40px; + } + + // Photo .photo { overflow: hidden; border-radius: 6px; @@ -188,7 +219,6 @@ height: 100%; & > picture { - width: 100%; height: 100%; img { @@ -196,25 +226,81 @@ width: 100%; height: 100%; object-fit: cover; + pointer-events: none; + user-select: none; } } } + /** + * Photo sizes + */ + // MOBILE + // 1st photo = 2 columns + &:nth-child(5n + 1) { + @include bp (sm, max) { + grid-column: span 2; + grid-row: span 2; + margin-bottom: 8px; + } + } + // 4 next photos = 1 column each + &:nth-child(5n + 4), + &:nth-child(5n + 5) { + @include bp (sm, max) { + margin-bottom: 8px; + } + } + + + // DESKTOP + // 1st photo = left 2 columns, 2 rows + &:nth-child(11n + 1){ + @include bp (sm) { + grid-column: span 2; + grid-row: span 2; + } + } + // 8th photo = right 2 columns, 2 rows + &:nth-child(11n + 8){ + @include bp (sm) { + grid-column: 3 / span 2; + grid-row: span 2; + } + } + // 11th photo = 4 columns + &:nth-child(11n){ + @include bp (sm) { + grid-column: span 4; + } + } + // Additional spacing between grid patterns + &:nth-child(11n + 11){ + @include bp (sm) { + margin-top: 12px; + } + @include bp (sd) { + margin-top: 16px; + } + } + &:nth-child(11n), + &:nth-child(11n + 1), + &:nth-child(11n + 4), + &:nth-child(11n + 5){ + @include bp (sm) { + margin-bottom: 12px; + } + @include bp (sd) { + margin-bottom: 16px; + } + } + + // Postcard .post-card { position: absolute; bottom: 0; right: 0; - } - - // Photo sizes - &:nth-child(11n+1) { - grid-column: 1 / span 2; - } - &:nth-child(11n+8) { - grid-column: 3 / span 2; - } - &:nth-child(11n) { - grid-column: 1 / span 4; + display: none; } } } @@ -223,7 +309,7 @@ * Controls */ .controls { - grid-column: 1 / span var(--columns); + grid-column: span var(--columns); display: grid; margin: 48px auto; align-items: center; @@ -293,7 +379,7 @@ // Modules .grid-modules { - grid-column: 1 / span var(--columns); + grid-column: span var(--columns); margin-bottom: 0; @include bp (sm) { From 4a793b49af0b1c9c66361b5285346362f9602a21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 5 Oct 2021 23:10:33 +0200 Subject: [PATCH 08/11] Fix some responsive issues on Photos page --- src/style/pages/_photos.scss | 38 ++++++++++++++++++++++++++---------- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index 897753e..3250192 100644 --- a/src/style/pages/_photos.scss +++ b/src/style/pages/_photos.scss @@ -9,9 +9,9 @@ // Title h1 { + margin-top: -20px; color: $color-secondary; line-height: 1; - margin-top: -20px; @include bp (sm) { margin-top: -100px; @@ -19,7 +19,7 @@ } // Text p { - max-width: 350px; + max-width: 456px; margin: 20px auto 56px; @include bp (sm) { @@ -34,7 +34,11 @@ position: relative; max-width: 982px; margin: 0 auto; - padding: 0 32px; + padding: 0 16px; + + @include bp (sm) { + padding: 0 32px; + } // Span &__label { @@ -54,13 +58,17 @@ display: flex; justify-content: center; align-items: center; - height: 72px; + min-height: 64px; margin: 20px 0; - padding: 0 22px; + padding: 0 12px; background: $color-primary-darker; border-radius: 50vh; + @include bp (mob-lg) { + padding: 0 16px; + } @include bp (sm) { + height: 72px; padding: 28px 32px; } @@ -72,20 +80,26 @@ } li { display: block; - margin: 8px 10px; - font-size: rem(16px); + margin: 8px 2px; + font-size: rem(14px); color: #fff; @include bp (sm) { margin: 0 2px; + font-size: rem(16px); } } .icon { + display: block; + width: 20px; + height: 20px; fill: #fff; margin-right: 12px; transition: fill 0.2s; @include bp (sm) { + width: 26px; + height: 26px; margin-right: 16px; } } @@ -94,11 +108,15 @@ position: relative; display: flex; align-items: center; - padding: 8px 16px; + padding: 8px 12px 8px 8px; font-weight: 900; border-radius: 100vh; transition: background-color 0.2s; + @include bp (sm) { + padding: 8px 16px; + } + select { opacity: 0; position: absolute; @@ -149,6 +167,7 @@ // Reset link .reset { + margin-right: 16px; padding: 0; color: rgba($color-tertiary, 0.6); font-weight: 900; @@ -169,7 +188,6 @@ background-color: $color-tertiary; padding: 0 16px; border-radius: 50vh; - margin-left: 16px; } } } @@ -333,7 +351,7 @@ margin: 24px 0 48px; @include bp (sm) { - grid-column: span 4; + grid-column: span 5; grid-row: 1; text-align: left; margin: 0; From d0fedfcc8075ced8cdc1489b215b4c074bb0719a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 5 Oct 2021 23:39:39 +0200 Subject: [PATCH 09/11] Update icon on Select when changing country on Photos --- src/routes/photos.svelte | 20 +++++++++++++++++--- src/style/pages/_photos.scss | 5 +++-- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte index 94107a3..cb4c53c 100644 --- a/src/routes/photos.svelte +++ b/src/routes/photos.svelte @@ -24,8 +24,18 @@ const defaultCountry = 'all' const defaultSort = 'latest' let filtered: boolean = false - let filterCountry = defaultCountry - let filterSort = defaultSort + let filterCountry: any = defaultCountry + let filterSort: string = defaultSort + let countryFlagId: string + + // Define country flag from selection + $: { + if (filterCountry !== defaultCountry) { + countryFlagId = countries.find((country: any) => country.slug === filterCountry).flag.id + } else { + countryFlagId = undefined + } + } /** @@ -90,7 +100,11 @@ on:change={handleCountryChange} value={filterCountry} > - + {#if countryFlagId} + {filterCountry} flag + {:else} + + {/if}

  • diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index 3250192..5556881 100644 --- a/src/style/pages/_photos.scss +++ b/src/style/pages/_photos.scss @@ -93,14 +93,15 @@ display: block; width: 20px; height: 20px; - fill: #fff; + overflow: hidden; margin-right: 12px; + fill: #fff; + border-radius: 100%; transition: fill 0.2s; @include bp (sm) { width: 26px; height: 26px; - margin-right: 16px; } } From 012dba9a6b34bd989c6af6c652717b0db36661df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 5 Oct 2021 23:40:25 +0200 Subject: [PATCH 10/11] Fix Photos grid bottom elements --- src/components/atoms/Button.svelte | 4 ++-- src/routes/photos.svelte | 14 ++++++++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/atoms/Button.svelte b/src/components/atoms/Button.svelte index 27658f8..51de99e 100644 --- a/src/components/atoms/Button.svelte +++ b/src/components/atoms/Button.svelte @@ -10,12 +10,12 @@ {#if tag === 'button'} - {:else if tag === 'a'} - + {text} diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte index cb4c53c..39fe76d 100644 --- a/src/routes/photos.svelte +++ b/src/routes/photos.svelte @@ -67,6 +67,15 @@ filtered = false filterCountry = defaultCountry filterSort = defaultSort + + + + /** + * Load more photos from CTA + */ + const loadMorePhotos = () => { + console.log('load more photos') + // TODO: Append more photos from API including options and page } @@ -158,9 +167,10 @@

    Last updated: 4 days ago

    -
    From 3679ac9432e5fb289706008210bd858d98d124ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 5 Oct 2021 23:41:11 +0200 Subject: [PATCH 11/11] Prepare tasks todo for fetching data on Photos page --- .env.local | 2 ++ src/routes/photos.svelte | 5 +++++ 2 files changed, 7 insertions(+) diff --git a/.env.local b/.env.local index a9986a5..2a3c738 100644 --- a/.env.local +++ b/.env.local @@ -1,6 +1,8 @@ # Options VITE_LIMIT_TIME=2 * 7 * 24 * 60 * 60 * 1000 VITE_PREVIEW_COUNT=4 +VITE_GRID_AMOUNT=21 +VITE_GRID_INCREMENT=21 # API related # VITE_API_URL_DEV="http://192.168.1.19:8055" diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte index 39fe76d..d6e70ac 100644 --- a/src/routes/photos.svelte +++ b/src/routes/photos.svelte @@ -48,6 +48,7 @@ filterCountry = value // TODO: Request photos from the country of choice + // TODO: Change URL query sort=value } // Sort select @@ -57,6 +58,7 @@ filterSort = value // TODO: Request photos sorted by the choice + // TODO: Change URL query sort=value } @@ -68,6 +70,8 @@ filterCountry = defaultCountry filterSort = defaultSort + // TODO: Change URL query sort=defaultSort and country=defaultCountry + } /** @@ -190,6 +194,7 @@ import { fetchAPI } from '$utils/api' export async function load ({ page, session, fetch, context }) { + // TODO: Implement query parameters from URL (country, sort) const res = await fetchAPI(` query { photo (limit: 11, sort: ["-date_created"]) {