From 71e2b7cef348b8fcfe5a3b4c26b43e38c6ac18ea Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 19 Nov 2024 12:32:30 +0100
Subject: [PATCH] Update styling on attendance check page

---
 .../AttendanceCheckPage.vue                   | 53 ++++++++++---------
 .../cockpit/cockpitPage/AttendanceCheck.vue   |  4 +-
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
index e4b8b5ac..568d860e 100644
--- a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
+++ b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
@@ -147,40 +147,45 @@ const formattedCourseDueDate = computed(() => {
           <span>{{ $t("general.back") }}</span>
         </router-link>
       </nav>
-      <div class="flex items-center justify-between">
-        <button
-          v-if="attendanceSaved"
-          class="flex"
-          data-cy="export-button"
-          @click="exportData"
-        >
-          <it-icon-export></it-icon-export>
-          <span class="ml inline-block">{{ $t("a.Als Excel exportieren") }}</span>
-        </button>
-      </div>
+      <div class="flex items-center justify-between"></div>
       <section v-if="attendanceCourses.length && currentCourse">
-        <div class="flex flex-col justify-between gap-8 bg-white py-6">
-          <div class="flex flex-col gap-2 px-6">
+        <div class="grid grid-cols-[2fr_1fr] justify-between gap-8 bg-white py-6">
+          <div class="col-span-1 flex flex-col gap-2 px-6">
             <h3 class="pb-1 text-4xl font-bold">{{ $t("a.Präsenzkurs") }}</h3>
             <h5>Circle «{{ currentCourse?.learning_content.circle?.title }}»</h5>
             <h5>{{ formattedCourseDueDate }}</h5>
           </div>
-          <div class="px-6">
+          <button
+            v-if="attendanceSaved"
+            class="col-span-1 mr-4 hidden justify-self-end lg:flex"
+            data-cy="export-button"
+            @click="exportData"
+          >
+            <it-icon-export class="fill-current text-blue-900"></it-icon-export>
+            <span class="ml inline-block text-blue-900">
+              {{ $t("a.Als Excel exportieren") }}
+            </span>
+          </button>
+          <div
+            class="col-span-2 flex flex-col gap-4 px-6 lg:gap-6"
+            :class="attendanceSaved ? 'lg:flex-row lg:items-center' : 'gap-8 lg:gap-8'"
+          >
             <AttendanceStatus
-              class="px-6"
+              class="inline-flex px-6"
               :done="attendanceSaved"
               :date="courseDueDate"
             />
-          </div>
-          <AttendanceCheck
-            :attendance-saved="attendanceSaved"
-            :disclaimer-confirmed="disclaimerConfirmed"
-            @reopen="editAgain"
-            @toggle="toggleDisclaimer"
-            @confirm="onSubmit"
-          />
 
-          <div class="border-t border-gray-500 px-6">
+            <AttendanceCheck
+              :attendance-saved="attendanceSaved"
+              :disclaimer-confirmed="disclaimerConfirmed"
+              @reopen="editAgain"
+              @toggle="toggleDisclaimer"
+              @confirm="onSubmit"
+            />
+          </div>
+
+          <div class="col-span-2 border-t border-gray-500 px-6">
             <ItPersonRow
               v-for="(csu, index) in courseSessionDetailResult.filterMembers()"
               :key="csu.user_id"
diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue b/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue
index d3499c6c..cca597e7 100644
--- a/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue
@@ -9,7 +9,7 @@ defineEmits(["toggle", "reopen", "confirm"]);
 </script>
 
 <template>
-  <div v-if="!attendanceSaved" class="flex flex-col gap-4 px-6">
+  <div v-if="!attendanceSaved" class="flex flex-col gap-4">
     <div class="flex flex-row content-center items-center">
       <ItCheckbox
         :checkbox-item="{
@@ -34,7 +34,7 @@ defineEmits(["toggle", "reopen", "confirm"]);
       {{ $t("Anwesenheit bestätigen") }}
     </button>
   </div>
-  <div v-else class="px-6">
+  <div v-else class="flex-inline">
     <button class="btn-link link" @click="$emit('reopen')">
       {{ $t("a.Erneut bearbeiten") }}
     </button>