ynerant/nk20
1
0
Fork 0
mirror of https://gitlab.crans.org/bde/nk20 synced 2025-10-30 23:39:54 +01:00
Code Issues Releases Wiki Activity

Compare commits

base: ynerant:family
Branches Tags
ynerant:main ynerant:app_download_links ynerant:small_features ynerant:oauth2 ynerant:translations ynerant:update_invoice_template ynerant:round_transaction ynerant:wei ynerant:family ynerant:phone_input ynerant:food_traceability ynerant:beta ynerant:django-5.2 ynerant:oidc ynerant:darbonne ynerant:potvieux ynerant:food_bugs ynerant:delete_activity ynerant:time-display ynerant:guests_schools ynerant:export_members_ml ynerant:notekfet_wrapped ynerant:Add_some_permissions ynerant:permissions_fo_parent_clubs ynerant:respo_comm_permissionsV2 ynerant:fix_activity_view ynerant:Automation_mailing_lists ynerant:New_permission ynerant:finito_sda ynerant:non-BDE-members-permission-fix ynerant:survey_wei_2024 ynerant:migration-django-4-2 ynerant:summary_notes ynerant:traduction_inclusive_fr ynerant:migration-django-5-0 ynerant:qrcode ynerant:VSS ynerant:update_permission ynerant:fix_pipeline ynerant:permission_var ynerant:inclusive ynerant:nix-shell ynerant:sheets ynerant:svg_icons ynerant:faster_ci
ynerant:v1.0.3 ynerant:v1.0.2 ynerant:v1.0.1 ynerant:v1.0.0
...
compare: ynerant:5b717c989265a0d35adc7d6097f34988b07e9aa2
Branches Tags
ynerant:app_download_links ynerant:small_features ynerant:main ynerant:oauth2 ynerant:translations ynerant:update_invoice_template ynerant:round_transaction ynerant:wei ynerant:family ynerant:phone_input ynerant:food_traceability ynerant:beta ynerant:django-5.2 ynerant:oidc ynerant:darbonne ynerant:potvieux ynerant:food_bugs ynerant:delete_activity ynerant:time-display ynerant:guests_schools ynerant:export_members_ml ynerant:notekfet_wrapped ynerant:Add_some_permissions ynerant:permissions_fo_parent_clubs ynerant:respo_comm_permissionsV2 ynerant:fix_activity_view ynerant:Automation_mailing_lists ynerant:New_permission ynerant:finito_sda ynerant:non-BDE-members-permission-fix ynerant:survey_wei_2024 ynerant:migration-django-4-2 ynerant:summary_notes ynerant:traduction_inclusive_fr ynerant:migration-django-5-0 ynerant:qrcode ynerant:VSS ynerant:update_permission ynerant:fix_pipeline ynerant:permission_var ynerant:inclusive ynerant:nix-shell ynerant:sheets ynerant:svg_icons ynerant:faster_ci
ynerant:v1.0.3 ynerant:v1.0.2 ynerant:v1.0.1 ynerant:v1.0.0

2 Commits
family ... 5b717c9892

Author SHA1 Message Date
alexismdr
5b717c9892 Merge branch 'fixed_crop_pp_dim' into 'main' 
bootstrap: fix minor issues with profile picture cropping

See merge request bde/nk20!301
 2025-03-25 22:52:58 +01:00
Alexis Mercier des Rochettes
93aed87265 bootstrap: fix minor issues with profile picture cropping 
* Add required [1] "display: block;" style property to img element
* Fix image overflow in modal. As cropper size inherits from img's parent element [2] (including padding according to my research), we need to wrap modal body into another div that has the padding we want.
* Remove ability [3] to click away to dismiss the modal as it often interfered with user interaction when cropping.

[1] https://github.com/fengyuanchen/cropperjs/tree/v1?tab=readme-ov-file#example
[2] https://github.com/fengyuanchen/cropperjs/tree/v1?tab=readme-ov-file#notes
[3] https://getbootstrap.com/docs/4.0/components/modal/#options

Signed-off-by: Alexis Mercier des Rochettes <apernouille@gmail.com>
 2025-03-24 17:36:30 +01:00
1 changed files with 6 additions and 4 deletions
Expand all files Collapse all files

8
apps/member/templates/member/picture_update.html
View File

@@ -20,11 +20,13 @@ SPDX-License-Identifier: GPL-3.0-or-later
</form> </form>
</div> </div>
<!-- MODAL TO CROP THE IMAGE --> <!-- MODAL TO CROP THE IMAGE -->
<div class="modal fade" id="modalCrop"> <div class="modal fade" id="modalCrop" data-backdrop="static">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-body"> <div class="modal-body-wrapper" style="width: 500px; height: 500px; padding: 16px;">
<img src="" id="modal-image" style="max-width: 100%;"> <div class="modal-body" style="width: 100%; height: 100%; padding: 0">
<img src="" id="modal-image" style="display: block; max-width: 100%;">
</div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<div class="btn-group pull-left" role="group"> <div class="btn-group pull-left" role="group">