New time lists

src/components/MapDetails.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import TimesList from './TimesList.vue';
+  import TimesList from './TimeLists/TimesList.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import timeLinks from '@/utils/timeLinks';
   import type { Time } from '@/types/Time';
@@ -8,7 +8,7 @@
   import { Style } from "@/types/Style";
   import urlParams from '@/utils/urlParams';
   import { useRouter } from 'vue-router';
-  import TimesListPagination from './TimesListPagination.vue';
+  import TimesListPagination from './TimeLists/TimesListPagination.vue';
   const router = useRouter();
 
   const emit = defineEmits(['updateMap']);
@@ -42,28 +42,42 @@
       data: 'name',
       placement: true,
       width:'25%',
+      col:1,
+      colMobile:1,
+      widthMobile:'40%',
       alignmentClasses: 'text-left',
       link: timeLinks.playerLink
     }, 
     {
       label: 'Server',
       data: 'server',
       width: '30%',
+      col:2,
+      colMobile:1,
+      rowMobile:2,
       classes: 'text-sm text-gray-400',
       alignmentClasses: 'text-left text-gray-300'
     },
-    {
-      label: 'Date',
-      data: 'date',
-      width:'15%',
-      alignmentClasses: 'text-right justify-end',
-    },
     {
       label: 'Time',
       data: 'time',
       width: '30%',
+      col:3,
+      colMobile:2,
+      colSpanMobile:2,
+      rowMobile:1,
+      widthMobile:'20%',
       alignmentClasses: 'text-right justify-end monospace',
       numFormat: dateTimeFormats.time
+    },
+    {
+      label: 'Date',
+      data: 'date',
+      width:'15%',
+      col:4,
+      colMobile:3,
+      rowMobile:2,
+      alignmentClasses: 'text-right justify-end',
     }]"
     @refresh-data="() => emit('updateMap', props.mapName)"
     ></TimesList>

src/components/PlayerDetails.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import TimesList from './TimesList.vue';
+  import TimesList from './TimeLists/TimesList.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import timeLinks from '@/utils/timeLinks';
   import type { Time } from '@/types/Time';
@@ -14,7 +14,7 @@
   import OffstylesApi from '@/api/offstylesApi';
   import ModerationModal from './Moderation/ModerationModal.vue';
   import { useModerationStore, type ModerationTarget } from '@/stores/moderation';
-  import TimesListPagination from './TimesListPagination.vue';
+  import TimesListPagination from './TimeLists/TimesListPagination.vue';
   const router = useRouter();
 
   const emit = defineEmits(['updatePlayer']);
@@ -163,28 +163,41 @@
       label: 'Map',
       data: 'map',
       width:'25%',
+      col:1,
+      colMobile:1,
+      widthMobile:'35%',
       alignmentClasses: 'text-left',
       link: timeLinks.mapLink
     }, 
     {
       label: 'Server',
       data: 'server',
       width: '30%',
+      col:2,
+      colMobile:1,
+      rowMobile:2,
       classes: 'text-sm text-gray-400',
       alignmentClasses: 'text-left text-gray-300'
     },
-    {
-      label: 'Date',
-      data: 'date',
-      width:'15%',
-      alignmentClasses: 'text-right justify-end',
-    },
     {
       label: 'Time',
       data: 'time',
       width: '30%',
+      col:3,
+      colMobile:2,
+      colSpanMobile:2,
+      widthMobile:'20%',
       alignmentClasses: 'text-right justify-end monospace',
       numFormat: dateTimeFormats.time
+    },
+    {
+      label: 'Date',
+      data: 'date',
+      width:'15%',
+      col:4,
+      colMobile:3,
+      rowMobile:2,
+      alignmentClasses: 'text-right justify-end',
     }]"
     @refresh-data="() => emit('updatePlayer', props.playerSteamId)"
     ></TimesList>

src/components/RecentTimes.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import TimesList from './TimesList.vue';
+  import TimesList from './TimeLists/TimesList.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import timeLinks from '@/utils/timeLinks';
   import type { Time } from '@/types/Time';
@@ -10,7 +10,7 @@
   import urlParams from '@/utils/urlParams';
   import { useRouter } from 'vue-router';
   import CheckboxInput from './CheckboxInput.vue';
