Forum

Profile picture cro...
 
Notifications
Clear all

Profile picture crop modal size issue

8 Posts
2 Users
0 Likes
552 Views
Defected
(@dftd)
Posts: 614
Honorable Member Admin
Topic starter
 

Hi!

I'm a CSS noob and I recently discovered that when using my plugin - https://github.com/webmods-croatia/oscplugin-profilepicture an issue happens if you try to crop a bigger image.

Cropper goes completely outside of the modal container. Can someone help me with this? I tried stuff like setting width and max-width, but didn't quite work well...

You can download the plugin here - https://github.com/webmods-croatia/oscplugin-profilepicture/releases and test yourself.

Any help would be appreciated.

[member=61]subzero[/member] Ideas? 🙂

Available for custom Osclass development. www.defected.dev

 
Posted : 24/10/2019 11:27 pm
(@subzero)
Posts: 149
Member
 

[member=3]WEBmods[/member] just seen your post. I m on mobile right now. I will get into this tommorow morning for sure. ,😉

Frontend Dev / UX-UI Designer / Illustrator / Father / Linux Enthusiast / Minimalist

 
Posted : 25/10/2019 3:21 am
(@subzero)
Posts: 149
Member
 

Hi!

I'm a CSS noob and I recently discovered that when using my plugin - https://github.com/webmods-croatia/oscplugin-profilepicture an issue happens if you try to crop a bigger image.

Cropper goes completely outside of the modal container. Can someone help me with this? I tried stuff like setting width and max-width, but didn't quite work well...

You can download the plugin here - https://github.com/webmods-croatia/oscplugin-profilepicture/releases and test yourself.

Any help would be appreciated.

[member=61]subzero[/member] Ideas? 🙂

[member=3]WEBmods[/member] i just downloaded your plugin and tested on my laptop. Nice work mate 😉

Ok lets go to the issue now.
open your css file and add those two CSS rules at the end of the file:

/* SUBZERO FIX */

.pp_modal {
    background:#fff;
    padding: 15px;
    border-radius: 5px;
    border:medium none;
}

.pp_modal_body {
    width: 350px;
    height: 250px;
    overflow: hidden;
}

I added this code at the cropper.min.css file but i guess that this file belongs to the js library of the cropper thing, so you can add my code inside your custom css file.

Also i noticed that in terms of UX/UI the plugin needs some work to be done. I will take a deeper look the next days as i really liked it a lot and i will make it more functional.

We will keep in touch Patrick.

Frontend Dev / UX-UI Designer / Illustrator / Father / Linux Enthusiast / Minimalist

 
Posted : 25/10/2019 6:06 pm
Defected
(@dftd)
Posts: 614
Honorable Member Admin
Topic starter
 

Thank your for the help. I'm on phone but will test the changes.

I noticed that you defined width and height in pixels, will it be responsive?

Available for custom Osclass development. www.defected.dev

 
Posted : 25/10/2019 6:08 pm
(@subzero)
Posts: 149
Member
 

Thank your for the help. I'm on phone but will test the changes.

I noticed that you defined width and height in pixels, will it be responsive?

Hmm let me make some tests 😉

Frontend Dev / UX-UI Designer / Illustrator / Father / Linux Enthusiast / Minimalist

 
Posted : 25/10/2019 6:09 pm
(@subzero)
Posts: 149
Member
 

Patrick tested on iphone 6 and Xiaomi redmi note 4 and it looks pretty good. But again has a lot of UX/UI issues we must fix/improve. For example the crop must have a minimum size, or you shouldn't move the crop thing outside of the image etc 😉

Frontend Dev / UX-UI Designer / Illustrator / Father / Linux Enthusiast / Minimalist

 
Posted : 25/10/2019 6:18 pm
Defected
(@dftd)
Posts: 614
Honorable Member Admin
Topic starter
 

[member=61]subzero[/member] Thanks for your help. While the modal looked fine on Galaxy A7 2018, it was too big on some smaller phones. I paired your solution with media queries and here's what I ended up with:


.pp_modal {
    background:#fff;
    padding: 15px;
    border-radius: 5px;
    border:medium none;
    width: 35%;
}

.pp_modal_body {
    height: 250px;
    overflow: hidden;
}

@media all and (max-width: 1200px) {
    .pp_modal {
      width: 50%;
    }
}

@media all and (max-width: 800px) {
    .pp_modal {
      width: 75%;
    }
}

@media all and (max-width: 500px) {
    .pp_modal {
      width: 90%;
    }
}

I also fixed the problem where you can move the crop "selector" outside the image.

Available for custom Osclass development. www.defected.dev

 
Posted : 01/11/2019 1:05 am
(@subzero)
Posts: 149
Member
 

Awesome [member=3]WEBmods[/member] i will take a look asap.  😉

Frontend Dev / UX-UI Designer / Illustrator / Father / Linux Enthusiast / Minimalist

 
Posted : 01/11/2019 9:00 am
Share: