feat: remove mobile styles

web/src/App.tsx

@@ -1,7 +1,6 @@
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
 import appContext from "./stores/appContext";
 import { appRouterSwitch } from "./routers";
-import { globalStateService } from "./services";
 import "./less/app.less";
 
 function App() {
@@ -9,20 +8,6 @@ function App() {
     locationState: { pathname },
   } = useContext(appContext);
 
-  useEffect(() => {
-    const handleWindowResize = () => {
-      globalStateService.setIsMobileView(document.body.clientWidth <= 875);
-    };
-
-    handleWindowResize();
-
-    window.addEventListener("resize", handleWindowResize);
-
-    return () => {
-      window.removeEventListener("resize", handleWindowResize);
-    };
-  }, []);
-
   return <>{appRouterSwitch(pathname)}</>;
 }
 

web/src/components/MemosHeader.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useContext, useEffect, useState } from "react";
 import appContext from "../stores/appContext";
 import SearchBar from "./SearchBar";
-import { globalStateService, memoService, shortcutService } from "../services";
+import { memoService, shortcutService } from "../services";
-import Only from "./common/OnlyWhen";
 import "../less/memos-header.less";
 
 let prevRequestTimestamp = Date.now();
@@ -14,7 +13,6 @@ const MemosHeader: React.FC<Props> = () => {
     locationState: {
       query: { shortcutId },
     },
-    globalState: { isMobileView },
     shortcutState: { shortcuts },
   } = useContext(appContext);
 
@@ -39,18 +37,9 @@ const MemosHeader: React.FC<Props> = () => {
     }
   }, []);
 
