zenn/planner.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.0

Browse Source
This commit is contained in:
zenn
2026-04-21 14:31:26 +09:00
parent 0206cfebf8
commit 314dd7f649
6 changed files with 123 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/App.vue
View File

@@ -599,12 +599,16 @@ function clearTaskLabels(record) {
task.label = ''
})
}
function printSelectedPlanner() {
window.print()
}
</script>
<template>
<main class="min-h-screen px-4 py-6 text-ink sm:px-6 lg:px-10">
<div class="mx-auto flex max-w-[1680px] flex-col gap-6">
<header class="flex flex-col gap-4 rounded-[28px] border border-white/60 bg-white/70 p-5 backdrop-blur sm:p-6">
<div class="print-root mx-auto flex max-w-[1680px] flex-col gap-6">
<header class="print-hidden flex flex-col gap-4 rounded-[28px] border border-white/60 bg-white/70 p-5 backdrop-blur sm:p-6">
<div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
<div class="space-y-2">
<p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">10 Minute Planner</p>
@@ -668,6 +672,14 @@ function clearTaskLabels(record) {
NEXT DAY
</button>
</div>
<button
v-if="screenMode === 'planner'"
type="button"
class="rounded-full border border-stone-200 bg-white px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
@click="printSelectedPlanner"
>
PRINT DAY
</button>
</div>
</div>
</header>
@@ -676,27 +688,29 @@ function clearTaskLabels(record) {
v-if="screenMode === 'planner' && viewMode === 'focus'"
class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]"
>
<PlannerPage
:date-main="selectedDateDisplay.main"
:date-weekday="selectedDateDisplay.weekday"
:date-weekday-tone="selectedDateDisplay.weekdayTone"
:dday="planner.dday"
:comment="planner.comment"
:total-time="formatTotalTime(planner)"
:tasks="planner.tasks"
:memo="planner.memo"
:hours="hours"
:timetable="planner.timetable"
@update:comment="updateComment(planner, $event)"
@update:task-label="updateTaskLabel(planner, $event)"
@update:task-title="updateTaskTitle(planner, $event)"
@toggle:task="toggleTask(planner, $event)"
@update:memo-label="updateMemoLabel(planner, $event)"
@update:memo="updateMemo(planner, $event)"
@update:timetable="updateTimetable(planner, $event)"
/>
<div class="print-target">
<PlannerPage
:date-main="selectedDateDisplay.main"
:date-weekday="selectedDateDisplay.weekday"
:date-weekday-tone="selectedDateDisplay.weekdayTone"
:dday="planner.dday"
:comment="planner.comment"
:total-time="formatTotalTime(planner)"
:tasks="planner.tasks"
:memo="planner.memo"
:hours="hours"
:timetable="planner.timetable"
@update:comment="updateComment(planner, $event)"
@update:task-label="updateTaskLabel(planner, $event)"
@update:task-title="updateTaskTitle(planner, $event)"
@toggle:task="toggleTask(planner, $event)"
@update:memo-label="updateMemoLabel(planner, $event)"
@update:memo="updateMemo(planner, $event)"
@update:timetable="updateTimetable(planner, $event)"
/>
</div>
<aside class="flex flex-col gap-4">
<aside class="print-hidden flex flex-col gap-4">
<section class="border border-stone-200 bg-white/80 p-5">
<p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">PREV SNAPSHOT</p>
<div class="space-y-3">
@@ -794,49 +808,54 @@ function clearTaskLabels(record) {
class="overflow-x-auto rounded-[32px] border border-white/60 bg-white/40 p-4 sm:p-6"
>
<div class="flex min-w-[1260px] gap-6">
<PlannerPage
:date-main="selectedDateDisplay.main"
:date-weekday="selectedDateDisplay.weekday"
:date-weekday-tone="selectedDateDisplay.weekdayTone"
:dday="planner.dday"
:comment="planner.comment"
:total-time="formatTotalTime(planner)"
:tasks="planner.tasks"
:memo="planner.memo"
:hours="hours"
:timetable="planner.timetable"
@update:comment="updateComment(planner, $event)"
@update:task-label="updateTaskLabel(planner, $event)"
@update:task-title="updateTaskTitle(planner, $event)"
@toggle:task="toggleTask(planner, $event)"
@update:memo-label="updateMemoLabel(planner, $event)"
@update:memo="updateMemo(planner, $event)"
@update:timetable="updateTimetable(planner, $event)"
/>
<PlannerPage
:date-main="secondaryDateDisplay.main"
:date-weekday="secondaryDateDisplay.weekday"
:date-weekday-tone="secondaryDateDisplay.weekdayTone"
:dday="secondaryPlanner.dday"
:comment="secondaryPlanner.comment"
:total-time="formatTotalTime(secondaryPlanner)"
:tasks="secondaryPlanner.tasks"
:memo="secondaryPlanner.memo"
:hours="hours"
:timetable="secondaryPlanner.timetable"
@update:comment="updateComment(secondaryPlanner, $event)"
@update:task-label="updateTaskLabel(secondaryPlanner, $event)"
@update:task-title="updateTaskTitle(secondaryPlanner, $event)"
@toggle:task="toggleTask(secondaryPlanner, $event)"
@update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
@update:memo="updateMemo(secondaryPlanner, $event)"
@update:timetable="updateTimetable(secondaryPlanner, $event)"
/>
<div class="print-target">
<PlannerPage
:date-main="selectedDateDisplay.main"
:date-weekday="selectedDateDisplay.weekday"
:date-weekday-tone="selectedDateDisplay.weekdayTone"
:dday="planner.dday"
:comment="planner.comment"
:total-time="formatTotalTime(planner)"
:tasks="planner.tasks"
:memo="planner.memo"
:hours="hours"
:timetable="planner.timetable"
@update:comment="updateComment(planner, $event)"
@update:task-label="updateTaskLabel(planner, $event)"
@update:task-title="updateTaskTitle(planner, $event)"
@toggle:task="toggleTask(planner, $event)"
@update:memo-label="updateMemoLabel(planner, $event)"
@update:memo="updateMemo(planner, $event)"
@update:timetable="updateTimetable(planner, $event)"
/>
</div>
<div class="print-hidden">
<PlannerPage
:date-main="secondaryDateDisplay.main"
:date-weekday="secondaryDateDisplay.weekday"
:date-weekday-tone="secondaryDateDisplay.weekdayTone"
:dday="secondaryPlanner.dday"
:comment="secondaryPlanner.comment"
:total-time="formatTotalTime(secondaryPlanner)"
:tasks="secondaryPlanner.tasks"
:memo="secondaryPlanner.memo"
:hours="hours"
:timetable="secondaryPlanner.timetable"
@update:comment="updateComment(secondaryPlanner, $event)"
@update:task-label="updateTaskLabel(secondaryPlanner, $event)"
@update:task-title="updateTaskTitle(secondaryPlanner, $event)"
@toggle:task="toggleTask(secondaryPlanner, $event)"
@update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
@update:memo="updateMemo(secondaryPlanner, $event)"
@update:timetable="updateTimetable(secondaryPlanner, $event)"
/>
</div>
</div>
</section>
<StatsDashboard
v-else
class="print-hidden"
:overview-cards="overviewCards"
:weekly-records="weeklyRecords"
:recent-records="recentRecords"

37
src/style.css
View File

@@ -20,3 +20,40 @@
@apply outline-none;
}
}
@media print {
html,
body {
background: #ffffff !important;
}
body {
min-height: auto;
}
.print-hidden {
display: none !important;
}
.print-root {
max-width: none !important;
padding: 0 !important;
gap: 0 !important;
}
.print-target {
display: block !important;
width: 100% !important;
max-width: none !important;
box-shadow: none !important;
border: 0 !important;
background: #ffffff !important;
padding: 0 !important;
}
.print-target article {
max-width: none !important;
box-shadow: none !important;
padding: 0 !important;
}
}