apps/mapix
4
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

fix: make timeline background transparent

Browse Source
This commit is contained in:
Arne Baeumler
2026-06-10 20:29:57 +02:00
parent 465aba4e47
commit c465cc9334
2 changed files with 24 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
AGENTS.md
View File

@@ -33,6 +33,7 @@ This repository is a browser-first photo mapping prototype.
- Keep the timeline zoomable and tied to the selected date range. - Keep the timeline zoomable and tied to the selected date range.
- Keep the code style consistent with the existing TypeScript/DOM approach. - Keep the code style consistent with the existing TypeScript/DOM approach.
- Keep your output during editing as short as possible. - Keep your output during editing as short as possible.
- Keep interim chat updates short and to the point when the work is straightforward.
## UI Rules ## UI Rules
@@ -44,6 +45,7 @@ This repository is a browser-first photo mapping prototype.
## Change Process ## Change Process
- Make small, focused changes. - Make small, focused changes.
- Commit every git change set before finishing a task.
- Use conventional commit messages. - Use conventional commit messages.
- Verify the result with `git diff --check` when possible. - Verify the result with `git diff --check` when possible.
- Update the README only when the user-facing setup or features change. - Update the README only when the user-facing setup or features change.

44
src/server/request-handler.ts
View File

@@ -678,14 +678,14 @@ function htmlPage(): string {
gap: 4px; gap: 4px;
z-index: 650; z-index: 650;
backdrop-filter: none; backdrop-filter: none;
background: #f0f0f0c0; background: transparent;
opacity: 1; opacity: 1;
border-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.08);
transition: height 180ms ease, transform 180ms ease, opacity 180ms ease, padding 180ms ease; transition: height 180ms ease, transform 180ms ease, opacity 180ms ease, padding 180ms ease;
} }
.timeline.timeline-collapsed { .timeline.timeline-collapsed {
height: 34px; height: 40px;
padding: 4px; padding: 4px;
overflow: hidden; overflow: hidden;
} }
@@ -798,7 +798,8 @@ function htmlPage(): string {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 4px; gap: 4px;
padding-top: 4px; justify-content: flex-end;
padding-top: 0;
} }
.timeline-actions .panel-collapse { .timeline-actions .panel-collapse {
@@ -941,23 +942,23 @@ function htmlPage(): string {
<div class="timeline-selection" id="timeline-selection"></div> <div class="timeline-selection" id="timeline-selection"></div>
<div class="timeline-brush" id="timeline-brush"></div> <div class="timeline-brush" id="timeline-brush"></div>
</div> </div>
<div class="timeline-actions"> </div>
<button class="secondary panel-collapse" id="timeline-collapse" type="button" aria-label="Collapse timeline"> <div class="timeline-actions">
<span class="button-icon" id="timeline-collapse-icon" aria-hidden="true"> <button class="secondary panel-collapse" id="timeline-clear" type="button" aria-label="Reset range" disabled>
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <span class="button-icon" aria-hidden="true">
<path d="M4 6.5 8 10.5l4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
</svg> <path d="M13 8a5 5 0 1 1-1.5-3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</span> <path d="M11.8 2.9v3.2H8.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</button> </svg>
<button class="secondary panel-collapse" id="timeline-clear" type="button" aria-label="Reset range" disabled> </span>
<span class="button-icon" aria-hidden="true"> </button>
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <button class="secondary panel-collapse" id="timeline-collapse" type="button" aria-label="Collapse timeline">
<path d="M13 8a5 5 0 1 1-1.5-3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> <span class="button-icon" id="timeline-collapse-icon" aria-hidden="true">
<path d="M11.8 2.9v3.2H8.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
</svg> <path d="M4 6.5 8 10.5l4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</span> </svg>
</button> </span>
</div> </button>
</div> </div>
</section> </section>
@@ -1150,8 +1151,7 @@ function htmlPage(): string {
setSidebarCollapsed(!document.querySelector("aside")?.classList.contains("sidebar-collapsed")); setSidebarCollapsed(!document.querySelector("aside")?.classList.contains("sidebar-collapsed"));
}); });
const storedTimelineCollapsed = localStorage.getItem("timelineCollapsed") === "true"; setTimelineCollapsed(false);
setTimelineCollapsed(storedTimelineCollapsed);
timelineCollapseButton.addEventListener("click", () => { timelineCollapseButton.addEventListener("click", () => {
setTimelineCollapsed(!document.querySelector(".timeline")?.classList.contains("timeline-collapsed")); setTimelineCollapsed(!document.querySelector(".timeline")?.classList.contains("timeline-collapsed"));
}); });