From 3b7be81491aa2d1b3cb385d7408d49a5707d7f78 Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Sat, 8 Dec 2018 16:59:29 +0900 Subject: [PATCH] improve user-integration display in the user page (#3541) * improve user-integration display in the user page * delete unnecessary comma --- .../desktop/views/pages/user/user.discord.vue | 28 --------- .../desktop/views/pages/user/user.github.vue | 28 --------- .../user/user.integrations.integration.vue | 14 +++++ .../views/pages/user/user.integrations.vue | 63 +++++++++++++++++++ .../desktop/views/pages/user/user.twitter.vue | 28 --------- .../app/desktop/views/pages/user/user.vue | 15 ++--- 6 files changed, 82 insertions(+), 94 deletions(-) delete mode 100644 src/client/app/desktop/views/pages/user/user.discord.vue delete mode 100644 src/client/app/desktop/views/pages/user/user.github.vue create mode 100644 src/client/app/desktop/views/pages/user/user.integrations.integration.vue create mode 100644 src/client/app/desktop/views/pages/user/user.integrations.vue delete mode 100644 src/client/app/desktop/views/pages/user/user.twitter.vue diff --git a/src/client/app/desktop/views/pages/user/user.discord.vue b/src/client/app/desktop/views/pages/user/user.discord.vue deleted file mode 100644 index 576b6ed46..000000000 --- a/src/client/app/desktop/views/pages/user/user.discord.vue +++ /dev/null @@ -1,28 +0,0 @@ -<template> -<a class="lkafjvabenanajk17kwqpsatoushincb" :href="`https://discordapp.com/users/${user.discord.id}`" target="_blank"> - <div> - <span><fa :icon="['fab', 'discord']"/>@{{ user.discord.username }}#{{ user.discord.discriminator }}</span> - </div> -</a> -</template> - -<script lang="ts"> -import Vue from 'vue'; - -export default Vue.extend({ - props: ['user'] -}); -</script> - -<style lang="stylus" scoped> -.lkafjvabenanajk17kwqpsatoushincb - margin-left 8px - color #fff - - div - padding 32px - background #7289da - border-radius 6px - color #fff - -</style> diff --git a/src/client/app/desktop/views/pages/user/user.github.vue b/src/client/app/desktop/views/pages/user/user.github.vue deleted file mode 100644 index ec0f21c5a..000000000 --- a/src/client/app/desktop/views/pages/user/user.github.vue +++ /dev/null @@ -1,28 +0,0 @@ -<template> -<a class="aqooishiizumijmihokohinatamihoaz" :href="`https://github.com/${user.github.login}`" target="_blank"> - <div> - <span><fa :icon="['fab', 'github']"/>@{{ user.github.login }}</span> - </div> -</a> -</template> - -<script lang="ts"> -import Vue from 'vue'; - -export default Vue.extend({ - props: ['user'] -}); -</script> - -<style lang="stylus" scoped> -.aqooishiizumijmihokohinatamihoaz - margin-left 8px - color #fff - - div - padding 32px - background #171515 - border-radius 6px - color #fff - -</style> diff --git a/src/client/app/desktop/views/pages/user/user.integrations.integration.vue b/src/client/app/desktop/views/pages/user/user.integrations.integration.vue new file mode 100644 index 000000000..479122688 --- /dev/null +++ b/src/client/app/desktop/views/pages/user/user.integrations.integration.vue @@ -0,0 +1,14 @@ +<template> +<a :href="url" :class="service" target="_blank"> + <fa :icon="icon" size="lg" fixed-width /> + <div>{{ text }}</div> +</a> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + props: ['url', 'text', 'icon', 'service'] +}); +</script> diff --git a/src/client/app/desktop/views/pages/user/user.integrations.vue b/src/client/app/desktop/views/pages/user/user.integrations.vue new file mode 100644 index 000000000..d796ff932 --- /dev/null +++ b/src/client/app/desktop/views/pages/user/user.integrations.vue @@ -0,0 +1,63 @@ +<template> +<div class="usertwitxxxgithxxdiscxxxintegrat" :v-if="user.twitter || user.github || user.discord"> + <x-integration v-if="user.twitter" service="twitter" :url="`https://twitter.com/${user.twitter.screenName}`" :text="user.twitter.screenName" :icon="['fab', 'twitter']"/> + <x-integration v-if="user.github" service="github" :url="`https://github.com/${user.github.login}`" :text="user.github.login" :icon="['fab', 'github']"/> + <x-integration v-if="user.discord" service="discord" :url="`https://discordapp.com/users/${user.discord.id}`" :text="`${user.discord.username}#${user.discord.discriminator}`" :icon="['fab', 'discord']"/> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import XIntegration from './user.integrations.integration.vue'; + +export default Vue.extend({ + components: { + XIntegration + }, + props: ['user'] +}); +</script> + +<style lang="stylus" scoped> +.usertwitxxxgithxxdiscxxxintegrat + > a + display flex + align-items center + padding 32px 38px + box-shadow var(--shadow) + border-radius var(--round) + + &:not(:last-child) + margin-bottom 16px + + &:hover + text-decoration none + + > div + padding-left .2em + line-height 1.3em + flex 1 0 + word-wrap anywhere + + &.twitter + color #fff + background #1da1f3 + + &:hover + background #0c87cf + + &.github + color #fff + background #171515 + + &:hover + background #000 + + &.discord + color #fff + background #7289da + + &:hover + background #4968ce + +</style> diff --git a/src/client/app/desktop/views/pages/user/user.twitter.vue b/src/client/app/desktop/views/pages/user/user.twitter.vue deleted file mode 100644 index d312c8c62..000000000 --- a/src/client/app/desktop/views/pages/user/user.twitter.vue +++ /dev/null @@ -1,28 +0,0 @@ -<template> -<a class="adsvaidqfznoartcbplullnejvxjphcn" :href="`https://twitter.com/${user.twitter.screenName}`" target="_blank"> - <div> - <span><fa :icon="['fab', 'twitter']"/>@{{ user.twitter.screenName }}</span> - </div> -</a> -</template> - -<script lang="ts"> -import Vue from 'vue'; - -export default Vue.extend({ - props: ['user'] -}); -</script> - -<style lang="stylus" scoped> -.adsvaidqfznoartcbplullnejvxjphcn - margin-left 8px - color #fff - - div - padding 32px - background #1a94f2 - border-radius 6px - color #fff - -</style> diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue index 1333d313f..5cd63545f 100644 --- a/src/client/app/desktop/views/pages/user/user.vue +++ b/src/client/app/desktop/views/pages/user/user.vue @@ -12,9 +12,7 @@ <div class="side"> <div class="instance" v-if="!$store.getters.isSignedIn"><mk-instance/></div> <x-profile :user="user"/> - <x-twitter :user="user" v-if="!user.host && user.twitter"/> - <x-github :user="user" v-if="!user.host && user.github"/> - <x-discord :user="user" v-if="!user.host && user.discord"/> + <x-integrations :user="user" v-if="!user.host"/> <mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/> <mk-activity :user="user"/> <x-photos :user="user"/> @@ -38,9 +36,7 @@ import XProfile from './user.profile.vue'; import XPhotos from './user.photos.vue'; import XFollowersYouKnow from './user.followers-you-know.vue'; import XFriends from './user.friends.vue'; -import XTwitter from './user.twitter.vue'; -import XGithub from './user.github.vue'; // ?MEM: Don't fix the intentional typo. (XGitHub -> `<x-git-hub>`) -import XDiscord from './user.discord.vue'; +import XIntegrations from './user.integrations.vue'; export default Vue.extend({ i18n: i18n(), @@ -51,9 +47,7 @@ export default Vue.extend({ XPhotos, XFollowersYouKnow, XFriends, - XTwitter, - XGithub, // ?MEM: Don't fix the intentional typo. (see L41) - XDiscord + XIntegrations }, data() { return { @@ -87,7 +81,8 @@ export default Vue.extend({ <style lang="stylus" scoped> .xygkxeaeontfaokvqmiblezmhvhostak - width 980px + max-width 980px + min-width 720px padding 16px margin 0 auto