diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte index 94107a3..cb4c53c 100644 --- a/src/routes/photos.svelte +++ b/src/routes/photos.svelte @@ -24,8 +24,18 @@ const defaultCountry = 'all' const defaultSort = 'latest' let filtered: boolean = false - let filterCountry = defaultCountry - let filterSort = defaultSort + 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 + } + } /** @@ -90,7 +100,11 @@ on:change={handleCountryChange} value={filterCountry} > - + {#if countryFlagId} + {filterCountry} flag + {:else} + + {/if}
  • diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index 3250192..5556881 100644 --- a/src/style/pages/_photos.scss +++ b/src/style/pages/_photos.scss @@ -93,14 +93,15 @@ display: block; width: 20px; height: 20px; - fill: #fff; + overflow: hidden; margin-right: 12px; + fill: #fff; + border-radius: 100%; transition: fill 0.2s; @include bp (sm) { width: 26px; height: 26px; - margin-right: 16px; } }