Add event contact email and multi-day occurrences design specifications
- 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
@@ -0,0 +1,30 @@
|
||||
<h2>What should happen on a phone?</h2>
|
||||
<p class="subtitle">A seven-column calendar cannot keep readable titles at phone width without changing presentation.</p>
|
||||
|
||||
<div class="cards">
|
||||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="padding:16px;background:#f7f8fa;display:flex;justify-content:center">
|
||||
<div style="width:250px;border:7px solid #24292f;border-radius:22px;padding:15px 10px;background:white;overflow:hidden">
|
||||
<strong style="display:block;text-align:center;margin-bottom:10px">July 2026</strong>
|
||||
<div style="width:530px">
|
||||
<div style="display:grid;grid-template-columns:repeat(7,72px);gap:3px;font-size:10px;text-align:center"><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div><div>Sun</div></div>
|
||||
<div style="display:grid;grid-template-columns:repeat(7,72px);gap:3px;margin-top:4px;height:75px"><div style="border:1px solid #d0d7de"></div><div style="border:1px solid #d0d7de"></div><div style="grid-column:3/7;background:#0969da;color:#fff;padding:6px;border-radius:5px;font-size:11px">Community Gathering →</div><div style="border:1px solid #d0d7de"></div></div>
|
||||
</div>
|
||||
<div style="font-size:10px;text-align:center;color:#57606a;margin-top:8px">← swipe horizontally →</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body"><h3>A. Scrollable month grid</h3><p>Keeps the desktop visual intact, but users must pan sideways to see the full week.</p></div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="padding:16px;background:#f7f8fa;display:flex;justify-content:center">
|
||||
<div style="width:250px;border:7px solid #24292f;border-radius:22px;padding:15px 12px;background:white">
|
||||
<strong style="display:block;text-align:center;margin-bottom:12px">July 2026</strong>
|
||||
<div style="border-left:4px solid #0969da;padding:8px 10px;margin-bottom:9px;background:#eef5ff"><strong style="font-size:12px">Community Gathering</strong><div style="font-size:10px;margin-top:3px">Jul 8, 6 PM – Jul 17, 2 PM</div></div>
|
||||
<div style="border-left:4px solid #8250df;padding:8px 10px;margin-bottom:9px;background:#f6f0ff"><strong style="font-size:12px">Weekly Workshop</strong><div style="font-size:10px;margin-top:3px">Jul 11, 10 AM</div></div>
|
||||
<div style="border-left:4px solid #1a7f37;padding:8px 10px;background:#edfff2"><strong style="font-size:12px">Community Lunch</strong><div style="font-size:10px;margin-top:3px">Jul 15, all day</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body"><h3>B. Mobile agenda list</h3><p>Switches to a readable chronological list while desktop retains the month grid and spanning bars.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,44 @@
|
||||
<h2>How should a long event continue into a new week?</h2>
|
||||
<p class="subtitle">Both options use one continuous-looking bar per calendar week. The choice is how much labeling repeats.</p>
|
||||
|
||||
<div class="cards">
|
||||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="padding:18px;background:#f7f8fa">
|
||||
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-size:11px;text-align:center;color:#57606a">
|
||||
<div>Mon 8</div><div>Tue 9</div><div>Wed 10</div><div>Thu 11</div><div>Fri 12</div><div>Sat 13</div><div>Sun 14</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:3px;height:52px;margin-top:5px">
|
||||
<div style="border:1px solid #d0d7de"></div><div style="border:1px solid #d0d7de"></div>
|
||||
<div style="grid-column:3/8;background:#0969da;color:white;padding:6px 9px;border-radius:5px 0 0 5px;font-size:12px;white-space:nowrap;overflow:hidden">Community Gathering →</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-size:11px;text-align:center;color:#57606a;margin-top:8px">
|
||||
<div>Mon 15</div><div>Tue 16</div><div>Wed 17</div><div>Thu 18</div><div>Fri 19</div><div>Sat 20</div><div>Sun 21</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:3px;height:52px;margin-top:5px">
|
||||
<div style="grid-column:1/4;background:#0969da;color:white;padding:6px 9px;border-radius:0 5px 5px 0;font-size:12px;white-space:nowrap;overflow:hidden">← Community Gathering</div>
|
||||
<div style="grid-column:4/8;border:1px solid #d0d7de"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body"><h3>A. Repeat the title</h3><p>Every weekly segment is identifiable. Best when events span many days or the calendar is viewed on a small screen.</p></div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="padding:18px;background:#f7f8fa">
|
||||
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-size:11px;text-align:center;color:#57606a">
|
||||
<div>Mon 8</div><div>Tue 9</div><div>Wed 10</div><div>Thu 11</div><div>Fri 12</div><div>Sat 13</div><div>Sun 14</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:3px;height:52px;margin-top:5px">
|
||||
<div style="border:1px solid #d0d7de"></div><div style="border:1px solid #d0d7de"></div>
|
||||
<div style="grid-column:3/8;background:#0969da;color:white;padding:6px 9px;border-radius:5px 0 0 5px;font-size:12px;white-space:nowrap;overflow:hidden">Community Gathering →</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-size:11px;text-align:center;color:#57606a;margin-top:8px">
|
||||
<div>Mon 15</div><div>Tue 16</div><div>Wed 17</div><div>Thu 18</div><div>Fri 19</div><div>Sat 20</div><div>Sun 21</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:3px;height:52px;margin-top:5px">
|
||||
<div style="grid-column:1/4;background:#0969da;color:white;padding:6px 9px;border-radius:0 5px 5px 0;font-size:12px">←</div>
|
||||
<div style="grid-column:4/8;border:1px solid #d0d7de"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body"><h3>B. Label only the first segment</h3><p>Visually quieter, but continuation bars may be ambiguous without hovering or opening the event.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
{"reason":"idle timeout","timestamp":1783012740052}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
{"type":"server-started","port":53431,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:53431","screen_dir":"/Users/keith/Local Sites/mnbc/app/public/wp-content/plugins/AA-Events/.superpowers/brainstorm/9966-1785415134/content","state_dir":"/Users/keith/Local Sites/mnbc/app/public/wp-content/plugins/AA-Events/.superpowers/brainstorm/9966-1785415134/state"}
|
||||
Reference in New Issue
Block a user