new: [front:scores] Automatically resize score table if large amount of users

src/TheDahboard.vue

@@ -19,6 +19,8 @@ onMounted(() => {
 </script>
 
 <template>
+  <div class="mb-3">
     <TheScores></TheScores>
     <TheLiveLogs></TheLiveLogs>
+  </div>
 </template>

src/components/LiveLogsUserActivityGraph.vue

@@ -3,7 +3,7 @@
   import { userActivity, userActivityConfig } from "@/socket";
   import { darkModeEnabled } from "@/settings.js"
 
-  const props = defineProps(['user_id'])
+  const props = defineProps(['user_id', 'compact_view'])
 
   const theChart = ref(null)
   const bufferSize = computed(() => userActivityConfig.value.activity_buffer_size)
@@ -54,14 +54,14 @@
 
 <template>
   <span
-    class="h-3 w-56"
+    :class="`w-56 ${props.compact_view ? 'h-1 inline-flex' : 'h-3'}`"
     :title="`Activity over ${bufferSizeMin}min`"
   >
     <span
       v-for="(value, i) in chartSeries"
       :key="i"
-      :class="[`inline-block h-3 rounded-[1px] mr-px`, `bg-${palleteColor}-${getPalleteIndexFromValue(value)}`]"
+      :class="[`inline-block rounded-[1px] mr-px`, props.compact_view ? 'h-1' : 'h-3', `bg-${palleteColor}-${getPalleteIndexFromValue(value)}`]"
-      :style="`width: ${parseInt((224 - chartSeries.length) / chartSeries.length)}px`"
+      :style="`width: ${((224 - chartSeries.length) / chartSeries.length).toFixed(1)}px`"
     ></span>
   </span>
 </template>

src/components/TheScores.vue

@@ -1,6 +1,6 @@
 <script setup>
   import { ref, computed } from "vue";
-  import { active_exercises as exercises, progresses, setCompletedState } from "@/socket";
+  import { active_exercises as exercises, progresses, userCount, setCompletedState } from "@/socket";
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
   import { faCheck, faTimes, faGraduationCap, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
   import LiveLogsUserActivityGraph from "./LiveLogsUserActivityGraph.vue"
@@ -20,6 +20,7 @@
     }
   }
 
+  const compactTable = computed(() => { return userCount.value > 20 })
   const hasExercises = computed(() => exercises.value.length > 0)
   const hasProgress = computed(() => Object.keys(progresses.value).length > 0)
   const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => {
@@ -102,13 +103,16 @@
                   <span class="text-lg font-bold font-mono leading-5 tracking-tight">{{ progress.email.split('@')[0] }}</span>
                   <span class="text-xs font-mono tracking-tight">@{{ progress.email.split('@')[1] }}</span>
                 </span>
-                <LiveLogsUserActivityGraph :user_id="progress.user_id"></LiveLogsUserActivityGraph>
+                <LiveLogsUserActivityGraph
+                  :user_id="progress.user_id"
+                  :compact_view="compactTable"
+                ></LiveLogsUserActivityGraph>
               </span>
             </td>
             <td
               v-for="(task, task_index) in exercise.tasks"
               :key="task_index"
-              class="text-center border-b border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 p-2"
+              :class="`text-center border-b border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 ${compactTable ? 'p-0' : 'p-2'}`"
             >
             <span
               class="select-none cursor-pointer flex justify-center content-center flex-wrap h-9"