mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Merge pull request #754 from Human-Connection/402-userprofil-tab-click-function
402 userprofil tab click function
This commit is contained in:
Robert Schäfer
GitHub
commit
c2bcc9f595
@ -56,14 +56,14 @@ type User {
|
||||
contributionsCount: Int! @cypher(
|
||||
statement: """
|
||||
MATCH (this)-[:WROTE]->(r:Post)
|
||||
WHERE (NOT exists(r.deleted) OR r.deleted = false)
|
||||
AND (NOT exists(r.disabled) OR r.disabled = false)
|
||||
WHERE NOT r.deleted = true AND NOT r.disabled = true
|
||||
RETURN COUNT(r)
|
||||
"""
|
||||
)
|
||||
|
||||
comments: [Comment]! @relation(name: "WROTE", direction: "OUT")
|
||||
commentsCount: Int! @cypher(statement: "MATCH (this)-[:WROTE]->(r:Comment) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(r)")
|
||||
commentedCount: Int! @cypher(statement: "MATCH (this)-[:WROTE]->(r:Comment)-[:COMMENTS]->(p:Post) WHERE NOT r.deleted = true AND NOT r.disabled = true AND NOT p.deleted = true AND NOT p.disabled = true RETURN COUNT(DISTINCT(p))")
|
||||
|
||||
shouted: [Post]! @relation(name: "SHOUTED", direction: "OUT")
|
||||
shoutedCount: Int! @cypher(statement: "MATCH (this)-[:SHOUTED]->(r:Post) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(DISTINCT r)")
|
||||
@ -77,4 +77,4 @@ type User {
|
||||
|
||||
badges: [Badge]! @relation(name: "REWARDED", direction: "IN")
|
||||
badgesCount: Int! @cypher(statement: "MATCH (this)<-[:REWARDED]-(r:Badge) RETURN COUNT(r)")
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<ds-space margin-top="large" style="text-align: center">
|
||||
<ds-space class="load-more" margin-top="large" style="text-align: center">
|
||||
<ds-button :loading="loading" icon="arrow-down" ghost @click="$emit('click')">
|
||||
{{ $t('actions.loadMore') }}
|
||||
</ds-button>
|
||||
|
||||
38
webapp/graphql/UserProfile/Post.js
Normal file
38
webapp/graphql/UserProfile/Post.js
Normal file
@ -0,0 +1,38 @@
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
export default i18n => {
|
||||
const lang = i18n.locale().toUpperCase()
|
||||
return gql(`
|
||||
query Post($filter: _PostFilter, $first: Int, $offset: Int) {
|
||||
Post(filter: $filter, first: $first, offset: $offset, orderBy: createdAt_desc) {
|
||||
id
|
||||
slug
|
||||
title
|
||||
contentExcerpt
|
||||
shoutedCount
|
||||
commentsCount
|
||||
deleted
|
||||
image
|
||||
createdAt
|
||||
disabled
|
||||
deleted
|
||||
categories {
|
||||
id
|
||||
name
|
||||
icon
|
||||
}
|
||||
author {
|
||||
id
|
||||
slug
|
||||
avatar
|
||||
name
|
||||
disabled
|
||||
deleted
|
||||
location {
|
||||
name: name${lang}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`)
|
||||
}
|
||||
@ -1,10 +1,10 @@
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
export default app => {
|
||||
const lang = app.$i18n.locale().toUpperCase()
|
||||
export default i18n => {
|
||||
const lang = i18n.locale().toUpperCase()
|
||||
return gql(`
|
||||
query User($slug: String!, $first: Int, $offset: Int) {
|
||||
User(slug: $slug) {
|
||||
query User($id: ID!) {
|
||||
User(id: $id) {
|
||||
id
|
||||
slug
|
||||
name
|
||||
@ -24,7 +24,7 @@ export default app => {
|
||||
}
|
||||
badgesCount
|
||||
shoutedCount
|
||||
commentsCount
|
||||
commentedCount
|
||||
followingCount
|
||||
following(first: 7) {
|
||||
id
|
||||
@ -69,35 +69,6 @@ export default app => {
|
||||
}
|
||||
}
|
||||
contributionsCount
|
||||
contributions(first: $first, offset: $offset, orderBy: createdAt_desc) {
|
||||
id
|
||||
slug
|
||||
title
|
||||
contentExcerpt
|
||||
shoutedCount
|
||||
commentsCount
|
||||
deleted
|
||||
image
|
||||
createdAt
|
||||
disabled
|
||||
deleted
|
||||
categories {
|
||||
id
|
||||
name
|
||||
icon
|
||||
}
|
||||
author {
|
||||
id
|
||||
slug
|
||||
avatar
|
||||
name
|
||||
disabled
|
||||
deleted
|
||||
location {
|
||||
name: name${lang}
|
||||
}
|
||||
}
|
||||
}
|
||||
socialMedia {
|
||||
id
|
||||
url
|
||||
@ -172,11 +172,6 @@
|
||||
}
|
||||
},
|
||||
"common": {
|
||||
"your": {
|
||||
"post": "Dein Beitrag ::: Deine Beiträge",
|
||||
"comment": "Dein Kommentar ::: Deine Kommentare",
|
||||
"shout": "Deine Empfehlung ::: Deine Empfehlungen"
|
||||
},
|
||||
"post": "Beitrag ::: Beiträge",
|
||||
"comment": "Kommentar ::: Kommentare",
|
||||
"letsTalk": "Miteinander reden",
|
||||
|
||||
@ -172,11 +172,6 @@
|
||||
}
|
||||
},
|
||||
"common": {
|
||||
"your": {
|
||||
"post": "Your Post ::: Your Posts",
|
||||
"comment": "Your Comment ::: Your Comments",
|
||||
"shout": "Your Shout ::: Your Shouts"
|
||||
},
|
||||
"post": "Post ::: Posts",
|
||||
"comment": "Comment ::: Comments",
|
||||
"letsTalk": "Let`s Talk",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { shallowMount, createLocalVue } from '@vue/test-utils'
|
||||
import { config, mount, shallowMount, createLocalVue } from '@vue/test-utils'
|
||||
import ProfileSlug from './_slug.vue'
|
||||
import Vuex from 'vuex'
|
||||
import Styleguide from '@human-connection/styleguide'
|
||||
@ -7,6 +7,11 @@ const localVue = createLocalVue()
|
||||
|
||||
localVue.use(Vuex)
|
||||
localVue.use(Styleguide)
|
||||
localVue.filter('date', d => d)
|
||||
|
||||
config.stubs['no-ssr'] = '<span><slot /></span>'
|
||||
config.stubs['v-popover'] = '<span><slot /></span>'
|
||||
config.stubs['nuxt-link'] = '<span><slot /></span>'
|
||||
|
||||
describe('ProfileSlug', () => {
|
||||
let wrapper
|
||||
@ -19,8 +24,14 @@ describe('ProfileSlug', () => {
|
||||
id: 'p23',
|
||||
name: 'It is a post',
|
||||
},
|
||||
$t: jest.fn(),
|
||||
// If you mocking router, than don't use VueRouter with lacalVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
|
||||
$t: jest.fn(t => t),
|
||||
// If you mocking router, than don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
|
||||
$route: {
|
||||
params: {
|
||||
id: '4711',
|
||||
slug: 'john-doe',
|
||||
},
|
||||
},
|
||||
$router: {
|
||||
history: {
|
||||
push: jest.fn(),
|
||||
@ -31,6 +42,7 @@ describe('ProfileSlug', () => {
|
||||
error: jest.fn(),
|
||||
},
|
||||
$apollo: {
|
||||
loading: false,
|
||||
mutate: jest.fn().mockResolvedValue(),
|
||||
},
|
||||
}
|
||||
@ -60,7 +72,7 @@ describe('ProfileSlug', () => {
|
||||
beforeEach(jest.runAllTimers)
|
||||
|
||||
it('emits "deletePost"', () => {
|
||||
expect(wrapper.emitted().deletePost.length).toBe(1)
|
||||
expect(wrapper.emitted().deletePost).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not go to index (main) page', () => {
|
||||
@ -78,4 +90,128 @@ describe('ProfileSlug', () => {
|
||||
})
|
||||
})
|
||||
})
|
||||
describe('mount', () => {
|
||||
Wrapper = () => {
|
||||
return mount(ProfileSlug, {
|
||||
mocks,
|
||||
localVue,
|
||||
})
|
||||
}
|
||||
|
||||
describe('given an authenticated user', () => {
|
||||
beforeEach(() => {
|
||||
mocks.$filters = {
|
||||
removeLinks: c => c,
|
||||
}
|
||||
mocks.$store = {
|
||||
getters: {
|
||||
'auth/user': {
|
||||
id: 'u23',
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
describe('given a user for the profile', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper()
|
||||
wrapper.setData({
|
||||
User: [
|
||||
{
|
||||
id: 'u3',
|
||||
name: 'Bob the builder',
|
||||
contributionsCount: 6,
|
||||
shoutedCount: 7,
|
||||
commentedCount: 8,
|
||||
},
|
||||
],
|
||||
})
|
||||
})
|
||||
|
||||
it('displays name of the user', () => {
|
||||
expect(wrapper.text()).toContain('Bob the builder')
|
||||
})
|
||||
|
||||
describe('load more button', () => {
|
||||
const aPost = {
|
||||
title: 'I am a post',
|
||||
content: 'This is my content',
|
||||
contentExcerpt: 'This is my content',
|
||||
}
|
||||
|
||||
describe('currently no posts available (e.g. after tab switching)', () => {
|
||||
beforeEach(() => {
|
||||
wrapper.setData({
|
||||
Post: null,
|
||||
})
|
||||
})
|
||||
|
||||
it('displays no "load more" button', () => {
|
||||
expect(wrapper.find('.load-more').exists()).toBe(false)
|
||||
})
|
||||
|
||||
describe('apollo client in `loading` state', () => {
|
||||
beforeEach(() => {
|
||||
wrapper.vm.$apollo.loading = true
|
||||
})
|
||||
|
||||
it('never displays more than one loading spinner', () => {
|
||||
expect(wrapper.findAll('.ds-spinner')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('displays a loading spinner below the posts list', () => {
|
||||
expect(wrapper.find('.user-profile-posts-list .ds-spinner').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('pagination returned less posts than available', () => {
|
||||
beforeEach(() => {
|
||||
const posts = [1, 2, 3, 4, 5].map(id => {
|
||||
return { ...aPost, id }
|
||||
})
|
||||
|
||||
wrapper.setData({
|
||||
Post: posts,
|
||||
})
|
||||
})
|
||||
|
||||
it('displays a "load more" button', () => {
|
||||
expect(wrapper.find('.load-more').exists()).toBe(true)
|
||||
})
|
||||
|
||||
describe('apollo client in `loading` state', () => {
|
||||
beforeEach(() => {
|
||||
wrapper.vm.$apollo.loading = true
|
||||
})
|
||||
|
||||
it('never displays more than one loading spinner', () => {
|
||||
expect(wrapper.findAll('.ds-spinner')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('displays a loading spinner below the posts list', () => {
|
||||
expect(wrapper.find('.load-more .ds-spinner').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('pagination returned as many posts as available', () => {
|
||||
beforeEach(() => {
|
||||
const posts = [1, 2, 3, 4, 5, 6].map(id => {
|
||||
return { ...aPost, id }
|
||||
})
|
||||
|
||||
wrapper.setData({
|
||||
Post: posts,
|
||||
})
|
||||
})
|
||||
|
||||
it('displays no "load more" button', () => {
|
||||
expect(wrapper.find('.load-more').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -142,69 +142,50 @@
|
||||
</ds-card>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
|
||||
<ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
|
||||
<ds-flex :width="{ base: '100%' }" gutter="small">
|
||||
<ds-flex class="user-profile-posts-list" :width="{ base: '100%' }" gutter="small">
|
||||
<ds-flex-item class="profile-top-navigation">
|
||||
<ds-card class="ds-tab-nav">
|
||||
<ds-flex>
|
||||
<ds-flex-item
|
||||
v-tooltip="{
|
||||
content: $t('common.your.post', null, user.contributionsCount),
|
||||
placement: 'right',
|
||||
delay: { show: 500 },
|
||||
}"
|
||||
class="ds-tab-nav-item pointer ds-tab-nav-item-active"
|
||||
@click="tabActivity('posts', $event)"
|
||||
>
|
||||
<ds-space margin="small">
|
||||
<!-- TODO: find better solution for rendering errors -->
|
||||
<no-ssr>
|
||||
<ds-number :label="$t('common.post', null, user.contributionsCount)">
|
||||
<hc-count-to slot="count" :end-val="user.contributionsCount" />
|
||||
</ds-number>
|
||||
</no-ssr>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item
|
||||
v-tooltip="{
|
||||
content: $t('common.your.comment', null, user.commentsCount),
|
||||
placement: 'right',
|
||||
delay: { show: 500 },
|
||||
}"
|
||||
class="ds-tab-nav-item pointer"
|
||||
@click="tabActivity('commented', $event)"
|
||||
>
|
||||
<ds-space margin="small">
|
||||
<!-- TODO: find better solution for rendering errors -->
|
||||
|
||||
<no-ssr>
|
||||
<ds-number :label="$t('profile.commented')">
|
||||
<hc-count-to slot="count" :end-val="user.commentsCount" />
|
||||
</ds-number>
|
||||
</no-ssr>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
|
||||
<ds-flex-item
|
||||
v-tooltip="{
|
||||
content: $t('common.your.shout', null, user.shoutedCount),
|
||||
placement: 'right',
|
||||
delay: { show: 500 },
|
||||
}"
|
||||
class="ds-tab-nav-item pointer"
|
||||
>
|
||||
<ds-space margin="small">
|
||||
<!-- TODO: find better solution for rendering errors -->
|
||||
<no-ssr>
|
||||
<ds-number :label="$t('profile.shouted')">
|
||||
<hc-count-to slot="count" :end-val="user.shoutedCount" />
|
||||
</ds-number>
|
||||
</no-ssr>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<ul class="Tabs">
|
||||
<li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'post' }">
|
||||
<a @click="handleTab('post')">
|
||||
<ds-space margin="small">
|
||||
<no-ssr placeholder="Loading...">
|
||||
<ds-number :label="$t('common.post', null, user.contributionsCount)">
|
||||
<hc-count-to slot="count" :end-val="user.contributionsCount" />
|
||||
</ds-number>
|
||||
</no-ssr>
|
||||
</ds-space>
|
||||
</a>
|
||||
</li>
|
||||
<li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'comment' }">
|
||||
<a @click="handleTab('comment')">
|
||||
<ds-space margin="small">
|
||||
<no-ssr placeholder="Loading...">
|
||||
<ds-number :label="$t('profile.commented')">
|
||||
<hc-count-to slot="count" :end-val="user.commentedCount" />
|
||||
</ds-number>
|
||||
</no-ssr>
|
||||
</ds-space>
|
||||
</a>
|
||||
</li>
|
||||
<li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'shout' }">
|
||||
<a @click="handleTab('shout')">
|
||||
<ds-space margin="small">
|
||||
<no-ssr placeholder="Loading...">
|
||||
<ds-number :label="$t('profile.shouted')">
|
||||
<hc-count-to slot="count" :end-val="user.shoutedCount" />
|
||||
</ds-number>
|
||||
</no-ssr>
|
||||
</ds-space>
|
||||
</a>
|
||||
</li>
|
||||
<li class="Tabs__presentation-slider" role="presentation"></li>
|
||||
</ul>
|
||||
</ds-card>
|
||||
</ds-flex-item>
|
||||
|
||||
<ds-flex-item style="text-align: center">
|
||||
<ds-button
|
||||
v-if="myProfile"
|
||||
@ -216,15 +197,23 @@
|
||||
primary
|
||||
/>
|
||||
</ds-flex-item>
|
||||
|
||||
<template v-if="activePosts.length">
|
||||
<hc-post-card
|
||||
v-for="(post, index) in activePosts"
|
||||
:key="post.id"
|
||||
:post="post"
|
||||
:width="{ base: '100%', md: '100%', xl: '50%' }"
|
||||
@deletePost="user.contributions.splice(index, 1)"
|
||||
@deletePost="Post.splice(index, 1)"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="$apollo.loading">
|
||||
<ds-flex-item>
|
||||
<ds-section centered>
|
||||
<ds-spinner size="base"></ds-spinner>
|
||||
</ds-section>
|
||||
</ds-flex-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<ds-flex-item :width="{ base: '100%' }">
|
||||
<hc-empty margin="xx-large" icon="file" />
|
||||
@ -252,6 +241,17 @@ import HcUpload from '~/components/Upload'
|
||||
import HcAvatar from '~/components/Avatar/Avatar.vue'
|
||||
import PostMutationHelpers from '~/mixins/PostMutationHelpers'
|
||||
|
||||
import PostQuery from '~/graphql/UserProfile/Post.js'
|
||||
import UserQuery from '~/graphql/UserProfile/User.js'
|
||||
|
||||
const tabToFilterMapping = ({ tab, id }) => {
|
||||
return {
|
||||
post: { author: { id } },
|
||||
comment: { comments_some: { author: { id } } },
|
||||
shout: { shoutedBy_some: { id } },
|
||||
}[tab]
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
User,
|
||||
@ -271,16 +271,28 @@ export default {
|
||||
mode: 'out-in',
|
||||
},
|
||||
data() {
|
||||
const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
|
||||
return {
|
||||
User: [],
|
||||
Post: [],
|
||||
voted: false,
|
||||
page: 1,
|
||||
pageSize: 6,
|
||||
tabActive: 'post',
|
||||
filter,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasMore() {
|
||||
const total = {
|
||||
post: this.user.contributionsCount,
|
||||
shout: this.user.shoutedCount,
|
||||
comment: this.user.commentedCount,
|
||||
}[this.tabActive]
|
||||
return this.Post && this.Post.length < total
|
||||
},
|
||||
myProfile() {
|
||||
return this.$route.params.slug === this.$store.getters['auth/user'].slug
|
||||
return this.$route.params.id === this.$store.getters['auth/user'].id
|
||||
},
|
||||
followedByCount() {
|
||||
let count = Number(this.user.followedByCount) || 0
|
||||
@ -292,16 +304,11 @@ export default {
|
||||
offset() {
|
||||
return (this.page - 1) * this.pageSize
|
||||
},
|
||||
hasMore() {
|
||||
return (
|
||||
this.user.contributions && this.user.contributions.length < this.user.contributionsCount
|
||||
)
|
||||
},
|
||||
activePosts() {
|
||||
if (!this.user.contributions) {
|
||||
if (!this.Post) {
|
||||
return []
|
||||
}
|
||||
return this.uniq(this.user.contributions.filter(post => !post.deleted))
|
||||
return this.uniq(this.Post.filter(post => !post.deleted))
|
||||
},
|
||||
socialMediaLinks() {
|
||||
const { socialMedia = [] } = this.user
|
||||
@ -327,6 +334,11 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleTab(tab) {
|
||||
this.tabActive = tab
|
||||
this.Post = null
|
||||
this.filter = tabToFilterMapping({ tab, id: this.$route.params.id })
|
||||
},
|
||||
uniq(items, field = 'id') {
|
||||
return uniqBy(items, field)
|
||||
},
|
||||
@ -338,19 +350,16 @@ export default {
|
||||
// this.page++
|
||||
// Fetch more data and transform the original result
|
||||
this.page++
|
||||
this.$apollo.queries.User.fetchMore({
|
||||
this.$apollo.queries.Post.fetchMore({
|
||||
variables: {
|
||||
slug: this.$route.params.slug,
|
||||
filter: this.filter,
|
||||
first: this.pageSize,
|
||||
offset: this.offset,
|
||||
},
|
||||
// Transform the previous result with new data
|
||||
updateQuery: (previousResult, { fetchMoreResult }) => {
|
||||
let output = { User: this.User }
|
||||
output.User[0].contributions = [
|
||||
...previousResult.User[0].contributions,
|
||||
...fetchMoreResult.User[0].contributions,
|
||||
]
|
||||
let output = { Post: this.Post }
|
||||
output.Post = [...previousResult.Post, ...fetchMoreResult.Post]
|
||||
return output
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
@ -358,19 +367,28 @@ export default {
|
||||
},
|
||||
},
|
||||
apollo: {
|
||||
User: {
|
||||
Post: {
|
||||
query() {
|
||||
return require('~/graphql/UserProfileQuery.js').default(this)
|
||||
return PostQuery(this.$i18n)
|
||||
},
|
||||
variables() {
|
||||
return {
|
||||
slug: this.$route.params.slug,
|
||||
filter: this.filter,
|
||||
first: this.pageSize,
|
||||
offset: 0,
|
||||
}
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
},
|
||||
User: {
|
||||
query() {
|
||||
return UserQuery(this.$i18n)
|
||||
},
|
||||
variables() {
|
||||
return { id: this.$route.params.id }
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -380,8 +398,48 @@ export default {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ds-tab-nav .ds-card-content .ds-tab-nav-item:hover {
|
||||
border-bottom: 3px solid #c9c6ce;
|
||||
.Tab {
|
||||
border-collapse: collapse;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.Tab:hover {
|
||||
border-bottom: 2px solid #c9c6ce;
|
||||
}
|
||||
|
||||
.Tabs {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
&__tab {
|
||||
float: left;
|
||||
width: 33.333%;
|
||||
text-align: center;
|
||||
&:first-child.active ~ .Tabs__presentation-slider {
|
||||
left: 0;
|
||||
}
|
||||
&:nth-child(2).active ~ .Tabs__presentation-slider {
|
||||
left: 33.333%;
|
||||
}
|
||||
&:nth-child(3).active ~ .Tabs__presentation-slider {
|
||||
left: calc(33.333% * 2);
|
||||
}
|
||||
}
|
||||
&__presentation-slider {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 33.333%;
|
||||
height: 2px;
|
||||
background-color: #17b53f;
|
||||
transition: left 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-avatar.ds-avatar {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user