Further updates on 03-11-2025
This commit is contained in:
@@ -0,0 +1,437 @@
|
||||
/* Event Layout */
|
||||
.event-layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
width: 260px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.event-content {
|
||||
margin-left: 260px;
|
||||
flex: 1;
|
||||
padding: 32px;
|
||||
width: calc(100% - 260px);
|
||||
max-width: 1600px;
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
.event-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 4px 0;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 24px;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #2563eb;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
/* Table Container */
|
||||
.table-container {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Events Table */
|
||||
.events-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.events-table thead {
|
||||
background: #f9fafb;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.events-table thead th {
|
||||
padding: 16px 20px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.events-table tbody tr {
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.events-table tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.events-table tbody tr:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.events-table tbody td {
|
||||
padding: 16px 20px;
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Event Image Cell */
|
||||
.event-image-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.event-thumbnail {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.no-image {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #9ca3af;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Event Code Cell */
|
||||
.event-code-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.code-badge {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.year-text {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Event Details Cell */
|
||||
.event-details-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.event-subject {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
background: #f3f4f6;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.event-description {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
line-height: 1.4;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Date Cell */
|
||||
.date-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date-cell i {
|
||||
color: #9ca3af;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Fees Cell */
|
||||
.fees-cell {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.fee-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.fee-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.fee-desc {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.fee-cost {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.fee-more {
|
||||
font-size: 11px;
|
||||
color: #3b82f6;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.no-fees {
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Status Badge */
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e5e7eb;
|
||||
background: white;
|
||||
color: #6b7280;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-action i {
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-action:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background: #eff6ff;
|
||||
border-color: #3b82f6;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.btn-edit:hover i {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: #fef2f2;
|
||||
border-color: #dc2626;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.btn-delete:hover i {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 24px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 992px) {
|
||||
.event-content {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.event-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.events-table {
|
||||
min-width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.event-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.event-details-cell {
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.event-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.sidebar,
|
||||
.header-actions,
|
||||
.action-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.event-content {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,67 +1,128 @@
|
||||
<app-menu></app-menu>
|
||||
<div class="event-layout">
|
||||
<!-- Sidebar -->
|
||||
<app-menu class="sidebar"></app-menu>
|
||||
|
||||
<div class="container mt-4">
|
||||
<h2 class="mb-4">Events</h2>
|
||||
<div class="mb-3">
|
||||
<a routerLink="/dashboard/eventForm" class="btn btn-primary">
|
||||
<i class="bi bi-plus"></i> Add New Event
|
||||
</a>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Code</th>
|
||||
<th>Year</th>
|
||||
<th>Subject</th>
|
||||
<th>Title</th>
|
||||
<th>Description</th>
|
||||
<th>Date</th>
|
||||
<th>Fees</th>
|
||||
<th>Main Image</th>
|
||||
<th>Active</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let event of events">
|
||||
<td>{{ event.code }}</td>
|
||||
<td>{{ event.year }}</td>
|
||||
<td>{{ event.subject }}</td>
|
||||
<td>{{ event.title }}</td>
|
||||
<td>{{ event.description?.substring(0, 50) }}{{ event.description?.length > 50 ? '...' : '' }}</td>
|
||||
<td>{{ event.date }}</td>
|
||||
<td>
|
||||
<span *ngIf="event.fee && event.fee.length > 0">
|
||||
{{ event.fee[0].description }}: ₹{{ event.fee[0].cost }}
|
||||
<span *ngIf="event.fee.length > 1"> (+{{ event.fee.length - 1 }} more)</span>
|
||||
</span>
|
||||
<span *ngIf="!event.fee || event.fee.length === 0" class="text-muted">No fees</span>
|
||||
</td>
|
||||
<td>
|
||||
<img *ngIf="event.mainImage"
|
||||
[src]="event.mainImage"
|
||||
alt="Event Image"
|
||||
style="width: 50px; height: 30px; object-fit: cover; border-radius: 4px;"
|
||||
onerror="this.style.display='none'">
|
||||
<span *ngIf="!event.mainImage" class="text-muted">No image</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge"
|
||||
[ngClass]="event.isActive ? 'bg-success' : 'bg-secondary'">
|
||||
{{ event.isActive ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<a [routerLink]="['/dashboard/eventForm', event.id]" class="btn btn-warning btn-sm me-2">
|
||||
<i class="bi bi-pencil"></i> Edit
|
||||
</a>
|
||||
<button (click)="deleteEvent(event.id)" class="btn btn-danger btn-sm">
|
||||
<i class="bi bi-trash"></i> Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Main Content -->
|
||||
<div class="event-content">
|
||||
<!-- Header Section -->
|
||||
<div class="event-header">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">Events Management</h1>
|
||||
<p class="page-subtitle">Manage and organize all your events</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="btn-primary" routerLink="/dashboard/eventForm">
|
||||
<i class="fa fa-plus"></i>
|
||||
<span>Add New Event</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Events Table -->
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
<table class="events-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Image</th>
|
||||
<th>Code</th>
|
||||
<th>Event Details</th>
|
||||
<th>Date</th>
|
||||
<th>Fees</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let event of events">
|
||||
<td>
|
||||
<div class="event-image-cell">
|
||||
<img *ngIf="event.mainImage"
|
||||
[src]="event.mainImage"
|
||||
alt="Event Image"
|
||||
class="event-thumbnail"
|
||||
onerror="this.style.display='none'">
|
||||
<div *ngIf="!event.mainImage" class="no-image">
|
||||
<i class="fa fa-image"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="event-code-cell">
|
||||
<span class="code-badge">{{ event.code }}</span>
|
||||
<span class="year-text">{{ event.year }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="event-details-cell">
|
||||
<div class="event-title">{{ event.title }}</div>
|
||||
<div class="event-subject">{{ event.subject }}</div>
|
||||
<div class="event-description">
|
||||
{{ event.description?.substring(0, 80) }}{{ event.description?.length > 80 ? '...' : '' }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="date-cell">
|
||||
<i class="fa fa-calendar"></i>
|
||||
<span>{{ event.date }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fees-cell">
|
||||
<div *ngIf="event.fee && event.fee.length > 0" class="fee-info">
|
||||
<div class="fee-item">
|
||||
<span class="fee-desc">{{ event.fee[0].description }}</span>
|
||||
<span class="fee-cost">₹{{ event.fee[0].cost }}</span>
|
||||
</div>
|
||||
<div *ngIf="event.fee.length > 1" class="fee-more">
|
||||
+{{ event.fee.length - 1 }} more
|
||||
</div>
|
||||
</div>
|
||||
<span *ngIf="!event.fee || event.fee.length === 0" class="no-fees">No fees</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-badge"
|
||||
[class.status-active]="event.isActive"
|
||||
[class.status-inactive]="!event.isActive">
|
||||
<i class="fa"
|
||||
[class.fa-check-circle]="event.isActive"
|
||||
[class.fa-times-circle]="!event.isActive"></i>
|
||||
{{ event.isActive ? 'Active' : 'Inactive' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="btn-action btn-edit"
|
||||
[routerLink]="['/dashboard/eventForm', event.id]"
|
||||
title="Edit">
|
||||
<i class="fa fa-edit"></i>
|
||||
</button>
|
||||
<button class="btn-action btn-delete"
|
||||
(click)="deleteEvent(event.id)"
|
||||
title="Delete">
|
||||
<i class="fa fa-trash-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div *ngIf="events.length === 0" class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<i class="fa fa-calendar-times"></i>
|
||||
</div>
|
||||
<h3>No events found</h3>
|
||||
<p>Get started by creating your first event</p>
|
||||
<button class="btn-primary" routerLink="/dashboard/eventForm">
|
||||
<i class="fa fa-plus"></i>
|
||||
<span>Add New Event</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user