mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Use kebab-case for components in templates
This commit is contained in:
JB
parent
05dcfab27a
commit
56ed20f3bf
@ -19,6 +19,7 @@ module.exports = {
|
||||
// add your custom rules here
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
'vue/component-name-in-template-casing': ['error', 'kebab-case']
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,29 +5,36 @@
|
||||
:open-group="Math.random().toString()"
|
||||
placement="top-start"
|
||||
trigger="manual"
|
||||
offset="0">
|
||||
offset="0"
|
||||
>
|
||||
<a
|
||||
v-router-link
|
||||
:href="author.slug ? $router.resolve({ name: 'profile-slug', params: { slug: author.slug } }).href : null"
|
||||
style="white-space: nowrap; display: flex; align-items: center;"
|
||||
@mouseover="popoverMouseEnter"
|
||||
@mouseleave="popoveMouseLeave">
|
||||
@mouseleave="popoveMouseLeave"
|
||||
>
|
||||
<div style="display: inline-block; float: left; margin-right: 4px; height: 100%; vertical-align: middle;">
|
||||
<ds-avatar
|
||||
:image="author.avatar"
|
||||
:name="author.name"
|
||||
style="display: inline-block; vertical-align: middle;"
|
||||
size="32px" />
|
||||
size="32px"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: inline-block; height: 100%; vertical-align: middle;">
|
||||
<b
|
||||
class="username"
|
||||
style="vertical-align: middle;">{{ author.name | truncate(trunc, 18) }}</b>
|
||||
style="vertical-align: middle;"
|
||||
>
|
||||
{{ author.name | truncate(trunc, 18) }}
|
||||
</b>
|
||||
<template v-if="post.createdAt">
|
||||
<br>
|
||||
<ds-text
|
||||
size="small"
|
||||
color="soft">
|
||||
color="soft"
|
||||
>
|
||||
{{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
|
||||
</ds-text>
|
||||
</template>
|
||||
@ -37,7 +44,8 @@
|
||||
slot="popover"
|
||||
style="min-width: 250px;"
|
||||
@mouseover="popoverMouseEnter"
|
||||
@mouseleave="popoveMouseLeave">
|
||||
@mouseleave="popoveMouseLeave"
|
||||
>
|
||||
<!--<ds-avatar
|
||||
:image="author.avatar"
|
||||
:name="author.name || 'Anonymus'"
|
||||
@ -46,28 +54,32 @@
|
||||
<hc-badges
|
||||
v-if="author.badges && author.badges.length"
|
||||
:badges="author.badges"
|
||||
style="margin-bottom: -10px" />
|
||||
style="margin-bottom: -10px"
|
||||
/>
|
||||
<ds-flex>
|
||||
<ds-flex-item class="ds-tab-nav-item">
|
||||
<ds-space margin="small">
|
||||
<ds-number
|
||||
:count="fanCount"
|
||||
label="Folgen"
|
||||
size="x-large" />
|
||||
size="x-large"
|
||||
/>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
|
||||
<ds-space margin="small">
|
||||
<ds-number
|
||||
:count="author.contributionsCount"
|
||||
label="Beiträge" />
|
||||
label="Beiträge"
|
||||
/>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item class="ds-tab-nav-item">
|
||||
<ds-space margin="small">
|
||||
<ds-number
|
||||
:count="author.commentsCount"
|
||||
label="Kommentare" />
|
||||
label="Kommentare"
|
||||
/>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
@ -79,15 +91,17 @@
|
||||
<ds-flex
|
||||
v-if="!itsMe"
|
||||
gutter="x-small"
|
||||
style="margin-bottom: 0;">
|
||||
style="margin-bottom: 0;"
|
||||
>
|
||||
<ds-flex-item :width="{base: 3}">
|
||||
<hc-follow-button
|
||||
:follow-id="author.id"
|
||||
@update="voted = true" />
|
||||
@update="voted = true"
|
||||
/>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{base: 1}" >
|
||||
<ds-flex-item :width="{base: 1}">
|
||||
<ds-button full-width>
|
||||
<ds-icon name="user-times"/>
|
||||
<ds-icon name="user-times" />
|
||||
</ds-button>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
@ -98,7 +112,6 @@
|
||||
|
||||
<script>
|
||||
import HcFollowButton from '~/components/FollowButton.vue'
|
||||
import HcCountTo from '~/components/CountTo.vue'
|
||||
import HcBadges from '~/components/Badges.vue'
|
||||
|
||||
let mouseEnterTimer = null
|
||||
@ -108,7 +121,6 @@ export default {
|
||||
name: 'HcAuthor',
|
||||
components: {
|
||||
HcFollowButton,
|
||||
HcCountTo,
|
||||
HcBadges
|
||||
},
|
||||
props: {
|
||||
|
||||
@ -3,15 +3,18 @@
|
||||
:class="[
|
||||
(badges.length === 2) && 'hc-badges-dual'
|
||||
]"
|
||||
class="hc-badges">
|
||||
class="hc-badges"
|
||||
>
|
||||
<div
|
||||
v-for="badge in badges"
|
||||
:key="badge.key"
|
||||
class="hc-badge-container">
|
||||
class="hc-badge-container"
|
||||
>
|
||||
<img
|
||||
:title="badge.key"
|
||||
:src="badge.icon"
|
||||
class="hc-badge" >
|
||||
class="hc-badge"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
<span>
|
||||
<no-ssr
|
||||
placeholder="0"
|
||||
tag="span">
|
||||
tag="span"
|
||||
>
|
||||
<count-to
|
||||
:start-val="startVal"
|
||||
:end-val="endVal"
|
||||
|
||||
@ -5,7 +5,10 @@
|
||||
icon="plus"
|
||||
primary
|
||||
full-width
|
||||
@click.prevent="follow">Folgen</ds-button>
|
||||
@click.prevent="follow"
|
||||
>
|
||||
Folgen
|
||||
</ds-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<ds-space
|
||||
margin-top="large"
|
||||
style="text-align: center">
|
||||
style="text-align: center"
|
||||
>
|
||||
<ds-button
|
||||
:icon="loading ? 'spinner' : 'arrow-down'"
|
||||
:disabled="loading"
|
||||
ghost
|
||||
@click="$emit('click')">
|
||||
@click="$emit('click')"
|
||||
>
|
||||
mehr laden
|
||||
</ds-button>
|
||||
</ds-space>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="VueToNuxtLogo">
|
||||
<div class="Triangle Triangle--two"/>
|
||||
<div class="Triangle Triangle--one"/>
|
||||
<div class="Triangle Triangle--three"/>
|
||||
<div class="Triangle Triangle--four"/>
|
||||
<div class="Triangle Triangle--two" />
|
||||
<div class="Triangle Triangle--one" />
|
||||
<div class="Triangle Triangle--three" />
|
||||
<div class="Triangle Triangle--four" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -6,21 +6,25 @@
|
||||
<ds-card
|
||||
:header="post.title"
|
||||
:image="post.image"
|
||||
style="cursor: pointer; position: relative;">
|
||||
style="cursor: pointer; position: relative;"
|
||||
>
|
||||
<ds-space margin-bottom="large">
|
||||
<div
|
||||
class="hc-editor-content"
|
||||
v-html="excerpt" />
|
||||
v-html="excerpt"
|
||||
/>
|
||||
</ds-space>
|
||||
<ds-space
|
||||
margin="small"
|
||||
style="position: absolute; bottom: 44px;">
|
||||
style="position: absolute; bottom: 44px;"
|
||||
>
|
||||
<!-- TODO: find better solution for rendering errors -->
|
||||
<no-ssr>
|
||||
<hc-author
|
||||
:post="post"
|
||||
:trunc="35"
|
||||
:show-author-popover="showAuthorPopover" />
|
||||
:show-author-popover="showAuthorPopover"
|
||||
/>
|
||||
</no-ssr>
|
||||
</ds-space>
|
||||
<template slot="footer">
|
||||
|
||||
@ -1,18 +1,23 @@
|
||||
<template>
|
||||
<ds-space
|
||||
margin="large"
|
||||
style="text-align: center">
|
||||
style="text-align: center"
|
||||
>
|
||||
<ds-button
|
||||
:disabled="disabled || loading"
|
||||
danger
|
||||
size="x-large"
|
||||
icon="heart"
|
||||
@click="shout" />
|
||||
@click="shout"
|
||||
/>
|
||||
<ds-space margin-bottom="xx-small" />
|
||||
<ds-text color="soft">
|
||||
<ds-heading
|
||||
style="display: inline"
|
||||
tag="h3">{{ shoutedCount }}x</ds-heading> Empfohlen
|
||||
tag="h3"
|
||||
>
|
||||
{{ shoutedCount }}x
|
||||
</ds-heading> Empfohlen
|
||||
</ds-text>
|
||||
</ds-space>
|
||||
</template>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="layout-blank">
|
||||
<ds-container>
|
||||
<div style="padding: 5rem 2rem;">
|
||||
<nuxt/>
|
||||
<nuxt />
|
||||
</div>
|
||||
</ds-container>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
<ds-container style="padding: .5rem 3rem .2rem;">
|
||||
<a
|
||||
v-router-link
|
||||
href="/">
|
||||
href="/"
|
||||
>
|
||||
<ds-logo />
|
||||
</a>
|
||||
<template v-if="isLoggedIn">
|
||||
@ -15,26 +16,33 @@
|
||||
placement="bottom-end"
|
||||
trigger="manual"
|
||||
offset="10"
|
||||
style="float: right">
|
||||
style="float: right"
|
||||
>
|
||||
<a
|
||||
:href="$router.resolve({name: 'profile-slug', params: {slug: user.slug}}).href"
|
||||
@click.prevent="toggleMenu()">
|
||||
@click.prevent="toggleMenu()"
|
||||
>
|
||||
<ds-avatar
|
||||
:image="user.avatar"
|
||||
:name="user.name"
|
||||
size="42" />
|
||||
size="42"
|
||||
/>
|
||||
</a>
|
||||
<div
|
||||
slot="popover"
|
||||
style="padding-top: .5rem; padding-bottom: .5rem;"
|
||||
@mouseover="popoverMouseEnter"
|
||||
@mouseleave="popoveMouseLeave">
|
||||
@mouseleave="popoveMouseLeave"
|
||||
>
|
||||
Hallo {{ user.name }}
|
||||
<ds-menu
|
||||
:routes="routes"
|
||||
style="margin-left: -15px; margin-right: -15px; padding-top: 1rem; padding-bottom: 1rem;"/>
|
||||
style="margin-left: -15px; margin-right: -15px; padding-top: 1rem; padding-bottom: 1rem;"
|
||||
/>
|
||||
<ds-space margin="xx-small" />
|
||||
<nuxt-link :to="{ name: 'logout'}">Logout</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'logout'}">
|
||||
Logout
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</v-popover>
|
||||
</no-ssr>
|
||||
@ -43,7 +51,7 @@
|
||||
</div>
|
||||
<ds-container>
|
||||
<div style="padding: 6rem 2rem 5rem;">
|
||||
<nuxt/>
|
||||
<nuxt />
|
||||
</div>
|
||||
</ds-container>
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
<ds-flex-item>
|
||||
<transition
|
||||
name="slide-up"
|
||||
appear>
|
||||
appear
|
||||
>
|
||||
<nuxt-child />
|
||||
</transition>
|
||||
</ds-flex-item>
|
||||
|
||||
@ -9,11 +9,13 @@
|
||||
:count="0"
|
||||
label="Users"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
uppercase
|
||||
>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to
|
||||
:start-val="statisticsBefore.countUsers || 0"
|
||||
:end-val="statistics.countUsers || 0" />
|
||||
:end-val="statistics.countUsers || 0"
|
||||
/>
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-space>
|
||||
@ -24,11 +26,13 @@
|
||||
:count="0"
|
||||
label="Posts"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
uppercase
|
||||
>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to
|
||||
:start-val="statisticsBefore.countPosts || 0"
|
||||
:end-val="statistics.countPosts || 0" />
|
||||
:end-val="statistics.countPosts || 0"
|
||||
/>
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-space>
|
||||
@ -39,11 +43,13 @@
|
||||
:count="0"
|
||||
label="Comments"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
uppercase
|
||||
>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to
|
||||
:start-val="statisticsBefore.countComments || 0"
|
||||
:end-val="statistics.countComments || 0" />
|
||||
:end-val="statistics.countComments || 0"
|
||||
/>
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-space>
|
||||
@ -54,11 +60,13 @@
|
||||
:count="0"
|
||||
label="Notifications"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
uppercase
|
||||
>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to
|
||||
:start-val="statisticsBefore.countNotifications || 0"
|
||||
:end-val="statistics.countNotifications || 0" />
|
||||
:end-val="statistics.countNotifications || 0"
|
||||
/>
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-space>
|
||||
@ -69,11 +77,13 @@
|
||||
:count="0"
|
||||
label="Organization"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
uppercase
|
||||
>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to
|
||||
:start-val="statisticsBefore.countOrganizations || 0"
|
||||
:end-val="statistics.countOrganizations || 0" />
|
||||
:end-val="statistics.countOrganizations || 0"
|
||||
/>
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-space>
|
||||
@ -84,11 +94,13 @@
|
||||
:count="0"
|
||||
label="Projects"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
uppercase
|
||||
>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to
|
||||
:start-val="statisticsBefore.countProjects || 0"
|
||||
:end-val="statistics.countProjects || 0" />
|
||||
:end-val="statistics.countProjects || 0"
|
||||
/>
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-space>
|
||||
@ -99,11 +111,13 @@
|
||||
:count="0"
|
||||
label="Open Invites"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
uppercase
|
||||
>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to
|
||||
:start-val="statisticsBefore.countInvites || 0"
|
||||
:end-val="statistics.countInvites || 0" />
|
||||
:end-val="statistics.countInvites || 0"
|
||||
/>
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-space>
|
||||
@ -114,11 +128,13 @@
|
||||
:count="0"
|
||||
label="Follows"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
uppercase
|
||||
>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to
|
||||
:start-val="statisticsBefore.countFollows || 0"
|
||||
:end-val="statistics.countFollows || 0" />
|
||||
:end-val="statistics.countFollows || 0"
|
||||
/>
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-space>
|
||||
@ -129,11 +145,13 @@
|
||||
:count="0"
|
||||
label="Shouts"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
uppercase
|
||||
>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to
|
||||
:start-val="statisticsBefore.countShouts || 0"
|
||||
:end-val="statistics.countShouts || 0" />
|
||||
:end-val="statistics.countShouts || 0"
|
||||
/>
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-space>
|
||||
|
||||
@ -3,18 +3,21 @@
|
||||
<ds-flex
|
||||
v-if="Post && Post.length"
|
||||
:width="{ base: '100%' }"
|
||||
gutter="base">
|
||||
gutter="base"
|
||||
>
|
||||
<ds-flex-item
|
||||
v-for="post in uniq(Post)"
|
||||
:key="post.id"
|
||||
:width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
|
||||
:key="post.id">
|
||||
>
|
||||
<hc-post-card :post="post" />
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<hc-load-more
|
||||
v-if="true"
|
||||
:loading="$apollo.loading"
|
||||
@click="showMoreContributions" />
|
||||
@click="showMoreContributions"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -12,50 +12,63 @@
|
||||
<ds-flex gutter="small">
|
||||
<ds-flex-item
|
||||
:width="{ base: '100%', sm: '50%' }"
|
||||
center>
|
||||
center
|
||||
>
|
||||
<ds-space
|
||||
margin-top="small"
|
||||
margin-bottom="xxx-small"
|
||||
center>
|
||||
center
|
||||
>
|
||||
<img
|
||||
class="login-image"
|
||||
src="/img/sign-up/humanconnection.svg"
|
||||
alt="Human Connection">
|
||||
alt="Human Connection"
|
||||
>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item
|
||||
:width="{ base: '100%', sm: '50%' }"
|
||||
center>
|
||||
center
|
||||
>
|
||||
<ds-space margin="small">
|
||||
<ds-text size="small">Wenn Du ein Konto bei Human Connection hast, melde Dich bitte hier an.</ds-text>
|
||||
<ds-text size="small">
|
||||
Wenn Du ein Konto bei Human Connection hast, melde Dich bitte hier an.
|
||||
</ds-text>
|
||||
</ds-space>
|
||||
<form
|
||||
:disabled="pending"
|
||||
@submit.prevent="onSubmit">
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<ds-input
|
||||
:disabled="pending"
|
||||
v-model="form.email"
|
||||
:disabled="pending"
|
||||
placeholder="Deine E-Mail"
|
||||
type="email"
|
||||
icon="envelope"/>
|
||||
icon="envelope"
|
||||
/>
|
||||
<ds-input
|
||||
:disabled="pending"
|
||||
v-model="form.password"
|
||||
:disabled="pending"
|
||||
placeholder="Dein Password"
|
||||
icon="lock"
|
||||
icon-right="question-circle"
|
||||
type="password"/>
|
||||
type="password"
|
||||
/>
|
||||
<ds-button
|
||||
:loading="pending"
|
||||
primary
|
||||
full-width>
|
||||
full-width
|
||||
>
|
||||
Anmelden
|
||||
</ds-button>
|
||||
<ds-space margin="x-small">
|
||||
<a
|
||||
href="https://human-connection.org"
|
||||
title="zur Präsentationsseite"
|
||||
target="_blank">Was ist Human Connection?</a>
|
||||
target="_blank"
|
||||
>
|
||||
Was ist Human Connection?
|
||||
</a>
|
||||
</ds-space>
|
||||
</form>
|
||||
</ds-flex-item>
|
||||
|
||||
@ -3,25 +3,32 @@
|
||||
<ds-flex>
|
||||
<ds-flex-item
|
||||
:width="{ base: '100%' }"
|
||||
center>
|
||||
center
|
||||
>
|
||||
<ds-space
|
||||
style="text-align: center;"
|
||||
margin-top="large"
|
||||
margin-bottom="xxx-small"
|
||||
center>
|
||||
center
|
||||
>
|
||||
<img
|
||||
style="width: 200px;"
|
||||
src="/img/sign-up/onourjourney.png"
|
||||
alt="Human Connection">
|
||||
alt="Human Connection"
|
||||
>
|
||||
</ds-space>
|
||||
<ds-space
|
||||
style="text-align: center;"
|
||||
margin-top="small"
|
||||
margin-bottom="xxx-small"
|
||||
center>
|
||||
center
|
||||
>
|
||||
<ds-heading
|
||||
tag="h3"
|
||||
soft>Logging out...</ds-heading>
|
||||
soft
|
||||
>
|
||||
Logging out...
|
||||
</ds-heading>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
<ds-flex-item>
|
||||
<transition
|
||||
name="slide-up"
|
||||
appear>
|
||||
appear
|
||||
>
|
||||
<nuxt-child />
|
||||
</transition>
|
||||
</ds-flex-item>
|
||||
|
||||
@ -3,38 +3,48 @@
|
||||
v-if="post"
|
||||
:image="post.image"
|
||||
:header="post.title"
|
||||
class="post-card">
|
||||
class="post-card"
|
||||
>
|
||||
<hc-author :post="post" />
|
||||
<ds-space margin-bottom="small" />
|
||||
<!-- Content -->
|
||||
<div
|
||||
class="content hc-editor-content"
|
||||
v-html="post.content" />
|
||||
v-html="post.content"
|
||||
/>
|
||||
<!-- Shout Button -->
|
||||
<ds-space margin="xx-large" />
|
||||
<hc-shout-button
|
||||
v-if="post.author"
|
||||
:count="post.shoutedCount"
|
||||
:post-id="post.id" />
|
||||
:post-id="post.id"
|
||||
/>
|
||||
<!-- Categories -->
|
||||
<div class="tags">
|
||||
<ds-icon name="compass" /> <ds-tag
|
||||
v-for="category in post.categories"
|
||||
:key="category.id">{{ category.name }}</ds-tag>
|
||||
:key="category.id"
|
||||
>
|
||||
{{ category.name }}
|
||||
</ds-tag>
|
||||
</div>
|
||||
<!-- Tags -->
|
||||
<template v-if="post.tags && post.tags.length">
|
||||
<ds-space margin="xx-small"/>
|
||||
<ds-space margin="xx-small" />
|
||||
<div class="tags">
|
||||
<ds-icon name="tags" /> <ds-tag
|
||||
v-for="tag in post.tags"
|
||||
:key="tag.id"><ds-icon name="tag" /> {{ tag.name }}</ds-tag>
|
||||
:key="tag.id"
|
||||
>
|
||||
<ds-icon name="tag" /> {{ tag.name }}
|
||||
</ds-tag>
|
||||
</div>
|
||||
</template>
|
||||
<ds-space margin="small"/>
|
||||
<ds-space margin="small" />
|
||||
<!-- Comments -->
|
||||
<ds-section
|
||||
slot="footer">
|
||||
slot="footer"
|
||||
>
|
||||
<h3 style="margin-top: 0;">
|
||||
<span>
|
||||
<ds-icon name="comments" />
|
||||
@ -42,7 +52,8 @@
|
||||
v-if="post.commentsCount"
|
||||
style="transform: scale(.8); margin-top: -4px; margin-left: -12px; position: absolute;"
|
||||
color="primary"
|
||||
round>
|
||||
round
|
||||
>
|
||||
{{ post.commentsCount }}
|
||||
</ds-tag> Comments
|
||||
</span>
|
||||
@ -51,27 +62,35 @@
|
||||
<div
|
||||
v-if="post.commentsCount"
|
||||
id="comments"
|
||||
class="comments">
|
||||
class="comments"
|
||||
>
|
||||
<div
|
||||
v-for="comment in post.comments"
|
||||
:key="comment.id"
|
||||
class="comment">
|
||||
class="comment"
|
||||
>
|
||||
<ds-space margin-bottom="x-small">
|
||||
<hc-author :post="comment" />
|
||||
</ds-space>
|
||||
<div
|
||||
v-if="!comment.deleted"
|
||||
style="padding-left: 40px;"
|
||||
v-html="comment.contentExcerpt" />
|
||||
v-html="comment.contentExcerpt"
|
||||
/>
|
||||
<ds-text
|
||||
v-else
|
||||
style="padding-left: 40px; font-weight: bold;"
|
||||
color="soft"><ds-icon name="ban" /> Vom Benutzer gelöscht</ds-text>
|
||||
color="soft"
|
||||
>
|
||||
<ds-icon name="ban" /> Vom Benutzer gelöscht
|
||||
</ds-text>
|
||||
</div>
|
||||
<ds-space margin-bottom="small" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<p style="text-align: center; opacity: .5;">NO COMMENTS</p>
|
||||
<p style="text-align: center; opacity: .5;">
|
||||
NO COMMENTS
|
||||
</p>
|
||||
</div>
|
||||
</ds-section>
|
||||
</ds-card>
|
||||
|
||||
@ -1,37 +1,48 @@
|
||||
<template>
|
||||
<ds-card>
|
||||
<h2 style="margin-bottom: .2em;">Mehr Informationen</h2>
|
||||
<h2 style="margin-bottom: .2em;">
|
||||
Mehr Informationen
|
||||
</h2>
|
||||
<p>Hier findest du weitere infos zum Thema.</p>
|
||||
<ds-space/>
|
||||
<ds-space />
|
||||
<h3><ds-icon name="compass" /> Themenkategorien</h3>
|
||||
<div class="tags">
|
||||
<ds-tag
|
||||
v-for="category in post.categories"
|
||||
:key="category.id">{{ category.name }}</ds-tag>
|
||||
:key="category.id"
|
||||
>
|
||||
{{ category.name }}
|
||||
</ds-tag>
|
||||
</div>
|
||||
<template v-if="post.tags && post.tags.length">
|
||||
<h3><ds-icon name="tags" /> Schlagwörter</h3>
|
||||
<div class="tags">
|
||||
<ds-tag
|
||||
v-for="tag in post.tags"
|
||||
:key="tag.id"><ds-icon name="tag" /> {{ tag.name }}</ds-tag>
|
||||
:key="tag.id"
|
||||
>
|
||||
<ds-icon name="tag" /> {{ tag.name }}
|
||||
</ds-tag>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Verwandte Beiträge</h3>
|
||||
<ds-section style="margin: 0 -1.5rem; padding: 1.5rem;">
|
||||
<ds-flex
|
||||
v-if="post.relatedContributions && post.relatedContributions.length"
|
||||
gutter="small">
|
||||
gutter="small"
|
||||
>
|
||||
<ds-flex-item
|
||||
v-for="relatedPost in post.relatedContributions"
|
||||
:key="relatedPost.id"
|
||||
:width="{ base: '50%' }">
|
||||
:width="{ base: '50%' }"
|
||||
>
|
||||
<hc-post-card :post="relatedPost" />
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<ds-space
|
||||
v-else
|
||||
style="text-align: center; padding-top: 2em; opacity: .6;">
|
||||
style="text-align: center; padding-top: 2em; opacity: .6;"
|
||||
>
|
||||
No related Posts
|
||||
</ds-space>
|
||||
</ds-section>
|
||||
|
||||
@ -3,35 +3,43 @@
|
||||
<ds-card v-if="user && user.image">
|
||||
<p>PROFILE IMAGE</p>
|
||||
</ds-card>
|
||||
<ds-space/>
|
||||
<ds-space />
|
||||
<ds-flex
|
||||
v-if="user"
|
||||
:width="{ base: '100%' }"
|
||||
gutter="base">
|
||||
gutter="base"
|
||||
>
|
||||
<ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
|
||||
<ds-card style="position: relative; height: auto;">
|
||||
<ds-avatar
|
||||
:image="user.avatar"
|
||||
:name="user.name || 'Anonymus'"
|
||||
class="profile-avatar"
|
||||
size="120px" />
|
||||
size="120px"
|
||||
/>
|
||||
<ds-space margin="small">
|
||||
<ds-heading
|
||||
tag="h3"
|
||||
align="center"
|
||||
no-margin>{{ user.name }}</ds-heading>
|
||||
no-margin
|
||||
>
|
||||
{{ user.name }}
|
||||
</ds-heading>
|
||||
<ds-text
|
||||
align="center"
|
||||
color="soft"
|
||||
size="small">
|
||||
size="small"
|
||||
>
|
||||
Mitglied seid {{ user.createdAt | date('MMMM yyyy') }}
|
||||
</ds-text>
|
||||
</ds-space>
|
||||
<ds-space
|
||||
v-if="user.badges && user.badges.length"
|
||||
margin="x-small">
|
||||
margin="x-small"
|
||||
>
|
||||
<hc-badges
|
||||
:badges="user.badges" />
|
||||
:badges="user.badges"
|
||||
/>
|
||||
</ds-space>
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
@ -39,7 +47,8 @@
|
||||
<ds-number label="Folgen">
|
||||
<hc-count-to
|
||||
slot="count"
|
||||
:end-val="followedByCount" />
|
||||
:end-val="followedByCount"
|
||||
/>
|
||||
</ds-number>
|
||||
</no-ssr>
|
||||
</ds-flex-item>
|
||||
@ -48,33 +57,39 @@
|
||||
<ds-number label="Folgt">
|
||||
<hc-count-to
|
||||
slot="count"
|
||||
:end-val="Number(user.followingCount) || 0" />
|
||||
:end-val="Number(user.followingCount) || 0"
|
||||
/>
|
||||
</ds-number>
|
||||
</no-ssr>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<ds-space
|
||||
margin="small">
|
||||
margin="small"
|
||||
>
|
||||
<hc-follow-button
|
||||
v-if="!myProfile"
|
||||
:follow-id="user.id"
|
||||
@update="voted = true && fetchUser()" />
|
||||
@update="voted = true && fetchUser()"
|
||||
/>
|
||||
</ds-space>
|
||||
</ds-card>
|
||||
<ds-space/>
|
||||
<ds-space />
|
||||
<ds-heading
|
||||
tag="h3"
|
||||
soft
|
||||
style="text-align: center; margin-bottom: 10px;">
|
||||
style="text-align: center; margin-bottom: 10px;"
|
||||
>
|
||||
Netzwerk
|
||||
</ds-heading>
|
||||
<ds-card style="position: relative; height: auto;">
|
||||
<ds-space
|
||||
v-if="user.following && user.following.length"
|
||||
margin="x-small">
|
||||
margin="x-small"
|
||||
>
|
||||
<ds-text
|
||||
tag="h5"
|
||||
color="soft">
|
||||
color="soft"
|
||||
>
|
||||
Wem folgt {{ user.name | truncate(15) }}?
|
||||
</ds-text>
|
||||
</ds-space>
|
||||
@ -82,34 +97,44 @@
|
||||
<ds-space
|
||||
v-for="follow in uniq(user.following)"
|
||||
:key="follow.id"
|
||||
margin="x-small">
|
||||
margin="x-small"
|
||||
>
|
||||
<!-- TODO: find better solution for rendering errors -->
|
||||
<no-ssr>
|
||||
<hc-related-user
|
||||
:post="follow"
|
||||
:trunc="15" />
|
||||
:trunc="15"
|
||||
/>
|
||||
</no-ssr>
|
||||
</ds-space>
|
||||
<ds-space
|
||||
v-if="user.followingCount - user.following.length"
|
||||
margin="small">
|
||||
margin="small"
|
||||
>
|
||||
<ds-text
|
||||
size="small"
|
||||
color="softer">und {{ user.followingCount - user.following.length }} weitere</ds-text>
|
||||
color="softer"
|
||||
>
|
||||
und {{ user.followingCount - user.following.length }} weitere
|
||||
</ds-text>
|
||||
</ds-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p style="text-align: center; opacity: .5;">{{ user.name }} folgt niemandem</p>
|
||||
<p style="text-align: center; opacity: .5;">
|
||||
{{ user.name }} folgt niemandem
|
||||
</p>
|
||||
</template>
|
||||
</ds-card>
|
||||
<ds-space/>
|
||||
<ds-space />
|
||||
<ds-card style="position: relative; height: auto;">
|
||||
<ds-space
|
||||
v-if="user.followedBy && user.followedBy.length"
|
||||
margin="x-small">
|
||||
margin="x-small"
|
||||
>
|
||||
<ds-text
|
||||
tag="h5"
|
||||
color="soft">
|
||||
color="soft"
|
||||
>
|
||||
Wer folgt {{ user.name | truncate(15) }}?
|
||||
</ds-text>
|
||||
</ds-space>
|
||||
@ -117,31 +142,40 @@
|
||||
<ds-space
|
||||
v-for="follow in uniq(user.followedBy)"
|
||||
:key="follow.id"
|
||||
margin="x-small">
|
||||
margin="x-small"
|
||||
>
|
||||
<!-- TODO: find better solution for rendering errors -->
|
||||
<no-ssr>
|
||||
<hc-related-user
|
||||
:post="follow"
|
||||
:trunc="15" />
|
||||
:trunc="15"
|
||||
/>
|
||||
</no-ssr>
|
||||
</ds-space>
|
||||
<ds-space
|
||||
v-if="user.followedByCount - user.followedBy.length"
|
||||
margin="small">
|
||||
margin="small"
|
||||
>
|
||||
<ds-text
|
||||
size="small"
|
||||
color="softer">und {{ user.followedByCount - user.followedBy.length }} weitere</ds-text>
|
||||
color="softer"
|
||||
>
|
||||
und {{ user.followedByCount - user.followedBy.length }} weitere
|
||||
</ds-text>
|
||||
</ds-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p style="text-align: center; opacity: .5;">niemand folgt {{ user.name }}</p>
|
||||
<p style="text-align: center; opacity: .5;">
|
||||
niemand folgt {{ user.name }}
|
||||
</p>
|
||||
</template>
|
||||
</ds-card>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
|
||||
<ds-flex
|
||||
:width="{ base: '100%' }"
|
||||
gutter="small">
|
||||
gutter="small"
|
||||
>
|
||||
<ds-flex-item>
|
||||
<ds-card class="ds-tab-nav">
|
||||
<ds-flex>
|
||||
@ -152,7 +186,8 @@
|
||||
<ds-number label="Beiträge">
|
||||
<hc-count-to
|
||||
slot="count"
|
||||
:end-val="user.contributionsCount" />
|
||||
:end-val="user.contributionsCount"
|
||||
/>
|
||||
</ds-number>
|
||||
</no-ssr>
|
||||
</ds-space>
|
||||
@ -164,7 +199,8 @@
|
||||
<ds-number label="Kommentiert">
|
||||
<hc-count-to
|
||||
slot="count"
|
||||
:end-val="user.commentsCount" />
|
||||
:end-val="user.commentsCount"
|
||||
/>
|
||||
</ds-number>
|
||||
</no-ssr>
|
||||
</ds-space>
|
||||
@ -176,7 +212,8 @@
|
||||
<ds-number label="Empfohlen">
|
||||
<hc-count-to
|
||||
slot="count"
|
||||
:end-val="user.shoutedCount" />
|
||||
:end-val="user.shoutedCount"
|
||||
/>
|
||||
</ds-number>
|
||||
</no-ssr>
|
||||
</ds-space>
|
||||
@ -186,17 +223,20 @@
|
||||
</ds-flex-item>
|
||||
<ds-flex-item
|
||||
v-for="post in uniq(user.contributions.filter(post => !post.deleted))"
|
||||
:key="post.id"
|
||||
:width="{ base: '100%', md: '100%', xl: '50%' }"
|
||||
:key="post.id">
|
||||
>
|
||||
<hc-post-card
|
||||
:post="post"
|
||||
:show-author-popover="false" />
|
||||
:show-author-popover="false"
|
||||
/>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<hc-load-more
|
||||
v-if="hasMore"
|
||||
:loading="$apollo.loading"
|
||||
@click="showMoreContributions" />
|
||||
@click="showMoreContributions"
|
||||
/>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
<ds-flex-item>
|
||||
<transition
|
||||
name="slide-up"
|
||||
appear>
|
||||
appear
|
||||
>
|
||||
<nuxt-child />
|
||||
</transition>
|
||||
</ds-flex-item>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user