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

Remove aspect ratio on cropper, limit to max-height 2000px

Browse Source 
- discussed it today's internal meeting and agreed upon with
@alina-beck, @Tirokk, @ogerly, @datenbrei, Dennis Hack

- max-height was a suggestion and can be changed at any time
This commit is contained in:
mattwr18 2019-10-14 13:45:41 +02:00
parent c85b2d49b6
commit 1c6b5f941b
5 changed files with 70 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,75 +1,73 @@
<template>
<ds-container width="medium">
<ds-form ref="contributionForm" v-model="form" :schema="formSchema">
<template slot-scope="{ errors }">
<hc-teaser-image :contribution="contribution" @addTeaserImage="addTeaserImage">
<img
v-if="contribution"
class="contribution-image"
:src="contribution.image | proxyApiUrl"
<ds-form ref="contributionForm" v-model="form" :schema="formSchema">
<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-space />
<hc-user :user="currentUser" :trunc="35" />
<ds-space />
<ds-input model="title" class="post-title" placeholder="Title" name="title" autofocus />
<small class="smallTag">{{ form.title.length }}/{{ formSchema.title.max }}</small>
<client-only>
<hc-editor
:users="users"
:value="form.content"
:hashtags="hashtags"
@input="updateEditorContent"
/>
</hc-teaser-image>
<ds-card>
<ds-space />
<hc-user :user="currentUser" :trunc="35" />
<ds-space />
<ds-input model="title" class="post-title" placeholder="Title" name="title" autofocus />
<small class="smallTag">{{ form.title.length }}/{{ formSchema.title.max }}</small>
<client-only>
<hc-editor
:users="users"
:value="form.content"
:hashtags="hashtags"
@input="updateEditorContent"
<small class="smallTag">{{ form.contentLength }}</small>
</client-only>
<ds-space margin-bottom="small" />
<hc-categories-select
model="categoryIds"
@updateCategories="updateCategories"
:existingCategoryIds="form.categoryIds"
/>
<ds-flex class="contribution-form-footer">
<ds-flex-item :width="{ base: '10%', sm: '10%', md: '10%', lg: '15%' }" />
<ds-flex-item :width="{ base: '80%', sm: '30%', md: '30%', lg: '20%' }">
<ds-space margin-bottom="small" />
<ds-select
model="language"
:options="form.languageOptions"
icon="globe"
:placeholder="locale"
:label="$t('contribution.languageSelectLabel')"
/>
<small class="smallTag">{{ form.contentLength }}</small>
</client-only>
<ds-space margin-bottom="small" />
<hc-categories-select
model="categoryIds"
@updateCategories="updateCategories"
:existingCategoryIds="form.categoryIds"
/>
<ds-flex class="contribution-form-footer">
<ds-flex-item :width="{ base: '10%', sm: '10%', md: '10%', lg: '15%' }" />
<ds-flex-item :width="{ base: '80%', sm: '30%', md: '30%', lg: '20%' }">
<ds-space margin-bottom="small" />
<ds-select
model="language"
:options="form.languageOptions"
icon="globe"
:placeholder="locale"
:label="$t('contribution.languageSelectLabel')"
/>
</ds-flex-item>
</ds-flex>
<ds-space />
<div slot="footer" style="text-align: right">
<ds-button
class="cancel-button"
:disabled="loading"
ghost
@click.prevent="$router.back()"
>
{{ $t('actions.cancel') }}
</ds-button>
<ds-button
class="submit-button-for-test"
type="submit"
icon="check"
:loading="loading"
:disabled="failsValidations || errors"
primary
@click.prevent="submit"
>
{{ $t('actions.save') }}
</ds-button>
</div>
<ds-space margin-bottom="large" />
</ds-card>
</template>
</ds-form>
</ds-container>
</ds-flex-item>
</ds-flex>
<ds-space />
<div slot="footer" style="text-align: right">
<ds-button
class="cancel-button"
:disabled="loading"
ghost
@click.prevent="$router.back()"
>
{{ $t('actions.cancel') }}
</ds-button>
<ds-button
class="submit-button-for-test"
type="submit"
icon="check"
:loading="loading"
:disabled="failsValidations || errors"
primary
@click.prevent="submit"
>
{{ $t('actions.save') }}
</ds-button>
</div>
<ds-space margin-bottom="large" />
</ds-card>
</template>
</ds-form>
</template>
<script>

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

@ -134,7 +134,7 @@ export default {
<style lang="scss" scoped>
.ds-card-image img {
width: 100%;
max-height: 300px;
max-height: 2000px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;

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

@ -110,7 +110,7 @@ export default {
image.src = URL.createObjectURL(file)
editor.appendChild(image)
// Create Cropper.js and pass image
let cropper = new Cropper(image, { aspectRatio: 1.25 / 1 })
let cropper = new Cropper(image, {})
},
dropzoneDrop() {
let cropOverlay = document.querySelectorAll('.crop-overlay')[0]

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

@ -200,7 +200,7 @@ export default {
.ds-card-image {
img {
max-height: 710px;
max-height: 2000px;
object-fit: cover;
object-position: center;
}

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

@ -87,9 +87,5 @@ export default {
<style lang="scss">
.related-post {
box-shadow: $box-shadow-base;
.ds-card-image {
max-height: 80px;
}
}
</style>