Skip to content

Commit 9f74df2

Browse files
Pek5892Pek5892
committed
fix: notifiche
1 parent 5e82601 commit 9f74df2

2 files changed

Lines changed: 273 additions & 12 deletions

File tree

‎assets/src/css/style.css‎

Lines changed: 256 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1203,9 +1203,264 @@ input.small-width {
12031203
min-width: 130px;
12041204
}
12051205

1206+
/* Stili per il dropdown delle notifiche */
12061207
#hooks .dropdown-item {
12071208
white-space: normal;
1208-
min-width: max-content;
1209+
word-wrap: break-word;
1210+
word-break: break-word;
1211+
max-width: 350px;
1212+
min-width: 280px;
1213+
padding: 12px 16px;
1214+
line-height: 1.4;
1215+
border-bottom: 1px solid #eee;
1216+
transition: background-color 0.2s ease;
1217+
color: #333;
1218+
}
1219+
1220+
#hooks .dropdown-item:last-child {
1221+
border-bottom: none;
1222+
border-radius: 0 0 8px 8px;
1223+
}
1224+
1225+
#hooks .dropdown-item:hover {
1226+
background-color: #f6f6f6;
1227+
text-decoration: none;
1228+
}
1229+
1230+
#hooks .dropdown-item a {
1231+
color: inherit;
1232+
text-decoration: none;
1233+
display: block;
1234+
}
1235+
1236+
#hooks .dropdown-item a:hover {
1237+
color: inherit;
1238+
text-decoration: none;
1239+
}
1240+
1241+
/* Stili per il contenuto delle notifiche */
1242+
#hooks .dropdown-item .small {
1243+
font-size: 13px;
1244+
line-height: 1.4;
1245+
margin-left: 8px;
1246+
display: inline-block;
1247+
vertical-align: top;
1248+
}
1249+
1250+
#hooks .dropdown-item i {
1251+
font-size: 14px;
1252+
margin-right: 2px;
1253+
vertical-align: top;
1254+
margin-top: 2px;
1255+
flex-shrink: 0;
1256+
}
1257+
1258+
/* Miglioramenti per il dropdown menu delle notifiche */
1259+
.navbar-nav .dropdown-menu {
1260+
max-width: 380px;
1261+
border-radius: 8px;
1262+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
1263+
border: 1px solid #ddd;
1264+
padding: 0;
1265+
margin-top: 8px;
1266+
overflow: hidden;
1267+
}
1268+
1269+
/* Assicura che l'header si estenda per tutta la larghezza */
1270+
.navbar-nav .dropdown-menu .btn.dropdown-item {
1271+
border-radius: 0;
1272+
border: none;
1273+
text-align: left;
1274+
width: 100%;
1275+
margin: 0;
1276+
padding: 0;
1277+
}
1278+
1279+
/* Stili per l'header del dropdown */
1280+
#hooks-header {
1281+
padding: 12px 16px;
1282+
font-size: 12px;
1283+
font-weight: 600;
1284+
color: #333;
1285+
border-bottom: 1px solid #ddd;
1286+
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
1287+
margin: 0;
1288+
text-align: left;
1289+
position: relative;
1290+
border-radius: 8px 8px 0 0;
1291+
text-transform: uppercase;
1292+
letter-spacing: 0.5px;
1293+
width: 100%;
1294+
box-sizing: border-box;
1295+
display: block;
1296+
}
1297+
1298+
1299+
1300+
#hooks-header::after {
1301+
content: '';
1302+
position: absolute;
1303+
bottom: 0;
1304+
left: 0;
1305+
right: 0;
1306+
height: 1px;
1307+
background: #ddd;
1308+
}
1309+
1310+
/* Stili per quando non ci sono notifiche */
1311+
#hooks-header.no-notifications {
1312+
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
1313+
color: #155724;
1314+
}
1315+
1316+
1317+
1318+
#hooks-header.no-notifications::after {
1319+
background: #c3e6cb;
1320+
}
1321+
1322+
/* Stili per le icone nell'header */
1323+
#hooks-header i {
1324+
font-size: 13px;
1325+
margin-right: 8px;
1326+
opacity: 0.8;
1327+
color: #495057;
1328+
vertical-align: middle;
1329+
}
1330+
1331+
#hooks-header.no-notifications i {
1332+
color: #155724;
1333+
opacity: 1;
1334+
}
1335+
1336+
/* Miglioramenti per il contenitore delle notifiche */
1337+
#hooks {
1338+
max-height: 400px;
1339+
overflow-y: auto;
1340+
}
1341+
1342+
#hooks::-webkit-scrollbar {
1343+
width: 6px;
1344+
}
1345+
1346+
#hooks::-webkit-scrollbar-track {
1347+
background: #f1f1f1;
1348+
border-radius: 3px;
1349+
}
1350+
1351+
#hooks::-webkit-scrollbar-thumb {
1352+
background: #c1c1c1;
1353+
border-radius: 3px;
1354+
}
1355+
1356+
#hooks::-webkit-scrollbar-thumb:hover {
1357+
background: #a8a8a8;
1358+
}
1359+
1360+
/* Stili per il badge delle notifiche */
1361+
#hooks-badge {
1362+
font-size: 10px;
1363+
min-width: 18px;
1364+
height: 18px;
1365+
line-height: 18px;
1366+
border-radius: 9px;
1367+
padding: 0 6px;
1368+
display: inline-flex;
1369+
align-items: center;
1370+
justify-content: center;
1371+
}
1372+
1373+
/* Stili per il contenuto delle notifiche migliorato */
1374+
.notification-content {
1375+
display: flex;
1376+
align-items: flex-start;
1377+
gap: 8px;
1378+
}
1379+
1380+
.notification-content i {
1381+
margin-top: 2px;
1382+
flex-shrink: 0;
1383+
}
1384+
1385+
.notification-content .small {
1386+
flex: 1;
1387+
margin-left: 0;
1388+
}
1389+
1390+
.notification-link {
1391+
color: inherit !important;
1392+
text-decoration: none !important;
1393+
}
1394+
1395+
.notification-link:hover {
1396+
color: inherit !important;
1397+
text-decoration: none !important;
1398+
}
1399+
1400+
/* Stili per la barra di progresso nelle notifiche */
1401+
#hooks .progress {
1402+
background-color: #e9ecef;
1403+
border-radius: 2px;
1404+
overflow: hidden;
1405+
}
1406+
1407+
#hooks .progress-bar {
1408+
background-color: #007bff;
1409+
transition: width 0.3s ease;
1410+
}
1411+
1412+
#hooks .progress-text {
1413+
text-align: center;
1414+
font-size: 11px;
1415+
color: #666;
1416+
margin-top: 4px;
1417+
}
1418+
1419+
/* Stili responsive per le notifiche */
1420+
@media (max-width: 768px) {
1421+
.navbar-nav .dropdown-menu {
1422+
max-width: 320px;
1423+
left: -280px !important;
1424+
right: 10px !important;
1425+
}
1426+
1427+
#hooks-header {
1428+
padding: 10px 12px;
1429+
font-size: 11px;
1430+
}
1431+
1432+
#hooks .dropdown-item {
1433+
max-width: 300px;
1434+
min-width: 250px;
1435+
padding: 10px 12px;
1436+
font-size: 12px;
1437+
}
1438+
1439+
#hooks .dropdown-item .small {
1440+
font-size: 12px;
1441+
}
1442+
1443+
#hooks .dropdown-item i {
1444+
font-size: 13px;
1445+
}
1446+
}
1447+
1448+
@media (max-width: 480px) {
1449+
.navbar-nav .dropdown-menu {
1450+
max-width: 280px;
1451+
left: -240px !important;
1452+
}
1453+
1454+
#hooks-header {
1455+
padding: 8px 10px;
1456+
font-size: 10px;
1457+
}
1458+
1459+
#hooks .dropdown-item {
1460+
max-width: 260px;
1461+
min-width: 220px;
1462+
padding: 8px 10px;
1463+
}
12091464
}
12101465

