Compact interfaces and edit more things inline
This commit is contained in:
@@ -199,9 +199,14 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="is-flex is-align-items-center" style="gap: 0.35rem;">
|
||||
<span id="ai-cache-indicator-{{ person.id }}" class="tag is-warning is-light is-small" style="display: none;">
|
||||
Cached
|
||||
<div class="is-flex is-align-items-center ai-capsule-controls">
|
||||
<span class="ai-cache-indicator-slot">
|
||||
<span
|
||||
id="ai-cache-indicator-{{ person.id }}"
|
||||
class="tag is-warning is-light is-small"
|
||||
aria-hidden="true">
|
||||
Cached
|
||||
</span>
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
@@ -267,12 +272,38 @@
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ai-person-widget .ai-capsule-controls {
|
||||
gap: 0.35rem;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.ai-person-widget .ai-cache-indicator-slot {
|
||||
width: 9.5rem;
|
||||
display: inline-flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.ai-person-widget .ai-cache-indicator-slot .tag {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ai-person-widget .ai-cache-indicator-slot .tag.is-visible {
|
||||
visibility: visible;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.ai-person-widget .ai-top-tabs li a {
|
||||
min-height: 2.1rem;
|
||||
min-width: 2.1rem;
|
||||
padding: 0 0.45rem;
|
||||
}
|
||||
.ai-person-widget .ai-cache-indicator-slot {
|
||||
width: 8.4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -407,8 +438,13 @@
|
||||
}
|
||||
if (show) {
|
||||
indicator.textContent = formatCacheAge(ts);
|
||||
indicator.classList.add("is-visible");
|
||||
indicator.setAttribute("aria-hidden", "false");
|
||||
return;
|
||||
}
|
||||
indicator.style.display = show ? "inline-flex" : "none";
|
||||
indicator.textContent = "Cached";
|
||||
indicator.classList.remove("is-visible");
|
||||
indicator.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
|
||||
const OPERATION_TABS = ["summarise", "draft_reply", "extract_patterns"];
|
||||
|
||||
@@ -61,10 +61,11 @@
|
||||
<div class="buttons are-small" style="margin: 0;">
|
||||
<button
|
||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||
hx-get="{% url 'queue_update' type=type pk=item.id %}"
|
||||
hx-get="{% url 'queue_update' type='window' pk=item.id %}?hx_target=%23queue-inline-editor-{{ item.id }}"
|
||||
hx-trigger="click"
|
||||
hx-target="#{{ type }}s-here"
|
||||
hx-target="#queue-inline-editor-{{ item.id }}"
|
||||
hx-swap="innerHTML"
|
||||
_="on htmx:afterRequest if event.detail.successful set #queue-inline-editor-{{ item.id }}.style.display to 'block' end"
|
||||
class="button is-light">
|
||||
<span class="icon is-small"><i class="fa-solid fa-pen"></i></span>
|
||||
<span>Edit</span>
|
||||
@@ -82,6 +83,9 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="queue-inline-editor-{{ item.id }}"
|
||||
style="display: none; margin-top: 0.55rem; padding: 0.55rem; border-radius: 8px; border: 1px solid rgba(50, 115, 220, 0.25); background: rgba(255, 255, 255, 0.78);"></div>
|
||||
</article>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user