natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve user-integration display in the user page (#3541) 

* improve user-integration display in the user page

* delete unnecessary comma
This commit is contained in:
tamaina 2018-12-08 16:59:29 +09:00 committed by syuilo
parent 4ee7df887d
commit 28482627f7
6 changed files with 82 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/client/app/desktop/views/pages/user/user.discord.vue
View File

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

28
src/client/app/desktop/views/pages/user/user.github.vue
View File

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

14
src/client/app/desktop/views/pages/user/user.integrations.integration.vue Normal file
View File

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

63
src/client/app/desktop/views/pages/user/user.integrations.vue Normal file
View File

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

28
src/client/app/desktop/views/pages/user/user.twitter.vue
View File

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

15
src/client/app/desktop/views/pages/user/user.vue
View File

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