keith/AA-Events
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add event contact email and multi-day occurrences design specifications

Browse Source 
- Introduced a new specification for adding an optional contact email field to events, including front-end output and compatibility testing.
- Added a comprehensive design document for multi-day event occurrences, detailing the new occurrence data model, validation, normalization, and calendar architecture.
- Created specifications for ACF field-key switching compatibility and local ACF override compatibility to ensure seamless integration with existing themes.
- Implemented a desktop calendar view toggle design, allowing users to switch between calendar and list views, with persistent preferences and responsive behavior.
This commit is contained in:
Keith Solomon
2026-07-30 09:56:29 -05:00
parent 25b7a95ad5
commit 51147ef36f
49 changed files with 5333 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.superpowers/brainstorm/9966-1785415134/content/view-toggle-placement.html
+114
View File
@@ -0,0 +1,114 @@
<style>
.calendar-preview {
background: #f4f4f4;
border: 1px solid #bbb;
color: #111;
font-family: Arial, sans-serif;
padding: 14px;
}
.utility-row,
.month-row {
align-items: center;
display: flex;
gap: 12px;
justify-content: space-between;
}
.month-row { margin: 16px 0 12px; }
.month-row strong { font-size: 20px; }
.today,
.segment span {
background: #ddd;
border: 1px solid #999;
border-radius: 4px;
display: inline-block;
font-size: 12px;
font-weight: 700;
padding: 7px 10px;
}
.segment {
display: inline-flex;
}
.segment span {
border-radius: 0;
margin-left: -1px;
}
.segment span:first-child {
border-radius: 4px 0 0 4px;
margin-left: 0;
}
.segment span:last-child { border-radius: 0 4px 4px 0; }
.segment .active {
background: #245b87;
color: #fff;
}
.grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.grid span {
background: #fafafa;
border: 1px solid #bbb;
height: 30px;
margin: -1px 0 0 -1px;
}
.below-row {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
</style>
<h2>Where should the desktop view switcher live?</h2>
<p class="subtitle">Each option uses the same compact “Calendar / List” segmented control. Click the placement that feels most natural.</p>
<div class="cards">
<div class="card" data-choice="utility-row" onclick="toggleSelect(this)">
<div class="card-image">
<div class="calendar-preview">
<div class="utility-row">
<span class="today">Today</span>
<span class="segment"><span class="active">Calendar</span><span>List</span></span>
</div>
<div class="month-row"><span>‹ Previous</span><strong>August 2026</strong><span>Next ›</span></div>
<div class="grid"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
</div>
</div>
<div class="card-body">
<h3>A. Utility row</h3>
<p>Today on the left, view switcher on the right. Clear separation from month navigation.</p>
</div>
</div>
<div class="card" data-choice="month-row" onclick="toggleSelect(this)">
<div class="card-image">
<div class="calendar-preview">
<div class="utility-row"><span class="today">Today</span></div>
<div class="month-row">
<span>‹ Previous</span>
<strong>August 2026</strong>
<span style="display:flex;align-items:center;gap:10px"><span>Next ›</span><span class="segment"><span class="active">Calendar</span><span>List</span></span></span>
</div>
<div class="grid"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
</div>
</div>
<div class="card-body">
<h3>B. Month navigation row</h3>
<p>Keeps all calendar controls together, but makes the navigation row busier.</p>
</div>
</div>
<div class="card" data-choice="above-content" onclick="toggleSelect(this)">
<div class="card-image">
<div class="calendar-preview">
<div class="utility-row"><span class="today">Today</span></div>
<div class="month-row"><span>‹ Previous</span><strong>August 2026</strong><span>Next ›</span></div>
<div class="below-row"><span class="segment"><span class="active">Calendar</span><span>List</span></span></div>
<div class="grid"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
</div>
</div>
<div class="card-body">
<h3>C. Above the content</h3>
<p>Directly labels the view below, though it adds another row of vertical space.</p>
</div>
</div>
</div>