Improved links section

This commit is contained in:
Roman Cervantes 2019-06-19 16:20:45 -07:00
parent 0e2f006905
commit d986c587d5
11 changed files with 295 additions and 51 deletions

View file

@ -1,14 +1,27 @@
<template lang="html">
<div class="links" v-if="hasWebsites">
<a
v-for="{ category, url } in game.websites"
:key="category"
:href="url"
target="_blank"
>
<i :class="getIcon(category)" />
{{ linkTypes[category] }}
</a>
<div class="game-links">
<h4>Links</h4>
<div class="links" v-if="hasWebsites">
<a
v-for="{ category, url } in game.websites"
:key="category"
:href="url"
:class="linkTypes[category].name"
target="_blank"
>
<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',
2: 'wikia',
3: 'wikipedia',
4: 'facebook',
5: 'twitter',
6: 'twitch',
8: 'instagram',
9: 'youtube',
10: 'iphone',
11: 'ipad',
12: 'android',
13: 'steam',
14: 'Reddit',
1: { name: 'official', icon: 'fas fa-globe-americas' },
2: { name: 'wikia', icon: 'fas fa-link' },
3: { name: 'wikipedia', icon: 'fab fa-wikipedia-w' },
4: { name: 'facebook', icon: 'fab fa-facebook-square' },
5: { name: 'twitter', icon: 'fab fa-twitter' },
6: { name: 'twitch', icon: 'fab fa-twitch' },
8: { name: 'instagram', icon: 'fab fa-instagram' },
9: { name: 'youtube', icon: 'fab fa-youtube' },
10: { name: 'iphone', icon: 'fab fa-app-store-ios' },
11: { name: 'ipad' },
12: { name: 'android', icon: 'fab fa-google-play' },
13: { name: 'steam', icon: 'fab fa-steam' },
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;
flex-direction: column;
display: grid;
grid-template-columns: repeat(auto-fill, 40px);
margin-top: $gp;
a {
color: $color-blue;
text-transform: capitalize;
height: 40px;
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>

View file

@ -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": "تحرير اسم القائمة",

View file

@ -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",

View file

@ -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",

View file

@ -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",

View file

@ -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",

View file

@ -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",

View file

@ -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",

View file

@ -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",

View file

@ -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": "リスト名を編集",

View file

@ -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",