ToneAPI/ToneAPI_webclient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout fixes for server view

Browse Source
This commit is contained in:
legonzaur
2023-05-06 12:44:59 +02:00
parent 54aaff2f74
commit 71698cd31c
1 changed files with 50 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/ServerView.vue
+50 -21
View File
@@ -2,24 +2,35 @@
<div id="filters"> <div id="filters">
</div> </div>
<div class="serverView">
<div class="serverList">
<div class="serverHeaders">
<span></span>
<span>Server name</span>
<span>Map</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`" />
<VirtualList :list="serverList" :row-height="100" v-slot="slotProps"> <div><span>{{ slotProps.data._value.deaths }}</span></div>
<div <div><span>{{ slotProps.data._value.max_distance }}</span></div>
:class="'serverRow ' + (!nsServersByName[slotProps.data.name] ? 'offline ' : '') + (!nsServersByName[slotProps.data.name]?.playerCount ? 'inactive ' : '') + ((slotProps.index + 1)%2 ? 'odd ':'uneven ')"> <div><span>{{ Math.round(((slotProps.data._value.total_distance / slotProps.data._value.kills) || 0) * 100) /
<div><span>{{ slotProps.index + 1 }}</span></div> 100 }}</span></div>
<div><span>{{ slotProps.data.name }}</span></div> <div><span>{{ nsServersByName[slotProps.data.name] ? nsServersByName[slotProps.data.name]?.playerCount
<div><span>{{ slotProps.data._value.kills }}</span></div> + '/' + nsServersByName[slotProps.data.name]?.maxPlayers : '' }}</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) / </div>
100 }}</span></div> </VirtualList>
<div><span>{{ nsServersByName[slotProps.data.name] ? nsServersByName[slotProps.data.name]?.playerCount
+ '/' + nsServersByName[slotProps.data.name]?.maxPlayers : '' }}</span></div>
<img v-if="nsServersByName[slotProps.data.name]"
:src="`${publicPath}maps/${nsServersByName[slotProps.data.name].map}_lobby.png`" />
</div> </div>
</VirtualList>
<div>
</div> </div>
</template> </template>
@@ -75,14 +86,22 @@ export default defineComponent({
} }
.offline { .offline {
color: var(--current-line); color: var(--comment);
}
.serverView{
margin: 0 1rem 1rem 1rem;
overflow:auto;
}
.serverList {
overflow-y: auto;
height: 100%;
} }
.serverRow, .serverRow,
.serverHeaders { .serverHeaders {
box-sizing: border-box; box-sizing: border-box;
display: grid; display: grid;
grid-template-columns: 5ch 40ch 7ch 7ch 7ch 7ch 1fr; grid-template-columns: 4ch 20ch 178px 8ch 8ch 8ch 1fr;
background: var(--bg-color); background: var(--bg-color);
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
@@ -92,6 +111,14 @@ export default defineComponent({
height: 100px; height: 100px;
} }
.serverHeaders {
height: 3em;
background: var(--current-line);
}
.serverHeaders > span {
padding: .5em .8em 0 .25em;
}
.serverRow.odd { .serverRow.odd {
background: var(--accent); background: var(--accent);
} }
@@ -104,12 +131,14 @@ export default defineComponent({
background: var(--current-line); background: var(--current-line);
} }
.serverRow>div{
padding: .5em .8em 0 .25em;
}
.serverRow>div:not(:last-child){ .serverRow>div:not(:last-child){
border-right: solid var(--bg-color) 2px; border-right: solid var(--bg-color) 2px;
} }
img { img {
object-fit: contain; object-fit: contain;
height: 100% height: 100%;
} }</style>
</style>