diff --git a/src/components/molecules/Select.svelte b/src/components/molecules/Select.svelte index 5bb8d64..c11f4c3 100644 --- a/src/components/molecules/Select.svelte +++ b/src/components/molecules/Select.svelte @@ -15,16 +15,13 @@ const dispatch = createEventDispatcher() const defaultOption = options.find(option => option.default) - const defaultOptionIndex = options.findIndex(option => option.default) - const selectedOptionIndex = options.findIndex(option => option.selected) - let current: number = selectedOptionIndex - let currentOptionEl: HTMLElement - $: currentOption = options[current] + let selected = value || options[0].value + $: currentOption = options.find(option => option.value === selected) // Redefine value from parent (when reset) $: if (value === defaultOption.value) { - current = defaultOptionIndex + selected = defaultOption.value } @@ -32,23 +29,21 @@ * When changing select value */ const handleChange = ({ target: { value }}: any) => { - current = options.findIndex(option => option.value === value) + const option = options.find(option => option.value === value) // Dispatch event to parent - dispatch('change', options[current].value) + dispatch('change', option.value) }
- - {currentOption.name} - + {currentOption.name} - + {#each options as { value, name }} + {/each} diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index 06c1b18..ba75472 100644 --- a/src/style/pages/_photos.scss +++ b/src/style/pages/_photos.scss @@ -122,7 +122,7 @@ opacity: 0; position: absolute; top: 0; - left: 0; + left: 8px; width: 100%; height: 100%; cursor: pointer; @@ -321,8 +321,8 @@ bottom: 0; right: 0; border-top-left-radius: 8px; - opacity: 0; pointer-events: none; + opacity: 0; transform: translate3d(12%, 23%, 0) rotate(-5deg); transition: opacity 0.4s var(--ease-quart), transform 1.0s var(--ease-quart); }