mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-11-01 07:35:57 +09:00
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
syuilo
parent
4ee7df887d
commit
28482627f7
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user