Use full browser width with 2-column layout at 1100px+
Widened admin-main to 1400px max-width and added panel-cols/panel-col wrappers so Kids, Courses, Spelling, and Flashcards all display content on the left and forms/editors on the right on wider screens. Falls back to single-column on smaller viewports. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed
1 parent
adf4bf4cae
commit
4613946cea
2 files changed
+120
-85
No files matched your search
+110
-84
@@ -39,28 +39,46 @@
|
|||||||
<!-- Kids -->
|
<!-- Kids -->
|
||||||
<section id="panel-kids" class="panel">
|
<section id="panel-kids" class="panel">
|
||||||
<h1>Kids</h1>
|
<h1>Kids</h1>
|
||||||
<div id="student-rows"></div>
|
<div class="panel-cols">
|
||||||
<form id="add-student-form" class="inline-form">
|
<div class="panel-col">
|
||||||
<input id="new-student-name" placeholder="Name" aria-label="New kid name">
|
<div id="student-rows"></div>
|
||||||
<select id="new-student-emoji" aria-label="Avatar">
|
</div>
|
||||||
<option>🦊</option><option>🐸</option><option>🦄</option><option>🐯</option>
|
<div class="panel-col">
|
||||||
<option>🐼</option><option>🦖</option><option>🐙</option><option>🦉</option>
|
<div class="admin-card">
|
||||||
<option>🐻</option><option>🐰</option><option>🦁</option><option>🐶</option>
|
<h2 style="margin:0 0 0.75rem">Add a kid</h2>
|
||||||
</select>
|
<form id="add-student-form" class="inline-form" style="flex-direction:column">
|
||||||
<button type="submit">Add kid</button>
|
<input id="new-student-name" placeholder="Name" aria-label="New kid name">
|
||||||
</form>
|
<select id="new-student-emoji" aria-label="Avatar">
|
||||||
|
<option>🦊</option><option>🐸</option><option>🦄</option><option>🐯</option>
|
||||||
|
<option>🐼</option><option>🦖</option><option>🐙</option><option>🦉</option>
|
||||||
|
<option>🐻</option><option>🐰</option><option>🦁</option><option>🐶</option>
|
||||||
|
</select>
|
||||||
|
<button type="submit">Add kid</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Courses list -->
|
<!-- Courses list -->
|
||||||
<section id="panel-courses" class="panel">
|
<section id="panel-courses" class="panel">
|
||||||
<h1>Courses</h1>
|
<h1>Courses</h1>
|
||||||
<div id="course-rows"></div>
|
<div class="panel-cols">
|
||||||
<form id="add-course-form" class="inline-form">
|
<div class="panel-col">
|
||||||
<input id="new-course-name" placeholder="Course name (e.g. Science 3)" aria-label="Course name">
|
<div id="course-rows"></div>
|
||||||
<input id="new-course-subject" placeholder="Subject" aria-label="Subject">
|
</div>
|
||||||
<input id="new-course-color" type="color" value="#4f86f7" aria-label="Color">
|
<div class="panel-col">
|
||||||
<button type="submit">Add course</button>
|
<div class="admin-card">
|
||||||
</form>
|
<h2 style="margin:0 0 0.75rem">Add a course</h2>
|
||||||
|
<form id="add-course-form" class="inline-form" style="flex-direction:column">
|
||||||
|
<input id="new-course-name" placeholder="Course name (e.g. Science 3)" aria-label="Course name">
|
||||||
|
<input id="new-course-subject" placeholder="Subject" aria-label="Subject">
|
||||||
|
<input id="new-course-color" type="color" value="#4f86f7" aria-label="Color">
|
||||||
|
<button type="submit">Add course</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Course detail (units + items + roster) -->
|
<!-- Course detail (units + items + roster) -->
|
||||||
@@ -277,80 +295,88 @@
|
|||||||
<!-- Spelling (legacy word lists + weekly assignment) -->
|
<!-- Spelling (legacy word lists + weekly assignment) -->
|
||||||
<section id="panel-spelling" class="panel">
|
<section id="panel-spelling" class="panel">
|
||||||
<h1>Spelling</h1>
|
<h1>Spelling</h1>
|
||||||
<h2>This week's list per kid</h2>
|
<div class="panel-cols">
|
||||||
<div id="assign-rows"></div>
|
<div class="panel-col">
|
||||||
|
<h2>This week's list per kid</h2>
|
||||||
<h2>Word lists</h2>
|
<div id="assign-rows"></div>
|
||||||
<div id="list-rows"></div>
|
<h2>Word lists</h2>
|
||||||
<details id="list-editor-details">
|
<div id="list-rows"></div>
|
||||||
<summary id="list-editor-title">New list</summary>
|
<h2>Test results</h2>
|
||||||
<form id="list-form" class="admin-card">
|
<div id="results-area"></div>
|
||||||
<input type="hidden" id="list-id">
|
|
||||||
<input id="list-name" placeholder="List name (e.g. Week of July 6)" aria-label="List name">
|
|
||||||
<input id="list-group" placeholder="Group (e.g. Bible 6)" aria-label="Group" list="list-groups-datalist">
|
|
||||||
<datalist id="list-groups-datalist"></datalist>
|
|
||||||
<textarea id="list-words" rows="8"
|
|
||||||
placeholder="One word per line. Paste any list from your curriculum! Add an example sentence with | receive | Did you receive my letter? Or just a plain list: because enough friend"></textarea>
|
|
||||||
<div class="row-actions">
|
|
||||||
<button type="submit">Save list</button>
|
|
||||||
<button type="button" id="list-cancel" class="secondary">Clear</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details id="list-bulk-details">
|
|
||||||
<summary>Bulk import lists</summary>
|
|
||||||
<div class="admin-card">
|
|
||||||
<p class="hint" style="margin:0 0 0.5rem">Start each list with <strong># List name</strong> on its own line, then words below it. Optional group applies to all imported lists.</p>
|
|
||||||
<input id="list-bulk-group" placeholder="Group (e.g. Bible 6) — optional" aria-label="Group for bulk import" list="list-groups-datalist">
|
|
||||||
<textarea id="list-bulk-text" rows="12"
|
|
||||||
placeholder="# Week 1 because enough friend # Week 2 receive | Did you receive my letter? achieve believe"></textarea>
|
|
||||||
<div class="row-actions">
|
|
||||||
<button type="button" id="list-bulk-save">Import all lists</button>
|
|
||||||
<button type="button" id="list-bulk-clear" class="secondary">Clear</button>
|
|
||||||
</div>
|
|
||||||
<p id="list-bulk-status" class="hint" style="margin:0.4rem 0 0"></p>
|
|
||||||
</div>
|
</div>
|
||||||
</details>
|
<div class="panel-col">
|
||||||
|
<details id="list-editor-details">
|
||||||
<h2>Test results</h2>
|
<summary id="list-editor-title">New list</summary>
|
||||||
<div id="results-area"></div>
|
<form id="list-form" class="admin-card">
|
||||||
|
<input type="hidden" id="list-id">
|
||||||
|
<input id="list-name" placeholder="List name (e.g. Week of July 6)" aria-label="List name">
|
||||||
|
<input id="list-group" placeholder="Group (e.g. Bible 6)" aria-label="Group" list="list-groups-datalist">
|
||||||
|
<datalist id="list-groups-datalist"></datalist>
|
||||||
|
<textarea id="list-words" rows="8"
|
||||||
|
placeholder="One word per line. Paste any list from your curriculum! Add an example sentence with | receive | Did you receive my letter? Or just a plain list: because enough friend"></textarea>
|
||||||
|
<div class="row-actions">
|
||||||
|
<button type="submit">Save list</button>
|
||||||
|
<button type="button" id="list-cancel" class="secondary">Clear</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</details>
|
||||||
|
<details id="list-bulk-details">
|
||||||
|
<summary>Bulk import lists</summary>
|
||||||
|
<div class="admin-card">
|
||||||
|
<p class="hint" style="margin:0 0 0.5rem">Start each list with <strong># List name</strong> on its own line, then words below it. Optional group applies to all imported lists.</p>
|
||||||
|
<input id="list-bulk-group" placeholder="Group (e.g. Bible 6) — optional" aria-label="Group for bulk import" list="list-groups-datalist">
|
||||||
|
<textarea id="list-bulk-text" rows="12"
|
||||||
|
placeholder="# Week 1 because enough friend # Week 2 receive | Did you receive my letter? achieve believe"></textarea>
|
||||||
|
<div class="row-actions">
|
||||||
|
<button type="button" id="list-bulk-save">Import all lists</button>
|
||||||
|
<button type="button" id="list-bulk-clear" class="secondary">Clear</button>
|
||||||
|
</div>
|
||||||
|
<p id="list-bulk-status" class="hint" style="margin:0.4rem 0 0"></p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Flashcard decks -->
|
<!-- Flashcard decks -->
|
||||||
<section id="panel-decks" class="panel">
|
<section id="panel-decks" class="panel">
|
||||||
<h1>Flashcard Decks</h1>
|
<h1>Flashcard Decks</h1>
|
||||||
<div id="deck-rows"></div>
|
<div class="panel-cols">
|
||||||
<details id="deck-editor-details">
|
<div class="panel-col">
|
||||||
<summary id="deck-editor-title">New deck</summary>
|
<div id="deck-rows"></div>
|
||||||
<form id="deck-form" class="admin-card">
|
|
||||||
<input type="hidden" id="deck-id">
|
|
||||||
<input id="deck-name" placeholder="Deck name (e.g. State Capitals)" aria-label="Deck name">
|
|
||||||
<input id="deck-group" placeholder="Group (e.g. Bible 6)" aria-label="Group" list="deck-groups-datalist">
|
|
||||||
<datalist id="deck-groups-datalist"></datalist>
|
|
||||||
<textarea id="deck-cards" rows="8"
|
|
||||||
placeholder="One card per line: front | back What is the capital of Ohio? | Columbus"></textarea>
|
|
||||||
<div class="row-actions">
|
|
||||||
<button type="submit">Save deck</button>
|
|
||||||
<button type="button" id="deck-cancel" class="secondary">Clear</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details id="deck-bulk-details">
|
|
||||||
<summary>Bulk import decks</summary>
|
|
||||||
<div class="admin-card">
|
|
||||||
<p class="hint" style="margin:0 0 0.5rem">Start each deck with <strong># Deck name</strong> on its own line, then cards below as <strong>front | back</strong>. Optional group applies to all imported decks.</p>
|
|
||||||
<input id="deck-bulk-group" placeholder="Group (e.g. Bible 6) — optional" aria-label="Group for bulk import" list="deck-groups-datalist">
|
|
||||||
<textarea id="deck-bulk-text" rows="12"
|
|
||||||
placeholder="# Chapter 1 Vocab What is photosynthesis? | The process plants use to make food What does chlorophyll do? | Absorbs light # Chapter 2 Vocab What is mitosis? | Cell division producing identical cells"></textarea>
|
|
||||||
<div class="row-actions">
|
|
||||||
<button type="button" id="deck-bulk-save">Import all decks</button>
|
|
||||||
<button type="button" id="deck-bulk-clear" class="secondary">Clear</button>
|
|
||||||
</div>
|
|
||||||
<p id="deck-bulk-status" class="hint" style="margin:0.4rem 0 0"></p>
|
|
||||||
</div>
|
</div>
|
||||||
</details>
|
<div class="panel-col">
|
||||||
|
<details id="deck-editor-details">
|
||||||
|
<summary id="deck-editor-title">New deck</summary>
|
||||||
|
<form id="deck-form" class="admin-card">
|
||||||
|
<input type="hidden" id="deck-id">
|
||||||
|
<input id="deck-name" placeholder="Deck name (e.g. State Capitals)" aria-label="Deck name">
|
||||||
|
<input id="deck-group" placeholder="Group (e.g. Bible 6)" aria-label="Group" list="deck-groups-datalist">
|
||||||
|
<datalist id="deck-groups-datalist"></datalist>
|
||||||
|
<textarea id="deck-cards" rows="8"
|
||||||
|
placeholder="One card per line: front | back What is the capital of Ohio? | Columbus"></textarea>
|
||||||
|
<div class="row-actions">
|
||||||
|
<button type="submit">Save deck</button>
|
||||||
|
<button type="button" id="deck-cancel" class="secondary">Clear</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</details>
|
||||||
|
<details id="deck-bulk-details">
|
||||||
|
<summary>Bulk import decks</summary>
|
||||||
|
<div class="admin-card">
|
||||||
|
<p class="hint" style="margin:0 0 0.5rem">Start each deck with <strong># Deck name</strong> on its own line, then cards below as <strong>front | back</strong>. Optional group applies to all imported decks.</p>
|
||||||
|
<input id="deck-bulk-group" placeholder="Group (e.g. Bible 6) — optional" aria-label="Group for bulk import" list="deck-groups-datalist">
|
||||||
|
<textarea id="deck-bulk-text" rows="12"
|
||||||
|
placeholder="# Chapter 1 Vocab What is photosynthesis? | The process plants use to make food What does chlorophyll do? | Absorbs light # Chapter 2 Vocab What is mitosis? | Cell division producing identical cells"></textarea>
|
||||||
|
<div class="row-actions">
|
||||||
|
<button type="button" id="deck-bulk-save">Import all decks</button>
|
||||||
|
<button type="button" id="deck-bulk-clear" class="secondary">Clear</button>
|
||||||
|
</div>
|
||||||
|
<p id="deck-bulk-status" class="hint" style="margin:0.4rem 0 0"></p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Settings -->
|
<!-- Settings -->
|
||||||
|
|||||||
+10
-1
@@ -333,11 +333,20 @@ table.results tr:nth-child(even) td { background: #faf7ee; }
|
|||||||
}
|
}
|
||||||
.admin-logo { font-size: 1.3rem; font-weight: 800; color: var(--ink); text-decoration: none; }
|
.admin-logo { font-size: 1.3rem; font-weight: 800; color: var(--ink); text-decoration: none; }
|
||||||
.admin-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; }
|
.admin-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; }
|
||||||
.admin-main { max-width: 900px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
|
.admin-main { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
|
||||||
.admin-main h1 { margin-bottom: 1rem; clear: both; }
|
.admin-main h1 { margin-bottom: 1rem; clear: both; }
|
||||||
.admin-main h2 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; }
|
.admin-main h2 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; }
|
||||||
.panel { text-align: left; }
|
.panel { text-align: left; }
|
||||||
|
|
||||||
|
/* 2-column layout for wide screens */
|
||||||
|
.panel-cols { display: flex; flex-direction: column; gap: 1.5rem; }
|
||||||
|
.panel-col { min-width: 0; }
|
||||||
|
@media (min-width: 1100px) {
|
||||||
|
.panel-cols { flex-direction: row; align-items: start; gap: 2.5rem; }
|
||||||
|
.panel-col { flex: 1; }
|
||||||
|
.panel-col:first-child { flex: 1.2; }
|
||||||
|
}
|
||||||
|
|
||||||
.admin-card {
|
.admin-card {
|
||||||
background: var(--card); border-radius: 14px; padding: 1.25rem;
|
background: var(--card); border-radius: 14px; padding: 1.25rem;
|
||||||
margin: 0.75rem 0; box-shadow: 0 2px 8px rgba(45, 49, 66, 0.06);
|
margin: 0.75rem 0; box-shadow: 0 2px 8px rgba(45, 49, 66, 0.06);
|
||||||
|
|||||||
Reference in new issue
Block a user