-  const handleShowSidebarBtnClick = useCallback(() => {
-    globalStateService.setShowSiderbarInMobileView(true);
-  }, []);
-
   return (
     <div className="section-header-container memos-header-container">
       <div className="title-text" onClick={handleMemoTextClick}>
-        <Only when={isMobileView}>
-          <button className="action-btn" onClick={handleShowSidebarBtnClick}>
-            <img className="icon-img" src="/icons/menu.svg" alt="menu" />
-          </button>
-        </Only>
         <span className="normal-text">{titleText}</span>
       </div>
       <SearchBar />

web/src/components/Sidebar.tsx

@@ -1,7 +1,4 @@
-import { useContext, useEffect, useMemo, useRef } from "react";
+import { useRef } from "react";
-import appContext from "../stores/appContext";
-import { SHOW_SIDERBAR_MOBILE_CLASSNAME } from "../helpers/consts";
-import { globalStateService } from "../services";
 import UserBanner from "./UserBanner";
 import ShortcutList from "./ShortcutList";
 import TagList from "./TagList";
@@ -11,57 +8,8 @@ import "../less/siderbar.less";
 interface Props {}
 
 const Sidebar: React.FC<Props> = () => {
-  const {
-    locationState,
-    globalState: { isMobileView, showSiderbarInMobileView },
-  } = useContext(appContext);
   const wrapperElRef = useRef<HTMLElement>(null);
 
-  const handleClickOutsideOfWrapper = useMemo(() => {
-    return (event: MouseEvent) => {
-      const siderbarShown = globalStateService.getState().showSiderbarInMobileView;
-
-      if (!siderbarShown) {
-        window.removeEventListener("click", handleClickOutsideOfWrapper, {
-          capture: true,
-        });
-        return;
-      }
-
-      if (!wrapperElRef.current?.contains(event.target as Node)) {
-        if (wrapperElRef.current?.parentNode?.contains(event.target as Node)) {
-          if (siderbarShown) {
-            event.stopPropagation();
-          }
-          globalStateService.setShowSiderbarInMobileView(false);
-          window.removeEventListener("click", handleClickOutsideOfWrapper, {
-            capture: true,
-          });
-        }
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    globalStateService.setShowSiderbarInMobileView(false);
-  }, [locationState]);
-
-  useEffect(() => {
-    if (showSiderbarInMobileView) {
-      document.body.classList.add(SHOW_SIDERBAR_MOBILE_CLASSNAME);
-    } else {
-      document.body.classList.remove(SHOW_SIDERBAR_MOBILE_CLASSNAME);
-    }
-  }, [showSiderbarInMobileView]);
-
-  useEffect(() => {
-    if (isMobileView && showSiderbarInMobileView) {
-      window.addEventListener("click", handleClickOutsideOfWrapper, {
-        capture: true,
-      });
-    }
-  }, [isMobileView, showSiderbarInMobileView]);
-
   return (
     <aside className="sidebar-wrapper" ref={wrapperElRef}>
       <UserBanner />

web/src/components/UsageHeatMap.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import appContext from "../stores/appContext";
-import { globalStateService, locationService } from "../services";
+import { locationService } from "../services";
 import { DAILY_TIMESTAMP } from "../helpers/consts";
 import utils from "../helpers/utils";
 import "../less/usage-heat-map.less";
@@ -61,14 +61,9 @@ const UsageHeatMap: React.FC<Props> = () => {
       return;
     }
 
-    const { isMobileView } = globalStateService.getState();
     const targetEl = event.target as HTMLElement;
-    const sidebarEl = document.querySelector(".sidebar-wrapper") as HTMLElement;
     popupRef.current.style.left = targetEl.offsetLeft - (containerElRef.current?.offsetLeft ?? 0) + "px";
-    let topValue = targetEl.offsetTop;
+    const topValue = targetEl.offsetTop;
-    if (!isMobileView) {
-      topValue -= sidebarEl.scrollTop;
-    }
     popupRef.current.style.top = topValue + "px";
   }, []);
 

web/src/helpers/consts.ts

@@ -1,6 +1,3 @@
-// mobile style addtion classname
-export const SHOW_SIDERBAR_MOBILE_CLASSNAME = "mobile-show-sidebar";
-
 // default animation duration
 export const ANIMATION_DURATION = 200;
 

web/src/less/about-site-dialog.less

@@ -35,9 +35,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .dialog-wrapper.about-site-dialog {
-    @apply py-6 px-4 pt-16;
-  }
-}

web/src/less/change-password-dialog.less

@@ -55,13 +55,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .dialog-wrapper.change-password-dialog {
-    @apply py-6 px-4 pt-16;
-
-    > .dialog-container {
-      @apply w-full;
-    }
-  }
-}

web/src/less/confirm-reset-openid-dialog.less

@@ -34,13 +34,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .dialog-wrapper.confirm-reset-openid-dialog {
-    @apply py-6 px-4 pt-16;
-
-    > .dialog-container {
-      @apply w-full;
-    }
-  }
-}

web/src/less/create-shortcut-dialog.less

@@ -153,16 +153,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .dialog-wrapper.create-shortcut-dialog {
-    padding: 24px 16px;
-    padding-top: 64px;
-    justify-content: unset;
-    overflow-x: hidden;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-}

web/src/less/daily-memo-diary-dialog.less

@@ -138,27 +138,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .dialog-wrapper.daily-memo-diary-dialog {
-    padding: 0;
-    .hide-scroll-bar();
-
-    > .dialog-container {
-      width: 100%;
-      height: 100%;
-      border-radius: 0;
-      overflow-y: auto;
-      overflow-x: hidden;
-      padding-bottom: 16px;
-
-      > .dialog-header-container {
-        padding-top: 32px;
-      }
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-}

web/src/less/dialog.less

@@ -52,13 +52,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .dialog-wrapper {
-    @apply w-full px-4;
-
-    > .dialog-container {
-      @apply max-w-full;
-    }
-  }
-}

web/src/less/global.less

@@ -75,10 +75,3 @@ a {
 .hidden {
   display: none !important;
 }
-
-@media only screen and (max-width: 875px) {
-  body,
-  html {
-    -webkit-overflow-scrolling: touch;
-  }
-}

web/src/less/home.less

@@ -13,22 +13,3 @@
     @apply relative flex-grow h-auto;
   }
 }
