adam/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2026-06-02 04:15:05 +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
themes/standard_pages/js/profile.js
+8 -1
View File
@@ -182,6 +182,13 @@ $(function() {
$('#error_api_key_date').hide(); $('#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(); getAllApiKeys();
}); });
@@ -265,7 +272,7 @@ function AddApiLine(lines, reset) {
api_line.attr('id', `api_${tmp_id}`); api_line.attr('id', `api_${tmp_id}`);
api_line.find('.icon-collapse').data('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_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_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_expiration').text(line.expiration);
api_line.find('.api-icon-action').attr('data-api', `api_${tmp_id}`); api_line.find('.api-icon-action').attr('data-api', `api_${tmp_id}`);
themes/standard_pages/theme.css
+9 -1
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: fadeIn 100ms cubic-bezier(0.42, 0, 0.62, 1.32) forwards;
animation-delay: 100ms; animation-delay: 100ms;
border-radius: 5px; 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; text-align: center;
font-size: 12px; font-size: 12px;
padding: 5px 10px; padding: 5px 10px;
box-shadow: 0px 10px 33px #3333332e; box-shadow: 0px 10px 33px #3333332e;
} }
[data-tooltip].tooltip-flip:hover::after {
left: auto;
right: 5px;
}
/*Responsive display*/ /*Responsive display*/
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
#login-form, #register-form, #password-form, .profile-section{ #login-form, #register-form, #password-form, .profile-section{