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

Merge remote-tracking branch 'origin/master' into 553-delete-comment

Browse Source 
# Conflicts:
#	webapp/components/Modal/DeleteModal.vue
#	webapp/components/PostCard/index.vue
#	webapp/components/comments/CommentList/index.vue
#	webapp/pages/index.vue
#	webapp/pages/post/_id/_slug/more-info.vue
This commit is contained in:
Wolfgang Huß 2019-06-03 10:39:13 +02:00
commit 948a99d9da
63 changed files with 368 additions and 1005 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
webapp/.eslintrc.js
View File

@ -10,7 +10,7 @@ module.exports = {
},
extends: [
'standard',
'plugin:vue/recommended',
'plugin:vue/essential',
'plugin:prettier/recommended'
],
// required to lint *.vue files
@ -25,7 +25,9 @@ module.exports = {
'no-console': ['error'],
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
'prettier/prettier': ['error'],
'prettier/prettier': ['error', {
htmlWhitespaceSensitivity: 'ignore'
}],
// 'newline-per-chained-call': [2]
}
}

4
webapp/Dockerfile
View File

@ -1,4 +1,4 @@
FROM node:10-alpine as base
FROM node:12.3.1-alpine as base
LABEL Description="Web Frontend of the Social Network Human-Connection.org" Vendor="Human-Connection gGmbH" Version="0.0.1" Maintainer="Human-Connection gGmbH (developer@human-connection.org)"
EXPOSE 3000
@ -18,7 +18,7 @@ COPY . .
FROM base as build-and-test
RUN cp .env.template .env
RUN yarn install --production=false --frozen-lockfile --non-interactive
RUN yarn install --ignore-engines --production=false --frozen-lockfile --non-interactive
RUN yarn run build
FROM base as production

7
webapp/components/Avatar/Avatar.vue
View File

@ -1,10 +1,5 @@
<template>
<ds-avatar
:image="avatarUrl"
:name="userName"
class="avatar"
:size="size"
/>
<ds-avatar :image="avatarUrl" :name="userName" class="avatar" :size="size" />
</template>
<script>

19
webapp/components/Badges.vue
View File

@ -1,20 +1,7 @@
<template>
<div
:class="[
(badges.length === 2) && 'hc-badges-dual'
]"
class="hc-badges"
>
<div
v-for="badge in badges"
:key="badge.key"
class="hc-badge-container"
>
<hc-image
:title="badge.key"
:image-props="{ src: badge.icon}"
class="hc-badge"
/>
<div :class="[badges.length === 2 && 'hc-badges-dual']" class="hc-badges">
<div v-for="badge in badges" :key="badge.key" class="hc-badge-container">
<hc-image :title="badge.key" :image-props="{ src: badge.icon }" class="hc-badge" />
</div>
</div>
</template>

5
webapp/components/Category/index.vue
View File

@ -1,9 +1,6 @@
<template>
<ds-tag>
<ds-icon
size="large"
:name="icon"
/>
<ds-icon size="large" :name="icon" />
{{ name }}
</ds-tag>
</template>

15
webapp/components/Comment.vue
View File

@ -1,17 +1,11 @@
<template>
<div v-if="(comment.deleted || comment.disabled) && !isModerator">
<ds-text
style="padding-left: 40px; font-weight: bold;"
color="soft"
>
<ds-text style="padding-left: 40px; font-weight: bold;" color="soft">
<ds-icon name="ban" />
{{ this.$t('comment.content.unavailable-placeholder') }}
</ds-text>
</div>
<div
v-else
:class="{'comment': true, 'disabled-content': (comment.deleted || comment.disabled)}"
>
<div v-else :class="{ comment: true, 'disabled-content': comment.deleted || comment.disabled }">
<ds-space margin-bottom="x-small">
<hc-user :user="author" />
</ds-space>
@ -28,10 +22,7 @@
<!-- eslint-disable vue/no-v-html -->
<!-- TODO: replace editor content with tiptap render view -->
<ds-space margin-bottom="small" />
<div
style="padding-left: 40px;"
v-html="comment.contentExcerpt"
/>
<div style="padding-left: 40px;" v-html="comment.contentExcerpt" />
<!-- eslint-enable vue/no-v-html -->
</div>
</template>

29
webapp/components/ContentMenu.vue
View File

@ -1,32 +1,13 @@
<template>
<dropdown
class="content-menu"
:placement="placement"
offset="5"
>
<template
slot="default"
slot-scope="{toggleMenu}"
>
<slot
name="button"
:toggleMenu="toggleMenu"
>
<ds-button
class="content-menu-trigger"
size="small"
ghost
@click.prevent="toggleMenu"
>
<dropdown class="content-menu" :placement="placement" offset="5">
<template slot="default" slot-scope="{ toggleMenu }">
<slot name="button" :toggleMenu="toggleMenu">
<ds-button class="content-menu-trigger" size="small" ghost @click.prevent="toggleMenu">
<ds-icon name="ellipsis-v" />
</ds-button>
</slot>
</template>
<div
slot="popover"
slot-scope="{toggleMenu}"
class="content-menu-popover"
>
<div slot="popover" slot-scope="{ toggleMenu }" class="content-menu-popover">
<ds-menu :routes="routes">
<ds-menu-item
slot="menuitem"

32
webapp/components/ContributionForm/index.vue
View File

@ -1,35 +1,13 @@
<template>
<ds-form
ref="contributionForm"
v-model="form"
:schema="formSchema"
@submit="submit"
>
<ds-form ref="contributionForm" v-model="form" :schema="formSchema" @submit="submit">
<template slot-scope="{ errors }">
<ds-card>
<ds-input
model="title"
class="post-title"
placeholder="Title"
name="title"
autofocus
/>
<ds-input model="title" class="post-title" placeholder="Title" name="title" autofocus />
<no-ssr>
<hc-editor
:users="users"
:value="form.content"
@input="updateEditorContent"
/>
<hc-editor :users="users" :value="form.content" @input="updateEditorContent" />
</no-ssr>
<div
slot="footer"
style="text-align: right"
>
<ds-button
:disabled="loading || disabled"
ghost
@click.prevent="$router.back()"
>
<div slot="footer" style="text-align: right">
<ds-button :disabled="loading || disabled" ghost @click.prevent="$router.back()">
{{ $t('actions.cancel') }}
</ds-button>
<ds-button

5
webapp/components/CountTo.vue
View File

@ -1,9 +1,6 @@
<template>
<span>
<no-ssr
placeholder="0"
tag="span"
>
<no-ssr placeholder="0" tag="span">
<count-to
:start-val="lastEndVal || startVal"
:end-val="endVal"

13
webapp/components/Dropdown.vue
View File

@ -7,17 +7,8 @@
trigger="manual"
:offset="offset"
>
<slot
:toggleMenu="toggleMenu"
:openMenu="openMenu"
:closeMenu="closeMenu"
:isOpen="isOpen"
/>
<div
slot="popover"
@mouseover="popoverMouseEnter"
@mouseleave="popoveMouseLeave"
>
<slot :toggleMenu="toggleMenu" :openMenu="openMenu" :closeMenu="closeMenu" :isOpen="isOpen" />
<div slot="popover" @mouseover="popoverMouseEnter" @mouseleave="popoveMouseLeave">
<slot
name="popover"
:toggleMenu="toggleMenu"

16
webapp/components/Editor/index.vue
View File

@ -1,10 +1,6 @@
<template>
<div class="editor">
<div
v-show="showSuggestions"
ref="suggestions"
class="suggestion-list"
>
<div v-show="showSuggestions" ref="suggestions" class="suggestion-list">
<template v-if="hasResults">
<div
v-for="(user, index) in filteredUsers"
@ -16,10 +12,7 @@
@{{ user.slug }}
</div>
</template>
<div
v-else
class="suggestion-list__item is-empty"
>
<div v-else class="suggestion-list__item is-empty">
No users found
</div>
</div>
@ -154,10 +147,7 @@
</ds-button>
</div>
</editor-floating-menu>
<editor-content
ref="editor"
:editor="editor"
/>
<editor-content ref="editor" :editor="editor" />
</div>
</template>

15
webapp/components/Empty.vue
View File

