Moves POC-files into PlanTempus
This commit is contained in:
Janus C. H. Knudsen
parent
51f3b92d69
commit
ea3ecdfb68
91 changed files with 59868 additions and 0 deletions
536
.workbench/POC/month-view-design.html
Normal file
536
.workbench/POC/month-view-design.html
Normal file
|
|
@ -0,0 +1,536 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="da">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Calendar Plantempus - Month View</title>
|
||||
<style>
|
||||
/* Use existing Calendar Plantempus variables and styling */
|
||||
:root {
|
||||
--hour-height: 60px;
|
||||
--minute-height: 1px;
|
||||
--snap-interval: 15;
|
||||
--day-column-min-width: 140px;
|
||||
--week-days: 7;
|
||||
--header-height: 80px;
|
||||
|
||||
--color-primary: #2196f3;
|
||||
--color-secondary: #ff9800;
|
||||
--color-success: #4caf50;
|
||||
--color-warning: #ff5722;
|
||||
--color-error: #f44336;
|
||||
--color-text: #2c3e50;
|
||||
--color-text-secondary: #6c757d;
|
||||
--color-border: #e0e0e0;
|
||||
--color-background: #ffffff;
|
||||
--color-surface: #f8f9fa;
|
||||
--color-hover: #f0f0f0;
|
||||
|
||||
--transition-fast: 0.15s ease;
|
||||
--border-radius: 4px;
|
||||
--box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background-color: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Month grid container - matches existing swp-calendar-container */
|
||||
.month-container {
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/* Month grid layout with week numbers */
|
||||
.month-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 40px repeat(7, 1fr); /* Small column for week numbers + 7 days */
|
||||
grid-template-rows: 40px repeat(6, 1fr);
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
/* Week number header */
|
||||
.week-header {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
background: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* Day headers - only day names, right aligned, smaller height */
|
||||
.month-day-header {
|
||||
background: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 12px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.875rem;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.month-day-header:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Week number cells */
|
||||
.week-number {
|
||||
grid-column: 1;
|
||||
background: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Month day cells - similar to existing day columns */
|
||||
.month-day-cell {
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: 8px;
|
||||
background: var(--color-background);
|
||||
transition: background-color var(--transition-fast);
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.month-day-cell:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.month-day-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.month-day-cell.other-month {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.month-day-cell.today {
|
||||
background: #f0f8ff;
|
||||
border-left: 3px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.month-day-cell.weekend {
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
.month-day-number {
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.month-day-cell.today .month-day-number {
|
||||
color: var(--color-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Month events styling - compact version of existing events */
|
||||
.month-events {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
max-height: 70px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.month-event {
|
||||
background: #e3f2fd;
|
||||
color: var(--color-primary);
|
||||
padding: 1px 4px;
|
||||
border-radius: 2px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
border-left: 2px solid var(--color-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.month-event:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Event categories - using existing color scheme */
|
||||
.month-event.category-meeting {
|
||||
background: #e8f5e8;
|
||||
color: var(--color-success);
|
||||
border-left-color: var(--color-success);
|
||||
}
|
||||
|
||||
.month-event.category-deadline {
|
||||
background: #ffebee;
|
||||
color: var(--color-error);
|
||||
border-left-color: var(--color-error);
|
||||
}
|
||||
|
||||
.month-event.category-work {
|
||||
background: #fff8e1;
|
||||
color: var(--color-secondary);
|
||||
border-left-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.month-event.category-personal {
|
||||
background: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
border-left-color: #9c27b0;
|
||||
}
|
||||
|
||||
.month-event-more {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-secondary);
|
||||
padding: 1px 4px;
|
||||
border-radius: 2px;
|
||||
font-size: 9px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border: 1px dashed var(--color-border);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.month-event-more:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.month-container {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.month-grid {
|
||||
grid-template-columns: 30px repeat(7, 1fr);
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.month-day-cell {
|
||||
min-height: 60px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.month-day-header {
|
||||
padding: 8px 4px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.month-event {
|
||||
font-size: 9px;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
|
||||
.month-events {
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
.week-number {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="month-container">
|
||||
<div class="month-grid">
|
||||
<!-- Week number header -->
|
||||
<div class="week-header">Uge</div>
|
||||
|
||||
<!-- Day headers - only day names, right aligned -->
|
||||
<div class="month-day-header">Man</div>
|
||||
<div class="month-day-header">Tir</div>
|
||||
<div class="month-day-header">Ons</div>
|
||||
<div class="month-day-header">Tor</div>
|
||||
<div class="month-day-header">Fre</div>
|
||||
<div class="month-day-header">Lør</div>
|
||||
<div class="month-day-header">Søn</div>
|
||||
|
||||
<!-- Week 1 -->
|
||||
<div class="week-number">1</div>
|
||||
<div class="month-day-cell other-month">
|
||||
<div class="month-day-number">30</div>
|
||||
</div>
|
||||
<div class="month-day-cell other-month">
|
||||
<div class="month-day-number">31</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-personal">Nytår</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">1</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-personal">Nytårsdag</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">2</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-work">Tilbage på arbejde</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">3</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-meeting">Team møde</div>
|
||||
<div class="month-event category-work">Review</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell weekend">
|
||||
<div class="month-day-number">4</div>
|
||||
</div>
|
||||
<div class="month-day-cell weekend">
|
||||
<div class="month-day-number">5</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-personal">Familie</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Week 2 -->
|
||||
<div class="week-number">2</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">6</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-meeting">Stand-up</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">7</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-deadline">Rapport</div>
|
||||
<div class="month-event category-meeting">1:1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">8</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-work">Code review</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">9</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-meeting">Planning</div>
|
||||
<div class="month-event category-work">Design</div>
|
||||
<div class="month-event-more">+1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">10</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-work">Sprint review</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell weekend">
|
||||
<div class="month-day-number">11</div>
|
||||
</div>
|
||||
<div class="month-day-cell weekend">
|
||||
<div class="month-day-number">12</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-personal">Brunch</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Week 3 -->
|
||||
<div class="week-number">3</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">13</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-meeting">All hands</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">14</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-work">Deploy</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">15</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-deadline">Presentation</div>
|
||||
<div class="month-event category-meeting">Retro</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">16</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-work">Bug triage</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">17</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-meeting">Planning</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell weekend">
|
||||
<div class="month-day-number">18</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-personal">Koncert</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell weekend">
|
||||
<div class="month-day-number">19</div>
|
||||
</div>
|
||||
|
||||
<!-- Week 4 - Today -->
|
||||
<div class="week-number">4</div>
|
||||
<div class="month-day-cell today">
|
||||
<div class="month-day-number">20</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-meeting">Status møde</div>
|
||||
<div class="month-event category-work">Refactoring</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">21</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-deadline">Beta release</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">22</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-meeting">Architecture</div>
|
||||
<div class="month-event category-work">Performance</div>
|
||||
<div class="month-event category-deadline">Docs</div>
|
||||
<div class="month-event-more">+2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">23</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-work">Cleanup</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">24</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-meeting">Weekly sync</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell weekend">
|
||||
<div class="month-day-number">25</div>
|
||||
</div>
|
||||
<div class="month-day-cell weekend">
|
||||
<div class="month-day-number">26</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-personal">Fødselsdag</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Week 5 -->
|
||||
<div class="week-number">5</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">27</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-meeting">Q1 planning</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">28</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-work">Tech talks</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">29</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-deadline">Monthly report</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">30</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-meeting">Team building</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell">
|
||||
<div class="month-day-number">31</div>
|
||||
<div class="month-events">
|
||||
<div class="month-event category-deadline">End of month</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-day-cell other-month">
|
||||
<div class="month-day-number">1</div>
|
||||
</div>
|
||||
<div class="month-day-cell other-month">
|
||||
<div class="month-day-number">2</div>
|
||||
</div>
|
||||
|
||||
<!-- Week 6 -->
|
||||
<div class="week-number">6</div>
|
||||
<div class="month-day-cell other-month">
|
||||
<div class="month-day-number">3</div>
|
||||
</div>
|
||||
<div class="month-day-cell other-month">
|
||||
<div class="month-day-number">4</div>
|
||||
</div>
|
||||
<div class="month-day-cell other-month">
|
||||
<div class="month-day-number">5</div>
|
||||
</div>
|
||||
<div class="month-day-cell other-month">
|
||||
<div class="month-day-number">6</div>
|
||||
</div>
|
||||
<div class="month-day-cell other-month">
|
||||
<div class="month-day-number">7</div>
|
||||
</div>
|
||||
<div class="month-day-cell other-month">
|
||||
<div class="month-day-number">8</div>
|
||||
</div>
|
||||
<div class="month-day-cell other-month">
|
||||
<div class="month-day-number">9</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Add click handlers for events and days
|
||||
document.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('month-event')) {
|
||||
console.log('Event clicked:', e.target.textContent);
|
||||
}
|
||||
|
||||
if (e.target.classList.contains('month-event-more')) {
|
||||
console.log('Show more events');
|
||||
}
|
||||
|
||||
if (e.target.classList.contains('month-day-cell') || e.target.closest('.month-day-cell')) {
|
||||
const cell = e.target.closest('.month-day-cell');
|
||||
const dayNumber = cell.querySelector('.month-day-number').textContent;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue