public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

style: move module pill to nav bar with lesson counter

Browse Source 
- Module pill now in game-controls between prev/next buttons
- Level indicator (e.g. "1 of 3") inside the pill
- Updated pill styling for nav bar context
This commit is contained in:
Michael Czechowski
2025-12-30 19:51:05 +01:00
parent e85df3d322
commit e34d7eb70a
2 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/index.html
View File

@@ -31,7 +31,6 @@
<div class="left-panel"> <div class="left-panel">
<section class="instructions"> <section class="instructions">
<h2 id="lesson-title" data-i18n="loading">Loading...</h2> <h2 id="lesson-title" data-i18n="loading">Loading...</h2>
<span class="module-pill" id="module-pill" data-i18n="loading">Loading...</span>
<div class="task-instruction" id="task-instruction"></div> <div class="task-instruction" id="task-instruction"></div>
<div class="lesson-description" id="lesson-description" data-i18n="selectLesson"> <div class="lesson-description" id="lesson-description" data-i18n="selectLesson">
Please select a lesson to begin. Please select a lesson to begin.
@@ -77,7 +76,10 @@
</div> </div>
<div class="game-controls"> <div class="game-controls">
<button id="prev-btn" class="btn" data-i18n="previous">Previous</button> <button id="prev-btn" class="btn" data-i18n="previous">Previous</button>
<div class="level-indicator" id="level-indicator">Level 0/0</div> <span class="module-pill" id="module-pill">
<span class="module-name" data-i18n="loading">Loading...</span>
<span class="level-indicator" id="level-indicator">1 of 3</span>
</span>
<button id="next-btn" class="btn btn-primary" data-i18n="next">Next</button> <button id="next-btn" class="btn btn-primary" data-i18n="next">Next</button>
</div> </div>
</div> </div>

26
src/main.css
View File

@@ -231,18 +231,28 @@ code, kbd {
} }
.module-pill { .module-pill {
display: inline-block; display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--primary-bg-medium); background: var(--primary-bg-medium);
color: var(--primary-color); color: var(--primary-color);
padding: 2px 10px; padding: 4px 12px;
border-radius: 12px; border-radius: 16px;
font-size: 0.75rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
margin-bottom: var(--spacing-xs); }
.module-name {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
.module-pill .level-indicator {
color: var(--primary-dark);
font-weight: 500;
opacity: 0.8;
}
#lesson-title { #lesson-title {
font-size: 1.25rem; font-size: 1.25rem;
color: var(--primary-dark); color: var(--primary-dark);
@@ -554,12 +564,6 @@ code, kbd {
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
} }
.level-indicator {
font-size: 0.9rem;
color: var(--light-text);
font-weight: 500;
}
/* ================= SIDEBAR ================= */ /* ================= SIDEBAR ================= */
.sidebar-backdrop { .sidebar-backdrop {
position: fixed; position: fixed;