aaverbitskiy/mapdash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header layout: checkbox column (3 rows), Оформление under scale slider, counters as inline gray block

Browse Source
This commit is contained in:
aaverbitskiy 2026-07-21 10:24:07 +00:00
parent 66e501ef59
commit 23f5ce8b1a
2 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/index.html
View File

@ -82,8 +82,8 @@
</div> </div>
</div> </div>
<!-- Group 4: appearance settings --> <!-- Group 4: appearance settings (button stacked under the scale slider) -->
<div class="hgroup"> <div class="hgroup hgroup-scale">
<div class="field zoom-field"> <div class="field zoom-field">
<label for="zoom-slider">Масштаб: <span id="zoom-label">12 месяцев</span></label> <label for="zoom-slider">Масштаб: <span id="zoom-label">12 месяцев</span></label>
<input type="range" id="zoom-slider" min="0" max="9" step="1" value="3" /> <input type="range" id="zoom-slider" min="0" max="9" step="1" value="3" />
@ -94,7 +94,10 @@
</div> </div>
</div> </div>
<!-- Group 5: counters, boxed inline with the other gray blocks -->
<div class="hgroup hgroup-status">
<div id="status"></div> <div id="status"></div>
</div>
</header> </header>
<div id="chart-wrap"> <div id="chart-wrap">

23
frontend/src/styles.css
View File

@ -56,14 +56,16 @@ input[type=date] {
min-width: 180px; min-width: 180px;
box-sizing: border-box; box-sizing: border-box;
} }
/* Compact 2-column layout for the checkbox group. */ /* Compact single-column layout: the three checkboxes stack in three rows so the
block takes as little horizontal space as possible. */
.hgroup-checks { .hgroup-checks {
display: grid; display: flex;
grid-template-columns: auto auto; flex-direction: column;
column-gap: 18px; align-items: flex-start;
row-gap: 4px; justify-content: center;
align-content: center; gap: 6px;
} }
.hgroup-checks .checkbox-field { align-self: flex-start; }
.brand { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; } .brand { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.brand-name { font-size: 18px; font-weight: 700; white-space: nowrap; } .brand-name { font-size: 18px; font-weight: 700; white-space: nowrap; }
@ -78,7 +80,14 @@ input[type=text] {
font-size: 13px; font-size: 13px;
min-width: 180px; min-width: 180px;
} }
#status { font-size: 12px; color: #888; margin-left: auto; align-self: center; line-height: 1.4; text-align: right; } /* Counters as a compact gray block, pushed to the end of the header row so it
sits in line with the other boxed groups instead of floating below. */
.hgroup-status { margin-left: auto; align-items: center; }
#status { font-size: 12px; color: #888; line-height: 1.4; white-space: nowrap; }
/* Scale group: stack the "Оформление" button under the zoom slider. */
.hgroup-scale { flex-direction: column; align-items: flex-start; gap: 10px; }
.hgroup-scale .decor-wrap { align-self: flex-start; }
.checkbox-field { flex-direction: row; align-items: center; gap: 6px; align-self: center; } .checkbox-field { flex-direction: row; align-items: center; gap: 6px; align-self: center; }
.checkbox-field label { .checkbox-field label {