@@ -95,11 +102,13 @@ export default {
slug: null,
users: [],
dropzoneOptions: {
- url: this.vddrop,
+ url: 'https://httpbin.org/post',
maxFilesize: 5.0,
previewTemplate: this.template(),
},
hover: false,
+ error: false,
+ teaser: false,
}
},
watch: {
@@ -116,6 +125,12 @@ export default {
this.form.language = this.locale
},
},
+ error() {
+ let that = this
+ setTimeout(function() {
+ that.error = false
+ }, 2000)
+ },
},
computed: {
locale() {
@@ -140,6 +155,7 @@ export default {
title: this.form.title,
content: this.form.content,
language: this.form.language ? this.form.language.value : this.$i18n.locale(),
+ imageUpload: this.form.teaserImage,
},
})
.then(res => {
@@ -172,15 +188,31 @@ export default {
`
},
- vddrop(file) {
- this.form.teaserImage = file[0]
+ verror(file, message) {
+ this.error = true
+ this.$toast.error(file.status, message)
},
- verror(file, message) {},
availableLocales() {
orderBy(locales, 'name').map(locale => {
this.form.languageOptions.push({ label: locale.name, value: locale.code })
})
},
+ vsuccess(file, response) {
+ this.form.teaserImage = file
+ },
+ thumbnail: function(file, dataUrl) {
+ this.teaser = true
+ var j, len, ref, thumbnailElement
+ if (file.previewElement) {
+ ref = document.querySelectorAll('#postdropzone')
+ for (j = 0, len = ref.length; j < len; j++) {
+ thumbnailElement = ref[j]
+ thumbnailElement.classList.add('image-preview')
+ thumbnailElement.alt = file.name
+ thumbnailElement.style.backgroundImage = 'url("' + dataUrl + '")'
+ }
+ }
+ },
},
apollo: {
User: {
@@ -215,10 +247,31 @@ export default {
}
#postdropzone {
- height: 160px;
+ min-height: 160px;
background-color: $background-color-softest;
}
+#postdropzone.image-preview {
+ background-repeat: no-repeat;
+ background-size: 100%;
+ height: 600px;
+ transition: all 0.2s ease-out;
+
+ width: 100%;
+}
+
+@media only screen and (max-width: 400px) {
+ #postdropzone.image-preview {
+ height: 200px;
+ }
+}
+
+@media only screen and (min-width: 401px) and (max-width: 960px) {
+ #postdropzone.image-preview {
+ height: 400px;
+ }
+}
+
.hc-attachments-upload-area {
position: relative;
display: flex;
@@ -269,6 +322,7 @@ export default {
.hc-attachments-upload-area:hover & {
opacity: 1;
}
+}
.contribution-form-footer {
border-top: $border-size-base solid $border-color-softest;
}
diff --git a/webapp/graphql/PostMutations.js b/webapp/graphql/PostMutations.js
index ad629bee7..31e618bfb 100644
--- a/webapp/graphql/PostMutations.js
+++ b/webapp/graphql/PostMutations.js
@@ -3,26 +3,45 @@ import gql from 'graphql-tag'
export default () => {
return {
CreatePost: gql`
- mutation($title: String!, $content: String!, $language: String) {
- CreatePost(title: $title, content: $content, language: $language) {
+ mutation($title: String!, $content: String!, $language: String, $imageUpload: Upload) {
+ CreatePost(
+ title: $title
+ content: $content
+ language: $language
+ imageUpload: $imageUpload
+ ) {
id
title
slug
content
contentExcerpt
language
+ imageUpload
}
}
`,
UpdatePost: gql`
- mutation($id: ID!, $title: String!, $content: String!, $language: String) {
- UpdatePost(id: $id, title: $title, content: $content, language: $language) {
+ mutation(
+ $id: ID!
+ $title: String!
+ $content: String!
+ $language: String
+ $imageUpload: Upload
+ ) {
+ UpdatePost(
+ id: $id
+ title: $title
+ content: $content
+ language: $language
+ imageUpload: $imageUpload
+ ) {
id
title
slug
content
contentExcerpt
language
+ imageUpload
}
}
`,
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 5751f42b0..0019157c7 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -2,7 +2,7 @@