Skip to content

Commit 76579f8

Browse files
Pek5892Pek5892
committed
refactor: miglioria grafica tab info
1 parent 00679a4 commit 76579f8

2 files changed

Lines changed: 210 additions & 23 deletions

File tree

‎assets/src/css/style.css‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1313,6 +1313,141 @@ input.small-width {
13131313
margin-top: 5px;
13141314
}
13151315

1316+
/** TIMELINE SMALL (OPERATIONS) */
1317+
1318+
/* Timeline container */
1319+
.timeline-sm {
1320+
position: relative;
1321+
padding: 0;
1322+
margin: 0;
1323+
list-style: none;
1324+
}
1325+
1326+
/* Vertical line */
1327+
.timeline-sm:before {
1328+
content: '';
1329+
position: absolute;
1330+
top: 0;
1331+
bottom: 0;
1332+
left: 16px;
1333+
width: 3px;
1334+
background: #e0e6eb;
1335+
border-radius: 3px;
1336+
}
1337+
1338+
/* Date labels */
1339+
.timeline-sm .time-label {
1340+
position: relative;
1341+
margin: 25px 0 15px 35px;
1342+
z-index: 1;
1343+
}
1344+
1345+
.timeline-sm .time-label span {
1346+
display: inline-block;
1347+
padding: 6px 12px;
1348+
border-radius: 4px;
1349+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
1350+
}
1351+
1352+
/* Timeline items */
1353+
.timeline-sm > div {
1354+
position: relative;
1355+
margin-bottom: 15px;
1356+
}
1357+
1358+
/* Icon in circle */
1359+
.timeline-sm > div > i {
1360+
position: absolute;
1361+
left: 0;
1362+
top: 0;
1363+
width: 34px;
1364+
height: 34px;
1365+
border-radius: 50%;
1366+
text-align: center;
1367+
line-height: 34px;
1368+
color: #fff;
1369+
font-size: 16px;
1370+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
1371+
}
1372+
1373+
/* Timeline item content */
1374+
.timeline-sm .timeline-item {
1375+
margin-left: 50px;
1376+
padding: 15px;
1377+
border-radius: 6px;
1378+
background: #fff;
1379+
position: relative;
1380+
transition: all 0.2s ease;
1381+
border: 1px solid #e9ecef;
1382+
}
1383+
1384+
/* Time display */
1385+
.timeline-sm .timeline-item .time {
1386+
float: right;
1387+
color: #6c757d;
1388+
margin-top: -2px;
1389+
}
1390+
1391+
/* Header */
1392+
.timeline-sm .timeline-header {
1393+
margin: 0 0 10px;
1394+
padding: 0;
1395+
color: #495057;
1396+
font-size: 14px;
1397+
line-height: 1.4;
1398+
}
1399+
1400+
/* Body content */
1401+
.timeline-sm .timeline-body {
1402+
padding: 10px 0 5px;
1403+
}
1404+
1405+
/* User info */
1406+
.timeline-sm .timeline-body .d-flex {
1407+
margin-bottom: 8px;
1408+
}
1409+
1410+
.timeline-sm .timeline-body .d-flex .mr-3 {
1411+
display: flex;
1412+
align-items: center;
1413+
background-color: #f8f9fa;
1414+
padding: 5px 10px;
1415+
border-radius: 4px;
1416+
font-weight: 500;
1417+
}
1418+
1419+
.timeline-sm .timeline-body .d-flex .mr-3 i {
1420+
margin-right: 6px;
1421+
}
1422+
1423+
/* Operation details */
1424+
.timeline-sm .timeline-body .text-muted {
1425+
background-color: #f8f9fa;
1426+
padding: 8px 12px;
1427+
border-radius: 4px;
1428+
font-size: 12px;
1429+
line-height: 1.5;
1430+
}
1431+
1432+
.timeline-sm .timeline-body .text-muted span {
1433+
margin-right: 8px;
1434+
white-space: nowrap;
1435+
}
1436+
1437+
.timeline-sm .timeline-body .text-muted span b {
1438+
color: #495057;
1439+
font-weight: 600;
1440+
}
1441+
1442+
/* End of timeline marker */
1443+
.timeline-sm > div:last-child i.bg-gray {
1444+
background-color: #adb5bd !important;
1445+
}
1446+
1447+
.timeline-sm > div:last-child .timeline-item {
1448+
background-color: #f8f9fa;
1449+
}
1450+
13161451

13171452
/* Checklist */
13181453

‎editor.php‎

Lines changed: 75 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@
165165
}
166166

167167
// Pulsanti di default
168-
echo '
168+
echo '
169169
170170
<div id="pulsanti">
171171
<a class="btn btn-default" id="back" href="'.base_path().'/controller.php?id_module='.$id_module.'">
@@ -192,9 +192,9 @@
192192
// Successivo
193193
$next = $posizioni[$key + 1]['id'];
194194

195-
195+
196196
echo '<span class="d-sm-inline">';
197-
197+
198198

199199
echo '
200200
<a class="btn btn-default'.($prev ? '' : ' disabled').'" href="'.base_path().'/editor.php?id_module='.$id_module.'&id_record='.$prev.'">
@@ -205,9 +205,9 @@
205205
</a>
206206
</span>';
207207

208-
208+
209209
echo '<div class="extra-buttons d-sm-inline">';
210-
210+
211211