@ -1,9 +1,5 @@
<template>
<ds-space
class="hc-empty"
centered
:margin="margin"
>
<ds-space class="hc-empty" centered :margin="margin">
<ds-text>
<img
:src="iconPath"
@ -11,12 +7,9 @@
class="hc-empty-icon"
style="margin-bottom: 5px"
alt="Empty"
><br>
<ds-text
v-show="message"
class="hc-empty-message"
color="softer"
>
/>
<br />
<ds-text v-show="message" class="hc-empty-message" color="softer">
{{ message }}
</ds-text>
</ds-text>

5
webapp/components/Image/index.vue
View File

@ -1,8 +1,5 @@
<template>
<img
v-bind="imageProps"
:src="imageSrc"
>
<img v-bind="imageProps" :src="imageSrc" />
</template>
<script>

12
webapp/components/LoadMore.vue
View File

@ -1,14 +1,6 @@
<template>
<ds-space
margin-top="large"
style="text-align: center"
>
<ds-button
:loading="loading"
icon="arrow-down"
ghost
@click="$emit('click')"
>
<ds-space margin-top="large" style="text-align: center">
<ds-button :loading="loading" icon="arrow-down" ghost @click="$emit('click')">
{{ $t('actions.loadMore') }}
</ds-button>
</ds-space>

21
webapp/components/LocaleSwitch.vue
View File

@ -1,30 +1,19 @@
<template>
<dropdown
ref="menu"
:placement="placement"
:offset="offset"
>
<dropdown ref="menu" :placement="placement" :offset="offset">
<a
slot="default"
slot-scope="{toggleMenu}"
slot-scope="{ toggleMenu }"
class="locale-menu"
href="#"
@click.prevent="toggleMenu()"
>
<ds-icon
style="margin-right: 2px;"
name="globe"
/>
<ds-icon style="margin-right: 2px;" name="globe" />
{{ current.code.toUpperCase() }}
<ds-icon
style="margin-left: 2px"
size="xx-small"
name="angle-down"
/>
<ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
</a>
<ds-menu
slot="popover"
slot-scope="{toggleMenu}"
slot-scope="{ toggleMenu }"
class="locale-menu-popover"
:matcher="matcher"
:routes="routes"

28
webapp/components/Modal/DeleteModal.vue
View File

@ -1,30 +1,16 @@
<template>
<ds-modal
:title="title"
:is-open="isOpen"
@cancel="cancel"
>
<ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
<transition name="ds-transition-fade">
<ds-flex
v-if="success"
class="hc-modal-success"
centered
>
<sweetalert-icon icon="success" />
<ds-flex v-if="success" class="hc-modal-success" centered>
<sweetalert-icon icon="success"/>
</ds-flex>
</transition>
<!-- eslint-disable-next-line vue/no-v-html -->
<p v-html="message" />
<p v-html="message"/>
<template slot="footer">
<ds-button
class="cancel"
icon="close"
@click="cancel"
>
{{ $t(`delete.cancel`) }}
</ds-button>
<ds-button class="cancel" icon="close" @click="cancel">{{ $t('delete.cancel') }}</ds-button>
<ds-button
danger
@ -32,9 +18,7 @@
icon="trash"
:loading="loading"
@click="confirm"
>
{{ $t(`delete.submit`) }}
</ds-button>
>{{ $t('delete.submit') }}</ds-button>
</template>
</ds-modal>
</template>

18
webapp/components/Modal/DisableModal.vue
View File

@ -1,26 +1,14 @@
<template>
<ds-modal
:title="title"
:is-open="isOpen"
@cancel="cancel"
>
<ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
<!-- eslint-disable-next-line vue/no-v-html -->
<p v-html="message" />
<template slot="footer">
<ds-button
class="cancel"
@click="cancel"
>
<ds-button class="cancel" @click="cancel">
{{ $t('disable.cancel') }}
</ds-button>
<ds-button
danger
class="confirm"
icon="exclamation-circle"
@click="confirm"
>
<ds-button danger class="confirm" icon="exclamation-circle" @click="confirm">
{{ $t('disable.submit') }}
</ds-button>
</template>

22
webapp/components/Modal/ReportModal.vue
View File

@ -1,15 +1,7 @@
<template>
<ds-modal
:title="title"
:is-open="isOpen"
@cancel="cancel"
>
<ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
<transition name="ds-transition-fade">
<ds-flex
v-if="success"
class="hc-modal-success"
centered
>
<ds-flex v-if="success" class="hc-modal-success" centered>
<sweetalert-icon icon="success" />
</ds-flex>
</transition>
@ -17,14 +9,8 @@
<!-- eslint-disable-next-line vue/no-v-html -->
<p v-html="message" />
<template
slot="footer"
>
<ds-button
class="cancel"
icon="close"
@click="cancel"
>
<template slot="footer">
<ds-button class="cancel" icon="close" @click="cancel">
{{ $t('report.cancel') }}
</ds-button>

6
webapp/components/Password/Change.vue
View File

@ -27,11 +27,7 @@
/>
<password-strength :password="formData.newPassword" />
<ds-space margin-top="base">
<ds-button
:loading="loading"
:disabled="disabled"
primary
>
<ds-button :loading="loading" :disabled="disabled" primary>
{{ $t('settings.security.change-password.button') }}
</ds-button>
</ds-space>

10
webapp/components/Password/Strength.vue
View File

@ -1,16 +1,10 @@
<template>
<div class="field">
<div class="password-strength-meter">
<div
class="password-strength-meter-inner"
:class="'strength-' + strength"
/>
<div class="password-strength-meter-inner" :class="'strength-' + strength" />
</div>
<p class="help">
<span
v-if="pass"
:class="{ insecure: !isSecure }"
>
<span v-if="pass" :class="{ insecure: !isSecure }">
{{ $t('settings.security.change-password.passwordSecurity') }}:
<strong>{{ $t(`settings.security.change-password.passwordStrength${strength}`) }}</strong>
</span>

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

@ -1,10 +1,6 @@
<template>
<ds-flex-item :width="width">
<ds-card
:header="post.title"
:image="post.image"
:class="{'post-card': true, 'disabled-content': post.disabled}"
>
<ds-card :image="post.image" :class="{ 'post-card': true, 'disabled-content': post.disabled }">
<!-- Post Link Target -->
<nuxt-link
class="post-link"
@ -16,30 +12,20 @@
<!-- Username, Image & Date of Post -->
<div>
<no-ssr>
<hc-user
:user="post.author"
:trunc="35"
:date-time="post.createdAt"
/>
<hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" />
</no-ssr>
<hc-ribbon :text="$t('post.name')" />
</div>
<ds-space margin-bottom="small" />
<!-- Post Title -->
<ds-heading
tag="h3"
no-margin
>
<ds-heading tag="h3" no-margin>
{{ post.title }}
</ds-heading>
<ds-space margin-bottom="small" />
<!-- Post Content Excerpt -->
<!-- eslint-disable vue/no-v-html -->
<!-- TODO: replace editor content with tiptap render view -->
<div
class="hc-editor-content"
v-html="excerpt"
/>
<div class="hc-editor-content" v-html="excerpt" />
<!-- eslint-enable vue/no-v-html -->
<!-- Footer o the Post -->
<template slot="footer">
@ -48,20 +34,20 @@
<hc-category
v-for="category in post.categories"
:key="category.id"
v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}"
v-tooltip="{ content: category.name, placement: 'bottom-start', delay: { show: 500 } }"
:icon="category.icon"
/>
</div>
<no-ssr>
<div style="display: inline-block; float: right">
<!-- Shouts Count -->
<span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
<span :style="{ opacity: post.shoutedCount ? 1 : 0.5 }">
<ds-icon name="bullhorn" />
<small>{{ post.shoutedCount }}</small>
</span>
&nbsp;
<!-- Comments Count -->
<span :style="{ opacity: post.commentsCount ? 1 : .5 }">
<span :style="{ opacity: post.commentsCount ? 1 : 0.5 }">
<ds-icon name="comments" />
<small>{{ post.commentsCount }}</small>
</span>

39
webapp/components/SearchInput.vue
View File

