Merge branch 'master' into develop

.gitmodules

@@ -1,7 +1,3 @@
-[submodule "feeds/public/feeds"]
-	path = feeds/public/feeds
-	url = [email protected]:wasedatime/feeds.git
-	branch = main
 [submodule "apps/feeds/public/feeds"]
 	path = apps/feeds/public/feeds
 	url = https://github.com/wasedatime/feeds.git

apps/syllabus/src/components/timetable/TimeRowItem.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 
 import styled from "styled-components";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import getSchoolIconPath from "@app/utils/get-school-icon-path";
 
 const StyledListItem = styled("li")`
   display: flex;
@@ -13,29 +16,61 @@ const StyledListItem = styled("li")`
   border-right-style: solid;
 `;
 
-const StyledSpan = styled("span")`
-  font-size: 1.5em;
-  font-weight: 600;
-`;
+type OtherPeriod = {
+  school: string;
+  s: string | number;
+  e: string | number;
+}
 
-const StyledTime = styled("time")`
-  font-size: 0.8em;
-`;
+type Period = {
+  s: string | number;
+  p: string | number;
+  e: string | number;
+  o?: OtherPeriod[]
+}
 
 type Props = {
-  period: {
-    s: string | number;
-    p: string | number;
-    e: string | number;
-  };
+  period: Period;
 };
 
+const schoolIconImage = (school: string) => (
+  <img
+    src={getSchoolIconPath(school, "en")}
+    width="24px"
+    height="24px"
+    alt={school}
+    className="inline"
+  />
+);
+
+const OtherPeriod = ({ periods }: { periods: OtherPeriod[] }) => (
+  <div className="pt-2">
+    {
+      periods.map(period => <p className="mb-2">{schoolIconImage(period.school)} {period.s} ~ {period.e}</p>)
+    }
+  </div>
+);
+
 const TimeRowItem = ({ period }: Props) => {
   return (
     <StyledListItem className="text-light-text2 border-r-gray-100 dark:text-dark-text2 dark:border-r-dark-text3">
-      <StyledTime>{period.s}</StyledTime>
-      <StyledSpan>{period.p}</StyledSpan>
-      <StyledTime>{period.e}</StyledTime>
+      <time className="text-lg">{period.s}</time>
+      {
+        period.o ? (
+          <div className="group relative flex justify-center">
+              <span className="text-3xl font-semibold">{period.p}</span>
+              <span className="text-sm font-semibold"><FontAwesomeIcon icon={faInfoCircle} size="1x" /></span>
+              <span className="absolute left-10 bottom-0 scale-0 w-48 rounded bg-gray-500 p-2 text-2xs text-white group-hover:scale-100">
+                <OtherPeriod periods={period.o} />
+              </span>
+            </div>
+        ) : (
+          <span className="text-3xl font-semibold">
+            {period.p}
+          </span>
+        )
+      }
+      <time className="text-lg">{period.e}</time>
     </StyledListItem>
   );
 };

apps/syllabus/src/components/timetable/TimeRowList.tsx

@@ -27,39 +27,47 @@ const TimeRowList = ({ largestPeriod }: Props) => {
 
   const periods = [
     {
-      s: "0900",
+      s: "0850",
       e: "1030",
       p: 1,
     },
     {
       s: "1040",
-      e: "1210",
+      e: "1220",
       p: 2,
     },
     {
-      s: "1300",
-      e: "1430",
+      s: "1310",
+      e: "1450",
       p: 3,
     },
     {
-      s: "1445",
-      e: "1615",
+      s: "1505",
+      e: "1645",
       p: 4,
     },
     {
-      s: "1630",
-      e: "1800",
+      s: "1700",
+      e: "1840",
       p: 5,
     },
     {
-      s: "1815",
-      e: "1945",
+      s: "1855",
+      e: "2035",
       p: 6,
+      o: [
+        { school: "G_WBS", s: "1830", e: "2010" },
+        { school: "ART", s: "1810", e: "1950" },
+      ]
     },
     {
-      s: "1955",
-      e: "2125",
+      s: "2045",
+      e: "2135",
       p: 7,
+      o: [
+        { school: "G_WBS", s: "2020", e: "2200" },
+        { school: "ART", s: "1955", e: "2135" },
+      ]
     },
   ];
   const timeRows = periods