Merge branch 'staging' into 'master'

Staging

See merge request !12

components/beranda/UserJadwal.vue

@@ -131,18 +131,18 @@ function getColorClass(index: number) {
 <template>
   <VCard class="timetable-card">
     <template #title>
-      <div class="d-flex align-center">
-        <!-- Left: Title -->
+      <div class="d-flex align-center header-container">
+        <!-- Title -->
         <span class="me-auto">Jadwal Kuliah</span>
 
-        <!-- Right: Date Range Box -->
+        <!-- Date Range Box (desktop version) -->
         <div class="me-auto date-range-box">
           <span v-if="schedule.length > 0">
             {{ schedule[0].tgl_mulai }} / {{ schedule[0].tgl_selesai }}
           </span>
         </div>
 
-        <!-- Right: Icons -->
+        <!-- Icons -->
         <div class="d-flex gap-2">
           <VBtn
             icon
@@ -160,8 +160,26 @@ function getColorClass(index: number) {
           >
             <VIcon icon="ri-layout-horizontal-line" />
           </VBtn>
+          <!--
+            <VBtn
+            icon
+            variant="text"
+            color="black"
+            title="Download horizontal schedule as image"
+            @click="downloadHorizontalSchedule"
+            >
+            <VIcon icon="ri-download-2-line" />
+            </VBtn>
+          -->
         </div>
       </div>
+
+      <!-- Date Range Box (mobile version) -->
+      <div class="date-range-box2">
+        <span v-if="schedule.length > 0">
+          {{ schedule[0].tgl_mulai }} / {{ schedule[0].tgl_selesai }}
+        </span>
+      </div>
     </template>
 
     <VCard
@@ -169,6 +187,7 @@ function getColorClass(index: number) {
       class="timetable"
     >
       <!-- Header Row -->
+      <div class="scrollable">
         <div class="grid-header">
           <div class="time-label">
             Jam
@@ -235,11 +254,13 @@ function getColorClass(index: number) {
             </div>
           </div>
         </div>
+      </div>
     </VCard>
     <VCard
       v-else
-      class="timetable px-4 py-6"
+      class="timetable"
     >
+      <div class="scrollable">
         <table class="w-100 text-left table-schedule fixed-table">
           <thead>
             <tr>
@@ -268,14 +289,14 @@ function getColorClass(index: number) {
                   :class="[getColorClass(rowIndex - 1)]"
                 >
                   <div class="course-header mb-1">
-                  <span class="text-sm font-medium d-flex align-center gap-1">
+                    <span class="time text-sm">
                       <i class="ri-time-line" /> {{
                         getScheduleByDay(day)[rowIndex - 1].start
                       }} - {{
                         getScheduleByDay(day)[rowIndex - 1].end
                       }}
                     </span>
-                  <span class="text-xs">{{ getScheduleByDay(day)[rowIndex - 1].room }}</span>
+                    <span class="room text-xs">{{ getScheduleByDay(day)[rowIndex - 1].room }}</span>
                   </div>
                   <div class="course-title font-semibold text-sm mb-1">
                     <span
@@ -292,7 +313,7 @@ function getColorClass(index: number) {
                       }}
                     </span>
                   </div>
-                <div class="text-xs">
+                  <div class="building text-xs">
                     {{ getScheduleByDay(day)[rowIndex - 1].building }}
                   </div>
                 </div>
@@ -300,22 +321,58 @@ function getColorClass(index: number) {
             </tr>
           </tbody>
         </table>
+      </div>
     </VCard>
   </VCard>
 </template>
 
 <style scoped>
-.date-range-box {
-  display: inline-block;
+.scrollable {
+  overflow: auto hidden; /* Optional: you can allow vertical scroll if needed */
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 500px;
+}
+
+/* Optional: make inner content grow past 700px if needed */
+.scrollable > * {
+  min-inline-size: 500px;
+}
+
+.date-range-box,
+.date-range-box2 {
   border-radius: 5px;
   background-color: rgba(var(--v-global-theme-primary), 0.1);
   font-size: 14px;
   font-weight: bold;
-  margin-inline-start: 10px;
   padding-block: 5px;
   padding-inline: 10px;
 }
 
+/* Default: show inline box, hide full-width box */
+.date-range-box {
+  display: inline-block;
+  margin-inline-start: 10px;
+}
+
+.date-range-box2 {
+  display: none;
+}
+
+/* Wrapped layout or small screens */
+@media (max-width: 600px) {
+  .date-range-box {
+    display: none;
+  }
+
+  .date-range-box2 {
+    display: flex;
+    justify-content: center;
+    inline-size: 100%;
+    margin-block-start: 8px;
+  }
+}
+
 .timetable {
   display: flex;
   flex-direction: column;
@@ -345,15 +402,17 @@ function getColorClass(index: number) {
 }
 
 .course-title {
-  display: flex;
-  flex-wrap: wrap;
+  display: -webkit-box;
+  overflow: hidden;
   border-block-end: 1px solid;
+  -webkit-box-orient: vertical;
   font-size: 12px;
   font-weight: bold;
-  gap: 4px;
-  inline-size: 100%; /* Ensures the border spans the entire container */
+  inline-size: 100%;
+  -webkit-line-clamp: 2;        /* Number of lines before cutting */
   margin-block-end: 5px;
   padding-block-end: 5px;
+  text-overflow: ellipsis;
 }
 
 .course-prefix {
@@ -414,22 +473,26 @@ function getColorClass(index: number) {
 
 .course-header {
   display: flex;
-  justify-content: space-between; /* Pushes elements to the left & right */
-  inline-size: 100%; /* Ensures full width */
-  text-overflow: ellipsis; /* Adds "..." when text is too long */
-  word-break: break-word; /* Allows text to wrap naturally */
+  justify-content: space-between;
+  gap: 8px; /* optional spacing */
+  inline-size: 100%;
 }
 
 .time {
+  flex-shrink: 0; /* Don't shrink */
   font-weight: normal;
-  text-align: start; /* Aligns time to the left */
+  text-align: start;
+  white-space: nowrap;
 }
 
 .room {
   overflow: hidden;
+  flex-grow: 1;
+  flex-shrink: 1;
   font-weight: normal;
-  text-align: end; /* Aligns room to the right */
+  text-align: end;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .building {
@@ -493,6 +556,10 @@ function getColorClass(index: number) {
   .time {
     display: none;
   }
+
+  .room {
+    text-align: start;
+  }
 }
 
 @media screen and (max-width: 900px) {