-  import TimesListPagination from './TimesListPagination.vue';
+  import TimesListPagination from './TimeLists/TimesListPagination.vue';
   import { ref, computed } from 'vue';
   import type { Ref } from 'vue';
 
@@ -25,62 +25,85 @@
 
   const currentStyle: Ref<number> = ref(urlParams.getAsObject().style ? Number(urlParams.getAsObject().style) : Style.all);
 
-  const showStyleColumn = computed(() => currentStyle.value === Style.all);
-
   const tableColumns = computed((): TimeListColumn[] => {
     const columns: TimeListColumn[] = [
       {
         label: 'Player',
         data: 'name',
-        width: showStyleColumn.value ? '18%' : '20%',
+        col:1,
+        row:1,
+        rowSpan:2,
+        colMobile: 1,
+        rowMobile: 1,
+        width: '20%',
+        widthMobile:'30%',
         classes: 'font-semibold',
         alignmentClasses: 'text-left',
         link: timeLinks.playerLink
       },
       {
         label: 'Map',
         data: 'map',
-        width: showStyleColumn.value ? '18%' : '20%',
+        col:2,
+        row:1,
+        colMobile:1,
+        colSpanMobile:2,
+        rowMobile:2,
+        width: '35%',
         classes: 'text-gray-200',
-        alignmentClasses: 'text-right justify-end md:justify-start md:text-left',
+        alignmentClasses: 'text-left justify-start',
         link: timeLinks.mapLink
-      }
-    ];
-
-    if (showStyleColumn.value) {
-      columns.push({
-        label: 'Style',
-        data: 'style',
-        width: '12%',
-        classes: 'text-sm text-gray-400',
-        alignmentClasses: 'text-right justify-end md:justify-start md:text-left',
-        numFormat: styleFormat.name
-      });
-    }
-
-    columns.push(
+      },
       {
         label: 'Server',
         data: 'server',
-        width: showStyleColumn.value ? '18%' : '20%',
-        classes: 'text-sm text-gray-400',
-        alignmentClasses: 'text-right justify-end md:justify-start md:text-left text-gray-300'
+        col:2,
+        row:2,
+        colMobile:1,
+        colSpanMobile:2,
+        rowMobile:3,
+        classes: 'text-xs text-gray-400',
+        alignmentClasses: 'justify-start text-left'
+      },
+      {
+        label: 'Time',
+        data: 'time',
+        col:3,
+        row:1,
+        rowSpan:2,
+        colMobile:2,
+        colSpanMobile:2,
+        rowMobile:1,
+        width: '30%',
+        widthMobile: '20%',
+        classes: 'monospace',
+        alignmentClasses: 'text-right justify-end lg:text-left lg:justify-start lg:ml-16',
+        numFormat: dateTimeFormats.time
+      },
+      {
+        label: 'Style',
+        data: 'style',
+        col:4,
+        row:1,
+        colMobile:3,
+        rowMobile:2,
+        width: '15%',
+        classes: '',
+        alignmentClasses: 'text-right justify-end',
+        numFormat: styleFormat.name
       },
       {
         label: 'Date',
         data: 'date',
-        width: showStyleColumn.value ? '12%' : '15%',
+        col:4,
+        row:2,
+        colMobile:3,
+        rowMobile:3,
+        classes: 'text-xs text-gray-400',
         alignmentClasses: 'text-right justify-end',
         numFormat: dateTimeFormats.date
       },
-      {
-        label: 'Time',
-        data: 'time',
-        width: showStyleColumn.value ? '22%' : '25%',
-        alignmentClasses: 'text-right justify-end monospace',
-        numFormat: dateTimeFormats.time
-      }
-    );
+    ];
 
     return columns;
   });

src/components/TimesList.vue → src/components/TimeLists/TimesList.vue

@@ -5,7 +5,7 @@ import TimesListItem from './TimesListItem.vue';
 import type { Time } from '@/types/Time';
 import type { TimeListColumn } from '@/types/TimeListColumn';
 import TimesListHeading from './TimesListHeading.vue';