@ -5,16 +5,12 @@
role="search"
:class="{
'is-active': isActive,
'is-open': isOpen
'is-open': isOpen,
}"
>
<div class="field">
<div class="control">
<a
v-if="isActive"
class="search-clear-btn"
@click="clear"
>
<a v-if="isActive" class="search-clear-btn" @click="clear">
&nbsp;
</a>
<ds-select
@ -42,42 +38,31 @@
@input.native="handleInput"
@click.capture.native="isOpen = true"
>
<template
slot="option"
slot-scope="{option}"
>
<template slot="option" slot-scope="{ option }">
<ds-flex>
<ds-flex-item class="search-option-label">
<ds-text>
{{ option.label | truncate(70) }}
</ds-text>
</ds-flex-item>
<ds-flex-item
class="search-option-meta"
width="280px"
>
<ds-flex-item class="search-option-meta" width="280px">
<ds-flex>
<ds-flex-item>
<ds-text
size="small"
color="softer"
class="search-meta"
>
<ds-text size="small" color="softer" class="search-meta">
<span style="text-align: right;">
<b>{{ option.commentsCount }}</b> <ds-icon name="comments" />
<b>{{ option.commentsCount }}</b>
<ds-icon name="comments" />
</span>
<span style="width: 36px; display: inline-block; text-align: right;">
<b>{{ option.shoutedCount }}</b> <ds-icon name="bullhorn" />
<b>{{ option.shoutedCount }}</b>
<ds-icon name="bullhorn" />
</span>
</ds-text>
</ds-flex-item>
<ds-flex-item>
<ds-text
size="small"
color="softer"
align="right"
>
{{ option.author.name | truncate(32) }} - {{ option.createdAt | dateTime('dd.MM.yyyy') }}
<ds-text size="small" color="softer" align="right">
{{ option.author.name | truncate(32) }} -
{{ option.createdAt | dateTime('dd.MM.yyyy') }}
</ds-text>
</ds-flex-item>
</ds-flex>

18
webapp/components/ShoutButton.vue
View File

@ -1,8 +1,5 @@
<template>
<ds-space
margin="large"
style="text-align: center"
>
<ds-space margin="large" style="text-align: center">
<ds-button
:loading="loading"
:disabled="disabled"
@ -13,16 +10,9 @@
@click="toggle"
/>
<ds-space margin-bottom="xx-small" />
<ds-text
color="soft"
class="shout-button-text"
>
<ds-heading
style="display: inline"
tag="h3"
>
{{ shoutedCount }}x
</ds-heading> {{ $t('shoutButton.shouted') }}
<ds-text color="soft" class="shout-button-text">
<ds-heading style="display: inline" tag="h3">{{ shoutedCount }}x</ds-heading>
{{ $t('shoutButton.shouted') }}
</ds-text>
</ds-space>
</template>

19
webapp/components/Upload/index.vue
View File

