change order of elements in server list

This commit is contained in:
2023-05-06 13:12:48 +02:00
parent 6c7a502785
commit 76db4c262d
3 changed files with 7 additions and 8 deletions
+6 -7
View File
@@ -6,28 +6,27 @@
<div class="serverList">
<div class="serverHeaders">
<span></span>
<span>Server name</span>
<span>Map</span>
<span>Server name</span>
<span>Players</span>
<span>Kills</span>
<span>Max distance</span>
<span>Average distance</span>
<span>Players</span>
</div>
<VirtualList :list="serverList" :row-height="100" v-slot="slotProps">
<div
:class="'serverRow ' + (!nsServersByName[slotProps.data.name] ? 'offline ' : '') + (!nsServersByName[slotProps.data.name]?.playerCount ? 'inactive ' : '') + ((slotProps.index + 1) % 2 ? 'odd ' : 'uneven ')">
<div><span>{{ slotProps.index + 1 }}</span></div>
<div><span>{{ slotProps.data.name + (!nsServersByName[slotProps.data.name] ? ' (offline)' : '') }}</span></div>
<img v-if="nsServersByName[slotProps.data.name]"
:src="`${publicPath}maps/${nsServersByName[slotProps.data.name].map}_lobby.png`" />
<div v-if="!nsServersByName[slotProps.data.name]"></div>
<div><span>{{ slotProps.data.name + (!nsServersByName[slotProps.data.name] ? ' (offline)' : '') }}</span></div>
<div><span>{{ nsServersByName[slotProps.data.name] ? nsServersByName[slotProps.data.name]?.playerCount
+ '/' + nsServersByName[slotProps.data.name]?.maxPlayers : '' }}</span></div>
<div><span>{{ slotProps.data._value.deaths }}</span></div>
<div><span>{{ slotProps.data._value.max_distance }}</span></div>
<div><span>{{ Math.round(((slotProps.data._value.total_distance / slotProps.data._value.kills) || 0) * 100) /
100 }}</span></div>
<div><span>{{ nsServersByName[slotProps.data.name] ? nsServersByName[slotProps.data.name]?.playerCount
+ '/' + nsServersByName[slotProps.data.name]?.maxPlayers : '' }}</span></div>
</div>
</VirtualList>
@@ -102,7 +101,7 @@ export default defineComponent({
.serverHeaders {
box-sizing: border-box;
display: grid;
grid-template-columns: 4ch 20ch 178px 8ch 8ch 8ch 1fr;
grid-template-columns: 4ch 178px 20ch 8ch 8ch 8ch 1fr;
background: var(--bg-color);
text-align: left;
cursor: pointer;