Valogeo/loko
Valogeo/loko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: standardize button sizes and carousel modal footer layout for responsiveness

Browse source
This commit is contained in:
kdeterme 2026-08-17 10:52:44 +02:00
parent adb5f08628
commit d5f7b533f2
3 changed files with 21 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
loko/controls/static/controls/controls_detail.css
View file

@ -179,8 +179,23 @@ body {
text-align: center; text-align: center;
} }
.d-flex.gap-2 button { [id^="buttons-"] button {
width: 40px; /* Assure que les boutons ont la même taille */ width: 36px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
#remarkPhotoCarouselModal .modal-footer {
gap: 0.5rem;
}
#remarkPhotoCarouselModal .modal-footer .btn {
width: auto !important;
min-width: fit-content;
white-space: nowrap;
} }

4
loko/controls/templates/controls/controls_detail_content.html
View file

@ -812,9 +812,9 @@
</button> </button>
</div> </div>
</div> </div>
<div class="modal-footer border-top border-secondary py-2 px-3 d-flex justify-content-between align-items-center bg-dark"> <div class="modal-footer border-top border-secondary py-2 px-3 d-flex justify-content-between align-items-center bg-dark flex-nowrap">
<div class="small text-muted text-truncate me-2" id="remark-carousel-caption"></div> <div class="small text-muted text-truncate me-2" id="remark-carousel-caption"></div>
<div class="d-flex align-items-center gap-2"> <div class="d-flex align-items-center gap-2 flex-shrink-0">
<a id="remark-carousel-hd-btn" href="#" target="_blank" class="btn btn-sm btn-outline-light d-inline-flex align-items-center gap-1" title="{% translate 'Ouvrir en plein écran HD' %}"> <a id="remark-carousel-hd-btn" href="#" target="_blank" class="btn btn-sm btn-outline-light d-inline-flex align-items-center gap-1" title="{% translate 'Ouvrir en plein écran HD' %}">
<i class="bi bi-box-arrow-up-right"></i> <span class="d-none d-sm-inline">{% translate "Plein écran" %}</span> <i class="bi bi-box-arrow-up-right"></i> <span class="d-none d-sm-inline">{% translate "Plein écran" %}</span>
</a> </a>

4
loko/controls/templates/controls/controls_detail_mobile.html
View file

@ -1189,9 +1189,9 @@ document.getElementById('force-sync-btn')?.addEventListener('click', async () =>
</button> </button>
</div> </div>
</div> </div>
<div class="modal-footer border-top border-secondary py-2 px-3 d-flex justify-content-between align-items-center bg-dark"> <div class="modal-footer border-top border-secondary py-2 px-3 d-flex justify-content-between align-items-center bg-dark flex-nowrap">
<div class="small text-muted text-truncate me-2" id="remark-carousel-caption"></div> <div class="small text-muted text-truncate me-2" id="remark-carousel-caption"></div>
<div class="d-flex align-items-center gap-2"> <div class="d-flex align-items-center gap-2 flex-shrink-0">
<a id="remark-carousel-hd-btn" href="#" target="_blank" class="btn btn-sm btn-outline-light d-inline-flex align-items-center gap-1" title="{% translate 'Ouvrir en plein écran HD' %}"> <a id="remark-carousel-hd-btn" href="#" target="_blank" class="btn btn-sm btn-outline-light d-inline-flex align-items-center gap-1" title="{% translate 'Ouvrir en plein écran HD' %}">
<i class="bi bi-box-arrow-up-right"></i> <span class="d-none d-sm-inline">{% translate "Plein écran" %}</span> <i class="bi bi-box-arrow-up-right"></i> <span class="d-none d-sm-inline">{% translate "Plein écran" %}</span>
</a> </a>