@ -8,7 +8,7 @@
:include-styling="false"
:style="backgroundImage"
@vdropzone-thumbnail="thumbnail"
@vdropzone-drop="vddrop"
@vdropzone-error="verror"
/>
</div>
</template>
@ -27,10 +27,11 @@ export default {
return {
dropzoneOptions: {
url: this.vddrop,
maxFilesize: 0.5,
maxFilesize: 5.0,
previewTemplate: this.template(),
dictDefaultMessage: '',
},
error: false,
}
},
computed: {
@ -44,6 +45,14 @@ export default {
}
},
},
watch: {
error() {
let that = this
setTimeout(function() {
that.error = false
}, 2000)
},
},
methods: {
template() {
return `<div class="dz-preview dz-file-preview">
@ -89,6 +98,12 @@ export default {
})
.catch(error => this.$toast.error(error.message))
},
verror(file, message) {
if (file.status === 'error') {
this.error = true
this.$toast.error(file.status, message)
}
},
},
}
</script>

32
webapp/components/Upload/spec.js
View File

@ -26,6 +26,7 @@ describe('Upload', () => {
success: jest.fn(),
error: jest.fn(),
},
$t: jest.fn(),
}
const propsData = {
@ -34,7 +35,7 @@ describe('Upload', () => {
},
}
const file = {
const fileSuccess = {
filename: 'avatar.jpg',
previewElement: {
classList: {
@ -59,13 +60,38 @@ describe('Upload', () => {
wrapper = shallowMount(Upload, { localVue, propsData, mocks })
})
afterEach(() => {
jest.clearAllMocks()
})
it('sends a the UpdateUser mutation when vddrop is called', () => {
wrapper.vm.vddrop([{ filename: 'avatar.jpg' }])
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
it('thumbnail', () => {
wrapper.vm.thumbnail(file, dataUrl)
expect(file.previewElement.classList.add).toHaveBeenCalledTimes(1)
wrapper.vm.thumbnail(fileSuccess, dataUrl)
expect(fileSuccess.previewElement.classList.add).toHaveBeenCalledTimes(1)
})
describe('error handling', () => {
const message = 'File upload failed'
const fileError = { status: 'error' }
it('defaults to error false', () => {
expect(wrapper.vm.error).toEqual(false)
})
it('shows an error toaster when verror is called', () => {
wrapper.vm.verror(fileError, message)
expect(mocks.$toast.error).toHaveBeenCalledWith(fileError.status, message)
})
it('changes error status from false to true to false', () => {
wrapper.vm.verror(fileError, message)
expect(wrapper.vm.error).toEqual(true)
jest.runAllTimers()
expect(wrapper.vm.error).toEqual(false)
})
})
})

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

@ -6,53 +6,24 @@
<hc-avatar />
</div>
<div style="display: inline-block; height: 100%; vertical-align: middle;">
<b
class="username"
style="vertical-align: middle;"
>{{ $t('profile.userAnonym') }}</b>
<b class="username" style="vertical-align: middle;">{{ $t('profile.userAnonym') }}</b>
</div>
</div>
<dropdown
v-else
:class="{'disabled-content': user.disabled}"
placement="top-start"
offset="0"
>
<template
slot="default"
slot-scope="{openMenu, closeMenu, isOpen}"
>
<nuxt-link
:to="userLink"
:class="['user', isOpen && 'active']"
>
<div
@mouseover="openMenu(true)"
@mouseleave="closeMenu(true)"
>
<dropdown v-else :class="{ 'disabled-content': user.disabled }" placement="top-start" offset="0">
<template slot="default" slot-scope="{ openMenu, closeMenu, isOpen }">
<nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
<div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
<div
style="display: inline-block; float: left; margin-right: 4px; height: 100%; vertical-align: middle;"
>
<hc-avatar
:user="user"
/>
<hc-avatar :user="user" />
</div>
<div style="display: inline-block; height: 100%; vertical-align: middle;">
<b
class="username"
style="vertical-align: middle;"
>{{ userName | truncate(18) }}</b>
<b class="username" style="vertical-align: middle;">{{ userName | truncate(18) }}</b>
</div>
<!-- Time -->
<div
v-if="dateTime"
style="display: inline;"
>
<ds-text
align="left"
size="small"
color="soft"
>
<div v-if="dateTime" style="display: inline;">
<ds-text align="left" size="small" color="soft">
<ds-icon name="clock" />
<no-ssr>
<hc-relative-date-time :date-time="dateTime" />
@ -64,10 +35,7 @@
</template>
<template slot="popover">
<div style="min-width: 250px">
<hc-badges
v-if="user.badges && user.badges.length"
:badges="user.badges"
/>
<hc-badges v-if="user.badges && user.badges.length" :badges="user.badges" />
<ds-text
v-if="user.location"
align="center"
@ -82,11 +50,7 @@
<ds-flex style="margin-top: -10px">
<ds-flex-item class="ds-tab-nav-item">
<ds-space margin="small">
<ds-number
:count="fanCount"
:label="$t('profile.followers')"
size="x-large"
/>
<ds-number :count="fanCount" :label="$t('profile.followers')" size="x-large" />
</ds-space>
</ds-flex-item>
<ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
@ -106,20 +70,16 @@
</ds-space>
</ds-flex-item>
</ds-flex>
<ds-flex
v-if="!itsMe"
gutter="x-small"
style="margin-bottom: 0;"
>
<ds-flex-item :width="{base: 3}">
<ds-flex v-if="!itsMe" gutter="x-small" style="margin-bottom: 0;">
<ds-flex-item :width="{ base: 3 }">
<hc-follow-button
:follow-id="user.id"
:is-followed="user.followedByCurrentUser"
@optimistic="follow => user.followedByCurrentUser = follow"
@update="follow => user.followedByCurrentUser = follow"
@optimistic="follow => (user.followedByCurrentUser = follow)"
@update="follow => (user.followedByCurrentUser = follow)"
/>
</ds-flex-item>
<ds-flex-item :width="{base: 1}">
<ds-flex-item :width="{ base: 1 }">
<ds-button fullwidth>
<ds-icon name="user-times" />
</ds-button>

26
webapp/components/comments/CommentForm/index.vue
View File

@ -1,36 +1,18 @@
<template>
<ds-form
v-model="form"
@submit="handleSubmit"
>
<ds-form v-model="form" @submit="handleSubmit">
<template slot-scope="{ errors }">
<ds-card>
<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-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }">
<ds-flex-item :width="{ base: '0%', md: '50%', sm: '0%', xs: '0%' }" />
<ds-flex-item :width="{ base: '40%', md: '20%', sm: '30%', xs: '30%' }">
<ds-button
:disabled="disabled"
ghost
class="cancelBtn"
@click.prevent="clear"
>
<ds-button :disabled="disabled" ghost class="cancelBtn" @click.prevent="clear">
{{ $t('actions.cancel') }}
</ds-button>
</ds-flex-item>
<ds-flex-item :width="{ base: '40%', md: '20%', sm: '40%', xs: '40%' }">
<ds-button
type="submit"
:loading="loading"
:disabled="disabled || errors"
primary
>
<ds-button type="submit" :loading="loading" :disabled="disabled || errors" primary>
{{ $t('post.comment.submit') }}
</ds-button>
</ds-flex-item>

17
webapp/components/comments/CommentList/index.vue
View File

@ -9,15 +9,14 @@
color="primary"
size="small"
round
>{{ comments.length }}</ds-tag>&nbsp; Comments
>
{{ comments.length }}
</ds-tag>
&nbsp; Comments
</span>
</h3>
<ds-space margin-bottom="large" />
<div
v-if="comments && comments.length"
id="comments"
class="comments"
>
<div v-if="comments && comments.length" id="comments" class="comments">
<comment
v-for="(comment, index) in comments"
:key="comment.id"
@ -25,11 +24,7 @@
@deleteComment="comments.splice(index, 1)"
/>
</div>
<hc-empty
v-else
name="empty"
icon="messages"
/>
<hc-empty v-else name="empty" icon="messages" />
</div>
</template>
<script>

22
webapp/components/notifications/Notification/index.vue
View File

@ -1,18 +1,11 @@
<template>
<ds-space
:class="{'notification': true, 'read': notification.read}"
margin-bottom="x-small"
>
<ds-space :class="{ notification: true, read: notification.read }" margin-bottom="x-small">
<no-ssr>
<ds-space margin-bottom="x-small">
<hc-user
:user="post.author"
:date-time="post.createdAt"
:trunc="35"
/>
<hc-user :user="post.author" :date-time="post.createdAt" :trunc="35" />
</ds-space>
<ds-text color="soft">
{{ $t("notifications.menu.mentioned") }}
{{ $t('notifications.menu.mentioned') }}
</ds-text>
</no-ssr>
<ds-space margin-bottom="x-small" />
@ -22,16 +15,11 @@
@click.native="$emit('read')"
>
<ds-space margin-bottom="x-small">
<ds-card
:header="post.title"
:image="post.image"
hover
space="x-small"
>
<ds-card :header="post.title" :image="post.image" hover space="x-small">
<ds-space margin-bottom="x-small" />
<!-- eslint-disable vue/no-v-html -->
<div v-html="excerpt" />
<!-- eslint-enable vue/no-v-html -->
<!-- eslint-enable vue/no-v-html -->
</ds-card>
</ds-space>
</nuxt-link>

32
webapp/components/notifications/NotificationMenu/index.vue
View File

@ -1,36 +1,16 @@
<template>
<ds-button
v-if="totalNotifications <= 0"
class="notifications-menu"
disabled
icon="bell"
>
<ds-button v-if="totalNotifications <= 0" class="notifications-menu" disabled icon="bell">
{{ totalNotifications }}
</ds-button>
<dropdown
v-else
class="notifications-menu"
>
<template
slot="default"
slot-scope="{toggleMenu}"
>
<ds-button
primary
icon="bell"
@click.prevent="toggleMenu"
>
<dropdown v-else class="notifications-menu">
<template slot="default" slot-scope="{ toggleMenu }">
<ds-button primary icon="bell" @click.prevent="toggleMenu">
{{ totalNotifications }}
</ds-button>
</template>
<template
slot="popover"
>
<template slot="popover">
<div class="notifications-menu-popover">
<notification-list
:notifications="notifications"
@markAsRead="markAsRead"
/>
<notification-list :notifications="notifications" @markAsRead="markAsRead" />
</div>
</template>
</dropdown>

58
webapp/layouts/default.vue
View File

@ -3,11 +3,7 @@
<div class="main-navigation">
<ds-container class="main-navigation-container">
<div class="main-navigation-left">
<a
v-router-link
style="display: inline-flex"
href="/"
>
<a v-router-link style="display: inline-flex" href="/">
<ds-logo />
</a>
</div>
@ -24,11 +20,7 @@
</div>
<div class="main-navigation-right">
<no-ssr>
<locale-switch
class="topbar-locale-switch"
placement="bottom"
offset="23"
/>
<locale-switch class="topbar-locale-switch" placement="bottom" offset="23" />
</no-ssr>
<template v-if="isLoggedIn">
<no-ssr>
@ -36,45 +28,32 @@
</no-ssr>
<no-ssr>
<dropdown class="avatar-menu">
<template
slot="default"
slot-scope="{toggleMenu}"
>
<template slot="default" slot-scope="{ toggleMenu }">
<a
class="avatar-menu-trigger"
:href="$router.resolve({name: 'profile-id-slug', params: {id: user.id, slug: user.slug}}).href"
:href="
$router.resolve({
name: 'profile-id-slug',
params: { id: user.id, slug: user.slug },
}).href
"
@click.prevent="toggleMenu"
>
<hc-avatar
:user="user"
/>
<ds-icon
size="xx-small"
name="angle-down"
/>
<hc-avatar :user="user" />
<ds-icon size="xx-small" name="angle-down" />
</a>
</template>
<template
slot="popover"
slot-scope="{closeMenu}"
>
<template slot="popover" slot-scope="{ closeMenu }">
<div class="avatar-menu-popover">
{{ $t('login.hello') }}
<b>{{ userName }}</b>
<template v-if="user.role !== 'user'">
<ds-text
color="softer"
size="small"
style="margin-bottom: 0"
>
<ds-text color="softer" size="small" style="margin-bottom: 0">
{{ user.role | camelCase }}
</ds-text>
</template>
<hr>
<ds-menu
:routes="routes"
:matcher="matcher"
>
<hr />
<ds-menu :routes="routes" :matcher="matcher">
<ds-menu-item
slot="menuitem"
slot-scope="item"
@ -86,11 +65,8 @@
{{ item.route.name }}
</ds-menu-item>
</ds-menu>
<hr>
<nuxt-link
class="logout-link"
:to="{ name: 'logout'}"
>
<hr />
<nuxt-link class="logout-link" :to="{ name: 'logout' }">
<ds-icon name="sign-out" />
{{ $t('login.logout') }}
</nuxt-link>

36
webapp/nuxt.config.js
View File

@ -32,8 +32,8 @@ module.exports = {
locales: require('./locales'),
},
/*
** Headers of the page
*/
** Headers of the page
*/
head: {
title: 'Human Connection',
titleTemplate: '%s - Human Connection',
@ -46,8 +46,8 @@ module.exports = {
},
/*
** Customize the progress-bar color
*/
** Customize the progress-bar color
*/
loading: {
color: '#86b31e',
height: '2px',
@ -55,20 +55,20 @@ module.exports = {
},
/*
** Global CSS
*/
** Global CSS
*/
css: ['~assets/styles/main.scss'],
/*
** Global processed styles
*/
** Global processed styles
*/
styleResources: {
scss: styleguideStyles,
},
/*
** Plugins to load before mounting the App
*/
** Plugins to load before mounting the App
*/
plugins: [
{
src: `~/plugins/styleguide${process.env.STYLEGUIDE_DEV ? '-dev' : ''}.js`,
@ -93,8 +93,8 @@ module.exports = {
},
/*
** Nuxt.js modules
*/
** Nuxt.js modules
*/
modules: [
['@nuxtjs/dotenv', { only: envWhitelist }],
['nuxt-env', { keys: envWhitelist }],
@ -105,8 +105,8 @@ module.exports = {
],
/*
** Axios module configuration
*/
** Axios module configuration
*/
axios: {
// See https://github.com/nuxt-community/axios-module#options
debug: dev,
@ -181,12 +181,12 @@ module.exports = {
},
/*
** Build configuration
*/
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
** You can extend webpack config here
*/
extend(config, ctx) {
if (process.env.STYLEGUIDE_DEV) {
const path = require('path')

2
webapp/package.json
View File

@ -105,7 +105,7 @@
"jest": "~24.8.0",
"node-sass": "~4.12.0",
"nodemon": "~1.19.1",
"prettier": "~1.14.3",
"prettier": "~1.17.1",
"sass-loader": "~7.1.0",
"tippy.js": "^4.3.1",
"vue-jest": "~3.0.4",

10
webapp/pages/admin.vue
View File

@ -5,16 +5,10 @@
</ds-heading>
<ds-flex gutter="small">
<ds-flex-item :width="{ base: '100%', md: '200px' }">
<ds-menu
:routes="routes"
:is-exact="() => true"
/>
<ds-menu :routes="routes" :is-exact="() => true" />
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', md: 1 }">
<transition
name="slide-up"
appear
>
<transition name="slide-up" appear>
<nuxt-child />
</transition>
</ds-flex-item>

11
webapp/pages/admin/categories.vue
View File

@ -1,14 +1,7 @@
<template>
<ds-card :header="$t('admin.categories.name')">
<ds-table
:data="Category"
:fields="fields"
condensed
>
<template
slot="icon"
slot-scope="scope"
>
<ds-table :data="Category" :fields="fields" condensed>
<template slot="icon" slot-scope="scope">
<ds-icon :name="scope.row.icon" />
</template>
</ds-table>

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

@ -5,34 +5,18 @@
<ds-flex>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<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">
<hc-count-to
:start-val="0"
:end-val="statistics.countUsers || 0"
/>
<hc-count-to :start-val="0" :end-val="statistics.countUsers || 0" />
</no-ssr>
</ds-number>
</ds-space>
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<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">
<hc-count-to
:start-val="0"
:end-val="statistics.countPosts || 0"
/>
<hc-count-to :start-val="0" :end-val="statistics.countPosts || 0" />
</no-ssr>
</ds-number>
</ds-space>
@ -46,10 +30,7 @@
uppercase
>
<no-ssr slot="count">
<hc-count-to
:start-val="0"
:end-val="statistics.countComments || 0"
/>
<hc-count-to :start-val="0" :end-val="statistics.countComments || 0" />
</no-ssr>
</ds-number>
</ds-space>
@ -63,10 +44,7 @@
uppercase
>
<no-ssr slot="count">
<hc-count-to
:start-val="0"
:end-val="statistics.countNotifications || 0"
/>
<hc-count-to :start-val="0" :end-val="statistics.countNotifications || 0" />
</no-ssr>
</ds-number>
</ds-space>
@ -80,10 +58,7 @@
uppercase
>
<no-ssr slot="count">
<hc-count-to
:start-val="0"
:end-val="statistics.countOrganizations || 0"
/>
<hc-count-to :start-val="0" :end-val="statistics.countOrganizations || 0" />
</no-ssr>
</ds-number>
</ds-space>
@ -97,61 +72,34 @@
uppercase
>
<no-ssr slot="count">
<hc-count-to
:start-val="0"
:end-val="statistics.countProjects || 0"
/>
<hc-count-to :start-val="0" :end-val="statistics.countProjects || 0" />
</no-ssr>
</ds-number>
</ds-space>
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<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">
<hc-count-to
:start-val="0"
:end-val="statistics.countInvites || 0"
/>
<hc-count-to :start-val="0" :end-val="statistics.countInvites || 0" />
</no-ssr>
</ds-number>
</ds-space>
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<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">
<hc-count-to
:start-val="0"
:end-val="statistics.countFollows || 0"
/>
<hc-count-to :start-val="0" :end-val="statistics.countFollows || 0" />
</no-ssr>
</ds-number>
</ds-space>
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<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">
<hc-count-to
:start-val="0"
:end-val="statistics.countShouts || 0"
/>
<hc-count-to :start-val="0" :end-val="statistics.countShouts || 0" />
</no-ssr>
</ds-number>
</ds-space>

5
webapp/pages/admin/notifications.vue
View File

@ -1,9 +1,6 @@
<template>
<ds-card :header="$t('admin.notifications.name')">
<hc-empty
icon="tasks"
message="Coming Soon…"
/>
<hc-empty icon="tasks" message="Coming Soon…" />
</ds-card>
</template>

5
webapp/pages/admin/organizations.vue
View File

@ -1,9 +1,6 @@
<template>
<ds-card :header="$t('admin.organizations.name')">
<hc-empty
icon="tasks"
message="Coming Soon…"
/>
<hc-empty icon="tasks" message="Coming Soon…" />
</ds-card>
</template>

5
webapp/pages/admin/pages.vue
View File

@ -1,9 +1,6 @@
<template>
<ds-card :header="$t('admin.pages.name')">
<hc-empty
icon="tasks"
message="Coming Soon…"
/>
<hc-empty icon="tasks" message="Coming Soon…" />
</ds-card>
</template>

5
webapp/pages/admin/settings.vue
View File

@ -1,9 +1,6 @@
<template>
<ds-card :header="$t('admin.settings.name')">
<hc-empty
icon="tasks"
message="Coming Soon…"
/>
<hc-empty icon="tasks" message="Coming Soon…" />
</ds-card>
</template>

11
webapp/pages/admin/tags.vue
View File

@ -1,14 +1,7 @@
<template>
<ds-card :header="$t('admin.tags.name')">
<ds-table
:data="Tag"
:fields="fields"
condensed
>
<template
slot="id"
slot-scope="scope"
>
<ds-table :data="Tag" :fields="fields" condensed>
<template slot="id" slot-scope="scope">
{{ scope.index + 1 }}
</template>
</ds-table>

5
webapp/pages/admin/users.vue
View File

@ -1,9 +1,6 @@
<template>
<ds-card :header="$t('admin.users.name')">
<hc-empty
icon="tasks"
message="Coming Soon…"
/>
<hc-empty icon="tasks" message="Coming Soon…" />
</ds-card>
</template>

14
webapp/pages/index.vue
View File

@ -1,10 +1,6 @@
<template>
<div>
<ds-flex
v-if="Post && Post.length"
:width="{ base: '100%' }"
gutter="base"
>
<ds-flex v-if="Post && Post.length" :width="{ base: '100%' }" gutter="base">
<hc-post-card
v-for="(post, index) in uniq(Post)"
:key="post.id"
@ -15,7 +11,7 @@
</ds-flex>
<no-ssr>
<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' }"
class="post-add-button"
icon="plus"
@ -23,11 +19,7 @@
primary
/>
</no-ssr>
<hc-load-more
v-if="true"
:loading="$apollo.loading"
@click="showMoreContributions"
/>
<hc-load-more v-if="true" :loading="$apollo.loading" @click="showMoreContributions" />
</div>
</template>

42
webapp/pages/login.vue
View File

@ -1,12 +1,6 @@
<template>
<transition
name="fade"
appear
>
<ds-container
v-if="ready"
width="small"
>
<transition name="fade" appear>
<ds-container v-if="ready" width="small">
<ds-space margin="small">
<blockquote>
<p>{{ $t('quotes.african.quote') }}</p>
@ -15,41 +9,25 @@
</ds-space>
<ds-card class="login-card">
<ds-flex gutter="small">
<ds-flex-item
:width="{ base: '100%', sm: '50%' }"
centered
>
<ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
<no-ssr>
<locale-switch
class="login-locale-switch"
offset="5"
/>
<locale-switch class="login-locale-switch" offset="5" />
</no-ssr>
<ds-space
margin-top="small"
margin-bottom="xxx-small"
centered
>
<ds-space margin-top="small" margin-bottom="xxx-small" centered>
<img
class="login-image"
alt="Human Connection"
src="/img/sign-up/humanconnection.svg"
>
/>
</ds-space>
</ds-flex-item>
<ds-flex-item
:width="{ base: '100%', sm: '50%' }"
centered
>
<ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
<ds-space margin="small">
<ds-text size="small">
{{ $t('login.copy') }}
</ds-text>
</ds-space>
<form
:disabled="pending"
@submit.prevent="onSubmit"
>
<form :disabled="pending" @submit.prevent="onSubmit">
<ds-input
v-model="form.email"
:disabled="pending"
@ -82,7 +60,9 @@
:href="$t('login.moreInfoURL')"
:title="$t('login.moreInfoHint')"
target="_blank"
>{{ $t('login.moreInfo') }}</a>
>
{{ $t('login.moreInfo') }}
</a>
</ds-space>
</form>
</ds-flex-item>

30
webapp/pages/logout.vue
View File

@ -1,32 +1,12 @@
<template>
<ds-container width="small">
<ds-flex>
<ds-flex-item
:width="{ base: '100%' }"
centered
>
<ds-space
style="text-align: center;"
margin-top="large"
margin-bottom="xxx-small"
centered
>
<img
style="width: 200px;"
src="/img/sign-up/onourjourney.png"
alt="Human Connection"
>
<ds-flex-item :width="{ base: '100%' }" centered>
<ds-space style="text-align: center;" margin-top="large" margin-bottom="xxx-small" centered>
<img style="width: 200px;" src="/img/sign-up/onourjourney.png" alt="Human Connection" />
</ds-space>
<ds-space
style="text-align: center;"
margin-top="small"
margin-bottom="xxx-small"
centered
>
<ds-heading
tag="h3"
soft
>
<ds-space style="text-align: center;" margin-top="small" margin-bottom="xxx-small" centered>
<ds-heading tag="h3" soft>
Logging out...
</ds-heading>
</ds-space>

5
webapp/pages/moderation.vue
View File

@ -8,10 +8,7 @@
<ds-menu :routes="routes" />
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', md: 1 }">
<transition
name="slide-up"
appear
>
<transition name="slide-up" appear>
<nuxt-child />
</transition>
</ds-flex-item>

85
webapp/pages/moderation/index.vue
View File

@ -3,56 +3,48 @@
<ds-heading tag="h3">
{{ $t('moderation.reports.name') }}
</ds-heading>
<ds-table
v-if="Report && Report.length"
:data="Report"
:fields="fields"
condensed
>
<template
slot="name"
slot-scope="scope"
>
<ds-table v-if="Report && Report.length" :data="Report" :fields="fields" condensed>
<template slot="name" slot-scope="scope">
<div v-if="scope.row.type === 'Post'">
<nuxt-link
:to="{ name: 'post-id-slug', params: { id: scope.row.post.id, slug: scope.row.post.slug } }"
:to="{
name: 'post-id-slug',
params: { id: scope.row.post.id, slug: scope.row.post.slug },
}"
>
<b>{{ scope.row.post.title | truncate(50) }}</b>
</nuxt-link>
<br>
<ds-text
size="small"
color="soft"
>
<br />
<ds-text size="small" color="soft">
{{ scope.row.post.author.name }}
</ds-text>
</div>
<div v-else-if="scope.row.type === 'Comment'">
<nuxt-link
:to="{ name: 'post-id-slug', params: { id: scope.row.comment.post.id, slug: scope.row.comment.post.slug } }"
:to="{
name: 'post-id-slug',
params: { id: scope.row.comment.post.id, slug: scope.row.comment.post.slug },
}"
>
<b>{{ scope.row.comment.contentExcerpt | truncate(50) }}</b>
</nuxt-link>
<br>
<ds-text
size="small"
color="soft"
>
<br />
<ds-text size="small" color="soft">
{{ scope.row.comment.author.name }}
</ds-text>
</div>
<div v-else>
<nuxt-link
:to="{ name: 'profile-id-slug', params: { id: scope.row.user.id, slug: scope.row.user.slug } }"
:to="{
name: 'profile-id-slug',
params: { id: scope.row.user.id, slug: scope.row.user.slug },
}"
>
<b>{{ scope.row.user.name | truncate(50) }}</b>
</nuxt-link>
</div>
</template>
<template
slot="type"
slot-scope="scope"
>
<template slot="type" slot-scope="scope">
<ds-text color="soft">
<ds-icon
v-if="scope.row.type === 'Post'"
@ -71,45 +63,50 @@
/>
</ds-text>
</template>
<template
slot="submitter"
slot-scope="scope"
>
<template slot="submitter" slot-scope="scope">
<nuxt-link
:to="{ name: 'profile-id-slug', params: { id: scope.row.submitter.id, slug: scope.row.submitter.slug } }"
:to="{
name: 'profile-id-slug',
params: { id: scope.row.submitter.id, slug: scope.row.submitter.slug },
}"
>
{{ scope.row.submitter.name }}
</nuxt-link>
</template>
<template
slot="disabledBy"
slot-scope="scope"
>
<template slot="disabledBy" slot-scope="scope">
<nuxt-link
v-if="scope.row.type === 'Post' && scope.row.post.disabledBy"
:to="{ name: 'profile-id-slug', params: { id: scope.row.post.disabledBy.id, slug: scope.row.post.disabledBy.slug } }"
:to="{
name: 'profile-id-slug',
params: { id: scope.row.post.disabledBy.id, slug: scope.row.post.disabledBy.slug },
}"
>
<b>{{ scope.row.post.disabledBy.name | truncate(50) }}</b>
</nuxt-link>
<nuxt-link
v-else-if="scope.row.type === 'Comment' && scope.row.comment.disabledBy"
:to="{ name: 'profile-id-slug', params: { id: scope.row.comment.disabledBy.id, slug: scope.row.comment.disabledBy.slug } }"
:to="{
name: 'profile-id-slug',
params: {
id: scope.row.comment.disabledBy.id,
slug: scope.row.comment.disabledBy.slug,
},
}"
>
<b>{{ scope.row.comment.disabledBy.name | truncate(50) }}</b>
</nuxt-link>
<nuxt-link
v-else-if="scope.row.type === 'User' && scope.row.user.disabledBy"
:to="{ name: 'profile-id-slug', params: { id: scope.row.user.disabledBy.id, slug: scope.row.user.disabledBy.slug } }"
:to="{
name: 'profile-id-slug',
params: { id: scope.row.user.disabledBy.id, slug: scope.row.user.disabledBy.slug },
}"
>
<b>{{ scope.row.user.disabledBy.name | truncate(50) }}</b>
</nuxt-link>
</template>
</ds-table>
<hc-empty
v-else
icon="alert"
:message="$t('moderation.reports.empty')"
/>
<hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
</ds-card>
</template>

10
webapp/pages/post/_id.vue
View File

@ -2,18 +2,12 @@
<div>
<ds-flex gutter="small">
<ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
<transition
name="slide-up"
appear
>
<transition name="slide-up" appear>
<nuxt-child />
</transition>
</ds-flex-item>
<ds-flex-item :width="{ base: '200px' }">
<ds-menu
:routes="routes"
class="post-side-navigation"
/>
<ds-menu :routes="routes" class="post-side-navigation" />
</ds-flex-item>
</ds-flex>
</div>

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

@ -1,18 +1,12 @@
<template>
<transition
name="fade"
appear
>
<transition name="fade" appear>
<ds-card
v-if="post && ready"
:image="post.image"
:class="{'post-card': true, 'disabled-content': post.disabled}"
:class="{ 'post-card': true, 'disabled-content': post.disabled }"
>
<ds-space margin-bottom="small" />
<hc-user
:user="post.author"
:date-time="post.createdAt"
/>
<hc-user :user="post.author" :date-time="post.createdAt" />
<no-ssr>
<content-menu
placement="bottom-end"
@ -23,20 +17,14 @@
/>
</no-ssr>
<ds-space margin-bottom="small" />
<ds-heading
tag="h3"
no-margin
>
<ds-heading tag="h3" no-margin>
{{ post.title }}
</ds-heading>
<ds-space margin-bottom="small" />
<!-- Content -->
<!-- eslint-disable vue/no-v-html -->
<!-- TODO: replace editor content with tiptap render view -->
<div
class="content hc-editor-content"
v-html="post.content"
/>
<div class="content hc-editor-content" v-html="post.content" />
<!-- eslint-enable vue/no-v-html -->
<ds-space margin="xx-large" />
<!-- Categories -->
@ -45,23 +33,16 @@
<hc-category
v-for="category in post.categories"
:key="category.id"
v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
v-tooltip="{ content: category.name, placement: 'top-start', delay: { show: 300 } }"
:icon="category.icon"
:name="category.name"
/>
</div>
<ds-space margin-bottom="small" />
<!-- Tags -->
<div
v-if="post.tags && post.tags.length"
class="tags"
>
<div v-if="post.tags && post.tags.length" class="tags">
<ds-space margin="xx-small" />
<hc-tag
v-for="tag in post.tags"
:key="tag.id"
:name="tag.name"
/>
<hc-tag v-for="tag in post.tags" :key="tag.id" :name="tag.name" />
</div>
<!-- Shout Button -->
<hc-shout-button

28
webapp/pages/post/_id/_slug/more-info.vue
View File

@ -6,29 +6,29 @@
<p>Hier findest du weitere infos zum Thema.</p>
<ds-space />
<h3>
<ds-icon name="compass" />Themenkategorien
<ds-icon name="compass" />
Themenkategorien
</h3>
<div class="tags">
<ds-icon
v-for="category in post.categories"
:key="category.id"
v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
v-tooltip="{ content: category.name, placement: 'top-start', delay: { show: 300 } }"
:name="category.icon"
size="large"
/>&nbsp;
/>
&nbsp;
<!--<ds-tag
v-for="category in post.categories"
:key="category.id"><ds-icon :name="category.icon" /> {{ category.name }}</ds-tag>-->
</div>
<template v-if="post.tags && post.tags.length">
<h3>
<ds-icon name="tags" />Schlagwörter
<ds-icon name="tags" />
Schlagwörter
</h3>
<div class="tags">
<ds-tag
v-for="tag in post.tags"
:key="tag.id"
>
<ds-tag v-for="tag in post.tags" :key="tag.id">
<ds-icon name="tag" />
{{ tag.name }}
</ds-tag>
@ -36,10 +36,7 @@
</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"
>
<ds-flex v-if="post.relatedContributions && post.relatedContributions.length" gutter="small">
<hc-post-card
v-for="(relatedPost, index) in post.relatedContributions"
:key="relatedPost.id"
@ -48,12 +45,7 @@
@deletePost="post.relatedContributions.splice(index, 1)"
/>
</ds-flex>
<hc-empty
v-else
margin="large"
icon="file"
message="No related Posts"
/>
<hc-empty v-else margin="large" icon="file" message="No related Posts" />
</ds-section>
<ds-space margin-bottom="large" />
</ds-card>

5
webapp/pages/post/_id/_slug/take-action.vue
View File

@ -1,9 +1,6 @@
<template>
<ds-card header="Werde aktiv!">
<hc-empty
icon="tasks"
message="Coming Soon…"
/>
<hc-empty icon="tasks" message="Coming Soon…" />
</ds-card>
</template>

5
webapp/pages/post/create.vue
View File

@ -1,8 +1,5 @@
<template>
<ds-flex
:width="{ base: '100%' }"
gutter="base"
>
<ds-flex :width="{ base: '100%' }" gutter="base">
<ds-flex-item :width="{ base: '100%', md: 3 }">
<hc-contribution-form />
</ds-flex-item>

5
webapp/pages/post/edit/_id.vue
View File

@ -1,8 +1,5 @@
<template>
<ds-flex
:width="{ base: '100%' }"
gutter="base"
>
<ds-flex :width="{ base: '100%' }" gutter="base">
<ds-flex-item :width="{ base: '100%', md: 3 }">
<hc-contribution-form :contribution="contribution" />
</ds-flex-item>

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

@ -4,26 +4,14 @@
<p>PROFILE IMAGE</p>
</ds-card>
<ds-space />
<ds-flex
v-if="user"
:width="{ base: '100%' }"
gutter="base"
>
<ds-flex v-if="user" :width="{ base: '100%' }" gutter="base">
<ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
<ds-card
:class="{'disabled-content': user.disabled}"
:class="{ 'disabled-content': user.disabled }"
style="position: relative; height: auto;"
>
<hc-upload
v-if="myProfile"
:user="user"
/>
<hc-avatar
v-else
:user="user"
class="profile-avatar"
size="x-large"
/>
<hc-upload v-if="myProfile" :user="user" />
<hc-avatar v-else :user="user" class="profile-avatar" size="x-large" />
<no-ssr>
<content-menu
placement="bottom-end"
@ -35,54 +23,30 @@
/>
</no-ssr>
<ds-space margin="small">
<ds-heading
tag="h3"
align="center"
no-margin
>
{{ userName }}
</ds-heading>
<ds-text
v-if="user.location"
align="center"
color="soft"
size="small"
>
<ds-heading tag="h3" align="center" no-margin>{{ userName }}</ds-heading>
<ds-text v-if="user.location" align="center" color="soft" size="small">
<ds-icon name="map-marker" />
{{ user.location.name }}
</ds-text>
<ds-text
align="center"
color="soft"
size="small"
>
<ds-text align="center" color="soft" size="small">
{{ $t('profile.memberSince') }} {{ user.createdAt | date('MMMM yyyy') }}
</ds-text>
</ds-space>
<ds-space
v-if="user.badges && user.badges.length"
margin="x-small"
>
<ds-space v-if="user.badges && user.badges.length" margin="x-small">
<hc-badges :badges="user.badges" />
</ds-space>
<ds-flex>
<ds-flex-item>
<no-ssr>
<ds-number :label="$t('profile.followers')">
<hc-count-to
slot="count"
:end-val="followedByCount"
/>
<hc-count-to slot="count" :end-val="followedByCount" />
</ds-number>
</no-ssr>
</ds-flex-item>
<ds-flex-item>
<no-ssr>
<ds-number :label="$t('profile.following')">
<hc-count-to
slot="count"
:end-val="Number(user.followingCount) || 0"
/>
<hc-count-to slot="count" :end-val="Number(user.followingCount) || 0" />
</ds-number>
</no-ssr>
</ds-flex-item>
@ -92,140 +56,72 @@
v-if="!myProfile"
:follow-id="user.id"
:is-followed="user.followedByCurrentUser"
@optimistic="follow => user.followedByCurrentUser = follow"
@optimistic="follow => (user.followedByCurrentUser = follow)"
@update="follow => fetchUser()"
/>
</ds-space>
<template v-if="user.about">
<hr>
<ds-space
margin-top="small"
margin-bottom="small"
>
<ds-text
color="soft"
size="small"
>
{{ user.about }}
</ds-text>
<hr />
<ds-space margin-top="small" margin-bottom="small">
<ds-text color="soft" size="small">{{ user.about }}</ds-text>
</ds-space>
</template>
</ds-card>
<ds-space />
<ds-heading
tag="h3"
soft
style="text-align: center; margin-bottom: 10px;"
>
<ds-heading tag="h3" soft 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"
>
<ds-text
tag="h5"
color="soft"
>
Wem folgt {{ userName | truncate(15) }}?
</ds-text>
<ds-space v-if="user.following && user.following.length" margin="x-small">
<ds-text tag="h5" color="soft">Wem folgt {{ userName | truncate(15) }}?</ds-text>
</ds-space>
<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 -->
<no-ssr>
<user
:user="follow"
:trunc="15"
/>
<user :user="follow" :trunc="15" />
</no-ssr>
</ds-space>
<ds-space
v-if="user.followingCount - user.following.length"
margin="small"
>
<ds-text
size="small"
color="softer"
>
<ds-space v-if="user.followingCount - user.following.length" margin="small">
<ds-text size="small" color="softer">
und {{ user.followingCount - user.following.length }} weitere
</ds-text>
</ds-space>
</template>
<template v-else>
<p style="text-align: center; opacity: .5;">
{{ userName }} folgt niemandem
</p>
<p style="text-align: center; opacity: .5;">{{ userName }} folgt niemandem</p>
</template>
</ds-card>
<ds-space />
<ds-card style="position: relative; height: auto;">
<ds-space
v-if="user.followedBy && user.followedBy.length"
margin="x-small"
>
<ds-text
tag="h5"
color="soft"
>
Wer folgt {{ userName | truncate(15) }}?
</ds-text>
<ds-space v-if="user.followedBy && user.followedBy.length" margin="x-small">
<ds-text tag="h5" color="soft">Wer folgt {{ userName | truncate(15) }}?</ds-text>
</ds-space>
<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 -->
<no-ssr>
<user
:user="follow"
:trunc="15"
/>
<user :user="follow" :trunc="15" />
</no-ssr>
</ds-space>
<ds-space
v-if="user.followedByCount - user.followedBy.length"
margin="small"
>
<ds-text
size="small"
color="softer"
>
<ds-space v-if="user.followedByCount - user.followedBy.length" margin="small">
<ds-text size="small" 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 {{ userName }}
</p>
<p style="text-align: center; opacity: .5;">niemand folgt {{ userName }}</p>
</template>
</ds-card>
<ds-space
v-if="user.socialMedia && user.socialMedia.length"
margin="large"
>
<ds-space v-if="user.socialMedia && user.socialMedia.length" margin="large">
<ds-card style="position: relative; height: auto;">
<ds-space margin="x-small">
<ds-text
tag="h5"
color="soft"
>
<ds-text tag="h5" color="soft">
{{ $t('profile.socialMedia') }} {{ user.name | truncate(15) }}?
</ds-text>
<template>
<ds-space
v-for="link in socialMediaLinks"
:key="link.username"
margin="x-small"
>
<ds-space v-for="link in socialMediaLinks" :key="link.username" margin="x-small">
<a :href="link.url">
<ds-avatar :image="link.favicon" />
{{ 'link.username' }}
@ -237,10 +133,7 @@
</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 :width="{ base: '100%' }" gutter="small">
<ds-flex-item class="profile-top-navigation">
<ds-card class="ds-tab-nav">
<ds-flex>
@ -249,10 +142,7 @@
<!-- 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"
/>
<hc-count-to slot="count" :end-val="user.contributionsCount" />
</ds-number>
</no-ssr>
</ds-space>
@ -285,7 +175,7 @@
<ds-flex-item style="text-align: center">
<ds-button
v-if="myProfile"
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' }"
class="profile-post-add-button"
icon="plus"
@ -304,18 +194,11 @@
</template>
<template v-else>
<ds-flex-item :width="{ base: '100%' }">
<hc-empty
margin="xx-large"
icon="file"
/>
<hc-empty margin="xx-large" icon="file" />
</ds-flex-item>
</template>
</ds-flex>
<hc-load-more
v-if="hasMore"
:loading="$apollo.loading"
@click="showMoreContributions"
/>
<hc-load-more v-if="hasMore" :loading="$apollo.loading" @click="showMoreContributions" />
</ds-flex-item>
</ds-flex>
</div>

10
webapp/pages/settings.vue
View File

@ -5,16 +5,10 @@
</ds-heading>
<ds-flex gutter="small">
<ds-flex-item :width="{ base: '100%', md: '200px' }">
<ds-menu
:routes="routes"
:is-exact="() => true"
/>
<ds-menu :routes="routes" :is-exact="() => true" />
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', md: 1 }">
<transition
name="slide-up"
appear
>
<transition name="slide-up" appear>
<nuxt-child />
</transition>
</ds-flex-item>

5
webapp/pages/settings/data-download.vue
View File

@ -1,9 +1,6 @@
<template>
<ds-card :header="$t('settings.download.name')">
<hc-empty
icon="tasks"
message="Coming Soon…"
/>
<hc-empty icon="tasks" message="Coming Soon…" />
</ds-card>
</template>

5
webapp/pages/settings/delete-account.vue
View File

@ -1,9 +1,6 @@
<template>
<ds-card :header="$t('settings.delete.name')">
<hc-empty
icon="tasks"
message="Coming Soon…"
/>
<hc-empty icon="tasks" message="Coming Soon…" />
</ds-card>
</template>

13
webapp/pages/settings/index.vue
View File

@ -1,8 +1,5 @@
<template>
<ds-form
v-model="form"
@submit="submit"
>
<ds-form v-model="form" @submit="submit">
<ds-card :header="$t('settings.data.name')">
<ds-input
id="name"
@ -32,13 +29,7 @@
:placeholder="$t('settings.data.labelBio')"
/>
<template slot="footer">
<ds-button
style="float: right;"
icon="check"
type="submit"
:loading="loadingData"
primary
>
<ds-button style="float: right;" icon="check" type="submit" :loading="loadingData" primary>
{{ $t('actions.save') }}
</ds-button>
</template>

5
webapp/pages/settings/invites.vue
View File

@ -1,9 +1,6 @@
<template>
<ds-card :header="$t('settings.invites.name')">
<hc-empty
icon="tasks"
message="Coming Soon…"
/>
<hc-empty icon="tasks" message="Coming Soon…" />
</ds-card>
</template>

5
webapp/pages/settings/languages.vue
View File

@ -1,9 +1,6 @@
<template>
<ds-card :header="$t('settings.languages.name')">
<hc-empty
icon="tasks"
message="Coming Soon…"
/>
<hc-empty icon="tasks" message="Coming Soon…" />
</ds-card>
</template>

5
webapp/pages/settings/my-organizations.vue
View File

@ -1,9 +1,6 @@
<template>
<ds-card :header="$t('settings.organizations.name')">
<hc-empty
icon="tasks"
message="Coming Soon…"
/>
<hc-empty icon="tasks" message="Coming Soon…" />
</ds-card>
</template>

36
webapp/pages/settings/my-social-media.vue
View File

@ -1,19 +1,9 @@
<template>
<ds-card :header="$t('settings.social-media.name')">
<ds-space
v-if="socialMediaLinks"
margin-top="base"
margin="x-small"
>
<ds-space v-if="socialMediaLinks" margin-top="base" margin="x-small">
<ds-list>
<ds-list-item
v-for="link in socialMediaLinks"
:key="link.id"
>
<a
:href="link.url"
target="_blank"
>
<ds-list-item v-for="link in socialMediaLinks" :key="link.id">
<a :href="link.url" target="_blank">
<hc-image
:image-props="{ src: link.favicon }"
alt="Social Media link"
@ -23,15 +13,10 @@
{{ link.url }}
</a>
&nbsp;&nbsp;
<span class="layout-leave-active">|</span> &nbsp;&nbsp;
<ds-icon
name="edit"
class="layout-leave-active"
/>
<a
name="delete"
@click="handleDeleteSocialMedia(link)"
>
<span class="layout-leave-active">|</span>
&nbsp;&nbsp;
<ds-icon name="edit" class="layout-leave-active" />
<a name="delete" @click="handleDeleteSocialMedia(link)">
<ds-icon name="trash" />
</a>
</ds-list-item>
@ -43,15 +28,12 @@
v-model="value"
:placeholder="$t('settings.social-media.placeholder')"
name="social-media"
:schema="{type: 'url'}"
:schema="{ type: 'url' }"
/>
</div>
<ds-space margin-top="base">
<div>
<ds-button
primary
@click="handleAddSocialMedia"
>
<ds-button primary @click="handleAddSocialMedia">
{{ $t('settings.social-media.submit') }}
</ds-button>
</div>

8
webapp/yarn.lock
View File

@ -8856,10 +8856,10 @@ prettier@^1.15.2:
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.0.tgz#53b303676eed22cc14a9f0cec09b477b3026c008"
integrity sha512-sXe5lSt2WQlCbydGETgfm1YBShgOX4HxQkFPvbxkcwgDvGDeqVau8h+12+lmSVlP3rHPz0oavfddSZg/q+Szjw==
prettier@~1.14.3:
version "1.14.3"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.14.3.tgz#90238dd4c0684b7edce5f83b0fb7328e48bd0895"
integrity sha512-qZDVnCrnpsRJJq5nSsiHCE3BYMED2OtsI+cmzIzF1QIfqm5ALf8tEJcO27zV1gKNKRPdhjO0dNWnrzssDQ1tFg==
prettier@~1.17.1:
version "1.17.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.1.tgz#ed64b4e93e370cb8a25b9ef7fef3e4fd1c0995db"
integrity sha512-TzGRNvuUSmPgwivDqkZ9tM/qTGW9hqDKWOE9YHiyQdixlKbv7kvEqsmDPrcHJTKwthU774TQwZXVtaQ/mMsvjg==
pretty-bytes@^5.2.0:
version "5.2.0"