212212
// Pulsanti personalizzati
213213
$buttons = $structure->filepath('buttons.php');
@@ -244,7 +244,7 @@
244244
</div>
245245
</div>
246246
</div>
247-
247+
248248
249249
<script>
250250
$(document).ready(function(){
@@ -381,66 +381,118 @@
381381
}
382382

383383
echo '
384-
<div class="timeline">';
384+
<div class="card card-outline card-primary mx-auto" style="max-width: 800px;">
385+
<div class="card-header">
386+
<h5 class="mb-0 text-center">
387+
<i class="fa fa-history mr-2"></i> '.tr('Cronologia operazioni').'
388+
</h5>
389+
</div>
390+
<div class="card-body p-3">
391+
<div class="timeline timeline-sm">';
385392

386393
$operations = $dbo->fetchArray('SELECT `zz_operations`.*, `zz_users`.`username` FROM `zz_operations` LEFT JOIN `zz_users` ON `zz_operations`.`id_utente` = `zz_users`.`id` WHERE id_module = '.prepare($id_module).' AND id_record = '.prepare($id_record).' ORDER BY `created_at` DESC LIMIT 200');
387394

388395
if (!empty($operations)) {
396+
$current_date = null;
397+
389398
foreach ($operations as $operation) {
390399
$description = $operation['op'];
391400
$icon = 'pencil-square-o';
392401
$color = 'warning';
402+
$date = Carbon::parse($operation['created_at']);
403+
$formatted_date = $date->format('d/m/Y');
404+
405+
// Mostra l'intestazione della data se è cambiata
406+
if ($current_date !== $formatted_date) {
407+
echo '
408+
<div class="time-label">
409+
<span class="bg-primary px-2 py-1 small">
410+
'.$formatted_date.'
411+
</span>
412+
</div>';
413+
$current_date = $formatted_date;
414+
}
393415

394416
switch ($operation['op']) {
395417
case 'add':
396418
$description = tr('Creazione');
397-
$icon = 'plus';
419+
$icon = 'plus-circle';
398420
$color = 'success';
399421
break;
400422

401423
case 'update':
402424
$description = tr('Modifica');
403-
$icon = 'pencil';
425+
$icon = 'edit';
404426
$color = 'info';
405427
break;
406428

407429
case 'delete':
408430
$description = tr('Eliminazione');
409-
$icon = 'times';
431+
$icon = 'trash';
410432
$color = 'danger';
411433
break;
412434

413435
case 'copy':
414436
$description = tr('Duplicato');
415-
$icon = 'clone';
416-
$color = 'info';
437+
$icon = 'copy';
438+
$color = 'primary';
417439
break;
418440
}
419441

420442
echo '
421443
<div>
422-
<i class="fa fa-'.$icon.' bg-'.$color.'"></i>
423-
<div class="timeline-item">
424-
<span class="time"><i class="fa fa-clock-o"></i> '.Carbon::parse($operation['created_at'])->diffForHumans().'</span>
425-
<h4 class="timeline-header">'.$description.'</h4>
426-
<div class="timeline-body">
427-
<span class="badge badge-default"><i class="fa fa-user"></i> '.$operation['username'].'</span>
444+
<i class="fa fa-'.$icon.' bg-'.$color.' small"></i>
445+
<div class="timeline-item small shadow-sm">
446+
<span class="time small"><i class="fa fa-clock-o"></i> '.$date->format('H:i').' ('.$date->diffForHumans().')</span>
447+
<h5 class="timeline-header no-border mb-0">'.$description.'</h5>
448+
<div class="timeline-body py-2">
449+
<div class="d-flex align-items-center">
450+
<div class="mr-3 small">
451+
<i class="fa fa-user mr-1 text-'.$color.'"></i>
452+
<span>'.$operation['username'].'</span>
453+
</div>';
454+
455+
if (!empty($operation['options'])) {
456+
$options = json_decode($operation['options'], true);
457+
if (!empty($options) && is_array($options)) {
458+
echo '<div class="text-muted small">';
459+
$details = [];
460+
foreach ($options as $key => $value) {
461+
if (!is_array($value) && !empty($value)) {
462+
$details[] = '<span>'.ucfirst($key).': <b>'.$value.'</b></span>';
463+
}
464+
}
465+
echo implode(' | ', $details);
466+
echo '</div>';
467+
}
468+
}
469+
470+
echo '
471+
</div>
428472
</div>
429473
</div>
430474
</div>';
431475
}
476+
432477
echo '
433-
<div>
434-
<i class="fa fa-clock-o bg-gray"></i>
435-
</div>';
478+
<div>
479+
<i class="fa fa-clock-o bg-gray small"></i>
480+
<div class="timeline-item small shadow-sm">
481+
<div class="timeline-body py-2 text-center text-muted small">
482+
'.tr('Fine cronologia').'
483+
</div>
484+
</div>
485+
</div>';
436486
} else {
437487
echo '
438-
<div class="alert alert-info">
439-
<b>'.tr('Informazione:').'</b> '.tr('Nessun log disponibile per questa scheda').'.
488+
<div class="alert alert-info small text-center">
489+
<i class="fa fa-info-circle mr-2"></i> '.tr('Nessun log disponibile per questa scheda').'.
440490
</div>';
441491
}
442492

443493
echo '
494+
</div>
495+
</div>
444496
</div>
445497
</div>';
446498
}

0 commit comments

Comments
 (0)