From a0fbd7aa9bdfe52a040de8b5cd48e4f05e9077ab Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Fri, 12 Jul 2024 15:03:40 +0200
Subject: [PATCH] new: [front:scores] Added support of ultra-compact view in
 fullscreen mode

---
 src/components/LiveLogsUserActivityGraph.vue  |  6 +++---
 .../scoreViews/TheFullScreenScoreGrid.vue     | 19 ++++++++++++-------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/LiveLogsUserActivityGraph.vue b/src/components/LiveLogsUserActivityGraph.vue
index 746d3cd..30e0f2e 100644
--- a/src/components/LiveLogsUserActivityGraph.vue
+++ b/src/components/LiveLogsUserActivityGraph.vue
@@ -3,7 +3,7 @@
   import { userActivity, userActivityConfig } from "@/socket";
   import { darkModeEnabled } from "@/settings.js"
 
-  const props = defineProps(['user_id', 'compact_view'])
+  const props = defineProps(['user_id', 'compact_view', 'ultra_compact_view'])
 
   const theChart = ref(null)
   const bufferSize = computed(() => userActivityConfig.value.activity_buffer_size)
@@ -54,14 +54,14 @@
 
 <template>
   <span
-    :class="`w-60 ${props.compact_view ? 'h-1.5 inline-flex' : 'h-3'}`"
+    :class="`${props.ultra_compact_view ? 'w-[120px]' : 'w-60'} ${props.compact_view ? 'h-1.5 inline-flex' : 'h-3'}`"
     :title="`Activity over ${bufferSizeMin}min`"
   >
     <span
       v-for="(value, i) in chartSeries"
       :key="i"
       :class="[`inline-block rounded-[1px] mr-px`, props.compact_view ? 'h-1.5' : 'h-3', `bg-${palleteColor}-${getPalleteIndexFromValue(value)}`]"
-      :style="`width: ${((240 - chartSeries.length) / chartSeries.length).toFixed(1)}px`"
+      :style="`width: ${(((props.ultra_compact_view ? 120 : 240) - chartSeries.length) / chartSeries.length).toFixed(1)}px`"
     ></span>
   </span>
 </template>
\ No newline at end of file
diff --git a/src/components/scoreViews/TheFullScreenScoreGrid.vue b/src/components/scoreViews/TheFullScreenScoreGrid.vue
index b8668f9..8447458 100644
--- a/src/components/scoreViews/TheFullScreenScoreGrid.vue
+++ b/src/components/scoreViews/TheFullScreenScoreGrid.vue
@@ -95,6 +95,7 @@
     }
   }
 
+  const compactGrid = computed(() => { return userCount.value > 70 })
   const hasProgress = computed(() => Object.keys(progresses.value).length > 0)
   const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => {
     if (a.email < b.email) {
@@ -140,6 +141,7 @@
           dark:bg-blue-800 bg-blue-500 dark:text-slate-300 text-slate-100
         "
       >
+        <!-- Modal header -->
         <div class="flex justify-between items-center">
           <span class="text-lg font-semibold">{{ exercise.name }}</span>
           <span class="mr-8">
@@ -153,6 +155,7 @@
         </div>
       </div>
 
+      <!-- Tasks name and pie charts -->
       <div class="p-2">
         <div class="flex justify-between mb-3">
           <span
@@ -175,7 +178,8 @@
           </span>
         </div>
 
-        <div class="flex flex-wrap gap-2">
+        <!-- User grid -->
+        <div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`">
           <span
             v-for="(progress) in sortedProgress"
             :key="progress.user_id"
@@ -188,18 +192,19 @@
               flex p-2 mb-1
               text-slate-600 dark:text-slate-400
             ">
-              <span class="flex flex-col w-60">
+              <span :class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'}`">
                 <span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate mb-1">
                   <FontAwesomeIcon
                     v-if="progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score == 1"
                     :icon="faMedal" class="mr-1 text-amber-300"
                   ></FontAwesomeIcon>
-                  <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 :class="`${compactGrid ? 'text-base' : 'text-lg'} font-bold font-mono leading-5 tracking-tight`">{{ progress.email.split('@')[0] }}</span>
+                  <span :class="`${compactGrid ? 'text-xs' : 'text-xs'} font-mono tracking-tight`">@{{ progress.email.split('@')[1] }}</span>
                 </span>
                 <LiveLogsUserActivityGraph
                   :user_id="progress.user_id"
                   :compact_view="true"
+                  :ultra_compact_view="true"
                 ></LiveLogsUserActivityGraph>
               </span>
             </span>
@@ -218,20 +223,20 @@
                     <FontAwesomeIcon
                       v-if="progress.exercises[exercise.uuid].tasks_completion[task.uuid]"
                       :icon="(progress.exercises[exercise.uuid].tasks_completion[task.uuid] && progress.exercises[exercise.uuid].tasks_completion[task.uuid].first_completion) ? faCircleCheck : faCheck"
-                      class="text-xl dark:text-green-400 text-green-600"
+                      :class="`${compactGrid ? 'text-xs' : 'text-xl'} dark:text-green-400 text-green-600`"
                       fixed-width
                     />
                     <FontAwesomeIcon
                       v-else-if="task.requirements?.inject_uuid !== undefined && !progress.exercises[exercise.uuid].tasks_completion[task.requirements.inject_uuid]"
                       title="All requirements for that task haven't been fullfilled yet"
                       :icon="faHourglassHalf"
-                      class="text-lg dark:text-slate-500 text-slate-400"
+                      :class="`${compactGrid ? 'text-xs' : 'text-lg'} dark:text-slate-500 text-slate-400`"
                       fixed-width
                     />
                     <FontAwesomeIcon
                       v-else
                       :icon="faTimes"
-                      class="text-xl dark:text-slate-500 text-slate-400"
+                      :class="`${compactGrid ? 'text-xs' : 'text-xl'} dark:text-slate-500 text-slate-400`"
                       fixed-width
                     />
                   </span>