ui chnages #4
Binary file not shown.
@ -156,7 +156,7 @@ LOCALE_PATHS = [
|
||||
BASE_DIR / 'locale',
|
||||
]
|
||||
|
||||
TIME_ZONE = 'UTC'
|
||||
TIME_ZONE = 'Asia/Riyadh'
|
||||
|
||||
USE_I18N = True
|
||||
|
||||
|
||||
BIN
db.sqlite3
BIN
db.sqlite3
Binary file not shown.
@ -298,20 +298,32 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'training_list' %}active{% endif %}" href="{% url 'training_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="2"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
|
||||
</svg>
|
||||
|
||||
{% trans "Training" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'list_meetings' %}active{% endif %}" href="{% url 'list_meetings' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
|
||||
</svg>
|
||||
|
||||
{% trans "Meetings" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'form_templates_list' %}active{% endif %}" href="{% url 'form_templates_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="2"></path>
|
||||
</svg>
|
||||
{% trans "Meetings" %}
|
||||
{% trans "Form Templates" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -9,10 +9,10 @@
|
||||
/* Updated CSS styles with a new Teal/Aqua theme */
|
||||
:root {
|
||||
/* New Color Palette (Teal/Aqua/Deep Blue) */
|
||||
--primary: #0081a7; /* Deep Teal/Cyan for main actions */
|
||||
--primary: #004a53; /* Deep Teal/Cyan for main actions */
|
||||
--primary-light: #00b4d8; /* Brighter Aqua/Cyan */
|
||||
--secondary: #005a78; /* Darker Teal for hover/accent */
|
||||
--success: #00cc99; /* Bright Greenish-Teal for success */
|
||||
--success: #005a78; /* Bright Greenish-Teal for success */
|
||||
|
||||
/* Neutral Colors (Kept for consistency) */
|
||||
--light: #f4fcfc; /* Very light off-white (slightly blue tinted) */
|
||||
@ -160,7 +160,7 @@
|
||||
}
|
||||
/* Stage Navigation - Fixed Height with Scroll */
|
||||
.stage-nav-container {
|
||||
height: 60px;
|
||||
height: 100px;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
padding: 5px;
|
||||
@ -175,6 +175,7 @@
|
||||
min-width: 100%;
|
||||
padding: 0 10px;
|
||||
white-space: nowrap;
|
||||
height:70px;
|
||||
}
|
||||
.stage-tab {
|
||||
padding: 12px 20px;
|
||||
|
||||
@ -6,117 +6,140 @@
|
||||
{% block customCSS %}
|
||||
<style>
|
||||
/* ================================================= */
|
||||
/* THEME VARIABLES AND GLOBAL STYLES */
|
||||
/* UI Variables (Matching Job List) */
|
||||
/* ================================================= */
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-border: #eaeff3;
|
||||
--kaauh-primary-text: #343a40;
|
||||
--kaauh-gray-light: #f8f9fa;
|
||||
}
|
||||
|
||||
/* Primary Color Overrides */
|
||||
/* --- Typography and Color Overrides --- */
|
||||
.text-primary { color: var(--kaauh-teal) !important; }
|
||||
|
||||
/* Main Action Button Style */
|
||||
.btn-main-action, .btn-primary {
|
||||
/* --- Button Base Styles (Matching Job List) --- */
|
||||
.btn-main-action {
|
||||
background-color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
padding: 0.6rem 1.2rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.btn-main-action:hover, .btn-primary:hover {
|
||||
.btn-main-action:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-teal-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Card enhancements */
|
||||
/* Secondary Button Style (for Edit/Preview) */
|
||||
.btn-outline-secondary {
|
||||
color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-teal);
|
||||
}
|
||||
.btn-outline-secondary:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
color: white;
|
||||
border-color: var(--kaauh-teal-dark);
|
||||
}
|
||||
|
||||
/* Size Utilities (matching Bootstrap convention) */
|
||||
.btn-lg {
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.btn-sm {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
|
||||
/* --- Card and Layout Styles (Matching Job List) --- */
|
||||
.card {
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* Template Card hover effect (re-themed) */
|
||||
.template-card {
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
/* Template Card Hover Effect (Consistent with job list card hover) */
|
||||
.template-card {
|
||||
height: 100%;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
|
||||
}
|
||||
.template-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.1) !important;
|
||||
}
|
||||
|
||||
/* Card Header Theming */
|
||||
.card-header {
|
||||
background-color: #f0f8ff !important; /* Light blue tint for header */
|
||||
/* FIX: Use !important to override default white/light backgrounds from Bootstrap */
|
||||
background-color: var(--kaauh-teal-dark) !important;
|
||||
border-bottom: 1px solid var(--kaauh-border);
|
||||
color: var(--kaauh-teal-dark);
|
||||
color: white !important; /* Base color for header text */
|
||||
font-weight: 600;
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 0.75rem 0.75rem 0 0;
|
||||
}
|
||||
|
||||
/* Ensure all elements within the header are visible */
|
||||
.card-header h3 {
|
||||
color: var(--kaauh-teal-dark);
|
||||
color: white !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
.card-header .fas {
|
||||
color: var(--kaauh-teal);
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Stats Theming */
|
||||
.card-header .small {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
}
|
||||
|
||||
/* --- Content Styles (Stats, Description) --- */
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--kaauh-teal-dark); /* Using dark teal for stats */
|
||||
color: var(--kaauh-teal-dark);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--kaauh-primary-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
min-height: 60px;
|
||||
color: var(--kaauh-primary-text);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Search Input Theming */
|
||||
.form-control {
|
||||
|
||||
/* --- Form/Search Input Theming (Matching Job List) --- */
|
||||
.form-control-search {
|
||||
box-shadow: none;
|
||||
border-color: var(--kaauh-border);
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
}
|
||||
.form-control-search:focus {
|
||||
border-color: var(--kaauh-teal);
|
||||
box-shadow: 0 0 0 0.1rem rgba(0, 99, 110, 0.25);
|
||||
}
|
||||
.input-group-search .input-group-text {
|
||||
background-color: white;
|
||||
border-right: none;
|
||||
border-color: var(--kaauh-border);
|
||||
border-radius: 0.5rem 0 0 0.5rem;
|
||||
border-color: var(--kaauh-border);
|
||||
}
|
||||
.input-group .btn-outline-secondary {
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
.input-group-search .form-control {
|
||||
border-left: none;
|
||||
color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-border);
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.input-group .btn-outline-secondary:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
/* Action Buttons (Re-theming outline colors) */
|
||||
.btn-outline-primary {
|
||||
--bs-btn-color: var(--kaauh-teal-dark);
|
||||
--bs-btn-border-color: var(--kaauh-teal);
|
||||
--bs-btn-hover-bg: var(--kaauh-teal);
|
||||
--bs-btn-hover-border-color: var(--kaauh-teal);
|
||||
--bs-btn-hover-color: white;
|
||||
}
|
||||
|
||||
/* Delete Button - keep bold red */
|
||||
/* --- Danger Outline (Delete) --- */
|
||||
.btn-outline-danger {
|
||||
--bs-btn-color: #dc3545;
|
||||
--bs-btn-border-color: #dc3545;
|
||||
@ -124,97 +147,138 @@
|
||||
--bs-btn-hover-color: white;
|
||||
}
|
||||
|
||||
/* Empty State Theming */
|
||||
/* --- Empty State Theming --- */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: var(--kaauh-primary-text);
|
||||
border: 2px dashed var(--kaauh-border);
|
||||
border-radius: 0.75rem;
|
||||
background-color: #f8f9fa;
|
||||
background-color: var(--kaauh-gray-light);
|
||||
}
|
||||
.empty-state i {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--kaauh-teal);
|
||||
color: var(--kaauh-teal-dark);
|
||||
}
|
||||
.empty-state .btn-main-action .fas {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Pagination Styling */
|
||||
.pagination .page-link {
|
||||
/* --- Pagination Styling (Matching Job List) --- */
|
||||
.pagination .page-item .page-link {
|
||||
color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-border);
|
||||
}
|
||||
.pagination .page-item.active .page-link {
|
||||
background-color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
}
|
||||
.pagination .page-item:not(.active) .page-link:hover {
|
||||
.pagination .page-item:hover .page-link:not(.active) {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container py-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4 pb-2 border-bottom border-primary">
|
||||
<h1 class="h3 mb-0 fw-bold text-primary">
|
||||
<i class="fas fa-file-alt me-2"></i>Form Templates
|
||||
<h1 class="h3 mb-0 fw-bold" style="color: var(--kaauh-teal-dark); font-weight: 700;">
|
||||
<i class="fas fa-file-alt me-2"></i>{% trans "Form Templates" %}
|
||||
</h1>
|
||||
<a href="{% url 'form_builder' %}" class="btn btn-main-action">
|
||||
<i class="fas fa-plus me-1"></i> Create New Template
|
||||
<i class="fas fa-plus me-1"></i> {% trans "Create New Template" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="searchInput" placeholder="Search templates..." value="{{ query }}">
|
||||
<button class="btn btn-outline-secondary" type="button" id="searchBtn">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
{# Search/Filter Area - Matching Job List Structure #}
|
||||
<div class="card mb-4 shadow-sm no-hover">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-muted mb-3" style="font-weight: 500;">Search Templates</h5>
|
||||
<form method="get" class="row g-3 align-items-end">
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="search" class="form-label small text-muted">Search by Template Name</label>
|
||||
<div class="input-group input-group-lg input-group-search">
|
||||
<span class="input-group-text"><i class="fas fa-search text-muted"></i></span>
|
||||
<input type="text" name="q" id="searchInput" class="form-control form-control-search"
|
||||
placeholder="{% trans 'Search templates by name...' %}"
|
||||
value="{{ query|default_if_none:'' }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="filter-buttons">
|
||||
<button type="submit" class="btn btn-main-action btn-lg">
|
||||
<i class="fas fa-filter me-1"></i> Search
|
||||
</button>
|
||||
|
||||
{# Show Clear button if search is active #}
|
||||
{% if query %}
|
||||
<a href="{% url 'form_templates_list' %}" class="btn btn-outline-danger btn-sm">
|
||||
<i class="fas fa-times me-1"></i> Clear Search
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% if templates %}
|
||||
<div class="row g-4">
|
||||
{% for template in templates %}
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card template-card h-100 shadow-sm">
|
||||
<div class="card-header">
|
||||
<div class="card template-card h-100">
|
||||
<div class="card-header ">
|
||||
<h3 class="h5 mb-2">{{ template.name }}</h3>
|
||||
<div class="d-flex justify-content-between text-muted small">
|
||||
<div class="d-flex justify-content-between small">
|
||||
<span><i class="fas fa-calendar me-1"></i> {{ template.created_at|date:"M d, Y" }}</span>
|
||||
<span><i class="fas fa-sync-alt me-1"></i> {{ template.updated_at|timesince }} ago</span>
|
||||
<span><i class="fas fa-sync-alt me-1"></i> {{ template.updated_at|timesince }} {% trans "ago" %}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="row text-center mb-3">
|
||||
<div class="col-6">
|
||||
<div class="stat-value">{{ template.get_stage_count }}</div>
|
||||
<div class="stat-label">Stages</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="stat-value">{{ template.get_field_count }}</div>
|
||||
<div class="stat-label">Fields</div>
|
||||
|
||||
{# Content area - includes stats and description #}
|
||||
<div class="flex-grow-1">
|
||||
<div class="row text-center mb-3">
|
||||
<div class="col-6">
|
||||
<div class="stat-value">{{ template.get_stage_count }}</div>
|
||||
<div class="stat-label">{% trans "Stages" %}</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="stat-value">{{ template.get_field_count }}</div>
|
||||
<div class="stat-label">{% trans "Fields" %}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-text card-description small">
|
||||
{% if template.description %}
|
||||
{{ template.description|truncatewords:20 }}
|
||||
{% else %}
|
||||
<em class="text-muted">{% trans "No description provided" %}</em>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
<p class="card-text card-description flex-grow-1 small">
|
||||
{% if template.description %}
|
||||
{{ template.description|truncatewords:20 }}
|
||||
{% else %}
|
||||
<em class="text-muted">No description provided</em>
|
||||
{% endif %}
|
||||
</p>
|
||||
<div class="card-actions d-grid gap-2 d-md-flex justify-content-md-end pt-3 border-top border-light-subtle">
|
||||
<a href="{% url 'form_builder' template.id %}" class="btn btn-outline-primary btn-sm action-btn">
|
||||
<i class="fas fa-edit me-1"></i> Edit
|
||||
</a>
|
||||
<button class="btn btn-outline-danger btn-sm action-btn delete"
|
||||
data-template-id="{{ template.id }}"
|
||||
data-template-name="{{ template.name }}">
|
||||
<i class="fas fa-trash me-1"></i> Delete
|
||||
</button>
|
||||
|
||||
{# Action area - visually separated with pt-2 border-top #}
|
||||
<div class="mt-auto pt-2 border-top">
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
<a href="{% url 'form_wizard' template.id %}" class="btn btn-outline-secondary btn-sm action-btn">
|
||||
<i class="fas fa-eye me-1"></i> {% trans "Preview" %}
|
||||
</a>
|
||||
<a href="{% url 'form_builder' template.id %}" class="btn btn-outline-secondary btn-sm action-btn">
|
||||
<i class="fas fa-edit me-1"></i> {% trans "Edit" %}
|
||||
</a>
|
||||
<button class="btn btn-outline-danger btn-sm action-btn delete"
|
||||
data-template-id="{{ template.id }}"
|
||||
data-template-name="{{ template.name }}">
|
||||
<i class="fas fa-trash me-1"></i> {% trans "Delete" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -223,71 +287,70 @@
|
||||
</div>
|
||||
|
||||
{% if templates.has_other_pages %}
|
||||
<div class="d-flex justify-content-center mt-4">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination mb-0">
|
||||
{% if templates.has_previous %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="?page={{ templates.previous_page_number }}{% if query %}&q={{ query }}{% endif %}" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<nav aria-label="Page navigation" class="mt-4">
|
||||
<ul class="pagination justify-content-center">
|
||||
{# Previous page logic #}
|
||||
{% if templates.has_previous %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="?page=1{% if query %}&q={{ query }}{% endif %}">First</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="?page={{ templates.previous_page_number }}{% if query %}&q={{ query }}{% endif %}">Previous</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% for num in templates.paginator.page_range %}
|
||||
{% if templates.number == num %}
|
||||
<li class="page-item active"><span class="page-link">{{ num }}</span></li>
|
||||
{% elif num > templates.number|add:'-3' and num < templates.number|add:'3' %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="?page={{ num }}{% if query %}&q={{ query }}{% endif %}">{{ num }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{# Current Page #}
|
||||
<li class="page-item active">
|
||||
<span class="page-link">{{ templates.number }} of {{ templates.paginator.num_pages }}</span>
|
||||
</li>
|
||||
|
||||
{% if templates.has_next %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="?page={{ templates.next_page_number }}{% if query %}&q={{ query }}{% endif %}" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{# Next page logic #}
|
||||
{% if templates.has_next %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="?page={{ templates.next_page_number }}{% if query %}&q={{ query }}{% endif %}">Next</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="?page={{ templates.paginator.num_pages }}{% if query %}&q={{ query }}{% endif %}">Last</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-file-contract"></i>
|
||||
<h3 class="h4 mb-3">No Form Templates Found</h3>
|
||||
<p class="mb-4 text-muted">
|
||||
{% if query %}No templates match your search "{{ query }}".{% else %}You haven't created any form templates yet.{% endif %}
|
||||
</p>
|
||||
<a href="{% url 'form_builder' %}" class="btn btn-main-action">
|
||||
<i class="fas fa-plus me-1"></i> Create Your First Template
|
||||
</a>
|
||||
<div class="text-center py-5 card shadow-sm">
|
||||
<div class="card-body">
|
||||
<i class="fas fa-file-contract fa-3x mb-3" style="color: var(--kaauh-teal-dark);"></i>
|
||||
<h3 class="h4 mb-3">{% trans "No Form Templates Found" %}</h3>
|
||||
<p class="text-muted">
|
||||
{% if query %}
|
||||
{% blocktrans with query=query %}No templates match your search "{{ query }}".{% endblocktrans %}
|
||||
{% else %}
|
||||
{% trans "You haven't created any form templates yet." %}
|
||||
{% endif %}
|
||||
</p>
|
||||
<a href="{% url 'form_builder' %}" class="btn btn-main-action mt-3">
|
||||
<i class="fas fa-plus me-1 text-white"></i> {% trans "Create Your First Template" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% include 'includes/delete_modal.html' %}
|
||||
{% include 'includes/delete_modal.html' %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
{% block customJS %}
|
||||
<script>
|
||||
// Note: JS logic remains the same, assuming 'csrfToken' is available in 'base.html' or elsewhere.
|
||||
|
||||
// Initialize Bootstrap modal
|
||||
// JS logic remains the same as previous versions but ensures Django variables are handled
|
||||
const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
|
||||
|
||||
// Create toast container if it doesn't exist (using theme styles)
|
||||
let toastContainer = document.querySelector('.toast-container');
|
||||
if (!toastContainer) {
|
||||
toastContainer = document.createElement('div');
|
||||
toastContainer.className = 'toast-container';
|
||||
toastContainer.className = 'toast-container position-fixed bottom-0 end-0 p-3';
|
||||
document.body.appendChild(toastContainer);
|
||||
}
|
||||
|
||||
// Function to create toast notification
|
||||
function createToast(message, type = 'success') {
|
||||
const toastId = 'toast-' + Date.now();
|
||||
const iconClass = type === 'success' ? 'check-circle text-success' : 'exclamation-circle text-danger';
|
||||
@ -310,24 +373,29 @@
|
||||
const toast = new bootstrap.Toast(toastElement);
|
||||
toast.show();
|
||||
|
||||
// Remove toast element after it's hidden
|
||||
toastElement.addEventListener('hidden.bs.toast', () => {
|
||||
toastElement.remove();
|
||||
});
|
||||
}
|
||||
|
||||
// Search functionality
|
||||
document.getElementById('searchBtn').addEventListener('click', function() {
|
||||
const query = document.getElementById('searchInput').value;
|
||||
// Assuming the query parameter for search is 'q' based on pagination logic
|
||||
window.location.href = query ? `?q=${encodeURIComponent(query)}` : '?';
|
||||
});
|
||||
|
||||
// Search functionality - handles submission on Enter key
|
||||
document.getElementById('searchInput').addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
document.getElementById('searchBtn').click();
|
||||
e.preventDefault();
|
||||
const query = this.value;
|
||||
// Assumes 'form_templates_list' is the view name for this page
|
||||
window.location.href = query ? `?q=${encodeURIComponent(query)}` : '{% url "form_templates_list" %}';
|
||||
}
|
||||
});
|
||||
|
||||
// Bind search form submit to the main button click event for consistency
|
||||
document.querySelector('.filter-buttons button[type="submit"]').addEventListener('click', function(e) {
|
||||
// Prevent default submission to handle URL construction correctly
|
||||
e.preventDefault();
|
||||
const query = document.getElementById('searchInput').value;
|
||||
window.location.href = query ? `?q=${encodeURIComponent(query)}` : '{% url "form_templates_list" %}';
|
||||
});
|
||||
|
||||
|
||||
// Delete modal functionality
|
||||
let templateToDelete = null;
|
||||
@ -348,12 +416,12 @@
|
||||
|
||||
if (!templateToDelete) return;
|
||||
|
||||
// This relies on 'csrfToken' being defined somewhere, which is typical for Django templates.
|
||||
// This CSRF token selector assumes it's present in your base template or form
|
||||
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
|
||||
|
||||
try {
|
||||
// Note: Update this API path if necessary based on your actual URL configuration
|
||||
const response = await fetch(`/api/templates/${templateToDelete}/delete/`, {
|
||||
// NOTE: Update this URL to match your actual Django API endpoint for deletion
|
||||
const response = await fetch(`/api/templates/${templateToDelete}/delete/`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'X-CSRFToken': csrfToken,
|
||||
@ -365,15 +433,11 @@
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
// Show success toast
|
||||
createToast(result.message);
|
||||
|
||||
// Hide the modal
|
||||
deleteModal.hide();
|
||||
|
||||
// Remove the template card from the DOM after a short delay
|
||||
// Smoothly remove the card
|
||||
setTimeout(() => {
|
||||
// Find the button that was clicked and its parent card column
|
||||
const buttonClicked = document.querySelector(`button[data-template-id="${templateToDelete}"]`);
|
||||
if(buttonClicked) {
|
||||
const cardToRemove = buttonClicked.closest('.col-lg-4');
|
||||
@ -385,10 +449,9 @@
|
||||
setTimeout(() => {
|
||||
cardToRemove.remove();
|
||||
|
||||
// Check if any templates remain
|
||||
// Reload if the last card is removed to show the empty state
|
||||
const remainingCards = document.querySelectorAll('.col-lg-4');
|
||||
if (remainingCards.length === 0) {
|
||||
// Reload to show the empty state
|
||||
window.location.reload();
|
||||
}
|
||||
}, 300);
|
||||
@ -396,7 +459,6 @@
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// Show error toast
|
||||
createToast('Error: ' + (result.error || 'Could not delete template.'), 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
@ -8,34 +8,42 @@
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
/* KAAT-S Theme Variables */
|
||||
:root {
|
||||
--primary: #4361ee;
|
||||
--primary-light: #4895ef;
|
||||
--secondary: #3f37c9;
|
||||
--success: #4cc9f0;
|
||||
--kaauh-teal: #00636e; /* Main Primary Color */
|
||||
--kaauh-teal-dark: #004a53; /* Dark Primary Color */
|
||||
|
||||
/* Mapping wizard defaults to theme colors */
|
||||
--primary: var(--kaauh-teal);
|
||||
--primary-light: #007c89; /* Slightly lighter shade for subtle hover/border */
|
||||
--secondary: var(--kaauh-teal-dark);
|
||||
--success: #198754; /* Keeping a standard success green for Submit */
|
||||
--error: #dc3545; /* Standard danger red */
|
||||
|
||||
--light: #f8f9fa;
|
||||
--dark: #212529;
|
||||
--gray: #6c757d;
|
||||
--light-gray: #e9ecef;
|
||||
--border: #dee2e6;
|
||||
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--radius: 8px;
|
||||
--radius: 16px; /* Increased radius for a softer look */
|
||||
--transition: all 0.3s ease;
|
||||
--error: #e53935;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
/* Dark gradient background to match the theme */
|
||||
background: linear-gradient(135deg, var(--kaauh-teal-dark) 0%, #1e3a47 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.wizard-container {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
max-width: 800px; /* Increased max-width slightly for content */
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
@ -47,7 +55,7 @@
|
||||
|
||||
/* Progress Bar */
|
||||
.progress-container {
|
||||
height: 6px;
|
||||
height: 8px; /* Slightly thicker bar */
|
||||
background: var(--light-gray);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@ -55,7 +63,7 @@
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: var(--primary);
|
||||
background: var(--primary); /* Teal color */
|
||||
transition: width 0.4s ease;
|
||||
width: 0%;
|
||||
}
|
||||
@ -71,7 +79,7 @@
|
||||
.logo {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
color: var(--secondary); /* Dark teal for logo */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
@ -97,7 +105,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
padding-right: 10px;
|
||||
padding-right: 15px; /* Space for scrollbar */
|
||||
}
|
||||
|
||||
.stage-title {
|
||||
@ -119,6 +127,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.required-indicator {
|
||||
@ -138,13 +147,13 @@
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
|
||||
border-color: var(--primary); /* Teal focus border */
|
||||
box-shadow: 0 0 0 4px rgba(0, 99, 110, 0.2); /* Teal shadow */
|
||||
}
|
||||
|
||||
.form-input.error {
|
||||
border-color: var(--error);
|
||||
box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.2);
|
||||
box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
@ -175,18 +184,18 @@
|
||||
}
|
||||
|
||||
.file-upload-area:hover {
|
||||
border-color: var(--primary);
|
||||
background: rgba(67, 97, 238, 0.05);
|
||||
border-color: var(--primary); /* Teal hover border */
|
||||
background: rgba(0, 99, 110, 0.05); /* Light teal background */
|
||||
}
|
||||
|
||||
.file-upload-area.error {
|
||||
border-color: var(--error);
|
||||
background: rgba(229, 57, 53, 0.05);
|
||||
background: rgba(220, 53, 69, 0.05);
|
||||
}
|
||||
|
||||
.file-upload-icon {
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary);
|
||||
color: var(--primary); /* Teal icon */
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@ -196,7 +205,7 @@
|
||||
}
|
||||
|
||||
.file-upload-text strong {
|
||||
color: var(--primary);
|
||||
color: var(--primary); /* Teal text */
|
||||
}
|
||||
|
||||
.file-upload-info {
|
||||
@ -222,7 +231,7 @@
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
color: var(--primary);
|
||||
color: var(--primary); /* Teal icon */
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
@ -238,7 +247,7 @@
|
||||
.remove-file-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #e53935;
|
||||
color: var(--error);
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
width: 32px;
|
||||
@ -251,7 +260,7 @@
|
||||
}
|
||||
|
||||
.remove-file-btn:hover {
|
||||
background: #ffebee;
|
||||
background: rgba(220, 53, 69, 0.1);
|
||||
}
|
||||
|
||||
/* Radio/Checkbox Styles */
|
||||
@ -271,13 +280,19 @@
|
||||
}
|
||||
|
||||
.option-item.selected {
|
||||
border-color: var(--primary);
|
||||
background: rgba(67, 97, 238, 0.05);
|
||||
border-color: var(--primary); /* Teal border */
|
||||
background: rgba(0, 99, 110, 0.05); /* Light teal background */
|
||||
}
|
||||
|
||||
.option-item.error {
|
||||
border-color: var(--error);
|
||||
background: rgba(229, 57, 53, 0.05);
|
||||
background: rgba(220, 53, 69, 0.05);
|
||||
}
|
||||
|
||||
/* Ensures radio/checkbox controls themselves use the primary color */
|
||||
.option-item input[type="radio"]:checked,
|
||||
.option-item input[type="checkbox"]:checked {
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
.option-item input {
|
||||
@ -338,33 +353,33 @@
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
background: var(--light);
|
||||
background: var(--light-gray); /* Match theme's light gray */
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
background: var(--light-gray);
|
||||
background: #d8dadc;
|
||||
}
|
||||
|
||||
.btn-next {
|
||||
background: var(--primary);
|
||||
background: var(--primary); /* Teal color */
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(0, 99, 110, 0.3); /* Teal shadow */
|
||||
}
|
||||
|
||||
.btn-next:hover {
|
||||
background: var(--secondary);
|
||||
background: var(--secondary); /* Darker teal on hover */
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background: var(--success);
|
||||
background: var(--success); /* Green for submit */
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(76, 201, 240, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
background: #3ab0d9;
|
||||
background: #157347;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@ -373,6 +388,7 @@
|
||||
.wizard-container {
|
||||
height: 100vh;
|
||||
border-radius: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.stage-title {
|
||||
@ -395,7 +411,6 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="wizard-container">
|
||||
<!-- Progress Bar -->
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="progressBar"></div>
|
||||
</div>
|
||||
@ -410,8 +425,7 @@
|
||||
|
||||
<div class="wizard-content">
|
||||
<div class="stage-container" id="stageContainer">
|
||||
<!-- Stages will be rendered here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-container" id="previewContainer" style="display: none;">
|
||||
<h3 class="mb-4">Review Your Application</h3>
|
||||
@ -770,8 +784,8 @@
|
||||
elements.submitBtn.style.display = 'none';
|
||||
elements.nextBtn.style.display = 'flex';
|
||||
elements.nextBtn.textContent = state.currentStage === state.stages.length - 1 ?
|
||||
'Preview <i class="fas fa-arrow-right"></i>' :
|
||||
'Next <i class="fas fa-arrow-right"></i>';
|
||||
'Preview' :
|
||||
'Next'
|
||||
}
|
||||
|
||||
function createFieldElement(field) {
|
||||
|
||||
@ -3,6 +3,144 @@
|
||||
|
||||
{% block title %}{% trans "Create Zoom Meeting" %} - {{ block.super }}{% endblock %}
|
||||
|
||||
{% block customCSS %}
|
||||
<style>
|
||||
/* UI Variables for the KAAT-S Theme */
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-border: #eaeff3;
|
||||
--kaauh-primary-text: #343a40;
|
||||
--kaauh-gray: #6c757d;
|
||||
|
||||
/* Status Colors are mostly for list views, but included for completeness */
|
||||
--kaauh-success: var(--kaauh-teal);
|
||||
--kaauh-warning: #ffc107;
|
||||
--kaauh-danger: #dc3545;
|
||||
--kaauh-secondary: #6c757d;
|
||||
}
|
||||
|
||||
/* CARD STYLING */
|
||||
.card {
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
max-width: 600px; /* Constrain width for a better form layout */
|
||||
margin: 2rem auto; /* Center the form card */
|
||||
}
|
||||
|
||||
/* HEADER STYLING */
|
||||
.card-header {
|
||||
background-color: white; /* Ensure header background is white */
|
||||
border-bottom: 1px solid var(--kaauh-border);
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top-left-radius: 0.75rem;
|
||||
border-top-right-radius: 0.75rem;
|
||||
}
|
||||
.card-header h1 {
|
||||
font-size: 1.5rem;
|
||||
color: var(--kaauh-teal-dark);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.card-header h1 svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
/* FORM STYLING */
|
||||
form {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.form-row {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.form-label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: var(--kaauh-gray);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
/* Style for Django form fields (assuming they render as input/select) */
|
||||
.form-row input,
|
||||
.form-row select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: var(--kaauh-primary-text);
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 0.5rem;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
.form-row input:focus,
|
||||
.form-row select:focus {
|
||||
border-color: var(--kaauh-teal);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.1rem rgba(0, 99, 110, 0.25);
|
||||
}
|
||||
/* Ensure the datetime picker input is styled correctly */
|
||||
input[type="datetime-local"] {
|
||||
font-family: inherit; /* Fixes font for datetime-local */
|
||||
}
|
||||
|
||||
/* BUTTON STYLING */
|
||||
/* Base style for all buttons */
|
||||
.btn-base {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none; /* Remove underline from anchor buttons */
|
||||
}
|
||||
|
||||
/* Primary Action Button (Create/Submit) */
|
||||
.btn-main-action {
|
||||
background-color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
}
|
||||
.btn-main-action:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-teal-dark);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Outline Secondary (Cancel/Back) */
|
||||
.btn-kaats-outline-secondary {
|
||||
color: var(--kaauh-secondary);
|
||||
border-color: var(--kaauh-secondary);
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-kaats-outline-secondary:hover {
|
||||
background-color: var(--kaauh-secondary);
|
||||
color: white;
|
||||
border-color: var(--kaauh-secondary);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
@ -12,33 +150,40 @@
|
||||
</svg>
|
||||
{% trans "Create New Zoom Meeting" %}
|
||||
</h1>
|
||||
<a href="{% url 'list_meetings' %}" class="btn btn-secondary">{% trans "Back to Meetings" %}</a>
|
||||
{# Using custom secondary button for 'Back to Meetings' link #}
|
||||
<a href="{% url 'list_meetings' %}" class="btn-base btn-kaats-outline-secondary">
|
||||
{% trans "Back to Meetings" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<div class="form-row">
|
||||
<label class="form-label">{% trans "Topic" %}</label>
|
||||
<label class="form-label" for="{{ form.topic.id_for_label }}">{% trans "Topic" %}</label>
|
||||
{{ form.topic }}
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label class="form-label">{% trans "Start Time" %}</label>
|
||||
<label class="form-label" for="{{ form.start_time.id_for_label }}">{% trans "Start Time" %}</label>
|
||||
{{ form.start_time }}
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label class="form-label">{% trans "Duration (minutes)" %}</label>
|
||||
<label class="form-label" for="{{ form.duration.id_for_label }}">{% trans "Duration (minutes)" %}</label>
|
||||
{{ form.duration }}
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<svg class="heroicon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
{# Action Buttons at the bottom #}
|
||||
<div class="form-row d-flex gap-3">
|
||||
<button type="submit" class="btn-base btn-main-action">
|
||||
<svg class="heroicon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 1.25rem;">
|
||||
<path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
{% trans "Create Meeting" %}
|
||||
</button>
|
||||
<a href="{% url 'list_meetings' %}" class="btn btn-secondary">{% trans "Cancel" %}</a>
|
||||
{# Using custom secondary button for 'Cancel' link #}
|
||||
<a href="{% url 'list_meetings' %}" class="btn-base btn-kaats-outline-secondary">
|
||||
{% trans "Cancel" %}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
@ -2,52 +2,130 @@
|
||||
{% load static i18n %}
|
||||
|
||||
{% block title %}{% trans "Zoom Meetings" %} - {{ block.super }}{% endblock %}
|
||||
{% block extra_css %}
|
||||
{% block customCSS %}
|
||||
<style>
|
||||
/* New Teal/Aqua Theme Variables */
|
||||
/* UI Variables for the KAAT-S Theme */
|
||||
:root {
|
||||
--primary: #0081a7; /* Deep Teal/Cyan */
|
||||
--primary-light: #00b4d8; /* Brighter Aqua/Cyan */
|
||||
--secondary: #005a78; /* Darker Teal for hover/accent */
|
||||
--success: #00cc99; /* Bright Greenish-Teal for success */
|
||||
--light: #f4fcfc; /* Very light off-white (slightly blue tinted) */
|
||||
--dark: #212529; /* Near black text */
|
||||
--gray: #6c757d; /* Standard gray text */
|
||||
--light-gray: #e0f0f4; /* Lighter background for hover/disabled */
|
||||
--border: #c4d7e0; /* Lighter, softer border color */
|
||||
--danger: #e53935; /* Kept red for danger/delete actions */
|
||||
--warning: #ff8f00; /* Kept orange for waiting status */
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-border: #eaeff3;
|
||||
--kaauh-primary-text: #343a40;
|
||||
--kaauh-gray: #6c757d;
|
||||
|
||||
/* Status Colors based on KAAT-S example */
|
||||
--kaauh-success: var(--kaauh-teal);
|
||||
--kaauh-warning: #ffc107;
|
||||
--kaauh-danger: #dc3545;
|
||||
--kaauh-secondary: #6c757d;
|
||||
}
|
||||
|
||||
/* GENERAL GRID AND CARD STYLES */
|
||||
/* Base style for all buttons to inherit Bootstrap's basic structure/reset */
|
||||
.btn-base {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 0.375rem 0.75rem; /* Standard default padding */
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid transparent;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
/* FIX: Remove link underline for anchor tags used as buttons */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Small Button Size */
|
||||
.btn-sm {
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Main Action Button (Create Meeting) */
|
||||
.btn-main-action {
|
||||
background-color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-main-action:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-teal-dark);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
text-decoration: none; /* Ensure no hover underline if base fails */
|
||||
}
|
||||
|
||||
/* Outline Primary (View/Join buttons) */
|
||||
.btn-kaats-outline-primary {
|
||||
color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-kaats-outline-primary:hover {
|
||||
background-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Outline Secondary (Update button) */
|
||||
.btn-kaats-outline-secondary {
|
||||
color: var(--kaauh-secondary);
|
||||
border-color: var(--kaauh-secondary);
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-kaats-outline-secondary:hover {
|
||||
background-color: var(--kaauh-secondary);
|
||||
color: white;
|
||||
border-color: var(--kaauh-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Outline Danger (Delete button) */
|
||||
.btn-kaats-outline-danger {
|
||||
color: var(--kaauh-danger);
|
||||
border-color: var(--kaauh-danger);
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-kaats-outline-danger:hover {
|
||||
background-color: var(--kaauh-danger);
|
||||
color: white;
|
||||
border-color: var(--kaauh-danger);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* --- General UI Styles (Unchanged) --- */
|
||||
|
||||
/* CARD GRID STYLES */
|
||||
.meetings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem; /* Added padding to the grid container */
|
||||
padding: 1rem;
|
||||
}
|
||||
.meeting-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--border);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
border: 1px solid var(--kaauh-border);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
height: 100%;
|
||||
}
|
||||
.meeting-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
border-color: var(--primary-light); /* Highlight border on hover */
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* TOPIC AND DETAILS STYLES */
|
||||
.meeting-topic {
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary); /* Uses the new primary color */
|
||||
color: var(--kaauh-teal-dark);
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--kaauh-border);
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.meeting-detail {
|
||||
@ -58,7 +136,7 @@
|
||||
.detail-label {
|
||||
font-weight: 600;
|
||||
min-width: 80px;
|
||||
color: var(--gray); /* Uses gray variable */
|
||||
color: var(--kaauh-gray);
|
||||
font-size: 0.9rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -66,31 +144,30 @@
|
||||
flex: 1;
|
||||
font-size: 0.9rem;
|
||||
word-break: break-word;
|
||||
color: var(--dark);
|
||||
color: var(--kaauh-primary-text);
|
||||
}
|
||||
|
||||
/* STATUS BADGE STYLES (Updated to use theme-based colors) */
|
||||
/* STATUS BADGE STYLES */
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
padding: 0.4em 0.8em;
|
||||
border-radius: 0.4rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
/* Waiting (Warning) */
|
||||
.status-waiting {
|
||||
background: rgba(255, 143, 0, 0.15); /* Light orange tint */
|
||||
color: var(--warning);
|
||||
.bg-warning {
|
||||
background: var(--kaauh-warning) !important;
|
||||
color: var(--kaauh-primary-text) !important;
|
||||
}
|
||||
/* Started (Success) */
|
||||
.status-started {
|
||||
background: rgba(0, 204, 153, 0.15); /* Light greenish-teal tint */
|
||||
color: var(--success);
|
||||
.bg-success {
|
||||
background: var(--kaauh-success) !important;
|
||||
color: white !important;
|
||||
}
|
||||
/* Ended (Danger) */
|
||||
.status-ended {
|
||||
background: rgba(229, 57, 53, 0.15); /* Light red tint */
|
||||
color: var(--danger);
|
||||
.bg-danger {
|
||||
background: var(--kaauh-danger) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* ACTION AREA STYLES */
|
||||
@ -100,39 +177,41 @@
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn-sm { /* Re-styled the small button to inherit from main theme structure */
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
/* Ensure the primary/outline buttons are defined (assuming a global class) */
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: 1px solid var(--primary);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--secondary);
|
||||
border-color: var(--secondary);
|
||||
}
|
||||
.btn-outline-primary {
|
||||
background: transparent;
|
||||
border: 1px solid var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
.btn-outline-primary:hover {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
/* Card header style for H1 to match theme */
|
||||
|
||||
/* Header Styling */
|
||||
.card-header h1 {
|
||||
color: var(--primary);
|
||||
color: var(--kaauh-teal-dark);
|
||||
font-weight: 700;
|
||||
}
|
||||
.card {
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
/* Empty State Icon Color */
|
||||
.text-muted.mb-3 {
|
||||
color: var(--kaauh-teal-dark) !important;
|
||||
}
|
||||
|
||||
/* Pagination Link Styling */
|
||||
.pagination .page-item .page-link {
|
||||
color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-border);
|
||||
}
|
||||
.pagination .page-item.active .page-link {
|
||||
background-color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
}
|
||||
.pagination .page-item:hover .page-link:not(.active) {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
/* RESPONSIVE STYLES */
|
||||
@media (max-width: 768px) {
|
||||
.meetings-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 1rem;
|
||||
}
|
||||
.meeting-detail {
|
||||
flex-direction: column;
|
||||
@ -156,7 +235,7 @@
|
||||
<div class="d-flex gap-2 align-items-center">
|
||||
{% include "includes/search_form.html" with search_query=search_query %}
|
||||
|
||||
<a href="{% url 'create_meeting' %}" class="btn btn-primary">
|
||||
<a href="{% url 'create_meeting' %}" class="btn-base btn-main-action">
|
||||
<svg class="heroicon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 4v16m8-8H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
@ -190,11 +269,7 @@
|
||||
<div class="meeting-detail">
|
||||
<div class="detail-label">{% trans "Status" %}:</div>
|
||||
<div class="detail-value">
|
||||
<span class="status-badge
|
||||
{% if meeting.status == 'waiting' %}status-waiting
|
||||
{% elif meeting.status == 'started' %}status-started
|
||||
{% elif meeting.status == 'ended' %}status-ended
|
||||
{% endif %}">
|
||||
<span class="status-badge {% if meeting.status == 'waiting' %}bg-warning{% elif meeting.status == 'started' %}bg-success{% elif meeting.status == 'ended' %}bg-danger{% endif %}">
|
||||
{% if meeting.status == 'waiting' %}
|
||||
{% trans "Waiting" %}
|
||||
{% elif meeting.status == 'started' %}
|
||||
@ -210,7 +285,7 @@
|
||||
<div class="meeting-detail">
|
||||
<div class="detail-label">{% trans "Join URL" %}:</div>
|
||||
<div class="detail-value">
|
||||
<a href="{{ meeting.join_url }}" target="_blank" class="btn btn-outline-primary btn-sm">
|
||||
<a href="{{ meeting.join_url }}" target="_blank" class="btn-base btn-kaats-outline-primary btn-sm">
|
||||
{% trans "Join Meeting" %}
|
||||
</a>
|
||||
</div>
|
||||
@ -218,18 +293,18 @@
|
||||
{% endif %}
|
||||
|
||||
<div class="actions">
|
||||
<a href="{% url 'meeting_details' meeting.pk %}" class="btn btn-outline-primary btn-sm" title="{% trans 'View' %}">
|
||||
<a href="{% url 'meeting_details' meeting.pk %}" class="btn-base btn-kaats-outline-primary btn-sm" title="{% trans 'View' %}">
|
||||
<svg class="heroicon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0 8.268-2.943-9.542-7z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="{% url 'update_meeting' meeting.pk %}" class="btn btn-outline-secondary btn-sm" title="{% trans 'Update' %}">
|
||||
<a href="{% url 'update_meeting' meeting.pk %}" class="btn-base btn-kaats-outline-secondary btn-sm" title="{% trans 'Update' %}">
|
||||
<svg class="heroicon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm" title="{% trans 'Delete' %}"
|
||||
<button type="button" class="btn-base btn-kaats-outline-danger btn-sm" title="{% trans 'Delete' %}"
|
||||
data-bs-toggle="deleteModal"
|
||||
data-delete-url="{% url 'delete_meeting' meeting.pk %}"
|
||||
data-item-name="{{ meeting.topic }}">
|
||||
@ -280,7 +355,7 @@
|
||||
</svg>
|
||||
<p class="text-muted">{% trans "No meetings found." %}</p>
|
||||
{% if user.is_staff %}
|
||||
<a href="{% url 'create_meeting' %}" class="btn btn-primary mt-3">
|
||||
<a href="{% url 'create_meeting' %}" class="btn-base btn-main-action mt-3">
|
||||
<svg class="heroicon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 4v16m8-8H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
|
||||
@ -2,6 +2,172 @@
|
||||
{% load static i18n %}
|
||||
{% block title %}{% trans "Update Zoom Meeting" %} - {{ block.super }}{% endblock %}
|
||||
|
||||
{% block customCSS %}
|
||||
<style>
|
||||
/* UI Variables for the KAAT-S Theme */
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-border: #eaeff3;
|
||||
--kaauh-primary-text: #343a40;
|
||||
--kaauh-gray: #6c757d;
|
||||
|
||||
/* Status Colors for alerts/messages */
|
||||
--kaauh-success: var(--kaauh-teal);
|
||||
--kaauh-danger: #dc3545;
|
||||
--kaauh-info: #17a2b8;
|
||||
}
|
||||
|
||||
/* CONTAINER AND CARD STYLING */
|
||||
.container {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.card {
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
max-width: 600px;
|
||||
margin: 0 auto; /* Center the card */
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* HEADER STYLING (The section outside the card) */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 2rem;
|
||||
color: var(--kaauh-teal-dark);
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.header p {
|
||||
color: var(--kaauh-gray);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* CARD TITLE STYLING */
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
color: var(--kaauh-teal-dark);
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--kaauh-border);
|
||||
padding-bottom: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* FORM STYLING */
|
||||
.form-row {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.form-label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: var(--kaauh-gray);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.form-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: var(--kaauh-primary-text);
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 0.5rem;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
.form-input:focus {
|
||||
border-color: var(--kaauh-teal);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.1rem rgba(0, 99, 110, 0.25);
|
||||
}
|
||||
input[type="datetime-local"] {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* MESSAGES/ALERTS STYLING */
|
||||
.messages {
|
||||
max-width: 600px;
|
||||
margin: 0 auto 1.5rem auto;
|
||||
}
|
||||
.alert {
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.alert-success {
|
||||
color: white;
|
||||
background-color: var(--kaauh-success);
|
||||
border-color: var(--kaauh-success);
|
||||
}
|
||||
.alert-danger {
|
||||
color: white;
|
||||
background-color: var(--kaauh-danger);
|
||||
border-color: var(--kaauh-danger);
|
||||
}
|
||||
.alert-info {
|
||||
color: white;
|
||||
background-color: var(--kaauh-info);
|
||||
border-color: var(--kaauh-info);
|
||||
}
|
||||
|
||||
/* BUTTON STYLING */
|
||||
.actions {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
.btn-base {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Primary Action Button (Update) */
|
||||
.btn-main-action {
|
||||
background-color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
}
|
||||
.btn-main-action:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-teal-dark);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Secondary Button (Cancel) */
|
||||
.btn-kaats-outline-secondary {
|
||||
color: var(--kaauh-secondary);
|
||||
border-color: var(--kaauh-secondary);
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-kaats-outline-secondary:hover {
|
||||
background-color: var(--kaauh-secondary);
|
||||
color: white;
|
||||
border-color: var(--kaauh-secondary);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
@ -9,11 +175,12 @@
|
||||
<p>{% trans "Modify the details of your scheduled meeting" %}</p>
|
||||
</div>
|
||||
|
||||
<!-- Messages -->
|
||||
{# Apply KAAT-S theme styles to Django messages #}
|
||||
{% if messages %}
|
||||
<div class="messages">
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags }}">
|
||||
{# Use message tags to map to alert classes: success, danger, info #}
|
||||
<div class="alert alert-{{ message.tags|default:'info' }}">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
@ -33,8 +200,9 @@
|
||||
|
||||
<div class="form-row">
|
||||
<label for="start_time" class="form-label">{% trans "Start Time (ISO 8601):" %}</label>
|
||||
{# Note: Django template filter for datetime-local needs to be precise Y-m-d\TH:i #}
|
||||
<input type="datetime-local" id="start_time" name="start_time" class="form-input"
|
||||
value="{{ meeting.start_time|slice:'0:16'|date:'Y-m-d\TH:i' }}" required>
|
||||
value="{{ meeting.start_time|slice:'0:16' }}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
@ -43,10 +211,18 @@
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn btn-primary">{% trans "Update Meeting" %}</button>
|
||||
<a href="{% url 'meeting_details' meeting.pk %}" class="btn btn-secondary">{% trans "Cancel" %}</a>
|
||||
<button type="submit" class="btn-base btn-main-action">
|
||||
<svg class="heroicon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 1.25rem;">
|
||||
<path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
{% trans "Update Meeting" %}
|
||||
</button>
|
||||
{# Using custom secondary button for 'Cancel' link #}
|
||||
<a href="{% url 'meeting_details' meeting.pk %}" class="btn-base btn-kaats-outline-secondary">
|
||||
{% trans "Cancel" %}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
Loading…
x
Reference in New Issue
Block a user