Create Photos page with filter bar
This commit is contained in:
95
src/routes/photos.svelte
Normal file
95
src/routes/photos.svelte
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { getContext } from 'svelte'
|
||||||
|
import { page } from '$app/stores'
|
||||||
|
// Components
|
||||||
|
import Metas from '$components/Metas.svelte'
|
||||||
|
import Button from '$components/atoms/Button.svelte'
|
||||||
|
import BoxCTA from '$components/atoms/BoxCTA.svelte'
|
||||||
|
import PhotoCard from '$components/molecules/PhotoCard.svelte'
|
||||||
|
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
|
||||||
|
import Locations from '$components/organisms/Locations.svelte'
|
||||||
|
import Shop from '$components/organisms/Shop.svelte'
|
||||||
|
import Newsletter from '$components/organisms/Newsletter.svelte'
|
||||||
|
|
||||||
|
export let photos: any
|
||||||
|
|
||||||
|
const { settings, location, count }: any = getContext('global')
|
||||||
|
const { path } = $page
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Metas
|
||||||
|
title="Photos"
|
||||||
|
description=""
|
||||||
|
image=""
|
||||||
|
/>
|
||||||
|
|
||||||
|
<main class="photos">
|
||||||
|
<section class="photos__intro">
|
||||||
|
<h1 class="title-huge">Houses</h1>
|
||||||
|
<p class="discover">
|
||||||
|
Discover <strong>{count.photos} homes</strong><br>
|
||||||
|
from <strong>{count.locations} cities</strong>
|
||||||
|
of <strong>{count.countries} countries</strong>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="filter">
|
||||||
|
<span class="text-label filter__label">Filter photos</span>
|
||||||
|
|
||||||
|
<div class="filter__bar">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="select">
|
||||||
|
<img src="/images/icons/earth.svg" alt="Earth">
|
||||||
|
<span>Worldwide</span>
|
||||||
|
<select name="location" id="filter_location">
|
||||||
|
<option value="worldwide">Worldwide</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="select">
|
||||||
|
<img src="/images/icons/sort.svg" alt="Sort">
|
||||||
|
<span>Worldwide</span>
|
||||||
|
<select name="location" id="filter_location">
|
||||||
|
<option value="worldwide">Worldwide</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter__actions">
|
||||||
|
<a href="#">Reset</a>
|
||||||
|
<button class="shuffle">
|
||||||
|
<img src="/images/icons/shuffle.svg" alt="">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<script context="module" lang="ts">
|
||||||
|
import { fetchAPI } from '$utils/api'
|
||||||
|
|
||||||
|
export async function load ({ page, session, fetch, context }) {
|
||||||
|
const res = await fetchAPI(`
|
||||||
|
query {
|
||||||
|
photo (limit: 11, sort: ["-date_created"]) {
|
||||||
|
image {
|
||||||
|
id
|
||||||
|
title
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`)
|
||||||
|
|
||||||
|
const { data } = res
|
||||||
|
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
photos: data.photo,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
144
src/style/pages/_photos.scss
Normal file
144
src/style/pages/_photos.scss
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
// Photos Page
|
||||||
|
.photos {
|
||||||
|
// Intro Section
|
||||||
|
&__intro {
|
||||||
|
color: $color-text;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-bottom: clamp(250px, 27vw, 600px);
|
||||||
|
|
||||||
|
// Title
|
||||||
|
h1 {
|
||||||
|
color: $color-secondary;
|
||||||
|
line-height: 1;
|
||||||
|
margin-top: -20px;
|
||||||
|
|
||||||
|
@include bp (sm) {
|
||||||
|
margin-top: -100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Text
|
||||||
|
p {
|
||||||
|
max-width: 350px;
|
||||||
|
margin: 20px auto 56px;
|
||||||
|
|
||||||
|
@include bp (sm) {
|
||||||
|
margin: 50px auto 72px;
|
||||||
|
max-width: 524px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter
|
||||||
|
.filter {
|
||||||
|
position: relative;
|
||||||
|
max-width: 982px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 32px;
|
||||||
|
|
||||||
|
// Span
|
||||||
|
&__label {
|
||||||
|
display: block;
|
||||||
|
color: rgba($color-tertiary, 0.7);
|
||||||
|
|
||||||
|
@include bp (sm) {
|
||||||
|
position: absolute;
|
||||||
|
left: 64px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 20px 22px;
|
||||||
|
background: $color-primary-darker;
|
||||||
|
border-radius: 50vh;
|
||||||
|
|
||||||
|
@include bp (sm) {
|
||||||
|
padding: 28px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display: block;
|
||||||
|
margin: 8px 10px;
|
||||||
|
font-size: rem(16px);
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
@include bp (sm) {
|
||||||
|
margin: 0 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
color: #fff;
|
||||||
|
margin-right: 12px;
|
||||||
|
|
||||||
|
@include bp (sm) {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.select {
|
||||||
|
position: relative;
|
||||||
|
font-weight: 900;
|
||||||
|
|
||||||
|
select {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
&__actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
@include bp (sm) {
|
||||||
|
position: absolute;
|
||||||
|
right: 64px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
color: rgba(#fff, 0.6);
|
||||||
|
font-size: rem(14px);
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shuffle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 32px;
|
||||||
|
background-color: $color-tertiary;
|
||||||
|
padding: 0 16px;
|
||||||
|
border-radius: 50vh;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -21,6 +21,7 @@
|
|||||||
|
|
||||||
// Pages
|
// Pages
|
||||||
@import "pages/homepage";
|
@import "pages/homepage";
|
||||||
|
@import "pages/photos";
|
||||||
|
|
||||||
// Modules
|
// Modules
|
||||||
@import "modules/globe";
|
@import "modules/globe";
|
||||||
|
|||||||
3
static/images/icons/shuffle.svg
Normal file
3
static/images/icons/shuffle.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8168 13.7928C10.565 13.5166 10.565 13.0688 10.8168 12.7926L11.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.09269 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.63253 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" fill="#3C0576"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
12
static/images/icons/sort.svg
Normal file
12
static/images/icons/sort.svg
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#a)" fill-rule="evenodd" clip-rule="evenodd" fill="#fff">
|
||||||
|
<path d="M9.407 6.379c0-.622.504-1.125 1.125-1.125h10.343a1.125 1.125 0 0 1 0 2.25H10.532a1.125 1.125 0 0 1-1.125-1.125Zm0 5.247c0-.622.504-1.125 1.125-1.125h7.195a1.125 1.125 0 0 1 0 2.25h-7.195a1.125 1.125 0 0 1-1.125-1.125Zm1.125 4.122a1.125 1.125 0 0 0 0 2.25h4.046a1.125 1.125 0 0 0 0-2.25h-4.046ZM-.046 7.214l4.442-4.44a1.125 1.125 0 0 1 1.59 1.59l-4.44 4.441a1.125 1.125 0 1 1-1.592-1.59Z"/>
|
||||||
|
<path d="M5.191 2.444c.622 0 1.125.503 1.125 1.125v16.79a1.125 1.125 0 0 1-2.25 0V3.569c0-.622.504-1.125 1.125-1.125Z"/>
|
||||||
|
<path d="m1.546 15.122 4.44 4.441a1.125 1.125 0 0 1-1.59 1.591l-4.441-4.44a1.125 1.125 0 0 1 1.59-1.592Z"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="a">
|
||||||
|
<path fill="#fff" d="M0 0h24v24H0z"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 928 B |
Reference in New Issue
Block a user