Skip to content

Commit 0d00d80

Browse files
stronk-devstronk-dev
committed
Format accordion item
1 parent f8420a9 commit 0d00d80

File tree

2 files changed

+91
-29
lines changed

2 files changed

+91
-29
lines changed

‎src/components/WorldMap.css

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -86,21 +86,53 @@
8686
background-color: var(--button-hover-background);
8787
}
8888

89-
.accordion-item-header strong {
90-
overflow: hidden;
91-
text-overflow: ellipsis; /* Adds ellipsis for truncated content */
92-
white-space: nowrap; /* Prevents wrapping */
93-
}
94-
9589
.accordion-item-details {
96-
overflow: hidden;
97-
text-overflow: ellipsis; /* Adds ellipsis for truncated content */
98-
white-space: nowrap; /* Prevents wrapping */
99-
margin-top: 0.2em;
100-
padding: 0;
90+
padding: 15px;
10191
background-color: var(--darker);
10292
color: var(--text-color);
10393
border-top: 1px solid var(--border-color);
94+
display: flex;
95+
flex-direction: column;
96+
gap: 10px;
97+
overflow: hidden;
98+
text-overflow: ellipsis;
99+
white-space: nowrap;
100+
}
101+
102+
.accordion-item-details strong {
103+
overflow: hidden;
104+
text-overflow: ellipsis;
105+
white-space: nowrap;
106+
}
107+
108+
.accordion-item-row {
109+
display: flex;
110+
justify-content: space-between;
111+
padding: 5px 0;
112+
overflow: hidden;
113+
text-overflow: ellipsis;
114+
white-space: nowrap;
115+
}
116+
117+
.item-key {
118+
font-weight: bold;
119+
flex: 1;
120+
text-align: left;
121+
}
122+
123+
.item-value {
124+
flex: 2;
125+
text-align: right;
126+
overflow: hidden;
127+
text-overflow: ellipsis;
128+
white-space: nowrap;
129+
}
130+
131+
.accordion-section-title {
132+
font-weight: bold;
133+
margin-top: 15px;
134+
margin-bottom: 5px;
135+
color: var(--heading-color);
104136
}
105137

106138
/* Map controls styling */

‎src/components/WorldMap.js

Lines changed: 48 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -35,26 +35,56 @@ const AccordionItem = ({ instanceScore, orchObj, instanceObj, startExpanded }) =
3535
{isExpanded && (
3636
<div className="accordion-item-details">
3737
<strong>{orchObj.id}</strong>
38-
<div><strong>KPI score:</strong> {(instanceScore * 100).toFixed(1)}%</div>
38+
<div className="accordion-item-row">
39+
<span className="item-key">KPI Score:</span>
40+
<span className="item-value">{(instanceScore * 100).toFixed(1)}%</span>
41+
</div>
3942
<hr />
40-
<strong>Global Stats:</strong>
41-
<p>Discovery Time: {orchObj.avgDiscoveryTime.toPrecision(3)} ms</p>
42-
<p>Price: {orchObj.avgPrice.toPrecision(3)}</p>
43-
<p>RTR: {orchObj.avgRTR.toFixed(1)}</p>
44-
<p>SR: {orchObj.avgSR.toFixed(1)}</p>
43+
<div className="accordion-section-title">Global Stats:</div>
44+
<div className="accordion-item-row">
45+
<span className="item-key">Discovery Time:</span>
46+
<span className="item-value">{orchObj.avgDiscoveryTime.toPrecision(3)} ms</span>
47+
</div>
48+
<div className="accordion-item-row">
49+
<span className="item-key">Price:</span>
50+
<span className="item-value">{orchObj.avgPrice.toPrecision(3)} PPP</span>
51+
</div>
52+
<div className="accordion-item-row">
53+
<span className="item-key">RTR:</span>
54+
<span className="item-value">{orchObj.avgRTR.toFixed(1)}</span>
55+
</div>
56+
<div className="accordion-item-row">
57+
<span className="item-key">SR:</span>
58+
<span className="item-value">{(orchObj.avgSR * 100).toFixed(1)}%</span>
59+
</div>
4560
<hr />
46-
<strong>Instance Stats:</strong>
47-
<p>IP: {instanceObj.id}</p>
48-
<div>Last Ping: <TimeAgo
49-
date={instanceObj.lastPing}
50-
component={"p"}
51-
minPeriod={60}
52-
style={{}}
53-
/></div>
54-
<p>Discovery Time: {instanceObj.bestDiscoveryTime.toPrecision(3)} ms</p>
55-
<p>Price: {instanceObj.price.toPrecision(3)}</p>
56-
<p>RTR: {instanceObj.avgRTR.toFixed(1)}</p>
57-
<p>SR: {instanceObj.avgSR.toFixed(1)}</p>
61+
<div className="accordion-section-title">Instance Stats:</div>
62+
<div className="accordion-item-row">
63+
<span className="item-key">IP:</span>
64+
<span className="item-value">{instanceObj.id}</span>
65+
</div>
66+
<div className="accordion-item-row">
67+
<span className="item-key">Last Ping:</span>
68+
<span className="item-value">
69+
<TimeAgo date={instanceObj.lastPing} component={"p"} minPeriod={60} />
70+
</span>
71+
</div>
72+
<div className="accordion-item-row">
73+
<span className="item-key">Discovery Time:</span>
74+
<span className="item-value">{instanceObj.bestDiscoveryTime.toPrecision(3)} ms</span>
75+
</div>
76+
<div className="accordion-item-row">
77+
<span className="item-key">Price:</span>
78+
<span className="item-value">{instanceObj.price.toPrecision(3)} PPP</span>
79+
</div>
80+
<div className="accordion-item-row">
81+
<span className="item-key">RTR:</span>
82+
<span className="item-value">{instanceObj.avgRTR.toFixed(1)}</span>
83+
</div>
84+
<div className="accordion-item-row">
85+
<span className="item-key">SR:</span>
86+
<span className="item-value">{(instanceObj.avgSR * 100).toFixed(1)}%</span>
87+
</div>
5888
<hr />
5989
<div><strong>Probed From:</strong> {instanceObj.probedFrom.map((location) => <p>{location}</p>)}</div>
6090
</div>

0 commit comments

Comments
 (0)