maciejpi/nordabiz
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style: polish guest form — segmented control, grid layout, consistent inputs
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
Details
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
Details
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
Details
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-04-08 11:52:31 +02:00
parent d06507a7c3
commit d19fd3802b
1 changed files with 53 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
templates/calendar/event.html
View File

@ -4,8 +4,22 @@
{% block extra_css %} {% block extra_css %}
<style> <style>
.guest-type-btn { transition: var(--transition); } .guest-type-btn.active { background: var(--primary) !important; color: white !important; }
.guest-type-btn.active { background: var(--primary); color: white; border-color: var(--primary); } .guest-type-btn:not(.active):hover { background: var(--border) !important; }
.guest-form-group { display: flex; flex-direction: column; }
.guest-form-label { font-size: 0.8em; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.guest-form-input {
width: 100%; padding: 8px 12px;
border: 1px solid var(--border); border-radius: var(--radius);
font-size: 0.9em; transition: var(--transition);
background: var(--background);
}
.guest-form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
@media (max-width: 480px) {
#guest-form div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}
.event-header { .event-header {
margin-bottom: var(--spacing-xl); margin-bottom: var(--spacing-xl);
@ -614,47 +628,47 @@
</button> </button>
{% endif %} {% endif %}
<div id="guest-form" style="display: none; margin-top: 12px; padding: 16px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border);"> <div id="guest-form" style="display: none; margin-top: 12px; padding: 20px; background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow);">
<input type="hidden" id="guest-edit-id" value=""> <input type="hidden" id="guest-edit-id" value="">
<input type="hidden" id="guest-type" value="external"> <input type="hidden" id="guest-type" value="external">
<div style="display: flex; flex-direction: column; gap: 10px;">
{% if event.is_paid and current_user.company_id %} {% if event.is_paid and current_user.company_id %}
<div id="guest-type-selector" style="display: flex; gap: 8px; margin-bottom: 4px;"> <div id="guest-type-selector" style="display: flex; gap: 0; margin-bottom: 16px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);">
<button type="button" class="btn btn-outline guest-type-btn active" data-type="member" onclick="selectGuestType('member')" style="font-size: 0.85em; flex: 1;"> <button type="button" class="guest-type-btn active" data-type="member" onclick="selectGuestType('member')" style="flex: 1; padding: 10px 16px; border: none; cursor: pointer; font-size: 0.85em; font-weight: 600; transition: var(--transition); background: var(--primary); color: white;">
Osoba z firmy{% if event.price_member %} ({{ "%.0f"|format(event.price_member) }} zł){% endif %} Osoba z firmy{% if event.price_member %} ({{ "%.0f"|format(event.price_member) }} zł){% endif %}
</button> </button>
<button type="button" class="btn btn-outline guest-type-btn" data-type="external" onclick="selectGuestType('external')" style="font-size: 0.85em; flex: 1;"> <button type="button" class="guest-type-btn" data-type="external" onclick="selectGuestType('external')" style="flex: 1; padding: 10px 16px; border: none; border-left: 1px solid var(--border); cursor: pointer; font-size: 0.85em; font-weight: 600; transition: var(--transition); background: var(--background); color: var(--text-secondary);">
Gość spoza Izby{% if event.price_guest %} ({{ "%.0f"|format(event.price_guest) }} zł){% endif %} Gość spoza Izby{% if event.price_guest %} ({{ "%.0f"|format(event.price_guest) }} zł){% endif %}
</button> </button>
</div>
<div id="colleague-picker" style="margin-bottom: 4px;">
<label style="font-size: 0.85em; color: var(--text-secondary);">Wybierz osobę z firmy</label>
<select id="colleague-select" class="form-control" style="margin-top: 2px;" onchange="onColleagueSelect()">
<option value="">— wpisz dane ręcznie —</option>
</select>
</div>
{% endif %}
<div>
<label for="guest-first-name" style="font-size: 0.85em; color: var(--text-secondary);">Imię</label>
<input type="text" id="guest-first-name" maxlength="100" class="form-control" style="margin-top: 2px;">
</div>
<div>
<label for="guest-last-name" style="font-size: 0.85em; color: var(--text-secondary);">Nazwisko</label>
<input type="text" id="guest-last-name" maxlength="100" class="form-control" style="margin-top: 2px;">
</div>
<div>
<label for="guest-org" style="font-size: 0.85em; color: var(--text-secondary);">Firma / organizacja</label>
<input type="text" id="guest-org" maxlength="255" class="form-control" style="margin-top: 2px;">
</div>
<div style="display: flex; gap: 8px;">
<button id="guest-submit-btn" onclick="submitGuest()" class="btn btn-primary" style="font-size: 0.9em;">Dodaj</button>
<button onclick="cancelGuestForm()" class="btn btn-outline" style="font-size: 0.9em;">Anuluj</button>
</div>
<p id="guest-form-error" style="display: none; color: var(--error); font-size: 0.85em; margin: 0;"></p>
</div> </div>
<div id="colleague-picker" class="guest-form-group" style="margin-bottom: 12px;">
<label for="colleague-select" class="guest-form-label">Wybierz osobę z firmy</label>
<select id="colleague-select" class="form-control guest-form-input" onchange="onColleagueSelect()">
<option value="">— wpisz dane ręcznie —</option>
</select>
</div>
{% endif %}
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
<div class="guest-form-group">
<label for="guest-first-name" class="guest-form-label">Imię</label>
<input type="text" id="guest-first-name" maxlength="100" class="form-control guest-form-input" placeholder="np. Jan">
</div>
<div class="guest-form-group">
<label for="guest-last-name" class="guest-form-label">Nazwisko</label>
<input type="text" id="guest-last-name" maxlength="100" class="form-control guest-form-input" placeholder="np. Kowalski">
</div>
</div>
<div class="guest-form-group" style="margin-top: 12px;">
<label for="guest-org" class="guest-form-label">Firma / organizacja</label>
<input type="text" id="guest-org" maxlength="255" class="form-control guest-form-input" placeholder="np. Nazwa firmy Sp. z o.o.">
</div>
<div style="display: flex; gap: 8px; margin-top: 16px;">
<button id="guest-submit-btn" onclick="submitGuest()" class="btn btn-primary" style="font-size: 0.9em;">Dodaj osobę</button>
<button onclick="cancelGuestForm()" class="btn btn-outline" style="font-size: 0.9em;">Anuluj</button>
</div>
<p id="guest-form-error" style="display: none; color: var(--error); font-size: 0.85em; margin: 8px 0 0;"></p>
</div> </div>
</div> </div>
{% endif %} {% endif %}