ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update to use <client-only> instead of <no-ssr>

Browse Source
This commit is contained in:
Matt Rider 2019-08-26 17:09:24 +02:00
parent f11091c4ce
commit 2af4151918
24 changed files with 80 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/components/Comment.spec.js
View File

@ -8,7 +8,7 @@ const localVue = createLocalVue()
localVue.use(Vuex) localVue.use(Vuex)
localVue.use(Styleguide) localVue.use(Styleguide)
config.stubs['no-ssr'] = '<span><slot /></span>' config.stubs['client-only'] = '<span><slot /></span>'
describe('Comment.vue', () => { describe('Comment.vue', () => {
let propsData let propsData

4
webapp/components/Comment.vue
View File

@ -15,7 +15,7 @@
<hc-user :user="author" :date-time="comment.createdAt" /> <hc-user :user="author" :date-time="comment.createdAt" />
</ds-space> </ds-space>
<!-- Content Menu (can open Modals) --> <!-- Content Menu (can open Modals) -->
<no-ssr> <client-only>
<content-menu <content-menu
placement="bottom-end" placement="bottom-end"
resource-type="comment" resource-type="comment"
@ -25,7 +25,7 @@
:is-owner="isAuthor(author.id)" :is-owner="isAuthor(author.id)"
@showEditCommentMenu="editCommentMenu" @showEditCommentMenu="editCommentMenu"
/> />
</no-ssr> </client-only>
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
<div v-if="openEditCommentMenu"> <div v-if="openEditCommentMenu">

2
webapp/components/CommentList/CommentList.spec.js
View File

@ -14,7 +14,7 @@ localVue.filter('truncate', string => string)
config.stubs['v-popover'] = '<span><slot /></span>' config.stubs['v-popover'] = '<span><slot /></span>'
config.stubs['nuxt-link'] = '<span><slot /></span>' config.stubs['nuxt-link'] = '<span><slot /></span>'
config.stubs['no-ssr'] = '<span><slot /></span>' config.stubs['client-only'] = '<span><slot /></span>'
describe('CommentList.vue', () => { describe('CommentList.vue', () => {
let mocks let mocks

2
webapp/components/ContributionForm/ContributionForm.spec.js
View File

@ -16,7 +16,7 @@ localVue.use(Vuex)
localVue.use(Styleguide) localVue.use(Styleguide)
localVue.use(Filters) localVue.use(Filters)
config.stubs['no-ssr'] = '<span><slot /></span>' config.stubs['client-only'] = '<span><slot /></span>'
config.stubs['nuxt-link'] = '<span><slot /></span>' config.stubs['nuxt-link'] = '<span><slot /></span>'
config.stubs['v-popover'] = '<span><slot /></span>' config.stubs['v-popover'] = '<span><slot /></span>'

4
webapp/components/ContributionForm/ContributionForm.vue
View File

@ -14,7 +14,7 @@
<ds-space /> <ds-space />
<ds-input model="title" class="post-title" placeholder="Title" name="title" autofocus /> <ds-input model="title" class="post-title" placeholder="Title" name="title" autofocus />
<small class="smallTag">{{ form.title.length }}/{{ formSchema.title.max }}</small> <small class="smallTag">{{ form.title.length }}/{{ formSchema.title.max }}</small>
<no-ssr> <client-only>
<hc-editor <hc-editor
:users="users" :users="users"
:value="form.content" :value="form.content"
@ -22,7 +22,7 @@
@input="updateEditorContent" @input="updateEditorContent"
/> />
<small class="smallTag">{{ form.contentLength }}/{{ contentMax }}</small> <small class="smallTag">{{ form.contentLength }}/{{ contentMax }}</small>
</no-ssr> </client-only>
<ds-space margin-bottom="xxx-large" /> <ds-space margin-bottom="xxx-large" />
<hc-categories-select <hc-categories-select
model="categoryIds" model="categoryIds"

4
webapp/components/CountTo.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<span> <span>
<no-ssr placeholder="0" tag="span"> <client-only placeholder="0" tag="span">
<count-to <count-to
:start-val="startVal" :start-val="startVal"
:end-val="endVal" :end-val="endVal"
@ -8,7 +8,7 @@
:autoplay="autoplay" :autoplay="autoplay"
:separator="separator" :separator="separator"
/> />
</no-ssr> </client-only>
</span> </span>
</template> </template>

2
webapp/components/EditCommentForm/EditCommentForm.vue
View File

@ -2,7 +2,7 @@
<ds-form v-model="form" @submit="handleSubmit"> <ds-form v-model="form" @submit="handleSubmit">
<template slot-scope="{ errors }"> <template slot-scope="{ errors }">
<ds-card> <ds-card>
<!-- with no-ssr the content is not shown --> <!-- with client-only the content is not shown -->
<hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" /> <hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
<ds-space /> <ds-space />
<ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }"> <ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }">

2
webapp/components/PostCard/index.spec.js
View File

@ -10,7 +10,7 @@ localVue.use(Vuex)
localVue.use(Styleguide) localVue.use(Styleguide)
localVue.use(Filters) localVue.use(Filters)
config.stubs['no-ssr'] = '<span><slot /></span>' config.stubs['client-only'] = '<span><slot /></span>'
config.stubs['v-popover'] = '<span><slot /></span>' config.stubs['v-popover'] = '<span><slot /></span>'
describe('PostCard', () => { describe('PostCard', () => {

8
webapp/components/PostCard/index.vue
View File

@ -13,9 +13,9 @@
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
<!-- Username, Image & Date of Post --> <!-- Username, Image & Date of Post -->
<div> <div>
<no-ssr> <client-only>
<hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" /> <hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" />
</no-ssr> </client-only>
<hc-ribbon :text="$t('post.name')" /> <hc-ribbon :text="$t('post.name')" />
</div> </div>
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
@ -42,7 +42,7 @@
:icon="category.icon" :icon="category.icon"
/> />
</div> </div>
<no-ssr> <client-only>
<div style="display: inline-block; float: right"> <div style="display: inline-block; float: right">
<!-- Shouts Count --> <!-- Shouts Count -->
<span :style="{ opacity: post.shoutedCount ? 1 : 0.5 }"> <span :style="{ opacity: post.shoutedCount ? 1 : 0.5 }">
@ -63,7 +63,7 @@
:is-owner="isAuthor" :is-owner="isAuthor"
/> />
</div> </div>
</no-ssr> </client-only>
</template> </template>
</ds-card> </ds-card>
</template> </template>

4
webapp/components/User/index.vue
View File

@ -25,9 +25,9 @@
<div v-if="dateTime" style="display: inline;"> <div v-if="dateTime" style="display: inline;">
<ds-text align="left" size="small" color="soft"> <ds-text align="left" size="small" color="soft">
<ds-icon name="clock" /> <ds-icon name="clock" />
<no-ssr> <client-only>
<hc-relative-date-time :date-time="dateTime" /> <hc-relative-date-time :date-time="dateTime" />
</no-ssr> </client-only>
</ds-text> </ds-text>
</div> </div>
</div> </div>

2
webapp/components/notifications/Notification/Notification.spec.js
View File

@ -8,7 +8,7 @@ const localVue = createLocalVue()
localVue.use(Styleguide) localVue.use(Styleguide)
localVue.use(Filters) localVue.use(Filters)
config.stubs['no-ssr'] = '<span><slot /></span>' config.stubs['client-only'] = '<span><slot /></span>'
describe('Notification', () => { describe('Notification', () => {
let stubs let stubs

4
webapp/components/notifications/Notification/Notification.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<ds-space :class="[{ read: notification.read }, notification]" margin-bottom="x-small"> <ds-space :class="[{ read: notification.read }, notification]" margin-bottom="x-small">
<no-ssr> <client-only>
<ds-space margin-bottom="x-small"> <ds-space margin-bottom="x-small">
<hc-user <hc-user
v-if="resourceType == 'Post'" v-if="resourceType == 'Post'"
@ -13,7 +13,7 @@
<ds-text color="soft"> <ds-text color="soft">
{{ $t('notifications.menu.mentioned', { resource: resourceType }) }} {{ $t('notifications.menu.mentioned', { resource: resourceType }) }}
</ds-text> </ds-text>
</no-ssr> </client-only>
<ds-space margin-bottom="x-small" /> <ds-space margin-bottom="x-small" />
<nuxt-link <nuxt-link
class="notification-mention-post" class="notification-mention-post"

2
webapp/components/notifications/NotificationList/NotificationList.spec.js
View File

@ -13,7 +13,7 @@ localVue.use(Styleguide)
localVue.use(Filters) localVue.use(Filters)
localVue.filter('truncate', string => string) localVue.filter('truncate', string => string)
config.stubs['no-ssr'] = '<span><slot /></span>' config.stubs['client-only'] = '<span><slot /></span>'
config.stubs['v-popover'] = '<span><slot /></span>' config.stubs['v-popover'] = '<span><slot /></span>'
describe('NotificationList.vue', () => { describe('NotificationList.vue', () => {

20
webapp/layouts/default.vue
View File

@ -37,14 +37,14 @@
:width="{ base: '15%', sm: '15%', md: '10%', lg: '10%' }" :width="{ base: '15%', sm: '15%', md: '10%', lg: '10%' }"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
> >
<no-ssr> <client-only>
<filter-posts <filter-posts
v-show="showFilterPostsDropdown" v-show="showFilterPostsDropdown"
placement="top-start" placement="top-start"
offset="8" offset="8"
:categories="categories" :categories="categories"
/> />
</no-ssr> </client-only>
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '100%', md: '10%', lg: '2%' }" /> <ds-flex-item :width="{ base: '100%', sm: '100%', md: '10%', lg: '2%' }" />
<ds-flex-item <ds-flex-item
@ -59,14 +59,14 @@
'hide-mobile-menu': !toggleMobileMenu, 'hide-mobile-menu': !toggleMobileMenu,
}" }"
> >
<no-ssr> <client-only>
<locale-switch class="topbar-locale-switch" placement="top" offset="8" /> <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
</no-ssr> </client-only>
<template v-if="isLoggedIn"> <template v-if="isLoggedIn">
<no-ssr> <client-only>
<notification-menu placement="top" /> <notification-menu placement="top" />
</no-ssr> </client-only>
<no-ssr> <client-only>
<dropdown class="avatar-menu" offset="8"> <dropdown class="avatar-menu" offset="8">
<template slot="default" slot-scope="{ toggleMenu }"> <template slot="default" slot-scope="{ toggleMenu }">
<a <a
@ -113,7 +113,7 @@
</div> </div>
</template> </template>
</dropdown> </dropdown>
</no-ssr> </client-only>
</template> </template>
</div> </div>
</ds-flex-item> </ds-flex-item>
@ -140,9 +140,9 @@
<nuxt-link to="/changelog">{{ $t('site.changelog') }}</nuxt-link> <nuxt-link to="/changelog">{{ $t('site.changelog') }}</nuxt-link>
</div> </div>
<div id="overlay" /> <div id="overlay" />
<no-ssr> <client-only>
<modal /> <modal />
</no-ssr> </client-only>
</div> </div>
</template> </template>

40
webapp/pages/admin/index.vue
View File

@ -1,23 +1,23 @@
<template> <template>
<ds-card> <ds-card>
<no-ssr> <client-only>
<ds-space margin="large"> <ds-space margin="large">
<ds-flex> <ds-flex>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }"> <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<ds-space margin="small"> <ds-space margin="small">
<ds-number :count="0" :label="$t('admin.dashboard.users')" size="x-large" uppercase> <ds-number :count="0" :label="$t('admin.dashboard.users')" size="x-large" uppercase>
<no-ssr slot="count"> <client-only slot="count">
<hc-count-to :end-val="statistics.countUsers" /> <hc-count-to :end-val="statistics.countUsers" />
</no-ssr> </client-only>
</ds-number> </ds-number>
</ds-space> </ds-space>
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }"> <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<ds-space margin="small"> <ds-space margin="small">
<ds-number :count="0" :label="$t('admin.dashboard.posts')" size="x-large" uppercase> <ds-number :count="0" :label="$t('admin.dashboard.posts')" size="x-large" uppercase>
<no-ssr slot="count"> <client-only slot="count">
<hc-count-to :end-val="statistics.countPosts" /> <hc-count-to :end-val="statistics.countPosts" />
</no-ssr> </client-only>
</ds-number> </ds-number>
</ds-space> </ds-space>
</ds-flex-item> </ds-flex-item>
@ -29,9 +29,9 @@
size="x-large" size="x-large"
uppercase uppercase
> >
<no-ssr slot="count"> <client-only slot="count">
<hc-count-to :end-val="statistics.countComments" /> <hc-count-to :end-val="statistics.countComments" />
</no-ssr> </client-only>
</ds-number> </ds-number>
</ds-space> </ds-space>
</ds-flex-item> </ds-flex-item>
@ -43,9 +43,9 @@
size="x-large" size="x-large"
uppercase uppercase
> >
<no-ssr slot="count"> <client-only slot="count">
<hc-count-to :end-val="statistics.countNotifications" /> <hc-count-to :end-val="statistics.countNotifications" />
</no-ssr> </client-only>
</ds-number> </ds-number>
</ds-space> </ds-space>
</ds-flex-item> </ds-flex-item>
@ -57,9 +57,9 @@
size="x-large" size="x-large"
uppercase uppercase
> >
<no-ssr slot="count"> <client-only slot="count">
<hc-count-to :end-val="statistics.countOrganizations" /> <hc-count-to :end-val="statistics.countOrganizations" />
</no-ssr> </client-only>
</ds-number> </ds-number>
</ds-space> </ds-space>
</ds-flex-item> </ds-flex-item>
@ -71,42 +71,42 @@
size="x-large" size="x-large"
uppercase uppercase
> >
<no-ssr slot="count"> <client-only slot="count">
<hc-count-to :end-val="statistics.countProjects" /> <hc-count-to :end-val="statistics.countProjects" />
</no-ssr> </client-only>
</ds-number> </ds-number>
</ds-space> </ds-space>
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }"> <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<ds-space margin="small"> <ds-space margin="small">
<ds-number :count="0" :label="$t('admin.dashboard.invites')" size="x-large" uppercase> <ds-number :count="0" :label="$t('admin.dashboard.invites')" size="x-large" uppercase>
<no-ssr slot="count"> <client-only slot="count">
<hc-count-to :end-val="statistics.countInvites" /> <hc-count-to :end-val="statistics.countInvites" />
</no-ssr> </client-only>
</ds-number> </ds-number>
</ds-space> </ds-space>
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }"> <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<ds-space margin="small"> <ds-space margin="small">
<ds-number :count="0" :label="$t('admin.dashboard.follows')" size="x-large" uppercase> <ds-number :count="0" :label="$t('admin.dashboard.follows')" size="x-large" uppercase>
<no-ssr slot="count"> <client-only slot="count">
<hc-count-to :end-val="statistics.countFollows" /> <hc-count-to :end-val="statistics.countFollows" />
</no-ssr> </client-only>
</ds-number> </ds-number>
</ds-space> </ds-space>
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }"> <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<ds-space margin="small"> <ds-space margin="small">
<ds-number :count="0" :label="$t('admin.dashboard.shouts')" size="x-large" uppercase> <ds-number :count="0" :label="$t('admin.dashboard.shouts')" size="x-large" uppercase>
<no-ssr slot="count"> <client-only slot="count">
<hc-count-to :end-val="statistics.countShouts" /> <hc-count-to :end-val="statistics.countShouts" />
</no-ssr> </client-only>
</ds-number> </ds-number>
</ds-space> </ds-space>
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
</ds-space> </ds-space>
</no-ssr> </client-only>
</ds-card> </ds-card>
</template> </template>

2
webapp/pages/index.spec.js
View File

@ -15,7 +15,7 @@ localVue.use(Filters)
localVue.use(VTooltip) localVue.use(VTooltip)
localVue.use(InfiniteScroll) localVue.use(InfiniteScroll)
config.stubs['no-ssr'] = '<span><slot /></span>' config.stubs['client-only'] = '<span><slot /></span>'
config.stubs['router-link'] = '<span><slot /></span>' config.stubs['router-link'] = '<span><slot /></span>'
config.stubs['nuxt-link'] = '<span><slot /></span>' config.stubs['nuxt-link'] = '<span><slot /></span>'

4
webapp/pages/index.vue
View File

@ -36,7 +36,7 @@
</ds-grid-item> </ds-grid-item>
</template> </template>
</masonry-grid> </masonry-grid>
<no-ssr> <client-only>
<ds-button <ds-button
v-tooltip="{ content: 'Create a new Post', placement: 'left', delay: { show: 500 } }" v-tooltip="{ content: 'Create a new Post', placement: 'left', delay: { show: 500 } }"
:path="{ name: 'post-create' }" :path="{ name: 'post-create' }"
@ -45,7 +45,7 @@
size="x-large" size="x-large"
primary primary
/> />
</no-ssr> </client-only>
<div <div
v-if="hasMore" v-if="hasMore"
v-infinite-scroll="showMoreContributions" v-infinite-scroll="showMoreContributions"

4
webapp/pages/login.vue
View File

@ -10,9 +10,9 @@
<ds-card class="login-card"> <ds-card class="login-card">
<ds-flex gutter="small"> <ds-flex gutter="small">
<ds-flex-item :width="{ base: '100%', sm: '50%' }" centered> <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
<no-ssr> <client-only>
<locale-switch class="login-locale-switch" offset="5" /> <locale-switch class="login-locale-switch" offset="5" />
</no-ssr> </client-only>
<ds-space margin-top="small" margin-bottom="xxx-small" centered> <ds-space margin-top="small" margin-bottom="xxx-small" centered>
<img <img
class="login-image" class="login-image"

2
webapp/pages/post/_id/_slug/index.spec.js
View File

@ -10,7 +10,7 @@ localVue.use(Vuex)
localVue.use(Styleguide) localVue.use(Styleguide)
localVue.use(Filters) localVue.use(Filters)
config.stubs['no-ssr'] = '<span><slot /></span>' config.stubs['client-only'] = '<span><slot /></span>'
describe('PostSlug', () => { describe('PostSlug', () => {
let wrapper let wrapper

4
webapp/pages/post/_id/_slug/index.vue
View File

@ -8,7 +8,7 @@
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
<hc-user :user="post.author" :date-time="post.createdAt" /> <hc-user :user="post.author" :date-time="post.createdAt" />
<!-- Content Menu (can open Modals) --> <!-- Content Menu (can open Modals) -->
<no-ssr> <client-only>
<content-menu <content-menu
placement="bottom-end" placement="bottom-end"
resource-type="contribution" resource-type="contribution"
@ -16,7 +16,7 @@
:modalsData="menuModalsData" :modalsData="menuModalsData"
:is-owner="isAuthor(post.author ? post.author.id : null)" :is-owner="isAuthor(post.author ? post.author.id : null)"
/> />
</no-ssr> </client-only>
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
<ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading> <ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />

2
webapp/pages/profile/_id/_slug.spec.js
View File

@ -13,7 +13,7 @@ localVue.use(Filters)
localVue.use(InfiniteScroll) localVue.use(InfiniteScroll)
localVue.filter('date', d => d) localVue.filter('date', d => d)
config.stubs['no-ssr'] = '<span><slot /></span>' config.stubs['client-only'] = '<span><slot /></span>'
config.stubs['v-popover'] = '<span><slot /></span>' config.stubs['v-popover'] = '<span><slot /></span>'
config.stubs['nuxt-link'] = '<span><slot /></span>' config.stubs['nuxt-link'] = '<span><slot /></span>'

32
webapp/pages/profile/_id/_slug.vue
View File

@ -15,7 +15,7 @@
</hc-upload> </hc-upload>
<hc-avatar v-else :user="user" class="profile-avatar" size="x-large" /> <hc-avatar v-else :user="user" class="profile-avatar" size="x-large" />
<!-- Menu --> <!-- Menu -->
<no-ssr> <client-only>
<content-menu <content-menu
placement="bottom-end" placement="bottom-end"
resource-type="user" resource-type="user"
@ -25,7 +25,7 @@
@block="block" @block="block"
@unblock="unblock" @unblock="unblock"
/> />
</no-ssr> </client-only>
<ds-space margin="small"> <ds-space margin="small">
<ds-heading tag="h3" align="center" no-margin>{{ userName }}</ds-heading> <ds-heading tag="h3" align="center" no-margin>{{ userName }}</ds-heading>
<ds-text v-if="user.location" align="center" color="soft" size="small"> <ds-text v-if="user.location" align="center" color="soft" size="small">
@ -41,18 +41,18 @@
</ds-space> </ds-space>
<ds-flex> <ds-flex>
<ds-flex-item> <ds-flex-item>
<no-ssr> <client-only>
<ds-number :label="$t('profile.followers')"> <ds-number :label="$t('profile.followers')">
<hc-count-to slot="count" :end-val="user.followedByCount" /> <hc-count-to slot="count" :end-val="user.followedByCount" />
</ds-number> </ds-number>
</no-ssr> </client-only>
</ds-flex-item> </ds-flex-item>
<ds-flex-item> <ds-flex-item>
<no-ssr> <client-only>
<ds-number :label="$t('profile.following')"> <ds-number :label="$t('profile.following')">
<hc-count-to slot="count" :end-val="user.followingCount" /> <hc-count-to slot="count" :end-val="user.followingCount" />
</ds-number> </ds-number>
</no-ssr> </client-only>
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
<ds-space margin="small"> <ds-space margin="small">
@ -89,9 +89,9 @@
<template v-if="user.following && user.following.length"> <template v-if="user.following && user.following.length">
<ds-space v-for="follow in uniq(user.following)" :key="follow.id" margin="x-small"> <ds-space v-for="follow in uniq(user.following)" :key="follow.id" margin="x-small">
<!-- TODO: find better solution for rendering errors --> <!-- TODO: find better solution for rendering errors -->
<no-ssr> <client-only>
<user :user="follow" :trunc="15" /> <user :user="follow" :trunc="15" />
</no-ssr> </client-only>
</ds-space> </ds-space>
<ds-space v-if="user.followingCount - user.following.length" margin="small"> <ds-space v-if="user.followingCount - user.following.length" margin="small">
<ds-text size="small" color="softer"> <ds-text size="small" color="softer">
@ -119,9 +119,9 @@
<template v-if="user.followedBy && user.followedBy.length"> <template v-if="user.followedBy && user.followedBy.length">
<ds-space v-for="follow in uniq(user.followedBy)" :key="follow.id" margin="x-small"> <ds-space v-for="follow in uniq(user.followedBy)" :key="follow.id" margin="x-small">
<!-- TODO: find better solution for rendering errors --> <!-- TODO: find better solution for rendering errors -->
<no-ssr> <client-only>
<user :user="follow" :trunc="15" /> <user :user="follow" :trunc="15" />
</no-ssr> </client-only>
</ds-space> </ds-space>
<ds-space v-if="user.followedByCount - user.followedBy.length" margin="small"> <ds-space v-if="user.followedByCount - user.followedBy.length" margin="small">
<ds-text size="small" color="softer"> <ds-text size="small" color="softer">
@ -166,33 +166,33 @@
<li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'post' }"> <li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'post' }">
<a @click="handleTab('post')"> <a @click="handleTab('post')">
<ds-space margin="small"> <ds-space margin="small">
<no-ssr placeholder="Loading..."> <client-only placeholder="Loading...">
<ds-number :label="$t('common.post', null, user.contributionsCount)"> <ds-number :label="$t('common.post', null, user.contributionsCount)">
<hc-count-to slot="count" :end-val="user.contributionsCount" /> <hc-count-to slot="count" :end-val="user.contributionsCount" />
</ds-number> </ds-number>
</no-ssr> </client-only>
</ds-space> </ds-space>
</a> </a>
</li> </li>
<li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'comment' }"> <li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'comment' }">
<a @click="handleTab('comment')"> <a @click="handleTab('comment')">
<ds-space margin="small"> <ds-space margin="small">
<no-ssr placeholder="Loading..."> <client-only placeholder="Loading...">
<ds-number :label="$t('profile.commented')"> <ds-number :label="$t('profile.commented')">
<hc-count-to slot="count" :end-val="user.commentedCount" /> <hc-count-to slot="count" :end-val="user.commentedCount" />
</ds-number> </ds-number>
</no-ssr> </client-only>
</ds-space> </ds-space>
</a> </a>
</li> </li>
<li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'shout' }"> <li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'shout' }">
<a @click="handleTab('shout')"> <a @click="handleTab('shout')">
<ds-space margin="small"> <ds-space margin="small">
<no-ssr placeholder="Loading..."> <client-only placeholder="Loading...">
<ds-number :label="$t('profile.shouted')"> <ds-number :label="$t('profile.shouted')">
<hc-count-to slot="count" :end-val="user.shoutedCount" /> <hc-count-to slot="count" :end-val="user.shoutedCount" />
</ds-number> </ds-number>
</no-ssr> </client-only>
</ds-space> </ds-space>
</a> </a>
</li> </li>

2
webapp/storybook/config.js
View File

@ -13,7 +13,7 @@ Vue.component('nuxt-link', {
}, },
template: '<a href="#" @click.prevent="log()"><slot>NuxtLink</slot></a>', template: '<a href="#" @click.prevent="log()"><slot>NuxtLink</slot></a>',
}) })
Vue.component('no-ssr', { Vue.component('client-only', {
render() { render() {
return this.$slots.default return this.$slots.default
}, },

6
webapp/yarn.lock
View File

@ -1318,7 +1318,7 @@
vue "^2.6.10" vue "^2.6.10"
vue-client-only "^2.0.0" vue-client-only "^2.0.0"
vue-meta "^2.2.1" vue-meta "^2.2.1"
vue-no-ssr "^1.1.1" vue-client-only "^1.1.1"
vue-router "~3.0.7" vue-router "~3.0.7"
vue-template-compiler "^2.6.10" vue-template-compiler "^2.6.10"
vuex "^3.1.1" vuex "^3.1.1"
@ -15185,9 +15185,9 @@ vue-meta@^2.2.1:
dependencies: dependencies:
deepmerge "^4.0.0" deepmerge "^4.0.0"
vue-no-ssr@^1.1.1: vue-client-only@^1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz#875f3be6fb0ae41568a837f3ac1a80eaa137b998" resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-1.1.1.tgz#875f3be6fb0ae41568a837f3ac1a80eaa137b998"
integrity sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g== integrity sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==
vue-resize@^0.4.5: vue-resize@^0.4.5: