therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Automatic square cropping for avatar upload, preview of the new avatar.

Browse source
This commit is contained in:
Shpuld Shpuldson 2017-06-19 12:26:33 +03:00
parent 3785a863cb
commit 95605c32f1
2 changed files with 23 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/settings/settings.vue
View file

@ -13,7 +13,7 @@
<p>Your current avatar:</p>
<img :src="user.profile_image_url_original" class="old-avatar"></img>
<p>Set new avatar:</p>
<img class="new-avatar" v-bind:src="previewfile">
<img class="new-avatar" v-bind:src="previewfile" v-if="previewfile">
</img>
<div>
<input name="avatar-upload" id="avatar-upload" type="file" @change="uploadAvatar" ></input>
@ -71,7 +71,9 @@
}
.new-avatar {
max-width: 100%;
object-fit: cover;
width: 128px;
height: 128px;
border-radius: 5px;
}
@ -80,21 +82,6 @@
min-height: 28px;
width: 10em;
}
.cropper {
//position: absolute;
cursor: move;
width: 128px;
height: 128px;
border:1px solid #fff;
background-color: #000000;
.sub {
width: 100%;
height: 100%;
margin: -1px -1px -1px -1px ;
border:1px dashed #000;
}
}
}
.setting-list {
list-style-type: none;