-
-@media only screen and (max-width: 875px) {
-  body.mobile-show-sidebar {
-    #page-wrapper {
-      > .content-wrapper {
-        @apply translate-x-80;
-      }
-    }
-  }
-
-  #page-wrapper {
-    .flex(column, flex-start, flex-start);
-    @apply w-full h-full p-0 translate-x-0;
-
-    > .content-wrapper {
-      @apply w-full h-full ml-0 pt-0 transition-all;
-    }
-  }
-}

web/src/less/memo-card-dialog.less

@@ -187,10 +187,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .dialog-wrapper.memo-card-dialog {
-    padding: 24px 16px;
-    padding-top: 64px;
-  }
-}

web/src/less/memo-content.less

@@ -69,19 +69,3 @@
     white-space: pre-wrap;
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .memo-content-text {
-    > p {
-      font-size: 15px;
-      line-height: 26px;
-      min-height: 26px;
-      white-space: pre-wrap;
-    }
-
-    .tag-span {
-      line-height: 26px;
-      font-size: 14px;
-    }
-  }
-}

web/src/less/memo-editor.less

@@ -53,10 +53,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .memo-editor-wrapper {
-    width: calc(100% - 24px);
-    margin: auto;
-  }
-}

web/src/less/memo-filter.less

@@ -33,9 +33,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .filter-query-container {
-    padding-left: 20px;
-  }
-}

web/src/less/memo-trash.less

@@ -36,9 +36,3 @@
     .hide-scroll-bar();
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .deleted-memos-container {
-    padding: 0 12px;
-  }
-}

web/src/less/memolist.less

@@ -31,9 +31,3 @@
     padding-bottom: 80px;
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .memolist-wrapper {
-    padding: 0 12px;
-  }
-}

web/src/less/memos-header.less

@@ -25,10 +25,3 @@
     .flex(row, flex-end, center);
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .section-header-container,
-  .memos-header-container {
-    @apply h-auto mt-4 mb-0 py-0 px-3 pb-2;
-  }
-}

web/src/less/menu-btns-popup.less

@@ -21,9 +21,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .menu-btns-popup {
-    @apply ml-16;
-  }
-}

web/src/less/preview-image-dialog.less

@@ -84,19 +84,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .preview-image-dialog {
-    padding: 0;
-
-    > .dialog-container {
-      max-width: 100%;
-
-      > .img-container {
-        > img {
-          padding: 6px;
-        }
-      }
-    }
-  }
-}

web/src/less/search-bar.less

@@ -102,9 +102,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .search-bar-container > .quickly-action-wrapper {
-    right: 4px;
-  }
-}

web/src/less/setting.less

@@ -45,9 +45,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .sections-wrapper {
-    @apply py-0 px-3;
-  }
-}

web/src/less/share-memo-image-dialog.less

@@ -134,15 +134,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .dialog-wrapper.share-memo-image-dialog {
-    padding: 24px 16px;
-    padding-top: 64px;
-    justify-content: unset;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-}

web/src/less/shortcut-list.less

@@ -135,21 +135,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .shortcuts-container {
-    @apply h-auto;
-
-    &:last-child {
-      @apply flex-grow;
-    }
-
-    > .title-text {
-      @apply text-sm;
-    }
-
-    > .shortcut-container {
-      @apply text-base;
-    }
-  }
-}

web/src/less/siderbar.less

@@ -9,23 +9,3 @@
     @apply shrink-0;
   }
 }
-
-@media only screen and (max-width: 875px) {
-  body.mobile-show-sidebar {
-    #page-wrapper {
-      > .sidebar-wrapper {
-        @apply translate-x-0 shadow;
-      }
-    }
-  }
-
-  .sidebar-wrapper {
-    .flex(column, flex-start, center);
-    @apply z-50 absolute top-0 left-0 w-80 h-full p-0 bg-white transition-all -translate-x-80;
-
-    > * {
-      @apply w-80 shrink-0 pl-8;
-      max-width: 95%;
-    }
-  }
-}

web/src/less/star-history-dialog.less

