iarv/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2026-04-30 18:42:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

fixes #2478 add created_on tooltip and responsive tooltip styles

Browse Source 
JS: add mouseenter handler to toggle a tooltip-flip class for elements with data-tooltip so tooltips flip when they would overflow the right edge; set data-tooltip on API creation timestamp. CSS: constrain tooltip max width to 250px (or viewport margin), allow multiline content (max-content/word-wrap), and position flipped tooltips from the right. These changes prevent tooltip overflow on narrow viewports and improve readability.
This commit is contained in:
Linty
2026-04-29 15:15:34 +02:00
parent 54c812bf7d
commit 9196732341
2 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
themes/standard_pages/js/profile.js
View File

@@ -181,7 +181,14 @@ $(function() {
$('#api_expiration_date').on('change', function() {
$('#error_api_key_date').hide();
});
$(document).on('mouseenter', '[data-tooltip]', function() {
const rect = this.getBoundingClientRect();
const tooltipMaxWidth = 250;
const margin = 10;
$(this).toggleClass('tooltip-flip', rect.left + tooltipMaxWidth + margin > window.innerWidth);
});
getAllApiKeys();
});
@@ -265,7 +272,7 @@ function AddApiLine(lines, reset) {
api_line.attr('id', `api_${tmp_id}`);
api_line.find('.icon-collapse').data('api', tmp_id);
api_line.find('.api_name').text(line.apikey_name).attr('title', line.apikey_name);
api_line.find('.api_creation').text(line.created_on_format);
api_line.find('.api_creation').text(line.created_on_format).attr('data-tooltip', line.created_on_format);
api_line.find('.api_last_use').text(line.last_used_on_since).attr('title', line.last_used_on_since);
api_line.find('.api_expiration').text(line.expiration);
api_line.find('.api-icon-action').attr('data-api', `api_${tmp_id}`);

10
themes/standard_pages/theme.css
View File

@@ -835,13 +835,21 @@ input:checked + .slider:before, input:checked + .slider::after {
animation: fadeIn 100ms cubic-bezier(0.42, 0, 0.62, 1.32) forwards;
animation-delay: 100ms;
border-radius: 5px;
max-width: 100%;
max-width: min(250px, calc(100vw - 20px));
width: max-content;
white-space: normal;
word-wrap: break-word;
text-align: center;
font-size: 12px;
padding: 5px 10px;
box-shadow: 0px 10px 33px #3333332e;
}
[data-tooltip].tooltip-flip:hover::after {
left: auto;
right: 5px;
}
/*Responsive display*/
@media only screen and (max-width: 768px) {
#login-form, #register-form, #password-form, .profile-section{