From e6eac33fff86316a6a74d3bf6b911b9f00269b4a Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Sat, 2 Nov 2024 12:17:12 -0600
Subject: [PATCH] more mobile tweaks

---
 .../app/course/[courseName]/calendar/CalendarMonth.tsx |  6 +++---
 .../src/app/course/[courseName]/calendar/day/Day.tsx   | 10 ++++++++--
 .../app/course/[courseName]/calendar/day/ItemInDay.tsx |  2 +-
 .../[courseName]/lecture/[lectureDay]/EditLecture.tsx  |  4 ++--
 .../lecture/[lectureDay]/EditLectureTitle.tsx          |  9 ++++-----
 5 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx b/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx
index d94371b..2374194 100644
--- a/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx
@@ -5,7 +5,7 @@ import { Expandable } from "@/components/Expandable";
 import { CalendarWeek } from "./CalendarWeek";
 
 export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
-  const weekInMilliseconds = 604_800_000;
+  // const weekInMilliseconds = 604_800_000;
   const four_days_in_milliseconds = 345_600_000;
   const isInPast =
     new Date(month.year, month.month, 1) <
@@ -16,7 +16,6 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
     { month: "long" }
   );
   const weekDaysList: DayOfWeek[] = Object.values(DayOfWeek);
-
   return (
     <>
       <Expandable
@@ -39,7 +38,8 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
         <div className="grid grid-cols-7 text-center fw-bold ms-3">
           {weekDaysList.map((day) => (
             <div key={day} className={""}>
-              {day}
+              <span className="hidden xl:inline">{day}</span>
+              <span className="xl:hidden inline">{day.slice(0, 3)}</span>
             </div>
           ))}
         </div>
diff --git a/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx b/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx
index 1e7f363..577a35a 100644
--- a/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx
@@ -75,7 +75,10 @@ export default function Day({ day, month }: { day: string; month: number }) {
   return (
     <div
       className={
-        " rounded-lg m-1 min-h-10 " + meetingClasses + monthClass + todayClasses
+        " rounded-lg sm:m-1 m-0.5 min-h-10 " +
+        meetingClasses +
+        monthClass +
+        todayClasses
       }
       onDrop={(e) => itemDropOnDay(e, day)}
       onDragOver={(e) => e.preventDefault()}
@@ -136,7 +139,10 @@ function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
     .find((l) => l.date == getDateOnlyMarkdownString(dayAsDate));
   return (
     <div className="flex justify-between">
-      <Link className="ms-1 me-1 truncate text-nowrap transition-all hover:font-bold hover:text-slate-300" href={getLectureUrl(courseName, day)}>
+      <Link
+        className="ms-1 me-1 truncate text-nowrap transition-all hover:font-bold hover:text-slate-300"
+        href={getLectureUrl(courseName, day)}
+      >
         {dayAsDate.getDate()} {todaysLecture?.name}
       </Link>
       <Modal
diff --git a/nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx b/nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx
index 720d6d7..27c59d7 100644
--- a/nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx
@@ -34,7 +34,7 @@ export function ItemInDay({
         href={getModuleItemUrl(courseName, moduleName, type, item.name)}
         shallow={true}
         className={
-          " border rounded-sm px-1 mx-1 break-words mb-1 " +
+          " border rounded-sm sm:px-1 sm:mx-1 break-words mb-1 truncate sm:text-wrap text-nowrap " +
           " bg-slate-800 " +
           " block " +
           (status === "localOnly" && " text-slate-500 border-slate-600 ") +
diff --git a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx
index bbdcc0e..d010b88 100644
--- a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx
+++ b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx
@@ -54,11 +54,11 @@ Date: ${lectureDay}
   return (
     <div className="h-full flex flex-col">
       <EditLectureTitle lectureDay={lectureDay} />
-      <div className="columns-2 min-h-0 flex-1">
+      <div className="sm:columns-2 min-h-0 flex-1">
         <div className="flex-1 h-full">
           <MonacoEditor value={text} onChange={setText} />
         </div>
-        <div className="h-full">
+        <div className="h-full sm:block none">
           <div className="text-red-300">{error && error}</div>
           {lecture && <LecturePreview lecture={lecture} />}
         </div>
diff --git a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx
index 04fee3c..db0c211 100644
--- a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx
+++ b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx
@@ -12,16 +12,15 @@ export default function EditLectureTitle({
 }: {
   lectureDay: string;
 }) {
-  const router = useRouter();
   const { data: settings } = useLocalCourseSettingsQuery();
   const { courseName } = useCourseContext();
   const lectureDate = getDateFromString(lectureDay);
   const lectureWeekName = getLectureWeekName(settings.startDate, lectureDay);
   return (
-    <div className="flex justify-between">
+    <div className="flex justify-between sm:flex-row flex-col">
       <div className="my-auto">
         <Link
-          className="btn"
+          className="btn hidden sm:inline"
           href={getCourseUrl(courseName)}
         >
           {courseName}
@@ -34,9 +33,9 @@ export default function EditLectureTitle({
           {lectureWeekName.toUpperCase()}
         </h1>
       </div>
-      <div className="text-end my-auto">
+      <div className="text-end my-auto flex">
         <Link
-          className="btn"
+          className="btn inline text-center flex-grow m-1"
           href={getLecturePreviewUrl(courseName, lectureDay)}
         >
           preview