X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;ds=sidebyside;f=ui%2Fweb%2Fsrc%2Fcomponents%2Fcharging-stations%2FCSTable.vue;h=3d9efbbf2471cb1239f3e64c51262923f8d45021;hb=a64b9a64f0cb3b2b9b07ec38ec4001dcc7024a60;hp=6fcf74683384943a8370ad6767adec8ca196ebc4;hpb=1d41bc6b533ef7361954f472811263c24cd6f64b;p=e-mobility-charging-stations-simulator.git

diff --git a/ui/web/src/components/charging-stations/CSTable.vue b/ui/web/src/components/charging-stations/CSTable.vue
index 6fcf7468..3d9efbbf 100644
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -1,14 +1,10 @@
 <template>
   <table id="cs-table">
-    <caption>
-      Charging stations
+    <caption id="cs-table__caption">
+      Charging Stations
     </caption>
     <thead id="cs-table__head">
       <tr class="cs-table__row">
-        <th scope="col" class="cs-table__column">Action</th>
-        <th scope="col" class="cs-table__column">Connector</th>
-        <th scope="col" class="cs-table__column">Status</th>
-        <th scope="col" class="cs-table__column">Transaction</th>
         <th scope="col" class="cs-table__column">Name</th>
         <th scope="col" class="cs-table__column">Started</th>
         <th scope="col" class="cs-table__column">Supervision Url</th>
@@ -17,7 +13,9 @@
         <th scope="col" class="cs-table__column">Template</th>
         <th scope="col" class="cs-table__column">Vendor</th>
         <th scope="col" class="cs-table__column">Model</th>
-        <th scope="col" class="cs-table__column">Firmware Version</th>
+        <th scope="col" class="cs-table__column">Firmware</th>
+        <th scope="col" class="cs-table__column">Actions</th>
+        <th scope="col" class="cs-table__connectors-column">Connector(s)</th>
       </tr>
     </thead>
     <tbody id="cs-table__body">
@@ -32,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-import CSData from './CSData.vue'
+import CSData from '@/components/charging-stations/CSData.vue'
 import type { ChargingStationData } from '@/types'
 
 const props = defineProps<{
@@ -61,8 +59,12 @@ const props = defineProps<{
   flex-direction: column;
 }
 
-#cs-table__body {
-  overflow: visible overlay;
+#cs-table__caption {
+  color: white;
+  background-color: black;
+  font-size: 1.5rem;
+  font-weight: bold;
+  padding: 0.5rem;
 }
 
 .cs-table__row {
@@ -74,16 +76,22 @@ const props = defineProps<{
 }
 
 #cs-table__head .cs-table__row {
-  background-color: rgb(194, 188, 188);
+  background-color: lightgrey;
 }
 
 .cs-table__row:nth-of-type(even) {
-  background-color: rgb(223, 217, 217);
+  background-color: whitesmoke;
 }
 
 .cs-table__column {
   height: fit-content;
-  width: calc(100% / 13);
+  width: calc(65% / 10);
+  text-align: center;
+}
+
+.cs-table__connectors-column {
+  height: fit-content;
+  width: 35%;
   text-align: center;
 }
 </style>