@@ -9,9 +9,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .dialog-wrapper.star-history-dialog {
-    @apply py-6 px-4 pt-16;
-  }
-}

web/src/less/tag-list.less

@@ -85,18 +85,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .tags-wrapper {
-    @apply bg-white;
-
-    > .tags-container {
-      @apply h-auto;
-
-      &:last-child {
-        @apply grow;
-        flex-grow: 1;
-      }
-    }
-  }
-}

web/src/less/usage-heat-map.less

@@ -84,33 +84,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .usage-heat-map-wrapper {
-    @apply h-40 py-2 pt-3 pr-0 pl-2 !important;
-
-    > .day-tip-text-container {
-      @apply visible w-10 pb-1;
-
-      > .tip-text {
-        @apply pr-1 text-xs;
-      }
-    }
-
-    > .usage-heat-map {
-      @apply w-60;
-
-      > .stat-container {
-        @apply w-4 h-4 mb-1;
-      }
-    }
-
-    > .usage-detail-container {
-      @apply -mt-9 pl-2 text-xs;
-
-      &::before {
-        left: calc(50% - 4px);
-      }
-    }
-  }
-}

web/src/less/user-banner.less

@@ -46,27 +46,3 @@
     }
   }
 }
-
-@media only screen and (max-width: 875px) {
-  .user-banner-container {
-    @apply pt-4;
-
-    > .userinfo-header-container {
-      @apply px-4;
-
-      > .username-text {
-        @apply text-xl;
-      }
-    }
-
-    > .status-text-container {
-      @apply px-4;
-
-      > .status-text {
-        > .type-text {
-          @apply text-sm;
-        }
-      }
-    }
-  }
-}

web/src/pages/MemoTrash.tsx

@@ -1,11 +1,10 @@
 import { useCallback, useContext, useEffect, useState } from "react";
 import appContext from "../stores/appContext";
 import useLoading from "../hooks/useLoading";
-import { globalStateService, locationService, memoService, shortcutService } from "../services";
+import { locationService, memoService, shortcutService } from "../services";
 import { IMAGE_URL_REG, LINK_REG, MEMO_LINK_REG, TAG_REG } from "../helpers/consts";
 import utils from "../helpers/utils";
 import { checkShouldShowMemoWithFilters } from "../helpers/filter";
-import Only from "../components/common/OnlyWhen";
 import toastHelper from "../components/Toast";
 import DeletedMemo from "../components/DeletedMemo";
 import MemoFilter from "../components/MemoFilter";
@@ -16,7 +15,6 @@ interface Props {}
 const MemoTrash: React.FC<Props> = () => {
   const {
     locationState: { query },
-    globalState: { isMobileView },
   } = useContext(appContext);
   const loadingState = useLoading();
   const [deletedMemos, setDeletedMemos] = useState<Model.Memo[]>([]);
@@ -101,19 +99,10 @@ const MemoTrash: React.FC<Props> = () => {
     setDeletedMemos((deletedMemos) => deletedMemos.filter((memo) => memo.id !== memoId));
   }, []);
 
