Skip to content

Commit 7e6ce14

Browse files
aboseabose
committed
improve ui
1 parent c4fe8c4 commit 7e6ce14

File tree

2 files changed

+120
-112
lines changed

2 files changed

+120
-112
lines changed

‎docs/download-graphs.css‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
.toggle-switch {
2+
display: flex;
3+
flex-wrap: wrap;
4+
justify-content: space-between;
5+
padding: 10px;
6+
}
7+
8+
.toggle-label {
9+
cursor: pointer;
10+
flex-basis: calc(10%); /* Subtract gap size */
11+
text-align: center;
12+
}
13+
14+
.toggle-label input[type="radio"] {
15+
display: none;
16+
}
17+
18+
#versionSelector {
19+
padding: 2px;
20+
border-radius: 5px;
21+
border: 1px solid #ccc;
22+
background-color: white;
23+
outline: none; /* Removes the outline on focus */
24+
}
25+
26+
.toggle-label input[type="radio"] + span {
27+
display: block;
28+
padding: 8px 12px;
29+
background-color: #f1f1f1;
30+
border: 1px solid #ccc;
31+
border-radius: 5px;
32+
transition: all 0.3s ease;
33+
}
34+
35+
.toggle-label input[type="radio"]:checked + span {
36+
background-color: #4caf50;
37+
color: white;
38+
border: 1px solid #4caf50;
39+
}
40+
.switch {
41+
position: relative;
42+
display: inline-block;
43+
width: 110px; /* Increased width to accommodate labels */
44+
height: 33px;
45+
}
46+
47+
.switch input {
48+
opacity: 0;
49+
width: 0;
50+
height: 0;
51+
}
52+
53+
.slider {
54+
position: absolute;
55+
cursor: pointer;
56+
top: 0;
57+
left: 0;
58+
right: 0;
59+
bottom: 0;
60+
background-color: #ccc;
61+
transition: 0.4s;
62+
border-radius: 34px;
63+
display: flex;
64+
align-items: center;
65+
justify-content: right;
66+
padding: 0 10px;
67+
color: black;
68+
font-size: 12px;
69+
}
70+
71+
.slider:before {
72+
position: absolute;
73+
content: "";
74+
height: 26px;
75+
width: 26px;
76+
left: 4px;
77+
bottom: 4px;
78+
background-color: white;
79+
transition: 0.4s;
80+
border-radius: 50%;
81+
}
82+
83+
input:checked + .slider {
84+
background-color: limegreen;
85+
justify-content: left;
86+
}
87+
88+
input:checked + .slider:before {
89+
transform: translateX(73px); /* Adjusted for wider switch */
90+
}
91+
92+
.label {
93+
pointer-events: none; /* Disable events on labels to avoid interference */
94+
}
95+
96+
.daily {
97+
display: block;
98+
order: 2; /* Ensures it goes to the right when unchecked */
99+
}
100+
101+
.aggregate {
102+
display: none;
103+
}
104+
105+
input:checked + .slider .aggregate {
106+
display: block;
107+
order: 1; /* Ensures it goes to the left when checked */
108+
}
109+
110+
input:checked + .slider .daily {
111+
display: none;
112+
}

‎docs/download-graphs.html‎

Lines changed: 8 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -23,124 +23,20 @@
2323
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
2424
<script src=https://unpkg.com/compare-versions/lib/umd/index.js></script>
2525
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
26-
<style>
27-
.toggle-switch {
28-
display: flex;
29-
flex-wrap: wrap;
30-
justify-content: space-between;
31-
padding: 10px;
32-
}
33-
34-
.toggle-label {
35-
cursor: pointer;
36-
flex-basis: calc(10%); /* Subtract gap size */
37-
text-align: center;
38-
}
39-
40-
.toggle-label input[type="radio"] {
41-
display: none;
42-
}
43-
44-
.toggle-label input[type="radio"] + span {
45-
display: block;
46-
padding: 8px 12px;
47-
background-color: #f1f1f1;
48-
border: 1px solid #ccc;
49-
border-radius: 5px;
50-
transition: all 0.3s ease;
51-
}
52-
53-
.toggle-label input[type="radio"]:checked + span {
54-
background-color: #4CAF50;
55-
color: white;
56-
border: 1px solid #4CAF50;
57-
}
58-
.switch {
59-
position: relative;
60-
display: inline-block;
61-
width: 100px; /* Increased width to accommodate labels */
62-
height: 34px;
63-
}
64-
65-
.switch input {
66-
opacity: 0;
67-
width: 0;
68-
height: 0;
69-
}
70-
71-
.slider {
72-
position: absolute;
73-
cursor: pointer;
74-
top: 0;
75-
left: 0;
76-
right: 0;
77-
bottom: 0;
78-
background-color: #ccc;
79-
transition: .4s;
80-
border-radius: 34px;
81-
display: flex;
82-
align-items: center;
83-
justify-content: right;
84-
padding: 0 10px;
85-
color: black;
86-
font-size: 12px;
87-
}
88-
89-
.slider:before {
90-
position: absolute;
91-
content: "";
92-
height: 26px;
93-
width: 26px;
94-
left: 4px;
95-
bottom: 4px;
96-
background-color: white;
97-
transition: .4s;
98-
border-radius: 50%;
99-
}
100-
101-
input:checked + .slider {
102-
background-color: limegreen;
103-
justify-content: left;
104-
}
105-
106-
input:checked + .slider:before {
107-
transform: translateX(56px); /* Adjusted for wider switch */
108-
}
109-
110-
.label {
111-
pointer-events: none; /* Disable events on labels to avoid interference */
112-
}
113-
114-
.daily {
115-
display: block;
116-
order: 2; /* Ensures it goes to the right when unchecked */
117-
}
118-
119-
.aggregate {
120-
display: none;
121-
}
122-
123-
input:checked + .slider .aggregate {
124-
display: block;
125-
order: 1; /* Ensures it goes to the left when checked */
126-
}
127-
128-
input:checked + .slider .daily {
129-
display: none;
130-
}
131-
132-
</style>
26+
<link rel="stylesheet" href="download-graphs.css">
13327
</head>
13428
<body>
13529
<h1>Version Selector</h1>
136-
<select id="versionSelector"></select>
137-
<label class="switch">
138-
<input type="checkbox" id="toggleButton">
139-
<span class="slider">
30+
<div style="display: flex; width: 192px; justify-content: space-between;">
31+
<select id="versionSelector"></select>
32+
<label class="switch">
33+
<input type="checkbox" id="toggleButton" />
34+
<span class="slider">
14035
<span class="label daily">Daily</span>
14136
<span class="label aggregate">Aggregate</span>
14237
</span>
143-
</label>
38+
</label>
39+
</div>
14440
<h2>Show Last</h2>
14541
<div class="toggle-switch">
14642
<label class="toggle-label">

0 commit comments

Comments
 (0)