Polish study layout controls

2026-07-12 10:07:20 -05:00
parent 796912db8b
commit d4ef8e9f6b
7 changed files with 127 additions and 46 deletions
@@ -161,12 +161,11 @@

 .top-bar {
  display: grid;
-  grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.1fr) minmax(300px, 0.65fr);
-  gap: 14px;
+  grid-template-columns: minmax(760px, 1.42fr) minmax(320px, 0.58fr);
+  gap: 6px;
  align-items: end;
 }

-.version-block h1,
 .study-margin h2,
 .notes-workspace h2,
 .strong-focus h4 {
@@ -174,12 +173,6 @@
  letter-spacing: 0;
 }

-.version-block h1 {
-  margin-top: 3px;
-  font-size: 24px;
-  line-height: 1.15;
-}
-
 .eyebrow {
  color: #657061;
  font-size: 12px;
@@ -240,6 +233,7 @@ textarea:focus-visible {
  grid-template-columns: minmax(130px, 1.1fr) minmax(130px, 1.3fr) minmax(86px, 0.7fr) minmax(78px, 0.6fr) minmax(120px, 0.9fr);
  gap: 8px;
  align-items: end;
+  max-width: 960px;
 }

 .page-controls label {
@@ -255,7 +249,7 @@ textarea:focus-visible {
 .study-desk {
  display: grid;
  grid-template-columns: minmax(720px, 1fr);
-  gap: 16px;
+  gap: 6px;
  min-height: 0;
 }

@@ -466,6 +460,17 @@ textarea:focus-visible {
  gap: 8px;
  align-items: center;
  justify-content: space-between;
+  margin: -6px -6px 2px;
+  padding: 7px 8px;
+  border-radius: 5px;
+  background: #f5efe1;
+  cursor: pointer;
+}
+
+.margin-section-header:hover,
+.margin-section-header:focus-visible {
+  background: #efe5d0;
+  outline: none;
 }

 .collapse-button,
@@ -480,8 +485,10 @@ textarea:focus-visible {
 }

 .collapse-button {
+  flex: 1;
  padding: 0;
  text-align: left;
+  cursor: pointer;
 }

 .collapse-button::before {
@@ -736,6 +743,34 @@ textarea:focus-visible {
  text-align: left;
 }

+.notes-quick-panels {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 8px;
+  margin-top: auto;
+}
+
+.notes-quick-panels .note-helper {
+  margin-top: 0;
+}
+
+.note-placeholder {
+  display: grid;
+  align-content: center;
+  gap: 4px;
+  width: 100%;
+  padding: 12px;
+  border-color: #ded6c7;
+  background: #fbf8ef;
+  color: #202124;
+  text-align: left;
+}
+
+.note-placeholder small {
+  color: #657061;
+  font-size: 12px;
+}
+
 .note-helper strong,
 .note-helper small {
  display: block;
@@ -758,15 +758,32 @@ function App() {

    return (
      <section className="original-language-verse" aria-label="Original language lemma line">
-        <header className="margin-section-header">
+        <header
+          className="margin-section-header"
+          role="button"
+          tabIndex={0}
+          onClick={() => setOriginalCollapsed((current) => !current)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault()
+              setOriginalCollapsed((current) => !current)
+            }
+          }}
+        >
          <button
            type="button"
            className="collapse-button"
-            onClick={() => setOriginalCollapsed((current) => !current)}
          >
            {isHebrew ? 'Hebrew Lemma Line' : 'Greek Lemma Line'}
          </button>
-          <button type="button" className="mini-settings" onClick={() => setSettingsModalOpen(true)}>
+          <button
+            type="button"
+            className="mini-settings"
+            onClick={(event) => {
+              event.stopPropagation()
+              setSettingsModalOpen(true)
+            }}
+          >
            Aa
          </button>
        </header>
@@ -801,15 +818,32 @@ function App() {

    return (
      <section className="english-strong-line" aria-label="English Strong's line">
-        <header className="margin-section-header">
+        <header
+          className="margin-section-header"
+          role="button"
+          tabIndex={0}
+          onClick={() => setLinkedCollapsed((current) => !current)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault()
+              setLinkedCollapsed((current) => !current)
+            }
+          }}
+        >
          <button
            type="button"
            className="collapse-button"
-            onClick={() => setLinkedCollapsed((current) => !current)}
          >
            English Linked Text
          </button>
-          <button type="button" className="mini-settings" onClick={() => setSettingsModalOpen(true)}>
+          <button
+            type="button"
+            className="mini-settings"
+            onClick={(event) => {
+              event.stopPropagation()
+              setSettingsModalOpen(true)
+            }}
+          >
            Aa
          </button>
        </header>
@@ -870,7 +904,7 @@ function App() {
        <button type="button" onClick={() => shiftPage(-1)}>
          Previous page
        </button>
-        <span>{pageRange}</span>
+        <span>King James Version - {pageRange}</span>
        <button type="button" onClick={() => shiftPage(1)}>
          Next page
        </button>
@@ -895,11 +929,21 @@ function App() {
            {renderLinkedEnglishLine()}
            {selectedStrongEntry ? (
              <article className="strong-focus" aria-label="Strong's definition">
-                <header className="margin-section-header">
+                <header
+                  className="margin-section-header"
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => setDefinitionCollapsed((current) => !current)}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                      event.preventDefault()
+                      setDefinitionCollapsed((current) => !current)
+                    }
+                  }}
+                >
                  <button
                    type="button"
                    className="collapse-button"
-                    onClick={() => setDefinitionCollapsed((current) => !current)}
                  >
                    Definition
                  </button>
@@ -1375,10 +1419,6 @@ function App() {
        ) : selectedVerse ? (
          <>
            <header className="top-bar">
-              <div className="version-block">
-                <span className="eyebrow">King James Version</span>
-                <h1>{pageRange}</h1>
-              </div>
              <div className="page-controls" aria-label="Page selectors">
                <label>
                  Translation
@@ -1527,23 +1567,29 @@ function App() {
                    </span>
                  ))}
                </div>
-                <button
-                  type="button"
-                  className="note-helper"
-                  onClick={() => setTimelineModalOpen(true)}
-                  aria-label="Open study timeline"
-                >
-                  <span className="note-helper-figure" aria-hidden="true">
-                    <span className="helper-head" />
-                    <span className="helper-body" />
-                    <span className="helper-notebook" />
-                    <span className="helper-pencil" />
-                  </span>
-                  <span>
-                    <strong>Study timeline</strong>
-                    <small>{activeSession?.timeline.length ?? 0} events recorded</small>
-                  </span>
-                </button>
+                <div className="notes-quick-panels">
+                  <button
+                    type="button"
+                    className="note-helper"
+                    onClick={() => setTimelineModalOpen(true)}
+                    aria-label="Open study timeline"
+                  >
+                    <span className="note-helper-figure" aria-hidden="true">
+                      <span className="helper-head" />
+                      <span className="helper-body" />
+                      <span className="helper-notebook" />
+                      <span className="helper-pencil" />
+                    </span>
+                    <span>
+                      <strong>Study timeline</strong>
+                      <small>{activeSession?.timeline.length ?? 0} events recorded</small>
+                    </span>
+                  </button>
+                  <button type="button" className="note-placeholder">
+                    <strong>Study tools</strong>
+                    <small>Placeholder</small>
+                  </button>
+                </div>
              </aside>
              ) : null}
            </div>