Keith Solomon
51147ef36f
- 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.
45 lines
3.4 KiB
HTML
45 lines
3.4 KiB
HTML
<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>
|