-  const handleShowSidebarBtnClick = useCallback(() => {
-    globalStateService.setShowSiderbarInMobileView(true);
-  }, []);
-
   return (
     <div className="memo-trash-wrapper">
       <div className="section-header-container">
         <div className="title-text">
-          <Only when={isMobileView}>
-            <button className="action-btn" onClick={handleShowSidebarBtnClick}>
-              <img className="icon-img" src="/icons/menu.svg" alt="menu" />
-            </button>
-          </Only>
           <span className="normal-text">Recycle Bin</span>
         </div>
       </div>

web/src/pages/Setting.tsx

@@ -1,35 +1,20 @@
-import { useCallback, useContext, useEffect } from "react";
+import { useEffect } from "react";
-import appContext from "../stores/appContext";
+import { memoService } from "../services";
-import { globalStateService, memoService } from "../services";
 import MyAccountSection from "../components/MyAccountSection";
 import PreferencesSection from "../components/PreferencesSection";
-import Only from "../components/common/OnlyWhen";
 import "../less/setting.less";
 
 interface Props {}
 
 const Setting: React.FC<Props> = () => {
-  const {
-    globalState: { isMobileView },
-  } = useContext(appContext);
-
   useEffect(() => {
     memoService.fetchAllMemos();
   }, []);
 
-  const handleShowSidebarBtnClick = useCallback(() => {
-    globalStateService.setShowSiderbarInMobileView(true);
-  }, []);
-
   return (
     <div className="preference-wrapper">
       <div className="section-header-container">
         <div className="title-text">
-          <Only when={isMobileView}>
-            <button className="action-btn" onClick={handleShowSidebarBtnClick}>
-              <img className="icon-img" src="/icons/menu.svg" alt="menu" />
-            </button>
-          </Only>
           <span className="normal-text">Settings</span>
         </div>
       </div>

web/src/services/globalStateService.ts

@@ -37,24 +37,6 @@ class GlobalStateService {
     });
   };
 
-  public setIsMobileView = (isMobileView: boolean) => {
-    appStore.dispatch({
-      type: "SET_MOBILE_VIEW",
-      payload: {
-        isMobileView,
-      },
-    });
-  };
-
-  public setShowSiderbarInMobileView = (showSiderbarInMobileView: boolean) => {
-    appStore.dispatch({
-      type: "SET_SHOW_SIDEBAR_IN_MOBILE_VIEW",
-      payload: {
-        showSiderbarInMobileView,
-      },
-    });
-  };
-
   public setAppSetting = (appSetting: Partial<AppSetting>) => {
     appStore.dispatch({
       type: "SET_APP_SETTING",

web/src/stores/globalStateStore.ts

@@ -6,8 +6,6 @@ export interface AppSetting {
 }
 
 export interface State extends AppSetting {
-  isMobileView: boolean;
-  showSiderbarInMobileView: boolean;
   markMemoId: string;
   editMemoId: string;
 }
@@ -26,26 +24,12 @@ interface SetEditMemoIdAction {
   };
 }
 
-interface SetMobileViewAction {
-  type: "SET_MOBILE_VIEW";
-  payload: {
-    isMobileView: boolean;
-  };
-}
-
-interface SetShowSidebarAction {
-  type: "SET_SHOW_SIDEBAR_IN_MOBILE_VIEW";
-  payload: {
-    showSiderbarInMobileView: boolean;
-  };
-}
-
 interface SetAppSettingAction {
   type: "SET_APP_SETTING";
   payload: Partial<AppSetting>;
 }
 
-export type Actions = SetMobileViewAction | SetShowSidebarAction | SetEditMemoIdAction | SetMarkMemoIdAction | SetAppSettingAction;
+export type Actions = SetEditMemoIdAction | SetMarkMemoIdAction | SetAppSettingAction;
 
 export function reducer(state: State, action: Actions) {
   switch (action.type) {
@@ -69,26 +53,6 @@ export function reducer(state: State, action: Actions) {
         editMemoId: action.payload.editMemoId,
       };
     }
-    case "SET_MOBILE_VIEW": {
-      if (action.payload.isMobileView === state.isMobileView) {
-        return state;
-      }
-
-      return {
-        ...state,
-        isMobileView: action.payload.isMobileView,
-      };
-    }
-    case "SET_SHOW_SIDEBAR_IN_MOBILE_VIEW": {
-      if (action.payload.showSiderbarInMobileView === state.showSiderbarInMobileView) {
-        return state;
-      }
-
-      return {
-        ...state,
-        showSiderbarInMobileView: action.payload.showSiderbarInMobileView,
-      };
-    }
     case "SET_APP_SETTING": {
       return {
         ...state,
@@ -108,6 +72,4 @@ export const defaultState: State = {
   shouldHideImageUrl: true,
   shouldUseMarkdownParser: true,
   useTinyUndoHistoryCache: false,
-  isMobileView: false,
-  showSiderbarInMobileView: false,
 };