Code and data for arewedecentralizedyet.online and related projects
Layout for the contributors list that is ... okay
+74
-75
+28
-46
www/css/index.css
+28
-46
www/css/index.css
···
60
60
}
61
61
62
62
.contributors-mini {
63
-
width: 230px;
64
-
margin: 0 auto;
63
+
margin-left: 8px;
64
+
margin-right: 8px;
65
65
margin-top: 6px;
66
-
font-size: 0.82em;
67
-
color: #a7a9ab;
68
66
}
69
67
70
68
.contributors-mini summary {
71
69
text-align: center;
72
-
font-size: 0.9em;
73
70
margin-bottom: 4px;
74
71
}
75
72
76
-
.contributors-icon {
77
-
width: 14px;
78
-
height: 14px;
73
+
.contributors-table caption {
74
+
text-align: center;
75
+
font-weight: bold;
79
76
}
80
77
81
-
.contributors-lists {
82
-
display: grid;
83
-
gap: 8px;
78
+
.contributors-table th.host, td.host {
79
+
text-align: left;
80
+
padding-left: 0px;
81
+
padding-right: 0px;
84
82
}
85
83
86
-
.contributors-subtitle {
87
-
text-align: left;
88
-
font-size: 0.9em;
89
-
margin: 4px 0 2px;
84
+
.contributors-table th.users, td.users, th.shannon, td.users {
85
+
text-align: right;
86
+
padding-left: 0px;
87
+
padding-right: 0px;
90
88
}
91
89
90
+
92
91
.contributors-table {
93
92
width: 100%;
93
+
max-width: 100%;
94
94
border-collapse: collapse;
95
95
table-layout: fixed;
96
96
}
97
97
98
-
.contributors-host {
99
-
text-align: left;
100
-
color: #f7f9fb;
101
-
white-space: nowrap;
102
-
overflow: hidden;
103
-
text-overflow: ellipsis;
98
+
.contributors-table col.fill {
99
+
width: 50%;
104
100
}
105
101
106
-
.contributors-delta {
107
-
color: #b0b2b6;
108
-
font-size: 0.9em;
109
-
text-align: right;
110
-
padding-left: 8px;
111
-
white-space: nowrap;
102
+
.contributors-table col.fit {
103
+
width: 25%;
112
104
}
113
105
114
-
.contributors-users {
115
-
color: #b0b2b6;
116
-
font-size: 0.9em;
117
-
text-align: right;
118
-
padding-left: 8px;
106
+
.contributors-table td.host {
107
+
text-align: left;
119
108
white-space: nowrap;
109
+
overflow: hidden;
110
+
text-overflow: ellipsis;
120
111
}
121
112
122
-
.contributors-table td.contributors-host {
123
-
text-align: left;
113
+
th {
114
+
text-align: left;
115
+
padding-right: 8px;
124
116
}
125
117
126
-
.contributors-table td.contributors-delta,
127
-
.contributors-table td.contributors-users {
128
-
text-align: right;
118
+
td {
119
+
text-align: right;
129
120
}
130
121
131
122
div.rating {
···
182
173
display: block;
183
174
margin-left: auto;
184
175
margin-right: auto;
185
-
}
186
-
187
-
th {
188
-
text-align: left;
189
-
padding-right: 10px;
190
-
}
191
-
192
-
td {
193
-
text-align: right;
194
176
}
195
177
196
178
table {
+46
-29
www/index.html
+46
-29
www/index.html
···
93
93
<div class="icon"><img data-trend-icon> <span data-trend-text></span></div>
94
94
<details class="contributors-mini">
95
95
<summary>Details</summary>
96
-
<div class="trend">Trend (week): <span data-trend-value></span> (<span data-trend-pct></span>%)</div>
97
-
<div class="contributors-lists">
98
-
<div class="contributors-list">
99
-
<div class="contributors-subtitle">Top decentralizers</div>
100
-
<table class="contributors-table" data-trend-list="increase">
101
-
<tbody></tbody>
102
-
</table>
103
-
</div>
96
+
<div class="trend">One-Week Trend: <span data-trend-value></span> (<span data-trend-pct></span>%)</div>
97
+
<div class="contributors-list">
98
+
<table class="contributors-table" data-trend-list="increase">
99
+
<caption>Top decentralizers</caption>
100
+
<colgroup>
101
+
<col class="fill">
102
+
<col class="fit">
103
+
<col class="fit">
104
+
</colgroup>
105
+
<thead>
106
+
<tr><th class="host">Host</th><th class="shannon">Change</th><th class="users">Users</th></td></tr>
107
+
</thead>
108
+
<tbody></tbody>
109
+
</table>
104
110
</div>
105
111
</details>
106
112
</div>
···
123
129
<div class="icon"><img data-trend-icon> <span data-trend-text></span></div>
124
130
<details class="contributors-mini">
125
131
<summary>Details</summary>
126
-
<div class="trend">Trend (week): <span data-trend-value></span> (<span data-trend-pct></span>%)</div>
127
-
<div class="contributors-lists">
128
-
<div class="contributors-list">
129
-
<div class="contributors-subtitle">Top decentralizers</div>
130
-
<table class="contributors-table" data-trend-list="increase">
131
-
<tbody></tbody>
132
-
</table>
133
-
</div>
132
+
<div class="trend">One-week Trend: <span data-trend-value></span> (<span data-trend-pct></span>%)</div>
133
+
<div class="contributors-list">
134
+
<table class="contributors-table" data-trend-list="increase">
135
+
<caption>Top decentralizers</caption>
136
+
<colgroup>
137
+
<col class="fill">
138
+
<col class="fit">
139
+
<col class="fit">
140
+
</colgroup>
141
+
<thead>
142
+
<tr><th class="host">Host</th><th class="shannon">Change</th><th class="users">Users</th></td></tr>
143
+
</thead>
144
+
<tbody></tbody>
145
+
</table>
134
146
</div>
135
147
</details>
136
148
</div>
···
202
214
<div class="icon"><img data-trend-icon> <span data-trend-text></span></div>
203
215
<details class="contributors-mini">
204
216
<summary>Details</summary>
205
-
<div class="trend">Trend (week): <span data-trend-value></span> (<span data-trend-pct></span>%)</div>
206
-
<div class="contributors-lists">
207
-
<div class="contributors-list">
208
-
<div class="contributors-subtitle">Top decentralizers</div>
209
-
<table class="contributors-table" data-trend-list="increase">
210
-
<tbody></tbody>
211
-
</table>
212
-
</div>
217
+
<div class="trend">One-Week Trend: <span data-trend-value></span> (<span data-trend-pct></span>%)</div>
218
+
<div class="contributors-list">
219
+
<table class="contributors-table" data-trend-list="increase">
220
+
<caption>Top decentralizers</caption>
221
+
<colgroup>
222
+
<col class="fill">
223
+
<col class="fit">
224
+
<col class="fit">
225
+
</colgroup>
226
+
<thead>
227
+
<tr><th class="host">Host</th><th class="shannon">Change</th><th class="users">Repos</th></td></tr>
228
+
</thead>
229
+
<tbody></tbody>
230
+
</table>
213
231
</div>
214
232
</details>
215
233
</div>
···
250
268
<div class="shannon">
251
269
<div class="index">Shannon Index: <span data-field="shannon"></span></div>
252
270
</div>
253
-
<div class="spacer"></div>
254
271
<table>
255
272
<tr><th>Services</th><td><span data-field="servers" data-format="commas"></span></td></tr>
256
273
<tr><th>Biggest</th><td><span data-field="biggest_abs" data-format="commas"></span></td><td>(<span data-field="biggest_pct"></span>%)</td></tr>
···
566
583
row.className = "contributors-row";
567
584
568
585
const hostCell = document.createElement("td");
569
-
hostCell.className = "contributors-host";
586
+
hostCell.className = "host";
570
587
hostCell.textContent = item.host;
571
588
hostCell.title = item.host;
572
589
573
590
const deltaCell = document.createElement("td");
574
-
deltaCell.className = "contributors-delta";
591
+
deltaCell.className = "shannon";
575
592
if (item.change !== undefined && item.change !== null) {
576
593
deltaCell.textContent = formatSignedFloat(item.change, 4);
577
594
}
578
595
579
596
const usersCell = document.createElement("td");
580
-
usersCell.className = "contributors-users";
597
+
usersCell.className = "users";
581
598
if (item.user_change !== undefined && item.user_change !== null) {
582
-
usersCell.textContent = `${formatSignedInt(item.user_change)} users`;
599
+
usersCell.textContent = `${formatSignedInt(item.user_change)}`;
583
600
}
584
601
585
602
row.append(hostCell, deltaCell, usersCell);