ntnsndr/protocol-bicorder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

User experience improvements to the focused mode

Browse Source
This commit is contained in:
Nathan Schneider
2026-01-18 16:59:56 -07:00
parent 56d1f7e11e
commit f53ada8196
4 changed files with 279 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
bicorder-app/src/components/HelpModal.svelte
View File

@@ -18,19 +18,22 @@
<div class="modal-backdrop" on:click={closeModal} on:keydown={() => {}} role="button" tabindex="-1">
<div class="modal-content" on:click|stopPropagation on:keydown={() => {}} role="dialog" aria-modal="true">
<div class="modal-header">
<h2>Help & Instructions</h2>
<button class="close-btn" on:click={closeModal} aria-label="Close help">×</button>
<h2>About</h2>
<button class="close-btn" on:click={closeModal} aria-label="Close">×</button>
</div>
<div class="modal-body">
<p>The Protocol Bicorder is a diagnostic tool for the study of protocols. It allows a human or machine user to evaluate protocol characteristics along a series of gradients between opposing terms.</p>
<p>The Protocol Bicorder is a diagnostic tool for the study of protocols. It allows a human or machine user to evaluate protocol characteristics along a series of gradients between opposing terms.</p>
<p>The name is a tribute to the tricorder, a fictional device in the Star Trek universe that the characters can use to obtain all manner of empirical data about their surroundings.</p>
<p>To carry out the diagnostic, the analyst should consider the protocol from the perspective of one of the <code>gradients</code> at a time. The gradients invite the analyst to determine where the protocol lies between two terms.</p>
<p>This is inevitably an interpretive exercise, but do your best to identify the most accurate <code>value</code>, with <code>1</code> being closest to <code>term_left</code> and <code>9</code> being closest to <code>term_right</code>.</p>
<p>Choosing a <code>value</code> in the middle, such as <code>5</code>, can mean "a bit of both." Leaving the gradient <code>value</code> as <code>null</code> means "not applicable."</p>
<p>There is a <code>notes</code> field for the analyst to add additional context or explanation.</p>
<p>The <code>shortform</code> option allows the use of an abbreviated version of the bicorder, including only the most salient gradients.</p>
<p>To carry out the diagnostic, consider the protocol from the perspective of one gradient at a time. Determine where the protocol lies between two terms, with <code>1</code> closest to <code>term_left</code> and <code>9</code> closest to <code>term_right</code>.</p>
<p>A middle <code>value</code> like <code>5</code> means "a bit of both." Leaving the gradient <code>value</code> as <code>null</code> means "not applicable."</p>
<p>Use the <code>notes</code> field to add context or explanation.</p>
<p>Use the menu (☰) to toggle between focused/list modes and short/long forms. Short form includes only the most salient gradients.</p>
<p>Happy protocol watching!</p>
<hr class="divider" />
<p class="credits">Initiated by <a href="https://nathanschneider.info" rel="nofollow">Nathan Schneider</a>; <a href="https://git.medlab.host/ntnsndr/protocol-bicorder/src/branch/main/bicorder-app" rel="nofollow">source code</a> licensed under the <a href="https://firstdonoharm.dev/" rel="nofollow">Hippocratic License</a> (do no harm!).</p>
</div>
</div>
</div>
@@ -126,6 +129,20 @@
color: var(--accent-color);
}
.divider {
margin: 2rem 0 1.5rem 0;
border: none;
border-top: 1px solid var(--border-color);
opacity: 0.5;
}
.credits {
font-size: 0.85rem;
opacity: 0.7;
text-align: center;
line-height: 1.6;
}
@media (max-width: 768px) {
.modal-content {
max-height: 90vh;