IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

use base-card on post page

Browse Source
This commit is contained in:
Alina Beck 2020-02-11 18:19:40 +01:00
parent 9895c32b0b
commit 408b77a3e7
5 changed files with 49 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
webapp/components/PostTeaser/PostTeaser.vue
View File

@ -188,6 +188,7 @@ export default {
.ds-tag { .ds-tag {
margin: 0; margin: 0;
margin-right: $space-xx-small;
} }
} }

1
webapp/components/TeaserImage/TeaserImage.vue
View File

@ -138,6 +138,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 400px; min-height: 400px;
max-height: 600px;
font-size: $font-size-base; font-size: $font-size-base;
> .img { > .img {

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

@ -179,7 +179,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.admin-users >.base-card:first-child { .admin-users > .base-card:first-child {
margin-bottom: $space-small; margin-bottom: $space-small;
} }
</style> </style>

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

@ -1,15 +1,16 @@
<template> <template>
<transition name="fade" appear> <transition name="fade" appear>
<ds-card <base-card
:lang="post.language"
v-if="post && ready" v-if="post && ready"
:image="post.image | proxyApiUrl" :lang="post.language"
:class="{ :class="{
'post-page': true, 'post-page': true,
'disabled-content': post.disabled, 'disabled-content': post.disabled,
'--blur-image': blurred, '--blur-image': blurred,
}" }"
> >
<template v-slot:heroImage>
<img :src="post.image | proxyApiUrl" class="image" />
<aside v-show="post.imageBlurred" class="blur-toggle"> <aside v-show="post.imageBlurred" class="blur-toggle">
<img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" /> <img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" />
<base-button <base-button
@ -19,6 +20,8 @@
@click="blurred = !blurred" @click="blurred = !blurred"
/> />
</aside> </aside>
</template>
<section class="menu">
<user-teaser :user="post.author" :date-time="post.createdAt"> <user-teaser :user="post.author" :date-time="post.createdAt">
<template v-slot:dateTime> <template v-slot:dateTime>
<ds-text v-if="post.createdAt !== post.updatedAt">({{ $t('post.edited') }})</ds-text> <ds-text v-if="post.createdAt !== post.updatedAt">({{ $t('post.edited') }})</ds-text>
@ -35,6 +38,7 @@
@unpinPost="unpinPost" @unpinPost="unpinPost"
/> />
</client-only> </client-only>
</section>
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
<ds-heading tag="h3" no-margin class="hyphenate-text">{{ post.title }}</ds-heading> <ds-heading tag="h3" no-margin class="hyphenate-text">{{ post.title }}</ds-heading>
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
@ -83,7 +87,7 @@
</ds-flex> </ds-flex>
</ds-space> </ds-space>
<!-- Comments --> <!-- Comments -->
<ds-section slot="footer"> <ds-section>
<comment-list :post="post" @toggleNewCommentForm="toggleNewCommentForm" @reply="reply" /> <comment-list :post="post" @toggleNewCommentForm="toggleNewCommentForm" @reply="reply" />
<ds-space margin-bottom="large" /> <ds-space margin-bottom="large" />
<comment-form <comment-form
@ -99,7 +103,7 @@
<a href="https://support.human-connection.org/kb/" target="_blank">FAQ</a> <a href="https://support.human-connection.org/kb/" target="_blank">FAQ</a>
</ds-placeholder> </ds-placeholder>
</ds-section> </ds-section>
</ds-card> </base-card>
</transition> </transition>
</template> </template>
@ -234,18 +238,23 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.post-page { .post-page {
&.--blur-image > .ds-card-image img { > .hero-image {
filter: blur(22px); position: relative;
} }
.ds-card-content { > .menu {
position: relative; display: flex;
padding-top: 24px; justify-content: space-between;
align-items: center;
}
&.--blur-image > .hero-image > .image {
filter: blur(22px);
} }
.blur-toggle { .blur-toggle {
position: absolute; position: absolute;
top: -80px; bottom: 0;
right: 0; right: 0;
display: flex; display: flex;
@ -267,22 +276,6 @@ export default {
min-height: 0px; min-height: 0px;
} }
} }
.ds-card-image {
img {
max-height: 2000px;
object-fit: contain;
object-position: center;
}
}
.ds-card-footer {
padding: 0;
.ds-section {
padding: $space-base;
}
}
} }
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {

7
webapp/pages/settings/my-email-address/enter-nonce.vue
View File

@ -16,12 +16,7 @@
icon="question-circle" icon="question-circle"
:label="$t('settings.email.labelNonce')" :label="$t('settings.email.labelNonce')"
/> />
<base-button <base-button icon="check" :disabled="errors" type="submit" filled>
icon="check"
:disabled="errors"
type="submit"
filled
>
{{ $t('actions.save') }} {{ $t('actions.save') }}
</base-button> </base-button>
</base-card> </base-card>