Merge pull request #90 from iranpsc/fix/uiBugs

Author: theAwmin

.dockerignore

@@ -0,0 +1,19 @@
+node_modules
+npm-debug.log*
+dist
+build
+.next
+out
+*.tsbuildinfo
+
+.git
+.vscode
+.vs
+
+.env*
+
+logs
+*.log
+tmp
+temp
+.cache

dockerfile

@@ -0,0 +1,20 @@
+FROM node:20 AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+
+FROM nginx:alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+EXPOSE 3000
+
+CMD ["nginx", "-g", "daemon off;"]

package-lock.json

@@ -69,7 +69,7 @@
     "react-leaflet": "^4.2.0",
     "react-map-gl": "^7.1.6",
     "react-multi-date-picker": "^3.3.4",
-    "react-quill": "^2.0.0",
+    "react-quill-new": "^3.8.3",
     "react-rnd": "^10.4.12",
     "react-router-dom": "^6.6.1",
     "react-share-kit": "^1.1.0",

package.json

@@ -1,72 +1,86 @@
 @font-face {
-  font-family: 'AzarMehr';
-  src: url('/fonts/AzarMehr-DS2-Thin.woff2') format('woff2');
+  font-family: "AzarMehr";
+  src: url("/fonts/AzarMehr-DS2-Thin.woff2") format("woff2");
   font-weight: 100;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'AzarMehr';
-  src: url('/fonts/AzarMehr-DS2-Light.woff2') format('woff2');
+  font-family: "AzarMehr";
+  src: url("/fonts/AzarMehr-DS2-Light.woff2") format("woff2");
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'AzarMehr';
-  src: url('/fonts/AzarMehr-DS2-Medium.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'AzarMehr';
-  src: url('/fonts/AzarMehr-DS2-Medium.woff2') format('woff2');
+  font-family: "AzarMehr";
+  src: url("/fonts/AzarMehr-DS2-Medium.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'AzarMehr';
-  src: url('/fonts/AzarMehr-DS2-Bold.woff2') format('woff2');
+  font-family: "AzarMehr";
+  src: url("/fonts/AzarMehr-DS2-Bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'AzarMehr';
-  src: url('/fonts/AzarMehr-ExtraBold.woff2') format('woff2');
+  font-family: "AzarMehr";
+  src: url("/fonts/AzarMehr-ExtraBold.woff2") format("woff2");
   font-weight: 800;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'AzarMehr';
-  src: url('/fonts/AzarMehr-DS2-Black.woff2') format('woff2');
+  font-family: "AzarMehr";
+  src: url("/fonts/AzarMehr-DS2-Black.woff2") format("woff2");
   font-weight: 900;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'AzarMehr';
-  src: url('/fonts/AzarMehr-ExtraBlack.woff2') format('woff2');
-  font-weight: 950;
-  font-style: normal;
+  font-family: "DigitalNumber";
+  src: url("/fonts/Digital.woff") format("woff");
 }
 
-@font-face {
-  font-family: "DigitalNumber";
-  src: url('/fonts/Digital.woff') format('woff');
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+@supports (-webkit-touch-callout: none) {
+  html,
+  body,
+  #root {
+    height: -webkit-fill-available;
+  }
 }
 
 body {
   font-family: "AzarMehr" !important;
   overflow: hidden;
-  transition: all 0.3s ease 0s;
-  orientation: landscape;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
-input {
+input,
+button,
+textarea,
+select {
   font-family: "AzarMehr" !important;
 }
 
@@ -76,20 +90,8 @@ input[type="number"]::-webkit-outer-spin-button {
   margin: 0;
 }
 
-/* Hide the spinner controls in Firefox */
 input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-button {
-  font-family: "AzarMehr" !important;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: "AzarMehr" !important;
+  appearance: textfield;
 }
 
 p {
@@ -100,12 +102,33 @@ a {
   text-decoration: none;
 }
 
+/* light mode */
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #0066ff;
+}
+
+/* dark mode */
+html.dark ::-webkit-scrollbar-thumb {
+  background: #ffc700;
+}
+
+button {
+  cursor: pointer;
+}
+
+/* مدیا کوئری‌های باقی‌مانده */
 .map {
   width: 100%;
   height: 100%;
   border-radius: 10px;
+}
 
-  @media (min-width: 1024px) {
+@media (min-width: 1024px) {
+  .map {
     border-radius: 20px;
   }
 }
@@ -133,58 +156,9 @@ a {
 @keyframes tooltip-horizontal-move {
   0% {
     opacity: 0;
-    transition: all 0.3s;
     transform: translateX(-50px);
   }
-
   100% {
     opacity: 1;
-    transition: all 0.3s;
   }
 }
-
-
-/* light mode */
-::-webkit-scrollbar {
-  width: 5px;
-}
-/*
-::-webkit-scrollbar-track {
-  background: #85858590;
-}*/
-
-::-webkit-scrollbar-thumb {
-  background: #0066FF;
-}
-
-
-/* dark mode */
-/*
-html.dark ::-webkit-scrollbar-track {
-  background: #44444490;
-}*/
-
-html.dark ::-webkit-scrollbar-thumb {
-  background: #FFC700;
-}
-
-
-button {
-  cursor: pointer;
-}
-
-html,
-body {
-  -webkit-text-size-adjust: 100%;
-}
-
-input,
-textarea,
-button,
-select,
-label,
-p,
-span {
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-}

src/App.css

@@ -21,15 +21,13 @@ import { useAppHeight } from "./hooks/useAppHeight.js";
 import { ScrollDirectionProvider } from "./services/reducers/ScrollDirectionContext.jsx";
 function App() {
   useAppHeight();
-
+/** */
   useLayoutEffect(() => {
     window.Echo = new Echo({
       broadcaster: "pusher",
       key: "local",
       cluster: "",
       wsHost: "api.metarang.com",
-      wsPort: 6001,
-      wssPort: 6001,
       encrypted: true,
       forceTLS: true,
       disableStats: true,

src/App.jsx

@@ -1,28 +1,79 @@
 import styled from "styled-components";
-import { useRef, useEffect, forwardRef } from "react";
-import { useScrollDirection } from "../../hooks/useScrollDirection";
+import { useRef, useEffect, forwardRef, useCallback } from "react";
 import { useScrollDirectionContext } from "../../services/reducers/ScrollDirectionContext";
 
+const throttle = (func, limit) => {
+  let inThrottle;
+  return function (...args) {
+    if (!inThrottle) {
+      func.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+};
+
 const StyledContainer = styled.div`
   padding: 15px;
   width: 100%;
+  height: 100%;
   overflow-y: auto;
-  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+
   @media (max-height: 500px) and (max-width: 1000px) {
-    padding-bottom: 150px;
+    padding-bottom: 60px;
   }
 `;
 
 function BaseContainer({ children, className }, forwardedRef) {
   const internalRef = useRef(null);
   const ref = forwardedRef || internalRef;
-
-  const isScrollingDown = useScrollDirection(ref);
+  const lastScrollY = useRef(0);
   const { updateScrollDirection } = useScrollDirectionContext();
 
+  const handleScroll = useCallback(() => {
+    if (!ref.current) return;
+
+    const currentScrollY = ref.current.scrollTop;
+    const maxScroll = ref.current.scrollHeight - ref.current.clientHeight;
+
+    if (currentScrollY > maxScroll - 5) {
+      return;
+    }
+
+    if (currentScrollY < 3) {
+      if (lastScrollY.current > 3) {
+        updateScrollDirection(false);
+      }
+      lastScrollY.current = currentScrollY;
+      return;
+    }
+
+    const difference = currentScrollY - lastScrollY.current;
+    const isScrollingDown = difference > 5;
+
+    if (Math.abs(difference) > 5) {
+      updateScrollDirection(isScrollingDown);
+    }
+
+    lastScrollY.current = currentScrollY;
+  }, [ref, updateScrollDirection]);
+
   useEffect(() => {
-    updateScrollDirection(isScrollingDown);
-  }, [isScrollingDown, updateScrollDirection]);
+    const element = ref.current;
+    if (!element) return;
+
+    const throttledHandleScroll = throttle(handleScroll, 100); // throttle 100ms
+
+    element.addEventListener("scroll", throttledHandleScroll, {
+      passive: true,
+    });
+
+    return () => {
+      element.removeEventListener("scroll", throttledHandleScroll);
+    };
+  }, [handleScroll, ref]);
 
   return (
     <StyledContainer ref={ref} className={className}>