anton/visual-spending
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix center label positioning in responsive layout

Browse Source 
Added chart-wrapper div to contain both chart-container and center-label,
allowing the center-label to be positioned relative to the chart area
regardless of the overall layout (side-by-side or stacked).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Anton Volnuhin 2026-02-01 15:08:08 +03:00
parent c441d5979f
commit aaa05bf2c9
2 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -20,18 +20,20 @@
<select id="month-select" style="display: none;"></select> <select id="month-select" style="display: none;"></select>
</div> </div>
<div class="content-wrapper"> <div class="content-wrapper">
<div id="chart-container"></div> <div class="chart-wrapper">
<div id="center-label" class="center-label"> <div id="chart-container"></div>
<div class="center-month"></div> <div id="center-label" class="center-label">
<div class="center-category"></div> <div class="center-month"></div>
<div class="center-amount"><span class="center-amount-num"></span><span class="center-rub"></span></div> <div class="center-category"></div>
<div class="center-amount"><span class="center-amount-num"></span><span class="center-rub"></span></div>
</div>
<button id="chart-eye-btn" class="chart-eye-btn" title="View transactions">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
<circle cx="12" cy="12" r="3"/>
</svg>
</button>
</div> </div>
<button id="chart-eye-btn" class="chart-eye-btn" title="View transactions">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
<circle cx="12" cy="12" r="3"/>
</svg>
</button>
<div id="details-box" class="details-box"> <div id="details-box" class="details-box">
<div id="details-header" class="details-header"> <div id="details-header" class="details-header">
<span class="hover-name">Hover over a segment to see details</span> <span class="hover-name">Hover over a segment to see details</span>

14
styles.css
View File

@ -132,9 +132,15 @@ body {
position: relative; position: relative;
} }
#chart-container { .chart-wrapper {
position: relative;
width: 70%; width: 70%;
height: 80vh; height: 80vh;
}
#chart-container {
width: 100%;
height: 100%;
background-color: white; background-color: white;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@ -143,7 +149,7 @@ body {
/* Center label overlay */ /* Center label overlay */
.center-label { .center-label {
position: absolute; position: absolute;
left: 35%; /* Half of chart-container width (70% / 2) */ left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
text-align: left; text-align: left;
@ -329,9 +335,9 @@ body {
flex-direction: column; flex-direction: column;
} }
#chart-container { .chart-wrapper {
width: 100%; width: 100%;
height: 90lvw height: 90lvw;
} }
#details-box { #details-box {