Added courseInfo mini icon

Author: jaytan3966

src/components/Schedule.vue

@@ -3,7 +3,7 @@ import { watch } from 'vue'
 import LabelSwitch from './LabelSwitch.vue'
 import Toggle from './Toggle.vue'
 import state from '../model.js'
-import { MapPinIcon } from '@heroicons/vue/24/outline'
+import { MapPinIcon, BookOpenIcon } from '@heroicons/vue/24/outline'
 import { useRouter } from 'vue-router'
 import { classrooms } from '../utils/locations.js'
 
@@ -115,9 +115,42 @@ document.onvisibilitychange = () => { date = new Date() }
         <div class="grid grid-cols-7 gap-px relative w-full overflow-y-hidden all-transition" :style="{ width: state.screen.md || !props.whole ? '140%' : '100%', height: showTime ? '976px' : '736px' }"><!-- body -->
           <div v-for="j in 112" class="all-transition bg-gray-100 hover:bg-gray-50 rounded" />
           <template v-for="p in props.pieces">
-            <div v-if="!isHide(p)" :style="pStyle(p)" class="all-transition absolute p-1 text-xs rounded-r-sm overflow-hidden" :class="classrooms[p.location] ? 'group' : ''"
-            >
-              <MapPinIcon v-if="classrooms[p.location]" @click.stop="locate(p.location)" :class="colorMap[p.key][1]" class="w-5 h-5 absolute opacity-0 top-1 right-1 group-hover:opacity-100 transition-opacity cursor-pointer"/>
+            <div v-if="!isHide(p)" :style="pStyle(p)"
+                class="all-transition absolute p-1 text-xs rounded-r-sm overflow-hidden"
+                :class="classrooms[p.location] ? 'group' : 'group'">
+
+              <div
+                class="
+                  absolute
+                  right-1
+                  top-auto bottom-1
+                  sm:top-1 sm:bottom-auto
+                  flex flex-col gap-1 sm:flex-row sm:items-center
+                "
+              >
+                <BookOpenIcon
+                  :class="colorMap[p.key][1]"
+                  class="
+                    w-[clamp(14px,4vw,20px)]
+                    h-[clamp(14px,4vw,20px)]
+                    opacity-0 group-hover:opacity-100
+                    hover:opacity-70
+                    transition-opacity cursor-pointer
+                  "
+                />
+                <MapPinIcon
+                  v-if="classrooms[p.location]"
+                  @click.stop="locate(p.location)"
+                  :class="colorMap[p.key][1]"
+                  class="
+                    w-[clamp(14px,4vw,20px)]
+                    h-[clamp(14px,4vw,20px)]
+                    opacity-0 group-hover:opacity-100
+                    hover:opacity-70
+                    transition-opacity cursor-pointer
+                  "
+                />
+              </div>
               <div class="font-semibold text-shadow text-[0.7rem] sm:text-xs" :class="colorMap[p.key][1]">{{ p.title || p.key }}</div>
               <div class="text-[0.6rem] sm:text-xs opacity-90" :class="colorMap[p.key][1]" v-if="showTime">{{ twelveHour ? twelvify(p.time) : p.time }}</div>
               <div class="text-[0.625rem] sm:text-xs opacity-90" :class="colorMap[p.key][1]">{{ p.location }}</div>