Files
e-ticket/assets/app.scss
Serreau Jovann 8b3b1dab13 Add Event entity, create event page, and custom WYSIWYG editor component
- Create Event entity with fields: account, title, description (text), startAt, endAt, address, zipcode, city, eventMainPicture (VichUploader), isOnline, createdAt, updatedAt
- Create EventRepository
- Add migration for event table with all columns
- Add "Creer un evenement" button on account events tab
- Add create event page (/mon-compte/evenement/creer) with full form
- Build custom web component <e-ticket-editor> WYSIWYG editor:
  - Toolbar: bold, italic, underline, paragraph, bullet list, remove formatting
  - contentEditable div with HTML sync to hidden textarea
  - HTML sanitizer (strips disallowed tags, XSS safe)
  - Neo-brutalist CSS styling
  - CSP compliant (no inline styles)
- Register editor in app.js via customElements.define
- Add editor CSS in app.scss
- Add 16 Event entity tests (all fields + isOnline + picture upload + updatedAt)
- Add 16 editor JS tests (sanitizer + custom element lifecycle)
- Add 3 AccountController tests (create event page, submit, access control)
- Update placeholders to generic examples (no association-specific data)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 12:49:24 +01:00

63 lines
1.3 KiB
SCSS

@import "tailwindcss";
@import 'https://fonts.googleapis.com/css2?family=Intel+One+Mono:ital,wght@0,300..700;1,300..700&display=swap';
@source "../templates";
/* ===== E-Ticket Editor ===== */
e-ticket-editor {
display: block;
}
.ete-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0;
border: 3px solid #111827;
border-bottom: none;
background: #f9fafb;
padding: 0.25rem;
}
.ete-btn {
width: 2.25rem;
height: 2.25rem;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid transparent;
background: transparent;
cursor: pointer;
font-weight: 900;
font-size: 0.8rem;
transition: all 0.1s;
}
.ete-btn:hover {
background: #fabf04;
border-color: #111827;
}
.ete-separator {
width: 1px;
background: #d1d5db;
margin: 0.25rem 0.35rem;
}
.ete-content {
width: 100%;
min-height: 10rem;
padding: 0.75rem 1rem;
border: 3px solid #111827;
font-weight: 700;
outline: none;
background: white;
line-height: 1.6;
}
.ete-content:focus {
border-color: #4f46e5;
}
.ete-content:empty::before {
content: attr(data-placeholder);
color: #9ca3af;
pointer-events: none;
}
.ete-content ul { list-style: disc; padding-left: 1.5rem; margin: 0.5rem 0; }