feat: Move all-day position to settings, time indicator to left, add note icons
- Move all-day event position toggle from toolbar into Settings > General tab - Render current time label in the time column (left of the red dot line) - Add note icon on tasks with markdownContent, with hover tooltip - Add English and German translations for all-day position setting Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
b46c7b7ccb
commit
999b354cc8
26
.env.local
26
.env.local
@ -1,26 +0,0 @@
|
||||
# Database Configuration
|
||||
DATABASE_URL=postgresql://root:WKE7xeZohxdZit7eObjG@192.168.178.91:2665/My-Weekly-ToDo-List?schema=public
|
||||
|
||||
# Email Service Configuration
|
||||
SMTP_HOST=w00ff033.kasserver.com
|
||||
SMTP_PORT=587
|
||||
SMTP_USERNAME=mail@carrylight.de
|
||||
SMTP_PASSWORD=QijU8e2A8p3FE8WS8esR
|
||||
SMTP_SECURE=true
|
||||
|
||||
# NEXTAUTH_URL=https://todo.martin-bierschenk.de
|
||||
NEXTAUTH_URL=http://localhost:3000
|
||||
|
||||
# Google OAuth (Replace with your credentials)
|
||||
GOOGLE_CLIENT_ID=196368743757-1fn17q2ecg5n8rej4tu96khltno173he.apps.googleusercontent.com
|
||||
GOOGLE_CLIENT_SECRET=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
|
||||
# GOOGLE_REDIRECT_URI=https://todo.martin-bierschenk.de/api/calendar/google/oauth
|
||||
GOOGLE_REDIRECT_URI=http://localhost:3000/api/calendar/google/oauth
|
||||
|
||||
|
||||
# Apple Sign In (Replace with your credentials when ready)
|
||||
# APPLE_ID=your-apple-id
|
||||
# APPLE_SECRET=your-apple-secret
|
||||
|
||||
# Base URL for the application
|
||||
NEXT_PUBLIC_BASE_URL=https://todo.martin-bierschenk.de
|
||||
@ -635,7 +635,7 @@ h3 {
|
||||
min-height: 400px;
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
.weekly-day-column:first-child {
|
||||
@ -666,7 +666,7 @@ h3 {
|
||||
.weekly-day-header {
|
||||
padding: 1rem 1rem 0.75rem;
|
||||
text-align: left;
|
||||
min-height: 60px;
|
||||
min-height: 50px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -799,6 +799,45 @@ h3 {
|
||||
}
|
||||
|
||||
/* Rolling Indicator */
|
||||
/* Note icon on tasks with notes */
|
||||
.task-note-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
color: var(--weekly-teal, #009a9a);
|
||||
opacity: 0.6;
|
||||
margin-right: 2px;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.task-note-icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.task-note-icon:hover::after {
|
||||
content: attr(data-note);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
margin-top: 4px;
|
||||
background: var(--weekly-bg, #fff);
|
||||
color: var(--weekly-text, #333);
|
||||
border: 1px solid var(--weekly-border, #ddd);
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
white-space: pre-wrap;
|
||||
max-width: 250px;
|
||||
max-height: 150px;
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
pointer-events: none;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.rolling-icon-indicator {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
@ -896,6 +935,111 @@ h3 {
|
||||
color: var(--weekly-teal);
|
||||
}
|
||||
|
||||
/* Sub-tasks */
|
||||
.subtask-list {
|
||||
list-style: none;
|
||||
padding: 0.125rem 0 0.125rem 1.25rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtask-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.125rem 0;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--weekly-text);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.subtask-item.completed .subtask-title {
|
||||
text-decoration: line-through;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.subtask-checkbox {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: var(--weekly-text-muted, #999);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.subtask-checkbox:hover {
|
||||
color: var(--weekly-teal);
|
||||
}
|
||||
|
||||
.subtask-item.completed .subtask-checkbox {
|
||||
color: var(--weekly-teal);
|
||||
}
|
||||
|
||||
.subtask-title {
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.subtask-title:hover {
|
||||
color: var(--weekly-teal);
|
||||
}
|
||||
|
||||
.subtask-edit-input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
font-size: 0.8125rem;
|
||||
font-family: inherit;
|
||||
color: var(--weekly-text);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.subtask-delete-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.125rem;
|
||||
cursor: pointer;
|
||||
color: var(--weekly-text-muted, #999);
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.subtask-item:hover .subtask-delete-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.subtask-delete-btn:hover {
|
||||
color: #e53e3e;
|
||||
}
|
||||
|
||||
.subtask-add-row {
|
||||
padding: 0.125rem 0 0.25rem 1.25rem;
|
||||
}
|
||||
|
||||
.subtask-add-input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
font-size: 0.8125rem;
|
||||
font-family: inherit;
|
||||
color: var(--weekly-text);
|
||||
padding: 0.125rem 0;
|
||||
}
|
||||
|
||||
.subtask-add-input::placeholder {
|
||||
color: var(--weekly-text-muted, #999);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Task Input */
|
||||
.weekly-task-input {
|
||||
padding: 0.5rem 1rem 0.5rem 2.5rem;
|
||||
@ -918,8 +1062,7 @@ h3 {
|
||||
|
||||
/* Someday Section */
|
||||
.weekly-someday {
|
||||
background: #faf8f5;
|
||||
/* Light beige paper color */
|
||||
/* background color removed as per user request */
|
||||
transition: max-height 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
@ -1468,14 +1611,33 @@ h3 {
|
||||
--weekly-settings-toggle-active-text: #ffffff;
|
||||
}
|
||||
|
||||
.weekly-container.dark-mode input,
|
||||
.weekly-container.dark-mode textarea {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.weekly-container.dark-mode .weekly-task-input input {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.weekly-container.dark-mode .weekly-task-input input::placeholder {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.weekly-container.dark-mode .weekly-task-item:hover {
|
||||
background-color: #2a2a2a;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.weekly-container.dark-mode .weekly-calendar-event {
|
||||
background: #2a3a3a;
|
||||
}
|
||||
|
||||
/* Bb: Remove someday list backgrounds in dark mode */
|
||||
.weekly-container.dark-mode .weekly-someday-list {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.weekly-days-grid {
|
||||
@ -1529,20 +1691,38 @@ h3 {
|
||||
|
||||
.time-column-header {
|
||||
padding: 1rem 0.5rem 0.75rem;
|
||||
min-height: 60px;
|
||||
min-height: 50px !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.time-column-slots {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Current time label in time column */
|
||||
.now-time-label {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
transform: translateY(-50%);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #d50000;
|
||||
background: var(--weekly-bg, #fff);
|
||||
padding: 0 2px;
|
||||
z-index: 12;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.time-slot-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center; /* Changed from flex-start to center */
|
||||
justify-content: flex-end;
|
||||
padding: 8px 0.5rem 0;
|
||||
padding: 0 0.5rem; /* Removed top padding */
|
||||
font-size: 0.65rem;
|
||||
color: var(--weekly-text-light);
|
||||
box-sizing: border-box;
|
||||
@ -1554,13 +1734,27 @@ h3 {
|
||||
color: var(--weekly-text);
|
||||
}
|
||||
|
||||
.time-slot-label.sub-hour {
|
||||
color: var(--weekly-text-light);
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
|
||||
.time-slot-label span {
|
||||
transform: translateY(50%);
|
||||
transform: translateY(-50%); /* Changed from 50% to -50% for centering on the line */
|
||||
background: var(--weekly-bg);
|
||||
padding: 0 2px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.time-slot-label .sub-hour-label {
|
||||
transform: translateY(-50%);
|
||||
background: var(--weekly-bg);
|
||||
padding: 0 2px;
|
||||
z-index: 1;
|
||||
opacity: 0.5;
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
|
||||
/* Time Slots Container */
|
||||
.time-slots-container {
|
||||
flex: 1;
|
||||
@ -1837,6 +2031,10 @@ h3 {
|
||||
}
|
||||
|
||||
.now-line::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.now-line::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
@ -1845,6 +2043,7 @@ h3 {
|
||||
height: 10px;
|
||||
background: #d50000;
|
||||
border-radius: 50%;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
/* Drop Preview for Drag-n-Drop */
|
||||
@ -1928,7 +2127,7 @@ h3 {
|
||||
}
|
||||
|
||||
.weekly-container.dark-mode .time-slot-task {
|
||||
background: rgba(0, 154, 154, 0.2);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.weekly-container.dark-mode .calendar-connect-btn {
|
||||
@ -2508,6 +2707,16 @@ h3 {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.settings-tab-btn:hover {
|
||||
opacity: 0.8 !important;
|
||||
background: rgba(0, 0, 0, 0.04) !important;
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
|
||||
.dark-mode .settings-tab-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.dark-mode .weekly-settings-sidebar .weekly-settings-header {
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user