Skip to content

Modernize configuration forms #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ronryv merged 5 commits into from
Feb 5, 2026
+1,155 −724
Merged

Modernize configuration forms #119

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
33df9c1
re-design forms
ronryv Feb 4, 2026
622a9b8
Consolidate inline SVGs to use svg_icons.html sprite pattern
ronryv Feb 5, 2026
86867ff
Fix template issues: token interval null checks, checkbox renumbering…
devin-ai-integration[bot] Feb 4, 2026
bac7915
Fix timezone set
ronryv Feb 5, 2026
acda5df
fix functional tests
ronryv Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 204 additions & 0 deletions cms/server/admin/static/aws_tp_styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2605,6 +2605,17 @@
color: var(--tp-text-lighter);
}

/* Override table font-size for buttons to maintain normal size */
.tp-groups-table .tp-btn-primary,
.tp-groups-table .tp-btn-secondary,
.tp-groups-table .tp-btn-remove {
font-size: 0.9rem !important;
padding: 6px 16px !important;
}

.tp-groups-table .tp-btn-remove {
padding: 4px 10px !important;
}
.tp-btn-add-group {
display: inline-flex;
align-items: center;
Expand All @@ -2626,3 +2637,196 @@
.tp-btn-remove:hover {
background: var(--tp-danger-border);
}

/* ==========================================================================
Modern Grid & Card Layout (Redesign)
========================================================================== */

/* Main Grid Container */
.tp-grid-layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
align-items: start;
}

/* Card Component */
.tp-card {
background: var(--tp-bg-white);
border: 1px solid var(--tp-border);
border-radius: 12px;
box-shadow: var(--tp-shadow-sm);
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}

/* Card Header */
.tp-card-header-modern {
padding: 16px 20px;
background: var(--tp-bg-white);
border-bottom: 1px solid var(--tp-border-light);
display: flex;
align-items: center;
gap: 12px;
}

.tp-card-header-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: var(--tp-info-light);
color: var(--tp-primary);
border-radius: 8px;
}

.tp-card-title-modern {
font-size: 1.05rem;
font-weight: 600;
color: var(--tp-text-primary);
margin: 0;
}

/* Card Body */
.tp-card-body {
padding: 24px;
flex: 1;
}

/* Grid Spans */
.col-span-12 {
grid-column: span 12;
}

.col-span-6 {
grid-column: span 6;
}


@media (max-width: 1100px) {

.col-span-6 {
grid-column: span 12;
}
}

/* Modern Toggle Switch */
.tp-toggle-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--tp-bg-gray);
}

.tp-toggle-wrapper:last-child {
border-bottom: none;
}

.tp-toggle-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
color: var(--tp-text-secondary);
font-weight: 500;
cursor: pointer;
}

.tp-toggle-input {
appearance: none;
-webkit-appearance: none;
width: 44px;
height: 24px;
background: #e2e8f0;
border-radius: 24px;
position: relative;
cursor: pointer;
outline: none;
transition: background 0.3s ease;
flex-shrink: 0;
}

.tp-toggle-input::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tp-toggle-input:checked {
background: var(--tp-primary);
}

.tp-toggle-input:checked::after {
transform: translateX(20px);
}

.tp-toggle-input:focus-visible {
box-shadow: 0 0 0 2px var(--tp-bg-white), 0 0 0 4px var(--tp-primary-light);
}

/* Language Grid */
.tp-language-container {
background: #f8fafc;
border: 1px solid var(--tp-border);
border-radius: 8px;
padding: 16px;
max-height: 300px;
overflow-y: auto;
}

.tp-language-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}

.tp-checkbox-card {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 6px;
border-radius: 6px;
transition: background 0.2s;
}

.tp-checkbox-card:hover {
background: #e2e8f0;
}

.tp-checkbox-card input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--tp-primary);
margin: 0;
}

.tp-checkbox-card span {
font-size: 0.9rem;
color: var(--tp-text-secondary);
line-height: 1.2;
}

/* Floating Actions Panel - Only when .tp-form-actions-float class is applied */
.tp-form-actions.tp-form-actions-float {
position: sticky;
top: 20px;
z-index: 100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}

.tp-form-actions.tp-form-actions-float:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
143 changes: 4 additions & 139 deletions cms/server/admin/templates/add_training_day.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,31 +56,10 @@ <h3 class="tp-form-section-title">Basic Information</h3>
</div>
</div>

<div class="tp-form-section">
<h3 class="tp-form-section-title">Main Groups Configuration</h3>
<p class="tp-form-section-desc">Configure which student tags represent main groups for this training day. Students must have exactly one main group tag to participate. Leave empty if all students can participate.</p>