12111466
.select2-dropdown {

‎assets/src/js/functions/hooks.js‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -48,26 +48,32 @@ function handleHooksSuccess(hooks) {
4848
$("#hooks-notified").html('<i class="fa fa-check" aria-hidden="true"></i>');
4949
$("#hooks-badge").removeClass();
5050
$("#hooks-badge").addClass('badge').addClass('badge-success');
51+
$("#hooks-header").addClass('no-notifications');
5152
} else {
5253
$("#hooks-notified").text(number);
5354
$("#hooks-badge").removeClass();
5455
$("#hooks-badge").addClass('badge').addClass('badge-danger');
56+
$("#hooks-header").removeClass('no-notifications');
5557
}
5658

5759
$("#hooks-loading").hide();
5860

5961
var hookMessage;
62+
var iconHtml = '';
6063
if (number > 1) {
6164
hookMessage = globals.translations.hookMultiple.replace('_NUM_', number);
65+
iconHtml = '<i class="fa fa-bell mr-2"></i>';
6266
} else if (number == 1) {
6367
hookMessage = globals.translations.hookSingle;
68+
iconHtml = '<i class="fa fa-bell mr-2"></i>';
6469
} else {
6570
hookMessage = globals.translations.hookNone;
71+
iconHtml = '<i class="fa fa-check-circle mr-2"></i>';
6672
}
6773

68-
$("#hooks-header").text(hookMessage);
74+
$("#hooks-header").html(iconHtml + hookMessage);
6975

70-
totalRequests = hooks.length;
76+
totalRequests = hooks.length;
7177
if (completedRequests === totalRequests) {
7278
// Verifica se tutte le richieste sono state completate con successo
7379
//console.log("Tutte le richieste AJAX sono state eseguite con successo.");
@@ -86,7 +92,7 @@ function startHooks() {
8692
success: function (data) {
8793
hooks = JSON.parse(data);
8894
handleHooksSuccess(hooks);
89-
},
95+
},
9096
error: function (xhr, status, error) {
9197
console.error("Errore durante la richiesta AJAX relativa agli Hooks");
9298
}
@@ -130,13 +136,12 @@ function renderHook(hook) {
130136
var content = '';
131137

132138
if (result.link) {
133-
content += '<a href="' + result.link + '">';
134-
} else {
135-
content += '<div class="hooks-header">';
139+
content += '<a href="' + result.link + '" class="notification-link">';
136140
}
137141

138-
139-
content += '<i class="' + result.icon + '"></i> <span class="small"> ' + result.message + '</span>';
142+
content += '<div class="notification-content">';
143+
content += '<i class="' + result.icon + '"></i>';
144+
content += '<span class="small">' + result.message + '</span>';
140145

141146
if (result.progress) {
142147
var current = result.progress.current;
@@ -146,13 +151,14 @@ function renderHook(hook) {
146151

147152
percentage = Math.round(percentage * 100) / 100;
148153

149-
content += '<div class="progress" style="margin-bottom: 0px;"><div class="progress-bar" role="progressbar" aria-valuenow="' + percentage + '" aria-valuemin="0" aria-valuemax="100" style="width:' + percentage + '%">' + percentage + '% (' + current + '/' + total + ')</div></div>';
154+
content += '<div class="progress mt-2" style="margin-bottom: 0px; height: 4px;"><div class="progress-bar" role="progressbar" aria-valuenow="' + percentage + '" aria-valuemin="0" aria-valuemax="100" style="width:' + percentage + '%"></div></div>';
155+
content += '<div class="progress-text mt-1" style="font-size: 11px; color: #666;">' + percentage + '% (' + current + '/' + total + ')</div>';
150156
}
151157

158+
content += '</div>';
159+
152160
if (result.link) {
153161
content += '</a>';
154-
} else {
155-
content += '</div>';
156162
}
157163

158164
element.html(content);

0 commit comments

Comments
 (0)