IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2026-04-06 01:25:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve CSS, add key to rerender Upload

Browse Source 
- re-renders when avatar is successful updated
This commit is contained in:
Matt Rider 2019-05-20 17:30:51 -03:00
parent 5cd50ee00d
commit 73fc0a420c
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
webapp/components/Upload/index.vue
View File

@ -2,6 +2,7 @@
<div> <div>
<vue-dropzone <vue-dropzone
id="customdropzone" id="customdropzone"
:key="user.avatar"
ref="el" ref="el"
:options="dropzoneOptions" :options="dropzoneOptions"
:include-styling="false" :include-styling="false"
@ -56,8 +57,8 @@ export default {
</div> </div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div> <div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-success-mark"><i class="fa fa-check"></i></div> <div class="dz-success-mark"><ds-icon name="check" /></div>
<div class="dz-error-mark"><i class="fa fa-close"></i></div> <div class="dz-error-mark"><ds-icon name="close" /></div>
</div> </div>
</div> </div>
` `
@ -90,6 +91,7 @@ export default {
mutation($id: ID!, $avatarUpload: Upload) { mutation($id: ID!, $avatarUpload: Upload) {
UpdateUser(id: $id, avatarUpload: $avatarUpload) { UpdateUser(id: $id, avatarUpload: $avatarUpload) {
id id
avatar
} }
} }
`, `,
@ -108,8 +110,7 @@ export default {
</script> </script>
<style> <style>
#customdropzone { #customdropzone {
/* background-color: orange; */ margin: -60px auto auto;
margin-left: 35px;
width: 122px; width: 122px;
min-height: 122px; min-height: 122px;
background-size: cover; background-size: cover;
@ -126,18 +127,21 @@ export default {
width: 160px; width: 160px;
display: flex; display: flex;
} }
#customdropzone .dz-preview .dz-image { #customdropzone .dz-preview .dz-image {
position: relative; position: relative;
width: 122px; width: 122px;
height: 122px; height: 122px;
margin-left: -35px; margin: -35px;
} }
#customdropzone .dz-preview .dz-image > div { #customdropzone .dz-preview .dz-image > div {
width: inherit; width: inherit;
height: inherit; height: inherit;
border-radius: 50%; border-radius: 50%;
background-size: cover; background-size: cover;
} }
#customdropzone .dz-preview .dz-image > img { #customdropzone .dz-preview .dz-image > img {
width: 100%; width: 100%;
} }
@ -147,6 +151,7 @@ export default {
transition: opacity 0.2s linear; transition: opacity 0.2s linear;
text-align: center; text-align: center;
} }
#customdropzone .dz-success-mark, #customdropzone .dz-success-mark,
.dz-error-mark, .dz-error-mark,
.dz-remove { .dz-remove {