Merge branch 'staging' into 'master'

Staging See merge request !12

Merge branch 'staging' into 'master'
Staging See merge request !12
Samuel Taniel Mulyadi
Commit 85708081 authored Apr 15, 2025 by Samuel Taniel Mulyadi
Showing with 88 additions and 21 deletions
components/beranda/UserJadwal.vue
--- a/components/beranda/UserJadwal.vue
+++ b/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">
+      <div class="d-flex align-center header-container">
-        <!-- Left: Title -->
+        <!-- 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 {
+.scrollable {
-  display: inline-block;
+  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;
+  display: -webkit-box;
-  flex-wrap: wrap;
+  overflow: hidden;
  border-block-end: 1px solid;
+  -webkit-box-orient: vertical;
  font-size: 12px;
  font-weight: bold;
-  gap: 4px;
+  inline-size: 100%;
-  inline-size: 100%; /* Ensures the border spans the entire container */
+  -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 */
+  justify-content: space-between;
-  inline-size: 100%; /* Ensures full width */
+  gap: 8px; /* optional spacing */
-  text-overflow: ellipsis; /* Adds "..." when text is too long */
+  inline-size: 100%;
-  word-break: break-word; /* Allows text to wrap naturally */
 }
 .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) {