Harmonize AgentFeed pane headers
This commit is contained in:
parent
ba9f5eb168
commit
74654f71dd
2 changed files with 145 additions and 42 deletions
|
|
@ -1,4 +1,7 @@
|
|||
:root {
|
||||
--pane-bar-height: 2.75rem;
|
||||
--pane-bar-bg: #e8dcc8;
|
||||
--grid-line: rgba(104, 84, 59, 0.16);
|
||||
color-scheme: light;
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background: #f4f1ea;
|
||||
|
|
@ -131,7 +134,7 @@ h1 {
|
|||
.artifact-sidebar,
|
||||
.preview-pane {
|
||||
min-width: 0;
|
||||
padding: 0.55rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.day-sidebar,
|
||||
|
|
@ -143,7 +146,9 @@ h1 {
|
|||
}
|
||||
|
||||
.day-sidebar {
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.artifact-sidebar {
|
||||
|
|
@ -153,6 +158,7 @@ h1 {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.day-list,
|
||||
.artifact-list {
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -161,29 +167,29 @@ h1 {
|
|||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.day-sidebar:hover,
|
||||
.day-sidebar:hover .day-list,
|
||||
.artifact-sidebar:hover .artifact-list {
|
||||
scrollbar-color: rgba(23, 49, 59, 0.35) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.day-sidebar::-webkit-scrollbar,
|
||||
.day-list::-webkit-scrollbar,
|
||||
.artifact-list::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.day-sidebar:hover::-webkit-scrollbar,
|
||||
.day-sidebar:hover .day-list::-webkit-scrollbar,
|
||||
.artifact-sidebar:hover .artifact-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.day-sidebar::-webkit-scrollbar-thumb,
|
||||
.day-list::-webkit-scrollbar-thumb,
|
||||
.artifact-list::-webkit-scrollbar-thumb {
|
||||
background: rgba(23, 49, 59, 0.35);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.day-sidebar::-webkit-scrollbar-track,
|
||||
.day-list::-webkit-scrollbar-track,
|
||||
.artifact-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -200,7 +206,7 @@ h1 {
|
|||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -237,7 +243,7 @@ h1 {
|
|||
color: #68543b;
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.1em;
|
||||
margin: 0 0 0.45rem;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
|
@ -247,7 +253,10 @@ h1 {
|
|||
}
|
||||
|
||||
.day-list {
|
||||
align-content: start;
|
||||
flex: 1 1 auto;
|
||||
gap: 0.35rem;
|
||||
padding: 0.55rem;
|
||||
}
|
||||
|
||||
.day-link,
|
||||
|
|
@ -313,12 +322,35 @@ h1 {
|
|||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.pane-heading {
|
||||
.pane-bar {
|
||||
align-items: baseline;
|
||||
background: var(--pane-bar-bg);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 0 var(--pane-bar-height);
|
||||
gap: 0.55rem;
|
||||
height: var(--pane-bar-height);
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
padding: 0.55rem;
|
||||
min-height: var(--pane-bar-height);
|
||||
padding: 0 0.65rem;
|
||||
}
|
||||
|
||||
.pane-heading,
|
||||
.preview-actions {
|
||||
border-bottom: 1px solid #c7b48f;
|
||||
}
|
||||
|
||||
.day-sidebar .pane-bar,
|
||||
.artifact-sidebar .pane-bar {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.artifact-sidebar .pane-heading {
|
||||
flex-direction: column;
|
||||
gap: 0.04rem;
|
||||
}
|
||||
|
||||
.new-artifacts-banner {
|
||||
|
|
@ -334,7 +366,7 @@ h1 {
|
|||
margin: 0 0.55rem 0.5rem;
|
||||
padding: 0.48rem 0.7rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
width: calc(100% - 1.1rem);
|
||||
}
|
||||
|
||||
.new-artifacts-banner[hidden] {
|
||||
|
|
@ -354,6 +386,7 @@ h1 {
|
|||
align-items: stretch;
|
||||
background: #fffaf0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--grid-line);
|
||||
border-radius: 0;
|
||||
display: grid;
|
||||
gap: 0;
|
||||
|
|
@ -394,7 +427,7 @@ h1 {
|
|||
|
||||
.kind-icon {
|
||||
align-items: center;
|
||||
background: rgba(23, 49, 59, 0.04);
|
||||
background: rgba(23, 49, 59, 0.035);
|
||||
color: #657173;
|
||||
display: inline-flex;
|
||||
font-size: 0.56rem;
|
||||
|
|
@ -424,6 +457,7 @@ h1 {
|
|||
|
||||
.artifact-row-main {
|
||||
align-items: center;
|
||||
border-right: 1px solid var(--grid-line);
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
padding: 0.42rem 0.55rem;
|
||||
|
|
@ -441,6 +475,7 @@ h1 {
|
|||
.artifact-time {
|
||||
align-items: center;
|
||||
background: #efe5d3;
|
||||
border-right: 1px solid var(--grid-line);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-self: stretch;
|
||||
|
|
@ -478,7 +513,15 @@ kbd {
|
|||
padding: 0.08rem 0.28rem;
|
||||
}
|
||||
|
||||
.preview-pane > .preview-empty {
|
||||
.preview-body {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.preview-body > .preview-empty {
|
||||
align-self: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
|
@ -491,16 +534,30 @@ kbd {
|
|||
min-height: 0;
|
||||
}
|
||||
|
||||
.artifact-actions {
|
||||
.preview-actions {
|
||||
align-items: center;
|
||||
background: #d9c9ad;
|
||||
border-top: 1px solid #c7b48f;
|
||||
background: var(--pane-bar-bg);
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
gap: 0.75rem;
|
||||
justify-content: space-between;
|
||||
min-height: 2.25rem;
|
||||
padding: 0.28rem 0.55rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
color: #17313b;
|
||||
flex: 1 1 auto;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.preview-actions .view-toggle,
|
||||
.preview-actions .artifact-action-links {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.artifact-action-links {
|
||||
|
|
@ -523,6 +580,13 @@ kbd {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.view-toggle a.disabled,
|
||||
.artifact-action-links a.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.48;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.artifact-action-links button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.48;
|
||||
|
|
@ -556,7 +620,7 @@ kbd {
|
|||
|
||||
.toolbar,
|
||||
.filter,
|
||||
.artifact-actions {
|
||||
.preview-actions {
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,9 @@
|
|||
data-selected-kind="{{ selected_kind }}"
|
||||
data-title-query="{{ title_query }}">
|
||||
<aside class="day-sidebar" aria-label="Days">
|
||||
<h2>Days</h2>
|
||||
<div class="pane-bar">
|
||||
<h2>Days</h2>
|
||||
</div>
|
||||
<nav class="day-list">
|
||||
{% for day in days %}
|
||||
<a class="day-link {% if day == selected_day %}selected{% endif %}" href="?day={{ day|date:'Y-m-d' }}{% if selected_persona %}&persona={{ selected_persona|urlencode }}{% endif %}{% if selected_kind %}&kind={{ selected_kind|urlencode }}{% endif %}{% if title_query %}&q={{ title_query|urlencode }}{% endif %}&view={{ selected_view }}&preview=none">
|
||||
|
|
@ -63,7 +65,7 @@
|
|||
<div class="splitter" data-splitter="days" role="separator" aria-label="Resize days sidebar" aria-orientation="vertical"></div>
|
||||
|
||||
<aside class="artifact-sidebar" aria-label="Artifacts for selected day">
|
||||
<div class="pane-heading">
|
||||
<div class="pane-bar pane-heading">
|
||||
<h2>{{ selected_day|date:"M j Y" }}</h2>
|
||||
<span>{{ artifacts|length }} artifact{{ artifacts|length|pluralize }}</span>
|
||||
</div>
|
||||
|
|
@ -99,6 +101,22 @@
|
|||
<div class="splitter" data-splitter="artifacts" role="separator" aria-label="Resize artifacts sidebar" aria-orientation="vertical"></div>
|
||||
|
||||
<section class="preview-pane">
|
||||
<header class="pane-bar preview-actions" data-actions>
|
||||
<div class="preview-title" data-preview-title>
|
||||
{% if selected_artifact %}{{ selected_artifact.title }}{% else %}No artifact loaded{% endif %}
|
||||
</div>
|
||||
<nav class="view-toggle" aria-label="Preview mode">
|
||||
<a class="{% if selected_view == 'rendered' %}selected{% endif %}{% if not selected_artifact %} disabled{% endif %}" href="{% if selected_artifact %}{{ rendered_url }}{% else %}#{% endif %}" data-view="rendered" {% if not selected_artifact %}aria-disabled="true"{% endif %}>Rendered</a>
|
||||
<a class="{% if selected_view == 'raw' %}selected{% endif %}{% if not selected_artifact %} disabled{% endif %}" href="{% if selected_artifact %}{{ raw_url }}{% else %}#{% endif %}" data-view="raw" {% if not selected_artifact %}aria-disabled="true"{% endif %}>Raw</a>
|
||||
</nav>
|
||||
<div class="artifact-action-links">
|
||||
<a class="{% if not selected_artifact %}disabled{% endif %}" href="{% if selected_artifact %}{% url 'artifact' selected_artifact.id %}{% else %}#{% endif %}" target="_blank" rel="noopener" {% if not selected_artifact %}aria-disabled="true"{% endif %}>Open</a>
|
||||
<a class="{% if not selected_artifact %}disabled{% endif %}" href="{% if selected_artifact %}{% url 'artifact' selected_artifact.id %}{% else %}#{% endif %}" download {% if not selected_artifact %}aria-disabled="true"{% endif %}>Download</a>
|
||||
<button type="button" data-copy-url="{% if selected_artifact %}{% url 'artifact' selected_artifact.id %}{% endif %}" {% if not selected_artifact %}disabled{% endif %}>Copy Link</button>
|
||||
<button type="button" disabled>Send</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="preview-body">
|
||||
{% if selected_artifact %}
|
||||
<div class="preview-frame-wrap">
|
||||
{% if selected_view == "raw" %}
|
||||
|
|
@ -115,18 +133,6 @@
|
|||
<iframe class="preview-frame" src="{% url 'artifact' selected_artifact.id %}{% if selected_view == 'raw' %}?raw=1{% endif %}" title="{{ selected_artifact.title }}"></iframe>
|
||||
{% endif %}
|
||||
</div>
|
||||
<footer class="artifact-actions" data-actions>
|
||||
<nav class="view-toggle" aria-label="Preview mode">
|
||||
<a class="{% if selected_view == 'rendered' %}selected{% endif %}" href="{{ rendered_url }}" data-view="rendered">Rendered</a>
|
||||
<a class="{% if selected_view == 'raw' %}selected{% endif %}" href="{{ raw_url }}" data-view="raw">Raw</a>
|
||||
</nav>
|
||||
<div class="artifact-action-links">
|
||||
<a href="{% url 'artifact' selected_artifact.id %}" target="_blank" rel="noopener">Open</a>
|
||||
<a href="{% url 'artifact' selected_artifact.id %}" download>Download</a>
|
||||
<button type="button" data-copy-url="{% url 'artifact' selected_artifact.id %}">Copy Link</button>
|
||||
<button type="button" disabled>Send</button>
|
||||
</div>
|
||||
</footer>
|
||||
{% else %}
|
||||
<div class="empty preview-empty">
|
||||
{% if artifacts %}
|
||||
|
|
@ -138,6 +144,7 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
|
@ -187,6 +194,7 @@
|
|||
});
|
||||
|
||||
const previewPane = document.querySelector(".preview-pane");
|
||||
const previewBody = document.querySelector(".preview-body");
|
||||
const rows = Array.from(document.querySelectorAll(".artifact-row"));
|
||||
const dayLinks = Array.from(document.querySelectorAll(".day-link"));
|
||||
const initialArtifactIds = new Set(rows.map((row) => row.dataset.artifactId));
|
||||
|
|
@ -235,16 +243,47 @@
|
|||
const updateActions = (row) => {
|
||||
const actions = document.querySelector("[data-actions]");
|
||||
if (!actions) return;
|
||||
const previewTitle = actions.querySelector("[data-preview-title]");
|
||||
if (previewTitle) previewTitle.textContent = row.dataset.title;
|
||||
actions.querySelectorAll("[data-view]").forEach((link) => {
|
||||
const view = link.dataset.view;
|
||||
link.classList.toggle("selected", view === selectedView);
|
||||
link.classList.remove("disabled");
|
||||
link.removeAttribute("aria-disabled");
|
||||
link.href = pageUrlFor(row, view).toString();
|
||||
});
|
||||
actions.querySelectorAll(".artifact-action-links a").forEach((link) => {
|
||||
link.classList.remove("disabled");
|
||||
link.removeAttribute("aria-disabled");
|
||||
link.href = row.dataset.renderedUrl;
|
||||
});
|
||||
const copyButton = actions.querySelector("[data-copy-url]");
|
||||
if (copyButton) copyButton.dataset.copyUrl = row.dataset.renderedUrl;
|
||||
if (copyButton) {
|
||||
copyButton.disabled = false;
|
||||
copyButton.dataset.copyUrl = row.dataset.renderedUrl;
|
||||
}
|
||||
};
|
||||
|
||||
const disableActions = () => {
|
||||
const actions = document.querySelector("[data-actions]");
|
||||
if (!actions) return;
|
||||
const previewTitle = actions.querySelector("[data-preview-title]");
|
||||
if (previewTitle) previewTitle.textContent = "No artifact loaded";
|
||||
actions.querySelectorAll("[data-view]").forEach((link) => {
|
||||
link.classList.add("disabled");
|
||||
link.setAttribute("aria-disabled", "true");
|
||||
link.href = "#";
|
||||
});
|
||||
actions.querySelectorAll(".artifact-action-links a").forEach((link) => {
|
||||
link.classList.add("disabled");
|
||||
link.setAttribute("aria-disabled", "true");
|
||||
link.href = "#";
|
||||
});
|
||||
const copyButton = actions.querySelector("[data-copy-url]");
|
||||
if (copyButton) {
|
||||
copyButton.disabled = true;
|
||||
copyButton.dataset.copyUrl = "";
|
||||
}
|
||||
};
|
||||
|
||||
const renderPreview = (row, pushState = true) => {
|
||||
|
|
@ -261,12 +300,7 @@
|
|||
? `<div class="empty preview-empty"><h2>Binary Artifact</h2><p>This artifact type cannot be previewed inline yet.</p><p><a href="${source}">Open or download it</a>.</p></div>`
|
||||
: `<iframe class="preview-frame" src="${source}" title="${title}"></iframe>`;
|
||||
|
||||
let frameWrap = previewPane.querySelector(".preview-frame-wrap");
|
||||
if (!frameWrap) {
|
||||
previewPane.innerHTML = `<div class="preview-frame-wrap"></div><footer class="artifact-actions" data-actions><nav class="view-toggle" aria-label="Preview mode"><a data-view="rendered">Rendered</a><a data-view="raw">Raw</a></nav><div class="artifact-action-links"><a target="_blank" rel="noopener">Open</a><a download>Download</a><button type="button" data-copy-url="">Copy Link</button><button type="button" disabled>Send</button></div></footer>`;
|
||||
frameWrap = previewPane.querySelector(".preview-frame-wrap");
|
||||
}
|
||||
frameWrap.innerHTML = content;
|
||||
previewBody.innerHTML = `<div class="preview-frame-wrap">${content}</div>`;
|
||||
updateActions(row);
|
||||
if (pushState) window.history.pushState({}, "", pageUrlFor(row, selectedView));
|
||||
};
|
||||
|
|
@ -277,7 +311,8 @@
|
|||
document.activeElement.blur();
|
||||
}
|
||||
rows.forEach((candidate) => candidate.classList.remove("selected"));
|
||||
previewPane.innerHTML = `<div class="empty preview-empty"><h2>No artifact loaded</h2><p>Press <kbd>Right Arrow</kbd> or select an artifact from the middle column to preview it.</p></div>`;
|
||||
disableActions();
|
||||
previewBody.innerHTML = `<div class="empty preview-empty"><h2>No artifact loaded</h2><p>Press <kbd>Right Arrow</kbd> or select an artifact from the middle column to preview it.</p></div>`;
|
||||
window.history.pushState({}, "", noPreviewUrl());
|
||||
const currentDay = document.querySelector(".day-link.selected");
|
||||
if (currentDay) currentDay.focus({preventScroll: true});
|
||||
|
|
@ -413,6 +448,10 @@
|
|||
|
||||
const toggle = event.target.closest("[data-view]");
|
||||
if (!toggle) return;
|
||||
if (toggle.classList.contains("disabled")) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
const row = selectedRow();
|
||||
if (!row) return;
|
||||
event.preventDefault();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue