modif monitoring petites cellules
This commit is contained in:
nicoboy
@ -67,7 +67,7 @@ try {
|
|||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding: 20px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@ -77,10 +77,10 @@ try {
|
|||||||
|
|
||||||
.header {
|
.header {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 20px 30px;
|
padding: 12px 20px;
|
||||||
border-radius: 10px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
margin-bottom: 20px;
|
margin-bottom: 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -88,23 +88,23 @@ try {
|
|||||||
|
|
||||||
.header h1 {
|
.header h1 {
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 24px;
|
font-size: 18px;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-indicator {
|
|
||||||
padding: 8px 16px;
|
|
||||||
background: #f0f0f0;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.refresh-indicator {
|
||||||
|
padding: 5px 10px;
|
||||||
|
background: #f0f0f0;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #666;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
.refresh-indicator.active {
|
.refresh-indicator.active {
|
||||||
background: #d4edda;
|
background: #d4edda;
|
||||||
color: #155724;
|
color: #155724;
|
||||||
@ -112,13 +112,13 @@ try {
|
|||||||
|
|
||||||
.stats-bar {
|
.stats-bar {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 15px 30px;
|
padding: 10px 20px;
|
||||||
border-radius: 10px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
margin-bottom: 20px;
|
margin-bottom: 12px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||||
gap: 20px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-item {
|
.stat-item {
|
||||||
@ -126,66 +126,70 @@ try {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stat-value {
|
.stat-value {
|
||||||
font-size: 32px;
|
font-size: 22px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #667eea;
|
color: #667eea;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 14px;
|
font-size: 10px;
|
||||||
color: #666;
|
color: #666;
|
||||||
margin-top: 5px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cards élèves */
|
/* Cards élèves - VERSION COMPACTE */
|
||||||
.eleves-grid {
|
.eleves-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
gap: 20px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eleve-card {
|
.eleve-card {
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 10px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
padding: 20px;
|
padding: 12px;
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eleve-card:hover {
|
.eleve-card:hover {
|
||||||
transform: translateY(-5px);
|
transform: translateY(-3px);
|
||||||
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.eleve-header {
|
.eleve-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 8px;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 8px;
|
||||||
border-bottom: 2px solid #f0f0f0;
|
border-bottom: 1px solid #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eleve-info {
|
.eleve-info {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-width: 0; /* Pour ellipsis */
|
||||||
}
|
}
|
||||||
|
|
||||||
.eleve-name {
|
.eleve-name {
|
||||||
font-size: 18px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 2px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eleve-classe {
|
.eleve-classe {
|
||||||
font-size: 14px;
|
font-size: 10px;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-badge {
|
.status-badge {
|
||||||
padding: 6px 12px;
|
padding: 3px 8px;
|
||||||
border-radius: 20px;
|
border-radius: 12px;
|
||||||
font-size: 12px;
|
font-size: 9px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
@ -197,13 +201,13 @@ try {
|
|||||||
.status-termine { background: #e2e3e5; color: #383d41; }
|
.status-termine { background: #e2e3e5; color: #383d41; }
|
||||||
|
|
||||||
.progress-section {
|
.progress-section {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar-container {
|
.progress-bar-container {
|
||||||
background: #e9ecef;
|
background: #e9ecef;
|
||||||
border-radius: 10px;
|
border-radius: 6px;
|
||||||
height: 25px;
|
height: 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
@ -216,31 +220,38 @@ try {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 13px;
|
font-size: 9px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-text {
|
.progress-text {
|
||||||
font-size: 13px;
|
font-size: 9px;
|
||||||
color: #666;
|
color: #666;
|
||||||
margin-top: 5px;
|
margin-top: 3px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-info {
|
.time-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-size: 12px;
|
font-size: 9px;
|
||||||
color: #666;
|
color: #666;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 8px;
|
||||||
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Matrice questions */
|
.time-info span {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Matrice questions - VERSION ULTRA COMPACTE */
|
||||||
.questions-matrix {
|
.questions-matrix {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(<?= $cols ?>, 1fr);
|
grid-template-columns: repeat(<?= $cols ?>, 1fr);
|
||||||
gap: 4px;
|
gap: 2px;
|
||||||
margin-top: 10px;
|
margin-top: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.question-cell {
|
.question-cell {
|
||||||
@ -248,17 +259,18 @@ try {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 16px;
|
font-size: 10px;
|
||||||
border-radius: 4px;
|
border-radius: 2px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
transition: transform 0.15s, box-shadow 0.15s;
|
||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
min-height: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.question-cell:hover {
|
.question-cell:hover {
|
||||||
transform: scale(1.15);
|
transform: scale(1.3);
|
||||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -276,11 +288,12 @@ try {
|
|||||||
|
|
||||||
.question-number {
|
.question-number {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 2px;
|
top: 1px;
|
||||||
left: 3px;
|
left: 2px;
|
||||||
font-size: 8px;
|
font-size: 6px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #666;
|
color: #666;
|
||||||
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.matrix-legend {
|
.matrix-legend {
|
||||||
@ -302,10 +315,11 @@ try {
|
|||||||
background: white;
|
background: white;
|
||||||
color: #667eea;
|
color: #667eea;
|
||||||
border: 2px solid #667eea;
|
border: 2px solid #667eea;
|
||||||
padding: 10px 20px;
|
padding: 6px 12px;
|
||||||
border-radius: 8px;
|
border-radius: 6px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
font-size: 11px;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -335,26 +349,27 @@ try {
|
|||||||
/* Légende globale */
|
/* Légende globale */
|
||||||
.legende {
|
.legende {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 20px;
|
padding: 10px 15px;
|
||||||
border-radius: 10px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
margin-top: 20px;
|
margin-top: 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 20px;
|
gap: 12px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 13px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.legende-title {
|
.legende-title {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.legende-item {
|
.legende-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip {
|
.tooltip {
|
||||||
@ -376,12 +391,12 @@ try {
|
|||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h1>
|
<h1>
|
||||||
📊 Monitoring Temps Réel
|
📊 Monitoring
|
||||||
<span style="font-size: 18px; font-weight: normal; color: #666;">
|
<span style="font-size: 14px; font-weight: normal; color: #666;">
|
||||||
- <?= htmlspecialchars($evaluation['titre']) ?>
|
- <?= htmlspecialchars($evaluation['titre']) ?>
|
||||||
</span>
|
</span>
|
||||||
<span style="font-size: 14px; font-weight: normal; color: #999;">
|
<span style="font-size: 11px; font-weight: normal; color: #999;">
|
||||||
(<?= $nb_questions ?> questions - matrice <?= $rows ?>×<?= $cols ?>)
|
(<?= $nb_questions ?>Q - <?= $rows ?>×<?= $cols ?>)
|
||||||
</span>
|
</span>
|
||||||
</h1>
|
</h1>
|
||||||
<div style="display: flex; gap: 15px; align-items: center;">
|
<div style="display: flex; gap: 15px; align-items: center;">
|
||||||
@ -428,22 +443,22 @@ try {
|
|||||||
<div class="legende">
|
<div class="legende">
|
||||||
<div class="legende-title">Légende :</div>
|
<div class="legende-title">Légende :</div>
|
||||||
<div class="legende-item">
|
<div class="legende-item">
|
||||||
<span style="display: inline-block; width: 20px; height: 20px; background: #f8f9fa; border-radius: 4px;"></span>
|
<span style="display: inline-block; width: 14px; height: 14px; background: #f8f9fa; border-radius: 2px;"></span>
|
||||||
<span>Non répondu</span>
|
<span>Non répondu</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="legende-item">
|
<div class="legende-item">
|
||||||
<span style="display: inline-block; width: 20px; height: 20px; background: #cce5ff; border-radius: 4px;"></span>
|
<span style="display: inline-block; width: 14px; height: 14px; background: #cce5ff; border-radius: 2px;"></span>
|
||||||
<span>✅ Répondu</span>
|
<span>✅ Répondu</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="legende-item">
|
<div class="legende-item">
|
||||||
<span style="display: inline-block; width: 20px; height: 20px; background: #d4edda; border-radius: 4px;"></span>
|
<span style="display: inline-block; width: 14px; height: 14px; background: #d4edda; border-radius: 2px;"></span>
|
||||||
<span>✔️ Correct</span>
|
<span>✔️ Correct</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="legende-item">
|
<div class="legende-item">
|
||||||
<span style="display: inline-block; width: 20px; height: 20px; background: #f8d7da; border-radius: 4px;"></span>
|
<span style="display: inline-block; width: 14px; height: 14px; background: #f8d7da; border-radius: 2px;"></span>
|
||||||
<span>❌ Incorrect</span>
|
<span>❌ Incorrect</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="legende-item" style="margin-left: 20px;">
|
<div class="legende-item" style="margin-left: 15px;">
|
||||||
<span>🟢 En ligne (<1min)</span>
|
<span>🟢 En ligne (<1min)</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="legende-item">
|
<div class="legende-item">
|
||||||
|
|||||||
Reference in New Issue
Block a user