feat: adding mobile ui

.github/workflows/deploy.yml

@@ -11,12 +11,11 @@ jobs:
     if: github.event.release.prerelease == true
     strategy:
       matrix:
-        microapps:
-          [
+        microapps: [
             "WEBHOOK_ROOT_DEV",
             "WEBHOOK_SYLLABUS_DEV",
-            "WEBHOOK_CAMPUS_DEV",
-            "WEBHOOK_FEEDS_DEV",
+            # "WEBHOOK_CAMPUS_DEV",
+            # "WEBHOOK_FEEDS_DEV",
             "WEBHOOK_FORUMS_DEV",
           ]
     env:
@@ -30,12 +29,11 @@ jobs:
     if: github.event.release.prerelease != true
     strategy:
       matrix:
-        microapps:
-          [
+        microapps: [
             "WEBHOOK_ROOT_PROD",
             "WEBHOOK_SYLLABUS_PROD",
-            "WEBHOOK_CAMPUS_PROD",
-            "WEBHOOK_FEEDS_PROD",
+            # "WEBHOOK_CAMPUS_PROD",
+            # "WEBHOOK_FEEDS_PROD",
             "WEBHOOK_FORUMS_PROD",
           ]
     env:

apps/forum/src/components/App.tsx

@@ -1,6 +1,12 @@
-import React, { useEffect, useState, lazy, Suspense } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { BrowserRouter, Routes, Route, useNavigate } from "react-router-dom";
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+  useNavigate,
+  useLocation,
+} from "react-router-dom";
 import HeaderWithModal from "@app/components/common/HeaderWithModal";
 import { ThemeContext } from "@app/utils/theme-context";
 import Board from "./Board";
@@ -13,6 +19,7 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { API } from "@aws-amplify/api";
 import { getUserAttr, getIdToken, LoadingSpinner } from "wasedatime-ui";
 import { storeDate } from "@app/utils/storeDate";
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
 
 const App = () => {
   return (
@@ -35,13 +42,19 @@ const NotFound = () => {
 };
 
 const InnerApp = () => {
+  const location = useLocation();
   const { t, i18n } = useTranslation();
 
   const { theme, setTheme } = React.useContext(ThemeContext);
   const [refresh, setRefresh] = useState(false);
   const [board, setBoard] = useState("");
   const [commentNotify, setCommentNotify] = useState(false);
   const navigate = useNavigate();
+  const [filterButtonClicked, setFilterButtonClicked] = useState(false);
+
+  const isThreadRoute =
+    location.pathname.includes("forum/") &&
+    location.pathname.split("/").length === 4;
 
   const handleReset = () => {
     navigate("/forum");
@@ -71,6 +84,10 @@ const InnerApp = () => {
     storeDate();
   }, []);
 
+  const handleFilterButtonClick = () => {
+    setFilterButtonClicked(!filterButtonClicked);
+  };
+
   return (
     <>
       <div className="flex h-[67px] shrink-0 grow-0">
@@ -89,25 +106,44 @@ const InnerApp = () => {
           commentNotify={commentNotify}
         />
       </div>
-      <div className="flex flex-col h-fit md:mt-[23px]">
-        {/* <div className="basis-[calc(100vh-187px)] lg:basis-[80%] dark:text-dark-text1"> */}
-        <div className="flex justify-between pl-2 gap-4 h-[calc(100vh-100px)]">
-          <div className="flex flex-col w-1/5">
-            {/* <BreadCrumbs onTriggerFetch={handleTriggerFetch} /> */}
+      <div className="flex flex-col h-fit mt-[23px]">
+        <div className="flex justify-between pl-2 gap-4 h-[calc(100vh-150px)] md:h-[calc(100vh-100px)]">
+          <div className="left-side flex flex-col w-1/5">
             <div className="pl-2 lg:pl-10">
               <button
                 onClick={handleReset}
                 className="p-2 bg-light-main text-white rounded-lg my-1 w-full"
               >
-                {/* <HomeIcon fontSize="large" /> */}
                 <ArrowBackIcon fontSize="large" />
               </button>
             </div>
             <FilterMenu />
             <BoardMenu />
             <FeedBackBox />
           </div>
-          <div className="flex flex-col md:w-3/5 w-4/5">
+          {!isThreadRoute && (
+            <button
+              className="filterButton p-2 bg-light-main dark:bg-dark-main text-white rounded-full"
+              onClick={handleFilterButtonClick}
+            >
+              <FilterAltIcon style={{ fontSize: "35px" }} />
+            </button>
+          )}
+          {filterButtonClicked && (
+            <div className="filterModal rounded-lg standard-style">
+              <button
+                onClick={handleReset}
+                className="p-2 bg-light-main text-white rounded-lg my-1 w-full"
+              >
+                <ArrowBackIcon fontSize="large" />
+              </button>
+              <FilterMenu />
+              <BoardMenu />
+              <FeedBackBox />
+            </div>
+          )}
+
+          <div className="flex flex-col md:w-3/5">
             <Routes>
               <Route
                 element={<Board triggerRefresh={refresh} setBoard={setBoard} />}

apps/forum/src/components/Board.tsx

@@ -132,7 +132,8 @@ const Board = ({ triggerRefresh, setBoard }: any) => {
 
   return (
     // <div className="max-w-2/5 w-5/6 mx-auto h-full">
-    <div className="mx-auto px-2 h-full lg:w-5/6 max-w-[280px] sm:max-w-[900px] standard-style overflow-y-hidden">
+
+    <div className="mx-auto px-2 h-full lg:w-5/6 max-w-[380px] md:maw-w-[700px] lg:max-w-[900px] standard-style overflow-y-hidden">
       <CreateThread onNewThread={handleNewThread} />
       <div
         className="overflow-auto h-[calc(100%-150px)] mt-4 md:mt-8 lg:mt-12"

apps/forum/src/components/BoardMenu.tsx

@@ -5,7 +5,7 @@ import boards from "@app/constants/boards.json";
 const BoardMenu = () => {
   return (
     <div className="pl-2 md:pl-4 lg:pl-10">
-      <h1 className="form-item-title">Topics</h1>
+      <h3 className="form-item-title">Topics</h3>
       <div className="flex flex-col sm:text-xl text-sm text-light-text1 text-light-text1 dark:text-dark-text1">
         {boards.map((board, i) => (
           <div

apps/forum/src/components/FeedBackBox.tsx

@@ -6,7 +6,7 @@ type Props = {};
 const FeedBackBox = (props: Props) => {
   return (
     <div className="pl-2 md:pl-4 lg:pl-10 overflow-y-auto">
-      <h1 className="form-item-title">Feedback</h1>
+      <h3 className="form-item-title">Feedback</h3>
       <p className="text-light-text1 dark:text-dark-text1 ">
         This is WasedaTime forum beta.
         <br />

apps/forum/src/components/FilterMenu.tsx

@@ -11,7 +11,7 @@ const FilterMenu = () => {
   return (
     <div className=" text-center pl-2 lg:pl-10">
       <div className="my-2 mx-auto">
-        <h1 className="form-item-title">School</h1>
+        <h3 className="form-item-title">School</h3>
         <button
           className="w-full p-2 bg-light-main text-white rounded-lg my-1"
           onClick={toggleSchoolFilter}

apps/forum/src/components/Thread.tsx

@@ -77,7 +77,7 @@ const Thread = () => {
   };
 
   return (
-    <div className="border-2 w-full md:w-5/6 mx-auto rounded-xl shadow-lg py-6 px-4 standard-style max-w-[290px] sm:max-w-[900px] overflow-y-auto h-fit">
+    <div className="border-2 w-full md:w-5/6 mx-auto rounded-xl shadow-lg py-6 px-4 standard-style max-w-[390px] sm:max-w-[900px] overflow-y-auto h-fit">
       {/* <CreateThread /> */}
 
       <ThreadBlock isPreview={false} thread={thread} />

apps/forum/src/components/ThreadBlock.tsx

@@ -189,7 +189,7 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
       <div
         className={
           isPreview
-            ? `border-2 mb-10 mr-4 rounded-xl shadow-lg p-6 standard-style-hover max-w-[290px] lg:max-w-[900px]`
+            ? `border-2 mb-10 mr-4 rounded-xl shadow-lg p-6 standard-style-hover lg:max-w-[900px]`
             : `cursor-default bg-light-card1 standard-style`
         }
       >
@@ -262,7 +262,7 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
         <div className="flex flex-row justify-evenly pt-2 items-center">
           {/* The down panel that has like button, views in total, etc...*/}
 
-          <div className="flex flex-row items-center justify-center">
+          <div className="flex flex-row items-center justify-center gap-2">
             <button onClick={handleLike} className="clipboard-icon group">
               <Favorite
                 color={userLiked ? "error" : undefined}

apps/forum/src/root.component.tsx

@@ -9,7 +9,7 @@ import { API } from "@aws-amplify/api";
 
 import "@app/utils/i18n";
 import "@app/styles/main.css";
-// import "@app/styles/common.css";
+import "@app/styles/common.css";
 
 configAuth();
 

apps/forum/src/styles/main.css

@@ -65,3 +65,31 @@
   filter: blur(2px);
   border-radius: inherit; /* To maintain the same rounded corners as the parent */
 }
+
+@media (max-width: 600px) {
+  .left-side {
+    display: none !important;
+  }
+
+  .filterButton {
+    display: block !important;
+  }
+}
+
+.filterButton {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  bottom: 10%;
+  right: 5%;
+}
+
+.filterModal {
+  display: flex;
+  flex-direction: column;
+  width: 70%;
+  position: absolute;
+  left: 15%;
+  z-index: 99;
+}

apps/root/src/components/frame/MobileNav.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 
 import { getUserAttr, signOut } from "wasedatime-ui"
 import { useTranslation } from "react-i18next"
@@ -19,6 +19,15 @@ const MobileNav = ({ navItems, openSignInModal }: Props) => {
   const [currentPath, setCurrentPath] = useState(window.location.pathname)
   const notSignedIn = !userAttr
   if (notSignedIn) getUserAttr().then((attr) => setUserAttr(attr))
+  const [showTooltip, setShowTooltip] = useState(true)
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setShowTooltip(false) // Hide tooltip after 3 seconds
+    }, 3000)
+
+    return () => clearTimeout(timeoutId) // Cleanup on unmount
+  }, []) // Run once after the initial render
 
   const styledLinks = navItems.map((item) => (
     <LinkOutsideRouter
@@ -34,7 +43,7 @@ const MobileNav = ({ navItems, openSignInModal }: Props) => {
         <div className="text-lg text-light-text2 group-hover:text-light-main dark:text-dark-text2 dark:group-hover:text-dark-text1">
           {item.name}
         </div>
-        {item.tooltip && (
+        {item.tooltip && showTooltip && (
           <span className="absolute top-0 left-1/2 z-10 -translate-x-1/2 -translate-y-full transform whitespace-nowrap rounded bg-light-main px-3 py-2 text-lg text-dark-text1 dark:bg-dark-main">
             {item.tooltip}
           </span>