Commit ec83cae7 authored by intrigeri's avatar intrigeri
Browse files

Merge remote-tracking branch 'origin/web/15971-expenses' (Closes: #15971)

parents aba22e28 c8100732
......@@ -166,3 +166,56 @@ span.title {
#currency, #dollars-without-js h2, #euros-without-js {
display: none;
}
/* Expenses chart */
figure {
display: flex;
flex-direction: column;
}
@media (min-width: 640px) {
figure {
flex-direction: row;
}
}
.figure-content,
.figure-key {
flex: 1;
padding-left: 15px;
padding-right: 15px;
align-self: center;
}
.figure-content svg {
height: auto;
}
.figure-key-list {
margin: 0;
padding: 0;
list-style: none;
}
.figure-key-list li {
margin: 0 0 8px;
padding: 0;
font-size: 14px;
font-weight: bold;
}
.figure-key-list li div {
display: inline-block;
}
.key-dot {
display: inline-block;
vertical-align: top;
margin-top: 2px;
width: 18px;
height: 18px;
}
.key-label {
margin: 0 0.5em;
}
#key-releases .key-dot { background-color: #5da5da; }
#key-admin .key-dot { background-color: #faa43a; }
#key-features .key-dot { background-color: #60bd68; }
#key-infrastructure .key-dot { background-color: #f17cb0; }
#key-help .key-dot { background-color: #b2912f; }
#key-meetings .key-dot { background-color: #b276b2; }
#key-ux .key-dot { background-color: #decf3f; }
......@@ -461,7 +461,33 @@ permitted by law.</strong></p>
<h3>How we spend our money</h3>
<p>[[!img expenses.png link="no"]]</p>
<figure>
<!-- Adapted from https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72 -->
<div class="figure-content">
<svg width="75%" height="75%" viewBox="0 0 64 64">
<!-- stroke-dashoffset = 100 - sum(lengths of preceding segments) + offset of 1st segment -->
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#5da5da" stroke-width="32" stroke-dasharray="22 78" stroke-dashoffset="25" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#faa43a" stroke-width="32" stroke-dasharray="22 78" stroke-dashoffset="103" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#60bd68" stroke-width="32" stroke-dasharray="21 79" stroke-dashoffset="81" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#f17cb0" stroke-width="32" stroke-dasharray="10 90" stroke-dashoffset="60" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#b2912f" stroke-width="32" stroke-dasharray="10 90" stroke-dashoffset="50" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#b276b2" stroke-width="32" stroke-dasharray="10 90" stroke-dashoffset="40" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#decf3f" stroke-width="32" stroke-dasharray="5 95" stroke-dashoffset="30" aria-labelledby=""></circle>
</svg>
</div>
<figcaption class="figure-key">
<ul class="figure-key-list">
<li id="key-releases"><div class="key-dot"></div><div class="key-label">Releases & core code maintenance</div><div class="key-percent">(22%)</div></li>
<li id="key-admin"><div class="key-dot"></div><div class="key-label">Administration & management</div><div class="key-percent">(22%)</div></li>
<li id="key-features"><div class="key-dot"></div><div class="key-label">New features</div><div class="key-percent">(21%)</div></li>
<li id="key-infrastructure"><div class="key-dot"></div><div class="key-label">Infrastructure</div><div class="key-percent">(10%)</div></li>
<li id="key-help"><div class="key-dot"></div><div class="key-label">Help desk</div><div class="key-percent">(10%)</div></li>
<li id="key-meetings"><div class="key-dot"></div><div class="key-label">Meetings</div><div class="key-percent">(10%)</div></li>
<li id="key-ux"><div class="key-dot"></div><div class="key-label">User experience & documentation</div><div class="key-percent">(5%)</div></li>
</ul>
</figcaption>
</figure>
<p>Our financial records are available [[here|doc/about/finances]].</p>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment