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

rename PostCard to PostTeaser

Browse Source
This commit is contained in:
Alina Beck 2020-02-11 10:07:16 +01:00
parent 6671d893e6
commit 09dee69ee0
10 changed files with 99 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/assets/_new/styles/tokens.scss
View File

@ -316,7 +316,7 @@ $z-index-page-submenu: 2500;
$z-index-page-header: 2000;
$z-index-page-sidebar: 1500;
$z-index-sticky: 100;
$z-index-post-card-link: 5;
$z-index-post-teaser-link: 5;
/**
* @tokens Media Query

2
webapp/components/NotificationsTable/NotificationsTable.story.js
View File

@ -3,7 +3,7 @@ import { withA11y } from '@storybook/addon-a11y'
import { action } from '@storybook/addon-actions'
import NotificationsTable from '~/components/NotificationsTable/NotificationsTable'
import helpers from '~/storybook/helpers'
import { post } from '~/components/PostCard/PostCard.story.js'
import { post } from '~/components/PostTeaser/PostTeaser.story.js'
import { user } from '~/components/UserTeaser/UserTeaser.story.js'
helpers.init()

8
webapp/components/PostCard/PostCard.spec.js → webapp/components/PostTeaser/PostTeaser.spec.js
View File

@ -2,14 +2,14 @@ import { config, shallowMount, mount, RouterLinkStub } from '@vue/test-utils'
import Vuex from 'vuex'
import PostCard from './PostCard.vue'
import PostTeaser from './PostTeaser.vue'
const localVue = global.localVue
config.stubs['client-only'] = '<span><slot /></span>'
config.stubs['v-popover'] = '<span><slot /></span>'
describe('PostCard', () => {
describe('PostTeaser', () => {
let store
let stubs
let mocks
@ -55,7 +55,7 @@ describe('PostCard', () => {
describe('shallowMount', () => {
Wrapper = () => {
store = new Vuex.Store({ getters })
return shallowMount(PostCard, {
return shallowMount(PostTeaser, {
store,
propsData,
mocks,
@ -99,7 +99,7 @@ describe('PostCard', () => {
const store = new Vuex.Store({
getters,
})
return mount(PostCard, {
return mount(PostTeaser, {
stubs,
mocks,
propsData,

14
webapp/components/PostCard/PostCard.story.js → webapp/components/PostTeaser/PostTeaser.story.js
View File

@ -1,6 +1,6 @@
import { storiesOf } from '@storybook/vue'
import { withA11y } from '@storybook/addon-a11y'
import HcPostCard from './PostCard.vue'
import PostTeaser from './PostTeaser.vue'
import helpers from '~/storybook/helpers'
helpers.init()
@ -48,20 +48,20 @@ storiesOf('Post Card', module)
.addDecorator(withA11y)
.addDecorator(helpers.layout)
.add('without image', () => ({
components: { HcPostCard },
components: { PostTeaser },
store: helpers.store,
data: () => ({
post,
}),
template: `
<hc-post-card
<post-teaser
:post="post"
:width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
/>
`,
}))
.add('with image', () => ({
components: { HcPostCard },
components: { PostTeaser },
store: helpers.store,
data: () => ({
post: {
@ -70,14 +70,14 @@ storiesOf('Post Card', module)
},
}),
template: `
<hc-post-card
<post-teaser
:post="post"
:width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
/>
`,
}))
.add('pinned by admin', () => ({
components: { HcPostCard },
components: { PostTeaser },
store: helpers.store,
data: () => ({
post: {
@ -90,7 +90,7 @@ storiesOf('Post Card', module)
},
}),
template: `
<hc-post-card
<post-teaser
:post="post"
:width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
/>

123
webapp/components/PostCard/PostCard.vue → webapp/components/PostTeaser/PostTeaser.vue
View File

@ -6,19 +6,18 @@
<base-card
:lang="post.language"
:class="{
'post-card': true,
'disabled-content': post.disabled,
'--pinned': isPinned,
'--highlight': isPinned,
'--blur-image': post.imageBlurred,
}"
>
<div class="card-image">
<div v-if="post.image" class="card-image">
<img :src="post.image | proxyApiUrl" class="image" />
</div>
<client-only>
<user-teaser :user="post.author" :date-time="post.createdAt" />
</client-only>
<h2 class="card-heading hyphentate-text">{{ post.title }}</h2>
<h2 class="card-heading hyphenate-text">{{ post.title }}</h2>
<!-- TODO: replace editor content with tiptap render view -->
<!-- eslint-disable vue/no-v-html -->
<div class="content hyphenate-text" v-html="excerpt" />
@ -67,7 +66,7 @@ import { mapGetters } from 'vuex'
import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
export default {
name: 'HcPostCard',
name: 'PostTeaser',
components: {
UserTeaser,
HcCategory,
@ -146,67 +145,67 @@ export default {
height: 100%;
color: $text-color-base;
.user-teaser {
margin-bottom: $space-small;
}
> .base-card {
display: flex;
flex-direction: column;
height: 100%;
&.--pinned {
border: 1px solid $color-warning;
}
&.--blur-image > .card-image > .image {
filter: blur(22px);
}
> .card-image {
overflow: hidden;
> .image {
width: 100%;
object-fit: contain;
}
}
> .content {
flex-grow: 1;
margin-bottom: $space-small;
}
> .footer {
display: flex;
justify-content: space-between;
align-items: center;
> .categories {
flex-grow: 1;
}
> .counter-icon {
display: block;
margin-right: $space-small;
opacity: 0.5;
}
> .content-menu {
position: relative;
z-index: $z-index-post-card-link;
}
.ds-tag {
margin: 0;
}
}
}
> .ribbon {
position: absolute;
top: 50%;
right: -7px;
}
}
.post-teaser > .base-card {
display: flex;
flex-direction: column;
height: 100%;
&.--pinned {
border: 1px solid $color-warning;
}
&.--blur-image > .card-image > .image {
filter: blur(22px);
}
> .card-image {
overflow: hidden;
> .image {
width: 100%;
object-fit: contain;
}
}
> .content {
flex-grow: 1;
margin-bottom: $space-small;
}
> .footer {
display: flex;
justify-content: space-between;
align-items: center;
> .categories {
flex-grow: 1;
}
> .counter-icon {
display: block;
margin-right: $space-small;
opacity: 0.5;
}
> .content-menu {
position: relative;
z-index: $z-index-post-teaser-link;
}
.ds-tag {
margin: 0;
}
}
.user-teaser {
margin-bottom: $space-small;
}
}
</style>

14
webapp/components/_new/generic/BaseCard/BaseCard.vue
View File

@ -16,6 +16,20 @@ export default {}
background-color: $color-neutral-100;
box-shadow: $box-shadow-base;
&.--highlight {
border: $border-size-base solid $color-primary;
}
&.--wide-content {
padding: $space-small;
> .card-image {
width: calc(100% + (2 * #{$space-small}));
margin: -$space-small;
margin-bottom: $space-base;
}
}
> .card-image {
width: calc(100% + (2 * #{$space-base}));
margin: -$space-base;

2
webapp/components/features/ReportList/ReportList.story.js
View File

@ -1,7 +1,7 @@
import { storiesOf } from '@storybook/vue'
import { withA11y } from '@storybook/addon-a11y'
import { action } from '@storybook/addon-actions'
import { post } from '~/components/PostCard/PostCard.story.js'
import { post } from '~/components/PostTeaser/PostTeaser.story.js'
import { user } from '~/components/UserTeaser/UserTeaser.story.js'
import helpers from '~/storybook/helpers'
import ReportList from './ReportList'

8
webapp/pages/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<masonry-grid>
<ds-grid-item v-show="hashtag" :row-span="2" column-span="fullWidth">
<ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
<filter-menu :hashtag="hashtag" @clearSearch="clearSearch" />
</ds-grid-item>
<ds-grid-item :row-span="2" column-span="fullWidth" class="top-info-bar">
@ -26,7 +26,7 @@
:key="post.id"
:imageAspectRatio="post.imageAspectRatio"
>
<hc-post-card
<post-teaser
:post="post"
@removePostFromList="deletePost"
@pinPost="pinPost"
@ -67,7 +67,7 @@
// import DonationInfo from '~/components/DonationInfo/DonationInfo.vue'
import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
import HcEmpty from '~/components/Empty/Empty'
import HcPostCard from '~/components/PostCard/PostCard.vue'
import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
import { mapGetters, mapMutations } from 'vuex'
@ -79,7 +79,7 @@ export default {
components: {
// DonationInfo,
FilterMenu,
HcPostCard,
PostTeaser,
HcEmpty,
MasonryGrid,
MasonryGridItem,

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

@ -24,7 +24,7 @@
:key="relatedPost.id"
:imageAspectRatio="relatedPost.imageAspectRatio"
>
<hc-post-card
<post-teaser
:post="relatedPost"
:width="{ base: '100%', lg: 1 }"
@removePostFromList="removePostFromList"
@ -38,7 +38,7 @@
<script>
import HcEmpty from '~/components/Empty/Empty'
import HcPostCard from '~/components/PostCard/PostCard.vue'
import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
import HcCategory from '~/components/Category'
import HcHashtag from '~/components/Hashtag/Hashtag'
import { relatedContributions } from '~/graphql/PostQuery'
@ -51,7 +51,7 @@ export default {
mode: 'out-in',
},
components: {
HcPostCard,
PostTeaser,
HcCategory,
HcHashtag,
HcEmpty,

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

@ -242,7 +242,7 @@
:key="post.id"
:imageAspectRatio="post.imageAspectRatio"
>
<hc-post-card
<post-teaser
:post="post"
:width="{ base: '100%', md: '100%', xl: '50%' }"
@removePostFromList="removePostFromList"
@ -275,7 +275,7 @@
<script>
import uniqBy from 'lodash/uniqBy'
import UserTeaser from '~/components/UserTeaser/UserTeaser'
import HcPostCard from '~/components/PostCard/PostCard.vue'
import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
import HcFollowButton from '~/components/FollowButton.vue'
import HcCountTo from '~/components/CountTo.vue'
import HcBadges from '~/components/Badges.vue'
@ -303,7 +303,7 @@ const tabToFilterMapping = ({ tab, id }) => {
export default {
components: {
UserTeaser,
HcPostCard,
PostTeaser,
HcFollowButton,
HcCountTo,
HcBadges,