Skip to content

Commit

Permalink
increase cropping point hit area
Browse files Browse the repository at this point in the history
to make image cropping easier on touch devices
  • Loading branch information
13twelve committed Jan 6, 2025
1 parent 23bbbe3 commit 58fa2ec
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 0 deletions.
1 change: 1 addition & 0 deletions frontend/scss/_imports.scss
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ sections */

@import 'vendor/cropperjs';
@import 'vendor/flatpickr';
@import 'vendor/vselect';

Expand Down
30 changes: 30 additions & 0 deletions frontend/scss/vendor/_cropperjs.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/* make hit area for cropping points larger to help touch users crop images */

.cropper-crop-box {
container-type: inline-size;
container-name: cropbox;
}

.cropper-point::after {
content: '';
position: absolute;
inset: -2px;
}

@container cropbox (min-width: 40px) {
.cropper-point::after {
inset: -5px;
}
}

@container cropbox (min-width: 60px) {
.cropper-point::after {
inset: -10px;
}
}

@container cropbox (min-width: 100px) {
.cropper-point::after {
inset: -20px;
}
}

0 comments on commit 58fa2ec

Please sign in to comment.