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

header: move counters into brand block, compact 4-col filter grid (dates + search on row 2), unify all block backgrounds

Browse Source
This commit is contained in:
aaverbitskiy 2026-07-26 08:52:36 +00:00
parent d2ad928948
commit 053bf2587d
2 changed files with 45 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/index.html
View File

@ -8,11 +8,12 @@
<body>
<header>
<!-- Group 1: brand -->
<!-- Group 1: brand + counters -->
<div class="hgroup hgroup-brand">
<div class="brand">
<div class="brand-name">Green Media</div>
<div class="brand-sub">Адресная программа</div>
<div id="status"></div>
</div>
</div>
@ -25,42 +26,28 @@
</div>
</div>
<!-- Group 2: fields -->
<!-- Group 2: fields (4-column grid; dates + search on the 2nd row) -->
<div class="hgroup hgroup-fields">
<div class="fcol">
<div class="field">
<label>Город</label>
<div class="dropdown" id="city-dropdown">
<button type="button" class="dropdown-btn" id="city-btn">
<span id="city-btn-text">Все города</span>
<span class="caret">▾</span>
</button>
<div class="dropdown-panel" id="city-panel"></div>
</div>
</div>
<div class="field">
<label for="date-start">Дата начала (от)</label>
<input type="date" id="date-start" />
<div class="field">
<label>Город</label>
<div class="dropdown" id="city-dropdown">
<button type="button" class="dropdown-btn" id="city-btn">
<span id="city-btn-text">Все города</span>
<span class="caret">▾</span>
</button>
<div class="dropdown-panel" id="city-panel"></div>
</div>
</div>
<div class="fcol">
<div class="field">
<label>Бренд</label>
<div class="dropdown" id="brand-dropdown">
<button type="button" class="dropdown-btn" id="brand-btn">
<span id="brand-btn-text">Все бренды</span>
<span class="caret">▾</span>
</button>
<div class="dropdown-panel" id="brand-panel"></div>
</div>
</div>
<div class="field">
<label for="date-end">Дата окончания (до)</label>
<input type="date" id="date-end" />
<div class="field">
<label>Бренд</label>
<div class="dropdown" id="brand-dropdown">
<button type="button" class="dropdown-btn" id="brand-btn">
<span id="brand-btn-text">Все бренды</span>
<span class="caret">▾</span>
</button>
<div class="dropdown-panel" id="brand-panel"></div>
</div>
</div>
<div class="field">
<label>Размер</label>
<div class="dropdown" id="dimension-dropdown">
@ -71,7 +58,6 @@
<div class="dropdown-panel" id="dimension-panel"></div>
</div>
</div>
<div class="field">
<label>Менеджер</label>
<div class="dropdown" id="manager-dropdown">
@ -82,14 +68,21 @@
<div class="dropdown-panel" id="manager-panel"></div>
</div>
</div>
<div class="field">
<label for="date-start">Дата начала (от)</label>
<input type="date" id="date-start" />
</div>
<div class="field">
<label for="date-end">Дата окончания (до)</label>
<input type="date" id="date-end" />
</div>
<div class="field">
<label for="search">Поиск (адрес / код)</label>
<input type="text" id="search" placeholder="например, Азина" />
</div>
</div>
<!-- Group 3: checkboxes (2-column compact grid) -->
<!-- Group 3: checkboxes -->
<div class="hgroup hgroup-checks">
<div class="field checkbox-field">
<label for="show-brand"><input type="checkbox" id="show-brand" checked /> Бренд</label>
@ -102,7 +95,7 @@
</div>
</div>
<!-- Group 4: appearance settings (button stacked under the scale slider) -->
<!-- Group 4: appearance settings -->
<div class="hgroup hgroup-scale">
<div class="field zoom-field">
<label for="zoom-slider">Масштаб: <span id="zoom-label">12 месяцев</span></label>
@ -113,11 +106,6 @@
<div class="decor-menu" id="decor-menu"></div>
</div>
</div>
<!-- Group 5: counters, boxed inline with the other gray blocks -->
<div class="hgroup hgroup-status">
<div id="status"></div>
</div>
</header>
<div id="view" class="mode-timeline">

23
frontend/src/styles.css
View File

@ -51,13 +51,22 @@ header {
min-width: 0;
}
/* The fields group is the one that gives way first when space runs out. */
.hgroup-fields { flex-shrink: 4; min-width: 0; flex-wrap: wrap; align-content: flex-start; }
.hgroup-fields > .field,
.hgroup-fields > .fcol { flex: 1 1 160px; min-width: 160px; }
.hgroup-fields {
flex-shrink: 4; min-width: 0;
display: grid;
grid-template-columns: repeat(4, minmax(130px, 1fr));
gap: 10px 14px;
align-items: start;
align-content: start;
}
/* Compact grid: 4 dropdowns on row 1; the two dates + search fall to row 2. */
.hgroup-fields .field { min-width: 0; }
.hgroup-fields .dropdown,
.hgroup-fields .dropdown-btn,
.hgroup-fields input[type=text] { min-width: 0; width: 100%; }
.hgroup-brand { background: #eaeaea; }
.hgroup-fields input[type=text],
.hgroup-fields input[type=date] { min-width: 0; width: 100%; }
@media (max-width: 760px) { .hgroup-fields { grid-template-columns: repeat(2, minmax(120px, 1fr)); } }
.hgroup-brand { background: #f2f2f2; }
/* Fields group: top-align so the date input sits UNDER Город/Бренд. */
.hgroup-fields { align-items: flex-start; }
.fcol { display: flex; flex-direction: column; gap: 8px; }
@ -97,8 +106,8 @@ input[type=text] {
}
/* 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; }
/* Counters now live inside the brand block as a compact inset. */
.brand #status { margin-top: 10px; padding: 6px 10px; background: #fff; border: 1px solid #e2e2e2; border-radius: 6px; font-size: 12px; color: #666; line-height: 1.5; white-space: nowrap; }
/* Scale group: stack the "Оформление" button under the zoom slider. */
.hgroup-scale { flex-direction: column; align-items: flex-start; gap: 10px; }