Skip to content

Commit 027e166

Browse files
RIGAT-Pierre-andre-2326090parRIGAT-Pierre-andre-2326090par
committed
Refactor heatmap UI: update 3d render interface for a better responsive
1 parent d399452 commit 027e166

2 files changed

Lines changed: 45 additions & 43 deletions

File tree

‎_includes/heatmap.html‎

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -19,41 +19,39 @@
1919
</style>
2020

2121
<!-- the interface of the 3d render, with 2 home-made select -->
22-
<div class="buffer">
23-
<div id="interface">
24-
<!-- the first select -->
25-
<div class="select active" id="hand-select" role="select">
26-
<input class="select-checkbox" id="hand-select-checkbox" type="checkbox">
27-
<!-- the select content, the checkbox allow the switch for the display of the options -->
28-
<label for="hand-select-checkbox" style="display: flex; justify-content: space-between">
29-
<span id="hand-selected">{{ e.total }}</span>
30-
<img alt="arrow_down" src="/assets/img/arrow_down.png" style="aspect-ratio: 1 / 1; height: 1.6em;">
31-
</label>
32-
<!-- the select options -->
33-
<div class="select-options" id="hand-select-options">
34-
<span class="select-option choose">{{ e.total }}</span>
35-
<span class="select-option">{{ e.preferred }}</span>
36-
<span class="select-option">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.hand }}</span>
37-
<span class="select-option">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.hand }}</span>
38-
</div>
22+
<div id="interface">
23+
<!-- the first select -->
24+
<div class="select active" id="hand-select" role="select">
25+
<input class="select-checkbox" id="hand-select-checkbox" type="checkbox">
26+
<!-- the select content, the checkbox allow the switch for the display of the options -->
27+
<label for="hand-select-checkbox" style="display: flex; justify-content: space-between">
28+
<span id="hand-selected">{{ e.total }}</span>
29+
<img alt="arrow_down" src="/assets/img/arrow_down.png" style="aspect-ratio: 1 / 1; height: 1.6em;">
30+
</label>
31+
<!-- the select options -->
32+
<div class="select-options" id="hand-select-options">
33+
<span class="select-option choose">{{ e.total }}</span>
34+
<span class="select-option">{{ e.preferred }}</span>
35+
<span class="select-option">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.hand }}</span>
36+
<span class="select-option">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.hand }}</span>
3937
</div>
40-
<!-- the second select -->
41-
<div class="select" id="finger-select" role="select">
42-
<input class="select-checkbox" id="finger-select-checkbox" type="checkbox">
43-
<!-- the select content, the checkbox allow the switch for the display of the options -->
44-
<label for="finger-select-checkbox" style="display: flex; justify-content: space-between">
45-
<span id="finger-selected">{{ e.all_button }}</span>
46-
<img alt="arrow_down" src="/assets/img/arrow_down.png" style="aspect-ratio: 1 / 1; height: 1.6em;">
47-
</label>
48-
<!-- the select options -->
49-
<div class="select-options" id="finger-select-options">
50-
<span class="select-option choose">{{ e.all_button }}</span>
51-
<span class="select-option">{{ e.thumb }}</span>
52-
<span class="select-option">{{ e.index }}</span>
53-
<span class="select-option">{{ e.middle }}</span>
54-
<span class="select-option">{{ e.ring }}</span>
55-
<span class="select-option">{{ e.little }}</span>
56-
</div>
38+
</div>
39+
<!-- the second select -->
40+
<div class="select" id="finger-select" role="select">
41+
<input class="select-checkbox" id="finger-select-checkbox" type="checkbox">
42+
<!-- the select content, the checkbox allow the switch for the display of the options -->
43+
<label for="finger-select-checkbox" style="display: flex; justify-content: space-between">
44+
<span id="finger-selected">{{ e.all_button }}</span>
45+
<img alt="arrow_down" src="/assets/img/arrow_down.png" style="aspect-ratio: 1 / 1; height: 1.6em;">
46+
</label>
47+
<!-- the select options -->
48+
<div class="select-options" id="finger-select-options">
49+
<span class="select-option choose">{{ e.all_button }}</span>
50+
<span class="select-option">{{ e.thumb }}</span>
51+
<span class="select-option">{{ e.index }}</span>
52+
<span class="select-option">{{ e.middle }}</span>
53+
<span class="select-option">{{ e.ring }}</span>
54+
<span class="select-option">{{ e.little }}</span>
5755
</div>
5856
</div>
5957
</div>

‎assets/css/heatmap.css‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,20 +42,13 @@
4242
cursor: grabbing;
4343
}
4444

45-
.buffer {
46-
height: 4rem;
47-
}
48-
4945
#interface {
50-
position: absolute;
51-
left: 50%;
52-
transform: translateX(-50%);
5346
display: flex;
54-
align-items: flex-start;
47+
justify-content: center;
48+
align-items: center;
5549
pointer-events: auto;
5650
gap: 2em;
5751
user-select: none;
58-
/*max-height: 80vh;*/
5952
}
6053

6154
.select-option:hover, .select-option.choose, #reset-view-btn:hover {
@@ -95,6 +88,17 @@ label {
9588
flex-direction: column;
9689
color: #383838;
9790
background-color: white;
91+
92+
transform: translateX(calc(-.5em - 1px));
93+
94+
position: absolute;
95+
width: inherit;
96+
padding: inherit;
97+
border-left: 1px solid #e8e8e8;
98+
border-right: 1px solid #e8e8e8;
99+
border-bottom: 1px solid #e8e8e8;
100+
border-bottom-left-radius: .5em;
101+
border-bottom-right-radius: .5em;
98102
}
99103

100104
.select-option {

0 commit comments

Comments
 (0)