<div class="tp-groups-table-container">
<table class="tp-groups-table" id="main-groups-table">
<thead>
<tr>
<th>Tag Name</th>
<th>Start Time ({{ timezone_name }})</th>
<th>Duration</th>
<th style="text-align: center;">Alphabetical Order</th>
<th style="width: 80px;"></th>
</tr>
</thead>
<tbody id="groups-tbody">
</tbody>
</table>
</div>

<button type="button" id="add-group-btn" class="tp-btn-secondary tp-btn-add-group">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
Add Main Group
</button>
</div>
<!-- Include unified groups configuration in CREATE mode -->
{% with mode='create' %}
{% include "fragments/training_day_groups.html" %}
{% endwith %}

<div class="tp-form-actions">
<a href="{{ url("training_program", training_program.id, "training_days") }}" class="tp-btn-secondary">Cancel</a>
Expand All @@ -89,118 +68,4 @@ <h3 class="tp-form-section-title">Main Groups Configuration</h3>
</form>
</div>
</div>

<script>
var allStudentTags = {{ all_student_tags | default([]) | tojson }};
var groupRowIndex = 0;

function addGroupRow() {
var tbody = document.getElementById('groups-tbody');
var row = document.createElement('tr');
row.id = 'group-row-' + groupRowIndex;

var tagCell = document.createElement('td');
var tagInput = document.createElement('input');
tagInput.type = 'text';
tagInput.name = 'group_tag_name[]';
tagInput.placeholder = 'Select a student tag';
tagInput.style.width = '160px';
tagCell.appendChild(tagInput);
row.appendChild(tagCell);

var startCell = document.createElement('td');
var startInput = document.createElement('input');
startInput.type = 'datetime-local';
startInput.name = 'group_start_time[]';
startCell.appendChild(startInput);
row.appendChild(startCell);

var durationCell = document.createElement('td');
var durationDiv = document.createElement('div');
durationDiv.className = 'tp-group-duration';
var hoursInput = document.createElement('input');
hoursInput.type = 'number';
hoursInput.name = 'group_duration_hours[]';
hoursInput.min = '0';
hoursInput.placeholder = '0';
durationDiv.appendChild(hoursInput);
var hLabel = document.createElement('span');
hLabel.textContent = 'h';
durationDiv.appendChild(hLabel);
var minutesInput = document.createElement('input');
minutesInput.type = 'number';
minutesInput.name = 'group_duration_minutes[]';
minutesInput.min = '0';
minutesInput.max = '59';
minutesInput.placeholder = '0';
durationDiv.appendChild(minutesInput);
var mLabel = document.createElement('span');
mLabel.textContent = 'm';
durationDiv.appendChild(mLabel);
durationCell.appendChild(durationDiv);
row.appendChild(durationCell);

var alphaCell = document.createElement('td');
alphaCell.style.textAlign = 'center';

var groupIdInput = document.createElement('input');
groupIdInput.type = 'hidden';
groupIdInput.name = 'group_id[]';
groupIdInput.value = groupRowIndex;
alphaCell.appendChild(groupIdInput);

var alphaInput = document.createElement('input');
alphaInput.type = 'checkbox';
alphaInput.name = 'alphabetical_' + groupRowIndex;
alphaCell.appendChild(alphaInput);
row.appendChild(alphaCell);

var actionsCell = document.createElement('td');
var removeBtn = document.createElement('button');
removeBtn.type = 'button';
removeBtn.className = 'tp-btn-remove';
removeBtn.textContent = 'Remove';
actionsCell.appendChild(removeBtn);
row.appendChild(actionsCell);

tbody.appendChild(row);

var tagifyInstance = null;
if (typeof Tagify !== 'undefined') {
tagifyInstance = new Tagify(tagInput, {
mode: 'select',
whitelist: allStudentTags,
enforceWhitelist: true,
dropdown: {
maxItems: 20,
enabled: 0,
closeOnSelect: true
},
originalInputValueFormat: function(valuesArr) {
return valuesArr.length ? valuesArr[0].value : '';
}
});
tagifyInstance.DOM.scope.style.width = '160px';
}

removeBtn.onclick = function() {
if (tagifyInstance) {
tagifyInstance.destroy();
}
row.remove();
};

groupRowIndex++;
}

document.getElementById('add-group-btn').addEventListener('click', addGroupRow);

document.querySelector('form[name="add_training_day"]').addEventListener('submit', function() {
var groupIds = document.querySelectorAll('#groups-tbody input[name="group_id[]"]');
groupIds.forEach(function(input, index) {
input.value = index;
});
});
</script>

{% endblock core %}
Loading
Loading