5monkeys / djedi-cms / 389
97%
master: 96%

LAST BUILD BRANCH: ci/djedi-react-release-workflow
DEFAULT BRANCH: master
Ran
Jobs 1
Files 44
Run time 5s
Badge
Embed ▾
README BADGES
x

If you need to use a raster PNG badge, change the '.svg' to '.png' in the link

Markdown

Textile

RDoc

HTML

Rst
389

Pull #50

travis-ci

web-flow 
Improve ImageEditor

It's very common to do `img { width: 100%; height: auto; }` to let
images fill out their container. And the image usually has more pixels
in width than the container has in CSS pixels, to look good on high
resolution screens.

Previously, when clicking an image to edit it djedi would immediately
replace the image with a preview – and set `width: ...; height: ...`
with inline style on it to the actual pixel sizes of the image. This
caused images to blow up in size and overflow their containers.

The reason this was done was to simulate cropping. It worked if images
were assumed to be displayed at their "natural" size, but that's rarely
the case.

This commit uses a canvas to simulate the cropping instead, and only
updates the `src` if the images on the page. This allows previewing the
cropping without breaking the page styling/layout.

When doing this, I found _tons_ of little bugs and quirks. So the commit
ended up being a general refactor of the ImageEditor, making it
generally more stable and easier to understand.

I've also moved the Resize tab into the Image tab, since they are
closely related, and since the "Maintain aspect ratio" both affects the
width/height inputs as well as the crop tool. Another reason for doing
this is because I've hidden the "crop" input field, since it wasn't
editable and not useful.
Pull Request #50: Improve ImageEditor

1249 of 1283 relevant lines covered (97.35%)

0.97 hits per line

Jobs
ID Job ID Ran Files Coverage
20 389.20 (TOXENV=coverage) 0
97.35
 Travis Job 389.20
Source Files on build 389
Detailed source file information is not available for this build.