-import BulkModerationModal from './Moderation/BulkModerationModal.vue';
+import BulkModerationModal from '../Moderation/BulkModerationModal.vue';
 import { useModerationStore } from '@/stores/moderation';
 
   const props = defineProps<{

src/components/TimeLists/TimesListHeading.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+  import type { TimeListColumn } from '@/types/TimeListColumn';
+  import TimesListHeadingColumn from './TimesListHeadingColumn.vue';
+  import { computed } from 'vue';
+  const props = defineProps<{
+      cols: TimeListColumn[]
+    }>();
+
+  const totalCols = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.col && v.colSpan ? v.col+v.colSpan : 1}));
+  })
+  const totalRows = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.row && v.rowSpan ? v.row+v.rowSpan : 1}));
+  })
+
+  const colWidthsStyle = computed(()=>{
+    return props.cols.filter((v)=>v.row === undefined || v.row === 1) //only first row
+    .sort((a,b)=>a.col - b.col) //sort into correct col order
+    .map((v)=>v.width ? v.width : 'auto').join(' '); //make css
+  })
+
+  const rowWidthsStyle = computed(()=>{
+    return '1fr'; 
+  })
+
+    const totalRowsMobile = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.rowMobile && v.rowSpanMobile ? v.rowMobile+v.rowSpanMobile : 1}));
+  })
+
+  const firstRowCols = computed(()=>{
+    return props.cols.filter((v)=>v.row === undefined || v.row === 1);
+  })
+
+  const colWidthsStyleMobile = computed(()=>{
+    return props.cols.filter((v)=>(v.rowMobile === undefined || v.rowMobile === 1)) //only first row
+    .sort((a,b)=>(a.colMobile ?? 1) - (b.colMobile ?? 1)) //sort into correct col order
+    .map((v)=>v.widthMobile ? v.widthMobile : 'auto').join(' '); //make css
+  })
+
+  const rowWidthsStyleMobile = computed(()=>{
+    return totalRowsMobile.value > 1 ? '1fr 0.5fr' : '1fr'; 
+  });
+</script>
+
+
+<template>
+  <div class="grid os-grid-cols-auto px-1 bg-main-900 fw-700 text-xs pt-1.5 pb-2 text-gray-200 items-center">
+    <TimesListHeadingColumn v-for="(col,index) in firstRowCols" :col="col" :key="index"></TimesListHeadingColumn>
+  </div>
+</template>
+
+<style scoped>
+  .os-grid-cols-auto{
+    grid-template-columns: v-bind('colWidthsStyle');
+    grid-template-rows: v-bind('rowWidthsStyle');
+  }
+  @media(max-width:767px){
+    .os-grid-cols-auto{
+      grid-template-columns: v-bind('colWidthsStyleMobile');
+      grid-template-rows: v-bind('rowWidthsStyleMobile');
+    }
+    .os-grid-cols-auto>.grid-col{
+      width:100%;
+    }
+    .os-grid-cols-auto>.grid-col:nth-child(1n){
+      text-align: left;
+      justify-content: left;
+    }
+    .os-grid-cols-auto>.grid-col:nth-child(2n){
+      text-align: right;
+      justify-content: right;
+    }
+    .os-grid-cols-auto>.grid-col:nth-child(2n+1):last-child{
+      grid-column:span 2;
+    }
+  }
+</style>

src/components/TimeLists/TimesListHeadingColumn.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import type { TimeListColumn } from '@/types/TimeListColumn';
+  import { computed } from 'vue';
+  const props = defineProps<{
+      col: TimeListColumn
+    }>();
+
+
+</script>
+
+
+<template>
+    <div class="px-1.5 time-grid-heading-col">
+      <div :class="`${col.alignmentClasses} ${col.row && col.row > 1 ? 'text-gray-500 leading-[1.17em]' : ''}`">{{ col.label }}</div>
+    </div>
+</template>
+
+<style scoped>
+.time-grid-heading-col{
+  grid-column: v-bind('`${col.col} / span ${col.colSpan ?? 1}`');
+  grid-row: v-bind('`${col.row ?? 1} / span ${col.rowSpan ?? 1}`')
+}
+@media (max-width:767px) {
+  .time-grid-heading-col{
+    grid-column: v-bind('`${col.colMobile ?? 1} / span ${col.colSpanMobile ?? 1}`');
+    grid-row: v-bind('`${col.rowMobile ?? 1} / span ${col.rowSpanMobile ?? 1}`')
+  }
+}
+</style>