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/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/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/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/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 + {#if countryFlagId} + {filterCountry} flag + {:else} + + {/if}
    • @@ -82,12 +140,17 @@
    {#if filtered} - {/if}
    @@ -96,7 +159,7 @@
    - {#each Array(21) as _} + {#each Array(22 * 2) as _}
    image @@ -108,9 +171,10 @@

    Last updated: 4 days ago

    -
    @@ -118,7 +182,7 @@
    - +
    @@ -130,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"]) { 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/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; } 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/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; 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; diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index 23a4040..5556881 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,28 @@ } 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); } } - img { - color: #fff; + .icon { + display: block; + width: 20px; + height: 20px; + overflow: hidden; margin-right: 12px; + fill: #fff; + border-radius: 100%; + transition: fill 0.2s; @include bp (sm) { - margin-right: 16px; + width: 26px; + height: 26px; } } @@ -93,11 +109,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; @@ -107,8 +127,14 @@ height: 100%; cursor: pointer; } + } - &:hover { + // Hover + li:hover { + .icon { + fill: $color-secondary-light; + } + .select { background-color: $color-primary-tertiary20; } } @@ -142,6 +168,11 @@ // Reset link .reset { + margin-right: 16px; + padding: 0; + color: rgba($color-tertiary, 0.6); + font-weight: 900; + font-size: rem(14px); transition: color 0.3s; &:hover { @@ -158,7 +189,6 @@ background-color: $color-tertiary; padding: 0 16px; border-radius: 50vh; - margin-left: 16px; } } } @@ -166,18 +196,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 +238,6 @@ height: 100%; & > picture { - width: 100%; height: 100%; img { @@ -196,32 +245,90 @@ 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; } } } - // Controls + /** + * Controls + */ .controls { - grid-column: 1 / span var(--columns); + grid-column: span var(--columns); display: grid; margin: 48px auto; align-items: center; @@ -231,7 +338,7 @@ --columns: 22; grid-column: 2 / span var(--columns); justify-content: space-between; - margin: 80px auto; + margin: 80px 0; } // Updated Date @@ -245,7 +352,7 @@ margin: 24px 0 48px; @include bp (sm) { - grid-column: span 4; + grid-column: span 5; grid-row: 1; text-align: left; margin: 0; @@ -291,7 +398,7 @@ // Modules .grid-modules { - grid-column: 1 / span var(--columns); + grid-column: span var(--columns); margin-bottom: 0; @include bp (sm) {