flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'v2' of https://git.server.flayks.com/cetrucflotte/housesof into v2

Browse Source
This commit is contained in:
Shelby Kay
2021-10-07 14:47:55 +02:00
parent c66b8b0d90 3679ac9432
commit d397fdb00f
14 changed files with 273 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.local
View File

@@ -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"

4
src/components/atoms/Button.svelte
View File

@@ -10,12 +10,12 @@
</script>
{#if tag === 'button'}
<button class={classes}>
<button class={classes} on:click>
<slot />
{text}
</button>
{:else if tag === 'a'}
<a href={url} class={classes}>
<a href={url} class={classes} on:click>
<slot />
<span>{text}</span>
</a>

10
src/components/atoms/IconEarth.svelte Normal file
View File

File diff suppressed because one or more lines are too long

2
src/components/molecules/PostCard.svelte
View File

@@ -9,7 +9,7 @@
<div class="frame">
<img src="/images/icons/stamp.svg" width="32" height="42" alt="">
</div>
<Image class="flag" id="5a5bc9a1-9401-4e2f-88f2-ffd6c05acefb" width={32} height={32} />
<Image class="flag" id="5a5bc9a1-9401-4e2f-88f2-ffd6c05acefb" width={32} height={32} alt="country" />
</div>
<h3 class="post-card__country">
<span>Houses of <br></span>

16
src/components/molecules/Select.svelte
View File

@@ -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 @@
</span>
<select {name} {id} on:change={handleChange}>
{#each options as { value, name }}
<option {value}>
{#each options as { value, name }, index}
<option {value} selected={index === current}>
{name}
</option>
{/each}

3
src/routes/index.svelte
View File

@@ -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 @@
<p class="text-medium">{settings.description}</p>
<Button text="Explore locations" url="{path}#locations">
<img src="/images/icons/earth.svg" alt="explore globe">
<IconEarth animate={true} />
</Button>
</section>

105
src/routes/photos.svelte
View File

@@ -1,33 +1,85 @@
<script lang="ts">
import { getContext } from 'svelte'
import { fly } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
// Components
import Metas from '$components/Metas.svelte'
import IconEarth from '$components/atoms/IconEarth.svelte'
import Button from '$components/atoms/Button.svelte'
import Image from '$components/atoms/Image.svelte'
import DiscoverText from '$components/atoms/DiscoverText.svelte'
import PostCard from '$components/molecules/PostCard.svelte'
import Select from '$components/molecules/Select.svelte'
import Shop from '$components/organisms/Shop.svelte'
import Newsletter from '$components/organisms/Newsletter.svelte'
import Image from '$components/atoms/Image.svelte';
import PostCard from '$components/molecules/PostCard.svelte';
export let photos: any
const { country: countries }: any = getContext('global')
let filtered: boolean = false
let buttonReset: HTMLElement
let buttonShuffle: HTMLElement
// Filters
const defaultCountry = 'all'
const defaultSort = 'latest'
let filtered: boolean = false
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
}
}
/**
* Select change events
*/
// Location select
const handleLocationChange = ({ detail: value }) => {
// Country select
const handleCountryChange = ({ detail: value }) => {
console.log(value)
filtered = true
filterCountry = value
// TODO: Request photos from the country of choice
// TODO: Change URL query sort=value
}
// Sort select
const handleSortChange = ({ detail: value }) => {
console.log(value)
filtered = true
filterSort = value
// TODO: Request photos sorted by the choice
// TODO: Change URL query sort=value
}
/**
* Reset filters
*/
const resetFiltered = () => {
filtered = false
filterCountry = defaultCountry
filterSort = defaultSort
// TODO: Change URL query sort=defaultSort and country=defaultCountry
}
/**
* Load more photos from CTA
*/
const loadMorePhotos = () => {
console.log('load more photos')
// TODO: Append more photos from API including options and page
}
</script>
@@ -50,31 +102,37 @@
<ul>
<li>
<Select
name="location" id="filter_location"
base={{ value: 'all', name: 'Worldwide' }}
name="country" id="filter_country"
options={[
{ value: 'all', name: 'Worldwide' },
{ value: 'all', name: 'Worldwide', default: true },
...countries.map(({ slug, name }) => ({
value: slug,
name
name,
}))
]}
on:change={handleLocationChange}
on:change={handleCountryChange}
value={filterCountry}
>
<img src="/images/icons/earth.svg" alt="Earth">
{#if countryFlagId}
<Image id={countryFlagId} width={26} height={26} alt="{filterCountry} flag" class="icon" />
{:else}
<IconEarth class="icon" />
{/if}
</Select>
</li>
<li>
<Select
name="sort" id="filter_sort"
base={{ value: 'all', name: 'Worldwide' }}
options={[
{ value: 'latest', name: 'Latest photos' },
{ value: 'latest', name: 'Latest photos', default: true },
{ value: 'oldest', name: 'Oldest photos' },
]}
on:change={handleSortChange}
value={filterSort}
>
<img src="/images/icons/sort.svg" alt="Sort">
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg" aria-label="Sort icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.878 15.93h-4.172c-.638 0-1.153.516-1.153 1.154 0 .639.515 1.154 1.153 1.154h4.172c.638 0 1.153-.515 1.153-1.154a1.152 1.152 0 0 0-1.153-1.153Zm3.244-5.396h-7.405c-.639 0-1.154.515-1.154 1.153 0 .639.515 1.154 1.154 1.154h7.405c.639 0 1.154-.515 1.154-1.154a1.145 1.145 0 0 0-1.154-1.153Zm3.244-5.408h-10.65c-.638 0-1.153.515-1.153 1.154 0 .639.515 1.154 1.154 1.154h10.65c.638 0 1.153-.515 1.153-1.154 0-.639-.515-1.154-1.154-1.154ZM7.37 20.679V3.376c0-.145-.03-.289-.082-.433a1.189 1.189 0 0 0-.628-.618 1.197 1.197 0 0 0-.886 0 1.045 1.045 0 0 0-.36.237c-.01 0-.01 0-.021.01L.82 7.145a1.156 1.156 0 0 0 0 1.638 1.156 1.156 0 0 0 1.637 0l2.596-2.596v11.7l-2.596-2.595a1.156 1.156 0 0 0-1.637 0 1.156 1.156 0 0 0 0 1.638l4.573 4.573c.103.103.237.185.37.247.135.062.289.082.433.082h.02c.145 0 .3-.03.433-.093a1.14 1.14 0 0 0 .629-.628.987.987 0 0 0 .092-.432Z" />
</svg>
</Select>
</li>
</ul>
@@ -82,12 +140,17 @@
<div class="filter__actions">
{#if filtered}
<button class="reset button-link" bind:this={buttonReset}>
<button class="reset button-link" bind:this={buttonReset}
on:click={resetFiltered}
transition:fly={{ y: 4, duration: 600, easing: quartOut }}
>
Reset
</button>
{/if}
<button class="shuffle" bind:this={buttonShuffle}>
<img src="/images/icons/shuffle.svg" alt="">
<svg width="14" height="14" viewBox="0 0 14 14" fill="#3C0576" xmlns="http://www.w3.org/2000/svg" aria-label="Shuffle icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8168 13.7928C10.565 13.5166 10.565 13.0688 10.8168 12.7925L11.6371 11.8927C10.0729 11.7978 8.9174 11.2494 8.00077 10.4379C7.01752 9.56747 6.3426 8.41893 5.73606 7.382L5.72202 7.358C5.10114 6.29653 4.5499 5.35411 3.79106 4.65375C3.05738 3.97661 2.10408 3.50731 0.644748 3.50731C0.288663 3.50731 0 3.19063 0 2.8C0 2.40936 0.288666 2.09269 0.644751 2.09269C2.39889 2.0927 3.64837 2.6734 4.62121 3.57126C5.53188 4.41176 6.17567 5.5133 6.76119 6.51514L6.82133 6.61801C7.44316 7.68108 8.01476 8.63254 8.81058 9.33707C9.55258 9.99396 10.5204 10.4595 11.9721 10.491L10.8168 9.22362C10.565 8.9474 10.565 8.49956 10.8168 8.22333C11.0686 7.94711 11.4768 7.94711 11.7286 8.22333L13.8112 10.5079C14.0629 10.7842 14.0629 11.232 13.8112 11.5082L11.7286 13.7928C11.4768 14.0691 11.0686 14.0691 10.8168 13.7928ZM10.8168 5.77667C10.565 5.50045 10.565 5.0526 10.8168 4.77638L11.972 3.50905C10.5204 3.54053 9.55258 4.00608 8.81058 4.66297C8.50789 4.93094 8.23764 5.23463 7.98472 5.5666C7.73665 5.18234 7.48128 4.77156 7.2176 4.37967C7.45664 4.09011 7.71575 3.81442 8.00077 3.5621C8.9174 2.75061 10.0729 2.2022 11.6371 2.10738L10.8168 1.20745C10.565 0.931231 10.565 0.483387 10.8168 0.207166C11.0686 -0.0690553 11.4768 -0.0690553 11.7286 0.207166L13.8112 2.49177C14.0629 2.768 14.0629 3.21584 13.8112 3.49206L11.7286 5.77667C11.4768 6.05289 11.0686 6.05289 10.8168 5.77667ZM0 11.2C0 11.5907 0.288666 11.9073 0.644751 11.9073C2.39889 11.9073 3.64837 11.3266 4.62121 10.4288C4.82778 10.2381 5.02061 10.034 5.20215 9.82074C5.03927 9.5548 4.88613 9.293 4.73943 9.0422L4.73621 9.0367C4.647 8.88418 4.56006 8.73561 4.47456 8.59108C4.26231 8.86556 4.03764 9.11871 3.79106 9.34629C3.05738 10.0234 2.10408 10.4927 0.644748 10.4927C0.288663 10.4927 0 10.8094 0 11.2Z" />
</svg>
</button>
</div>
</div>
@@ -96,7 +159,7 @@
<section class="photos__content">
<div class="grid container">
<div class="photos__grid">
{#each Array(21) as _}
{#each Array(22 * 2) as _}
<div class="photo shadow-photo">
<a href="/country/location/photo-slug">
<Image id="5a45ba18-7b78-48e0-a299-302b1ea9b77b" width={1200} height={800} alt="image" />
@@ -108,9 +171,10 @@
<div class="controls grid">
<p class="controls__date">Last updated: 4 days ago</p>
<Button url="#" text="See more photos" />
<Button text="See more photos" tag="button" on:click={loadMorePhotos} />
<div class="controls__count">
<span class="current">21/</span>
<span class="current">21</span>
<span>/</span>
<span class="total">129</span>
</div>
</div>
@@ -118,7 +182,7 @@
<div class="grid-modules">
<div class="wrap">
<Shop />
<Newsletter />
<Newsletter theme="light" />
</div>
</div>
</div>
@@ -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"]) {

2
src/style/layout/_modules.scss
View File

@@ -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;

8
src/style/molecules/_switcher.scss
View File

@@ -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;
}

6
src/style/organisms/_footer.scss
View File

@@ -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;

8
src/style/organisms/_newsletter.scss
View File

@@ -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;

2
src/style/pages/_credits.scss
View File

@@ -52,7 +52,7 @@
line-height: 1;
@include bp (sm) {
grid-column: 1 / span 8;
grid-column: span 8;
font-size: rem(28px);
}
}

2
src/style/pages/_explore.scss
View File

@@ -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;

177
src/style/pages/_photos.scss
View File

@@ -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) {