diff --git a/client/src/style/flag.scss b/client/src/style/flag.scss index 04be2426..f6702c44 100644 --- a/client/src/style/flag.scss +++ b/client/src/style/flag.scss @@ -2,9 +2,19 @@ margin-top: $spacing; margin-left: $spacing; margin-right: calc(#{$spacing} + 0.2em); + + &.mt0 { + margin-top: 0; + } } .language-name { max-width: calc(56px + 2 * #{$spacing}); margin: 0 auto; -} \ No newline at end of file +} + +.flag-options { + margin-top: 20px; + margin-bottom: 10px; + color: $primary-color; +} diff --git a/client/src/views/Flag.vue b/client/src/views/Flag.vue index 7db76afe..1d01ad1d 100644 --- a/client/src/views/Flag.vue +++ b/client/src/views/Flag.vue @@ -18,13 +18,20 @@ ) {{ flagLanguage | titleize }} transition(name="fade") div(v-if="showLanguageDropdown") - .flag-list(v-for="language in otherLanguages") - .flag.fadeIn(v-wow data-wow-duration="2s" :key="dailyData.translations[language].flag") + .flag-options Show in: + .flag-list(v-for="(language, index) in otherLanguages") + .flag.fadeIn( + v-wow + data-wow-duration="2s" + :key="dailyData.translations[language].flag" + v-bind:class=`{ mt0: index === 0 }` + ) i( :class="dailyData.translations[language].flag" class="twa twa-4x" @click="toggleActiveLanguage(language); showLanguageDropdown = false;" ) + .language-name {{ language | titleize }}