Improved links section

src/components/GameDetail/GameLinks.vue

@@ -1,14 +1,27 @@
 <template lang="html">
-    <div class="links" v-if="hasWebsites">
+    <div class="game-links">
-        <a
+        <h4>Links</h4>
-            v-for="{ category, url } in game.websites"
+        <div class="links" v-if="hasWebsites">
-            :key="category"
+            <a
-            :href="url"
+                v-for="{ category, url } in game.websites"
-            target="_blank"
+                :key="category"
-        >
+                :href="url"
-            <i :class="getIcon(category)" />
+                :class="linkTypes[category].name"
-            {{ linkTypes[category] }}
+                target="_blank"
-        </a>
+            >
+                <template v-if="linkTypes[category].icon">
+                    <i
+                        :class="linkTypes[category].icon"
+                        :title="$t(`gameDetail.links.${linkTypes[category].name}`)"
+                    />
+                </template>
+
+                <template v-else>
+                    <i class="fas fa-link"/>
+                    <small>{{ $t(`gameDetail.links.${linkTypes[category].name}`) }}</small>
+                </template>
+            </a>
+        </div>
     </div>
 </template>
 
@@ -18,34 +31,26 @@ import { mapState } from 'vuex';
 export default {
     data() {
         return {
-            icons: {
-                official: 'fas fa-globe-americas',
-                facebook: 'fab fa-facebook-f',
-                steam: 'fab fa-steam',
-                youtube: 'fab fa-youtube',
-                twitter: 'fab fa-twitter',
-                instagram: 'fab fa-instagram',
-                iphone: 'fab fa-app-store-ios',
-                wikipedia: 'fab fa-wikipedia-w',
-                wikia: 'fas fa-link',
-                twitch: 'fab fa-twitch',
-                Reddit: 'fab fa-reddit',
-                reddit: 'fab fa-reddit',
-            },
             linkTypes: {
-                1: 'official',
+                1: { name: 'official', icon: 'fas fa-globe-americas' },
-                2: 'wikia',
+                2: { name: 'wikia', icon: 'fas fa-link' },
-                3: 'wikipedia',
+                3: { name: 'wikipedia', icon: 'fab fa-wikipedia-w' },
-                4: 'facebook',
+                4: { name: 'facebook', icon: 'fab fa-facebook-square' },
-                5: 'twitter',
+                5: { name: 'twitter', icon: 'fab fa-twitter' },
-                6: 'twitch',
+                6: { name: 'twitch', icon: 'fab fa-twitch' },
-                8: 'instagram',
+                8: { name: 'instagram', icon: 'fab fa-instagram' },
-                9: 'youtube',
+                9: { name: 'youtube', icon: 'fab fa-youtube' },
-                10: 'iphone',
+                10: { name: 'iphone', icon: 'fab fa-app-store-ios' },
-                11: 'ipad',
+                11: { name: 'ipad' },
-                12: 'android',
+                12: { name: 'android', icon: 'fab fa-google-play' },
-                13: 'steam',
+                13: { name: 'steam', icon: 'fab fa-steam' },
-                14: 'Reddit',
+                14: { name: 'reddit', icon: 'fab fa-reddit' },
+                15: { name: 'discord', icon: 'fab fa-discord' },
+                16: { name: 'google_plus', icon: 'fab fa-google' },
+                17: { name: 'tumblr', icon: 'fab fa-tumblr' },
+                18: { name: 'linkedin', icon: 'fab fa-linkedin' },
+                19: { name: 'pinterest', icon: 'fab fa-pinterest' },
+                20: { name: 'soundcloud', icon: 'fab fa-soundcloud' },
             },
         };
     },
@@ -69,15 +74,44 @@ export default {
 
 <style lang="scss" rel="stylesheet/scss" scoped>
     @import "~styles/styles.scss";
+
+    .game-links {
+        border-top: 1px solid $color-light-gray;
+        margin-top: $gp;
+        padding-top: $gp;
+    }
+
     .links {
-        display: flex;
+        display: grid;
-        flex-direction: column;
+        grid-template-columns: repeat(auto-fill, 40px);
         margin-top: $gp;
 
         a {
-            color: $color-blue;
+            height: 40px;
-            text-transform: capitalize;
+            font-size: 20px;
+            display: flex;
+            flex-direction: column;
+            color: $color-black;
             text-decoration: none;
+
+            &.twitter { color: #1da1f2; }
+            &.facebook { color: #3b5998; }
+            &.youtube { color: #c4302b; }
+            &.reddit { color: #ff4301; }
+            &.wikipedia { color: #636466; }
+            &.instagram {
+                background: -webkit-linear-gradient(
+                    #8a3ab9,
+                    #e95950,
+                    #bc2a8d,
+                    #fccc63,
+                    #fbad50,
+                    #cd486b
+                );
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+            &.steam { color: #000000; }
         }
     }
 </style>

src/i18n/ar.json

@@ -30,7 +30,28 @@
         "gamePlatforms": "منصات",
         "developers": "مطور",
         "publishers": "الناشرون",
-        "removeFromList": "ازله من القائمة"
+        "removeFromList": "ازله من القائمة",
+        "links": {
+            "official": "موقع رسمي",
+            "wikia": "فندوم",
+            "wikipedia": "ويكيبيديا",
+            "facebook": "فيس بوك",
+            "twitter": "تغريد",
+            "twitch": "نشل",
+            "instagram": "إينستاجرام",
+            "youtube": "موقع YouTube",
+            "iphone": "دائرة الرقابة الداخلية",
+            "ipad": "اى باد",
+            "android": "لعب المتجر",
+            "steam": "بخار",
+            "reddit": "رديت",
+            "discord": "خلاف",
+            "google_plus": "جوجل بلس",
+            "tumblr": "نعرفكم",
+            "linkedin": "تابعني على",
+            "pinterest": "موقع Pinterest",
+            "soundcloud": "SoundCloud لل"
+        }
     },
     "list": {
         "edit": "تحرير اسم القائمة",

src/i18n/cs.json

@@ -30,7 +30,28 @@
         "gamePlatforms": "Platformy",
         "developers": "Vývojář",
         "publishers": "Vydavatelé",
-        "removeFromList": "Odstranit ze seznamu"
+        "removeFromList": "Odstranit ze seznamu",
+        "links": {
+            "official": "Oficiální stránka",
+            "wikia": "Fandom",
+            "wikipedia": "Wikipedia",
+            "facebook": "Facebook",
+            "twitter": "Cvrlikání",
+            "twitch": "Škubnutí",
+            "instagram": "Instagram",
+            "youtube": "Youtube",
+            "iphone": "iOS",
+            "ipad": "iPad",
+            "android": "Play Store",
+            "steam": "Pára",
+            "reddit": "Reddite",
+            "discord": "Svár",
+            "google_plus": "Google Plus",
+            "tumblr": "Tumblr",
+            "linkedin": "Linkedin",
+            "pinterest": "Pinterest",
+            "soundcloud": "Soundcloud"
+        }
     },
     "list": {
         "edit": "Upravit název seznamu",

src/i18n/de.json

@@ -30,7 +30,28 @@
         "gamePlatforms": "Plattformen",
         "developers": "Entwickler",
         "publishers": "Verlag",
-        "removeFromList": "Aus Liste entfernen"
+        "removeFromList": "Aus Liste entfernen",
+        "links": {
+            "official": "Offizielle Seite",
+            "wikia": "Fangemeinde",
+            "wikipedia": "Wikipedia",
+            "facebook": "Facebook",
+            "twitter": "Twitter",
+            "twitch": "Zucken",
+            "instagram": "Instagram",
+            "youtube": "Youtube",
+            "iphone": "iOS",
+            "ipad": "iPad",
+            "android": "Spielladen",
+            "steam": "Dampf",
+            "reddit": "Reddit",
+            "discord": "Zwietracht",
+            "google_plus": "Google Plus",
+            "tumblr": "Tumblr",
+            "linkedin": "Linkedin",
+            "pinterest": "Pinterest",
+            "soundcloud": "Soundcloud"
+        }
     },
     "list": {
         "edit": "Listenname bearbeiten",

src/i18n/en.json

@@ -30,7 +30,28 @@
         "gamePlatforms": "Platforms",
         "developers": "Developer",
         "publishers": "Publishers",
-        "removeFromList": "Remove from list"
+        "removeFromList": "Remove from list",
+        "links": {
+            "official": "Official Site",
+            "wikia": "Fandom",
+            "wikipedia": "Wikipedia",
+            "facebook": "Facebook",
+            "twitter": "Twitter",
+            "twitch": "Twitch",
+            "instagram": "Instagram",
+            "youtube": "Youtube",
+            "iphone": "iOS",
+            "ipad": "iPad",
+            "android": "Play Store",
+            "steam": "Steam",
+            "reddit": "Reddit",
+            "discord": "Discord",
+            "google_plus": "Google Plus",
+            "tumblr": "Tumblr",
+            "linkedin": "Linkedin",
+            "pinterest": "Pinterest",
+            "soundcloud": "Soundcloud"
+        }
     },
     "list": {
         "edit": "Edit list name",

src/i18n/es.json

@@ -30,7 +30,28 @@
         "gamePlatforms": "Plataformas",
         "developers": "Desarrollador",
         "publishers": "Editores",
-        "removeFromList": "Quitar de la lista"
+        "removeFromList": "Quitar de la lista",
+        "links": {
+            "official": "Sitio oficial",
+            "wikia": "Fandom",
+            "wikipedia": "Wikipedia",
+            "facebook": "Facebook",
+            "twitter": "Gorjeo",
+            "twitch": "Contracción nerviosa",
+            "instagram": "Instagram",
+            "youtube": "Youtube",
+            "iphone": "iOS",
+            "ipad": "iPad",
+            "android": "Tienda de juegos",
+            "steam": "Vapor",
+            "reddit": "Reddit",
+            "discord": "Discordia",
+            "google_plus": "Google Plus",
+            "tumblr": "Tumblr",
+            "linkedin": "Linkedin",
+            "pinterest": "Pinterest",
+            "soundcloud": "Nube de sonido"
+        }
     },
     "list": {
         "edit": "Editar el nombre de la lista",

src/i18n/eu.json

@@ -30,7 +30,28 @@
         "gamePlatforms": "plataformak",
         "developers": "Developer",
         "publishers": "Argitaletxeak",
-        "removeFromList": "Kendu zerrendatik"
+        "removeFromList": "Kendu zerrendatik",
+        "links": {
+            "official": "Gune ofiziala",
+            "wikia": "fandom",
+            "wikipedia": "Wikipedia",
+            "facebook": "Facebook",
+            "twitter": "Twitter",
+            "twitch": "twitch",
+            "instagram": "Instagram",
+            "youtube": "Youtube",
+            "iphone": "iOS",
+            "ipad": "iPad",
+            "android": "Play Store",
+            "steam": "Lurrun",
+            "reddit": "Reddit",
+            "discord": "discord",
+            "google_plus": "Google Plus",
+            "tumblr": "Tumblr",
+            "linkedin": "Linkedin",
+            "pinterest": "Pinterest",
+            "soundcloud": "Soundcloud"
+        }
     },
     "list": {
         "edit": "Editatu zerrenda izena",

src/i18n/fr.json

@@ -30,7 +30,28 @@
         "gamePlatforms": "Plateformes",
         "developers": "Développeur",
         "publishers": "Les éditeurs",
-        "removeFromList": "Retirer de la liste"
+        "removeFromList": "Retirer de la liste",
+        "links": {
+            "official": "Site officiel",
+            "wikia": "Fandom",
+            "wikipedia": "Wikipédia",
+            "facebook": "Facebook",
+            "twitter": "Gazouillement",
+            "twitch": "Tic",
+            "instagram": "Instagram",
+            "youtube": "Youtube",
+            "iphone": "iOS",
+            "ipad": "iPad",
+            "android": "Play Store",
+            "steam": "Vapeur",
+            "reddit": "Reddit",
+            "discord": "Discorde",
+            "google_plus": "Google Plus",
+            "tumblr": "Tumblr",
+            "linkedin": "Linkedin",
+            "pinterest": "Pinterest",
+            "soundcloud": "Soundcloud"
+        }
     },
     "list": {
         "edit": "Editer le nom de la liste",

src/i18n/it.json

@@ -30,7 +30,28 @@
         "gamePlatforms": "piattaforme",
         "developers": "Sviluppatore",
         "publishers": "editori",
-        "removeFromList": "Rimuovere dalla lista"
+        "removeFromList": "Rimuovere dalla lista",
+        "links": {
+            "official": "Sito ufficiale",
+            "wikia": "Mondo dei fan",
+            "wikipedia": "Wikipedia",
+            "facebook": "Facebook",
+            "twitter": "cinguettio",
+            "twitch": "Contrazione",
+            "instagram": "Instagram",
+            "youtube": "Youtube",
+            "iphone": "iOS",
+            "ipad": "iPad",
+            "android": "Play Store",
+            "steam": "Vapore",
+            "reddit": "Reddit",
+            "discord": "Discordia",
+            "google_plus": "Google Plus",
+            "tumblr": "Tumblr",
+            "linkedin": "Linkedin",
+            "pinterest": "Pinterest",
+            "soundcloud": "Soundcloud"
+        }
     },
     "list": {
         "edit": "Modifica il nome dell'elenco",

src/i18n/ja.json

@@ -30,7 +30,28 @@
         "gamePlatforms": "プラットフォーム",
         "developers": "開発者",
         "publishers": "出版社",
-        "removeFromList": "リストから削除する"
+        "removeFromList": "リストから削除する",
+        "links": {
+            "official": "オフィシャルサイト",
+            "wikia": "ファンダム",
+            "wikipedia": "ウィキペディア",
+            "facebook": "フェイスブック",
+            "twitter": "Twitter",
+            "twitch": "けいれん",
+            "instagram": "Instagramの",
+            "youtube": "YouTube",
+            "iphone": "iOS",
+            "ipad": "iPad",
+            "android": "プレイストア",
+            "steam": "蒸気",
+            "reddit": "Reddit",
+            "discord": "不和",
+            "google_plus": "グーグルプラス",
+            "tumblr": "タンブラー",
+            "linkedin": "Linkedin",
+            "pinterest": "Pinterest",
+            "soundcloud": "サウンドクラウド"
+        }
     },
     "list": {
         "edit": "リスト名を編集",

src/i18n/pl.json

@@ -30,7 +30,28 @@
         "gamePlatforms": "Platformy",
         "developers": "Deweloper",
         "publishers": "Wydawcy",
-        "removeFromList": "Usunąć z listy"
+        "removeFromList": "Usunąć z listy",
+        "links": {
+            "official": "Oficjalna strona",
+            "wikia": "Fandom",
+            "wikipedia": "Wikipedia",
+            "facebook": "Facebook",
+            "twitter": "Świergot",
+            "twitch": "Skurcz",
+            "instagram": "Instagram",
+            "youtube": "youtube",
+            "iphone": "iOS",
+            "ipad": "iPad",
+            "android": "Sklep Play",
+            "steam": "Parowy",
+            "reddit": "Reddit",
+            "discord": "Niezgoda",
+            "google_plus": "Google Plus",
+            "tumblr": "Tumblr",
+            "linkedin": "Linkedin",
+            "pinterest": "Pinterest",
+            "soundcloud": "Soundcloud"
+        }
     },
     "list": {
         "edit": "Edytuj nazwę listy",