change order of elements in server list

public/servers.html

@@ -7,7 +7,7 @@
     <meta content="Servers : Tone API" property="og:title" />
     <meta content="Northstar servers kills statistics" property="og:description" />
     <meta content="https://toneapi.github.io/ToneAPI_webclient/servers" property="og:url" />
-    <meta content="https://toneapi.github.io/ToneAPI_webclient/server_og_image.png" property="og:image" />
+    <meta content="https://toneapi.github.io/ToneAPI_webclient/server_og_image.png?" property="og:image" />
 	<meta name="twitter:card" content="summary_large_image">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>

src/views/ServerView.vue

@@ -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;