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

Reuse css from ds-card-image, consistent width

Browse Source 
- the width of the contribution form is now the same as the post card
This commit is contained in:
mattwr18 2019-09-06 13:08:28 +02:00
parent d3ad06a5f0
commit daf1ae864c
3 changed files with 14 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,14 @@
<template> <template>
<ds-form ref="contributionForm" v-model="form" :schema="formSchema"> <ds-form ref="contributionForm" v-model="form" :schema="formSchema">
<template slot-scope="{ errors }"> <template slot-scope="{ errors }">
<hc-teaser-image :contribution="contribution" @addTeaserImage="addTeaserImage">
<img
v-if="contribution"
class="contribution-image"
:src="contribution.image | proxyApiUrl"
/>
</hc-teaser-image>
<ds-card> <ds-card>
<hc-teaser-image :contribution="contribution" @addTeaserImage="addTeaserImage">
<img
v-if="contribution"
class="contribution-image"
:src="contribution.image | proxyApiUrl"
/>
</hc-teaser-image>
<ds-space /> <ds-space />
<hc-user :user="currentUser" :trunc="35" /> <hc-user :user="currentUser" :trunc="35" />
<ds-space /> <ds-space />

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

@ -3,6 +3,7 @@
:options="dropzoneOptions" :options="dropzoneOptions"
ref="el" ref="el"
id="postdropzone" id="postdropzone"
class="ds-card-image"
:use-custom-slot="true" :use-custom-slot="true"
@vdropzone-thumbnail="thumbnail" @vdropzone-thumbnail="thumbnail"
@vdropzone-error="verror" @vdropzone-error="verror"
@ -10,14 +11,14 @@
<div class="dz-message"> <div class="dz-message">
<div <div
:class="{ :class="{
'hc-attachments-upload-area-post': createAndUpdate, 'hc-attachments-upload-area-post': true,
'hc-attachments-upload-area-update-post': contribution, 'hc-attachments-upload-area-update-post': contribution,
}" }"
> >
<slot></slot> <slot></slot>
<div <div
:class="{ :class="{
'hc-drag-marker-post': createAndUpdate, 'hc-drag-marker-post': true,
'hc-drag-marker-update-post': contribution, 'hc-drag-marker-update-post': contribution,
}" }"
> >
@ -46,7 +47,6 @@ export default {
previewTemplate: this.template(), previewTemplate: this.template(),
}, },
error: false, error: false,
createAndUpdate: true,
} }
}, },
watch: { watch: {
@ -102,24 +102,9 @@ export default {
background-color: $background-color-softest; background-color: $background-color-softest;
} }
#postdropzone img { @media only screen and (max-width: 960px) {
width: 100%; #postdropzone {
max-height: 300px; min-height: 200px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
@media only screen and (max-width: 400px) {
#postdropzone.thumbnail-preview {
height: 200px;
}
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
#postdropzone.thumbnail-preview {
height: 300px;
} }
} }

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

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