Little changes for flag dropdown

jayehernandez · Dec 12, 2020 · 9c26470 · 9c26470
1 parent 54eabb6
commit 9c26470
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git 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;
-}
+}
+
+.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
@@ -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 }}
 </template>
 
 <script>