7225775e12
Backend:
- Add migration 0002 for Meeting, MeetingParticipant, EmployeeAttendance models
- Add EmployeeAttendanceSerializer with meeting_title helper field
- Add MeetingDetailView (GET /meetings/{id}/ with participants embedded)
- Add EmployeeAttendanceListView (GET /training/attendance/) with
role-based access: own records always visible; other users require
progress:view_all / progress:view_team / users:manage capability
- Register meeting-detail and attendance-list routes in urls.py
Frontend:
- attendance.html + attendance.js: JWT login flow, attendance history
table with status badges, token refresh via sessionStorage only
(no localStorage for access tokens)
- meetings.html + meetings.js: meeting list, create-meeting form,
per-meeting participant management, inline attendance recording
with select + save per row; UUID input validated before submit
- attendance.css: shared stylesheet for both pages
Co-Authored-By: Paperclip <noreply@paperclip.ing>
237 lines
3.8 KiB
CSS
237 lines
3.8 KiB
CSS
/* Shared styles for attendance and meetings pages */
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: var(--card);
|
|
box-shadow: 0 2px 8px rgba(15, 41, 73, 0.08);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.topbar .logo {
|
|
max-height: 32px;
|
|
margin: 0;
|
|
}
|
|
|
|
.topbar nav {
|
|
margin-left: auto;
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.topbar nav a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.topbar nav a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.page-content {
|
|
max-width: 900px;
|
|
margin: 2rem auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-header h2,
|
|
.section-header h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn-primary {
|
|
border: 0;
|
|
border-radius: 8px;
|
|
padding: 0.55rem 1rem;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.btn-ghost {
|
|
border: 1px solid #ccd9e8;
|
|
border-radius: 8px;
|
|
padding: 0.5rem 0.9rem;
|
|
background: transparent;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
background: #f0f4f9;
|
|
}
|
|
|
|
.back-btn {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Forms */
|
|
form label {
|
|
display: block;
|
|
font-weight: 600;
|
|
margin: 0.75rem 0 0.25rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
form input[type="text"],
|
|
form input[type="email"],
|
|
form input[type="password"],
|
|
form input[type="datetime-local"] {
|
|
width: 100%;
|
|
padding: 0.55rem 0.75rem;
|
|
border: 1px solid #ccd9e8;
|
|
border-radius: 6px;
|
|
font-size: 0.9rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
form input:focus {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.inset-card {
|
|
background: #f8fbfe;
|
|
border: 1px solid #dde9f5;
|
|
border-radius: 10px;
|
|
padding: 1.25rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* Tables */
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.9rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.data-table th {
|
|
text-align: left;
|
|
padding: 0.6rem 0.75rem;
|
|
background: #eef4fb;
|
|
border-bottom: 2px solid #ccd9e8;
|
|
font-weight: 600;
|
|
color: #3a5068;
|
|
}
|
|
|
|
.data-table td {
|
|
padding: 0.6rem 0.75rem;
|
|
border-bottom: 1px solid #e8f0f9;
|
|
}
|
|
|
|
.data-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Status badges */
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 0.2rem 0.55rem;
|
|
border-radius: 12px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-present { background: #d4f1e4; color: #1a7a44; }
|
|
.status-absent { background: #fde8e8; color: #b91c1c; }
|
|
.status-late { background: #fef3c7; color: #92400e; }
|
|
.status-unknown { background: #e8eef5; color: #5a7a96; }
|
|
|
|
/* Meeting cards */
|
|
.meeting-card {
|
|
background: var(--card);
|
|
border: 1px solid #dde9f5;
|
|
border-radius: 10px;
|
|
padding: 1rem 1.25rem;
|
|
margin-bottom: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.meeting-card-info h4 {
|
|
margin: 0 0 0.25rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.meeting-card-info .sub-label {
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
color: #5a7a96;
|
|
}
|
|
|
|
.sub-label {
|
|
color: #5a7a96;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Misc */
|
|
.error-msg {
|
|
color: #b91c1c;
|
|
background: #fde8e8;
|
|
border-radius: 6px;
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.loading-msg {
|
|
color: #5a7a96;
|
|
padding: 1rem 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.empty-msg {
|
|
color: #5a7a96;
|
|
padding: 1rem 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
.badge {
|
|
background: #e8f4fd;
|
|
color: var(--accent);
|
|
border-radius: 12px;
|
|
padding: 0.2rem 0.65rem;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Login card (re-use .card from styles.css, add layout tweaks) */
|
|
#login-section {
|
|
max-width: 420px;
|
|
margin: 4rem auto;
|
|
}
|
|
|
|
#login-section h2 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#login-section button[type="submit"] {
|
|
margin-top: 1.25rem;
|
|
width: 100%;
|
|
padding: 0.7rem;
|
|
font-size: 1rem;
|
|
}
|