Place: Bind window width to a variable

An error (window is not defined) would throw otherwise
This commit is contained in:
2020-04-12 11:58:21 +02:00
parent e27e8a16db
commit c059c07778

View File

@@ -32,10 +32,8 @@
pageReady pageReady
} from 'utils/store' } from 'utils/store'
import { formatDate, relativeTime, getThumbnail } from 'utils/functions' import { formatDate, relativeTime, getThumbnail } from 'utils/functions'
// Dependencies // Dependencies
import lazySizes from 'lazysizes' import lazySizes from 'lazysizes'
// Components // Components
import IconGlobe from 'atoms/IconGlobe' import IconGlobe from 'atoms/IconGlobe'
import IconGlobeSmall from 'atoms/IconGlobeSmall' import IconGlobeSmall from 'atoms/IconGlobeSmall'
@@ -47,7 +45,6 @@
import Footer from 'organisms/Footer' import Footer from 'organisms/Footer'
import SocialMetas from 'utils/SocialMetas' import SocialMetas from 'utils/SocialMetas'
import Transition from 'utils/Transition' import Transition from 'utils/Transition'
// Animations // Animations
import { animateIn } from 'animations/place' import { animateIn } from 'animations/place'
@@ -55,6 +52,7 @@
export let photos export let photos
const { page } = stores() const { page } = stores()
let layoutSetting let layoutSetting
let windowWidth
// Update current location // Update current location
const location = $locations.find(loc => loc.slug === $page.params.place) const location = $locations.find(loc => loc.slug === $page.params.place)
@@ -107,6 +105,8 @@
/> />
</svelte:head> </svelte:head>
<svelte:window bind:innerWidth={windowWidth} />
<Transition {animateIn}> <Transition {animateIn}>
<section class="place"> <section class="place">
<div class="place__title"> <div class="place__title">
@@ -122,7 +122,7 @@
<a href="/choose" class="button-control button-control--big button-control--dashed" aria-label="Change the location"> <a href="/choose" class="button-control button-control--big button-control--dashed" aria-label="Change the location">
<span class="center"> <span class="center">
<IconGlobe width={window.innerWidth <= 768 ? 32 : 44} color="#fff" /> <IconGlobe width={windowWidth <= 768 ? 32 : 44} color="#fff" />
<span>Change</span> <span>Change</span>
</span> </span>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1">