Merge pull request #84 from shefing/fixes-version-two

responsiveness- text
shefing · Nov 14, 2024 · 4f74ca5 · 4f74ca5
2 parents 87b476c + f7a04e1
commit 4f74ca5
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 42 deletions.
diff --git a/library/math/numbersLine/src/components/showElements/Text.tsx b/library/math/numbersLine/src/components/showElements/Text.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import MoveableElement from "./MoveableElement";
 import { useNumbersLineContext } from "../../context/numbersLineContext";
 import { useDraggableElementAction } from "../../hooks/useDraggableElementAction";
-import { dragElementID, keboardActioKeys, keboardDifferentlButton, keboardLayers, keboardNormalButtons } from "../../consts/elementConsts";
+import { dragElementID, keboardActioKeys, keboardDifferentlButton, keboardLayers, keboardNormalButtons, screenHeightMinimum } from "../../consts/elementConsts";
 import Keyboard from "react-simple-keyboard";
 import "react-simple-keyboard/build/css/index.css";
 
@@ -12,7 +12,7 @@ interface IProps {
 }
 
 const Text = ({ element }: IProps) => {
-  const { idDraggElementClick, setIdDraggElementClick } = useNumbersLineContext();
+  const { windowSize, idDraggElementClick, setIdDraggElementClick } = useNumbersLineContext();
   const { deleteDragElement, updateDragElementsLayers } = useDraggableElementAction();
   const [dragging, setDragging] = useState(false);
   const [openKeyboard, setOpenKeyboard] = useState(true);
@@ -111,11 +111,11 @@ const Text = ({ element }: IProps) => {
             theme={"hg-theme-default hg-layout-default keyboard-background"}
             buttonTheme={[
               {
-                class: "keyboard-buttons keyboard-buttons-enter",
+                class: `keyboard-buttons keyboard-buttons-enter ${windowSize.height < screenHeightMinimum && "smallscreen"}`,
                 buttons: keboardDifferentlButton,
               },
               {
-                class: "keyboard-buttons",
+                class: `keyboard-buttons ${windowSize.height < screenHeightMinimum && "smallscreen"}`,
                 buttons: keboardNormalButtons,
               },
             ]}

diff --git a/library/math/numbersLine/src/consts/elementConsts.ts b/library/math/numbersLine/src/consts/elementConsts.ts
@@ -115,3 +115,5 @@ export const keboardActioKeys = ["Backspace", "Delete", "Enter", "ArrowDown", "A
 export const keboardLayers = ["7 8 9 - = ⌫", "4 5 6 + < >", "1 2 3 x ≤ ≥", ", 0 . / ⏎"];
 export const keboardDifferentlButton = "⏎";
 export const keboardNormalButtons = keboardLayers.filter((item) => item !== keboardDifferentlButton).join(" ");
+export const maxheightElementSmallScreen= 210 + buttonsDraggElementWidth + duplicateElementStepSpace
+export const maxheightElement= 250 + buttonsDraggElementWidth + duplicateElementStepSpace
diff --git a/library/math/numbersLine/src/globals.css b/library/math/numbersLine/src/globals.css
@@ -2,20 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer components{
-  .jump-base{
+@layer components {
+  .jump-base {
     @apply h-[40px] rounded-[1px] border-[#A4A3AE] border-[0.5px] text-center text-white text-[24px] font-[700] font-[Arial];
     /* jumpBaseHeight=40px */
   }
-  .text-box{
+
+  .text-box {
     @apply bg-transparent p-1 text-[26px] w-[325px] h-[50px] font-[Arial] focus-visible:outline-none focus-visible:border-[1.5px] focus-visible:border-[#009FDE];
     min-height: 30px;
     max-height: 150px;
   }
-   
-  .keyboard-buttons{
+
+  .keyboard-buttons {
     background: #E1F4FD !important;
-    border-radius: 0  !important;
+    border-radius: 0 !important;
     border-bottom: 0 !important;
     box-shadow: none !important;
     font-family: Arial;
@@ -24,107 +25,119 @@
     height: 50px !important;
     padding: 3px !important;
   }
-    .keyboard-buttons-enter{
+
+  .keyboard-buttons-enter {
     width: 105px !important;
     color: #ffffff !important;
     background: #30B675 !important;
-  } 
-  .keyboard-background{
+  }
+
+  .smallscreen {
+    height: 35px !important;
+  }
+
+  .keyboard-background {
     @apply bg-[#fff];
-    padding:0px !important;
-    padding-top:  5px  !important;
-    border-radius: 0  !important;
+    padding: 0px !important;
+    padding-top: 5px !important;
+    border-radius: 0 !important;
     width: auto;
     height: auto;
   }
-  .drag-element{
+
+  .drag-element {
     @apply flex absolute top-0 left-0
   }
+
   .cursor-blue {
     cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='27' viewBox='0 0 27 27' fill='none'%3E%3Cpath d='M8.68536 23.2143C8.61249 23.2872 8.51889 23.3357 8.41735 23.3534L3.98282 24.1234C3.30113 24.2418 2.7081 23.6488 2.82648 22.9671L3.59654 18.5326C3.61417 18.431 3.66274 18.3374 3.73561 18.2645L17.3637 4.63648L22.3134 9.58623L8.68536 23.2143Z' fill='%230059DE'/%3E%3Cpath d='M19.636 3.42464L22 1.06067L23.9445 3.00523L23.9445 3.00524L25.8891 4.94975L23.5251 7.31373L19.636 3.42464Z' fill='%230059DE' stroke='%230059DE' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"), pointer;
   }
+
   .cursor-green {
     cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='27' viewBox='0 0 27 27' fill='none'%3E%3Cpath d='M8.68536 23.2143C8.61249 23.2872 8.51889 23.3357 8.41735 23.3534L3.98282 24.1234C3.30113 24.2418 2.7081 23.6488 2.82648 22.9671L3.59654 18.5326C3.61417 18.431 3.66274 18.3374 3.73561 18.2645L17.3637 4.63648L22.3134 9.58623L8.68536 23.2143Z' fill='%2330B675'/%3E%3Cpath d='M19.636 3.42464L22 1.06067L23.9445 3.00523L23.9445 3.00524L25.8891 4.94975L23.5251 7.31373L19.636 3.42464Z' fill='%2330B675' stroke='%2330B675' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"), pointer;
   }
-  
+
   .cursor-orange {
     cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='27' viewBox='0 0 27 27' fill='none'%3E%3Cpath d='M8.68536 23.2143C8.61249 23.2872 8.51889 23.3357 8.41735 23.3534L3.98282 24.1234C3.30113 24.2418 2.7081 23.6488 2.82648 22.9671L3.59654 18.5326C3.61417 18.431 3.66274 18.3374 3.73561 18.2645L17.3637 4.63648L22.3134 9.58623L8.68536 23.2143Z' fill='%23F48460'/%3E%3Cpath d='M19.636 3.42464L22 1.06067L23.9445 3.00523L23.9445 3.00524L25.8891 4.94975L23.5251 7.31373L19.636 3.42464Z' fill='%23F48460' stroke='%23F48460' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"), pointer;
   }
+
   .cursor-delete {
     cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='22' viewBox='0 0 25 22' fill='none'%3E%3Cpath d='M23.2465 19.5233H14.02L19.1259 14.3949L23.3278 10.1729C23.7595 9.73175 24.0009 9.13772 24 8.51904C23.9991 7.90047 23.7559 7.30704 23.3229 6.86727L18.165 1.6897C17.7322 1.25003 17.1428 1.00184 16.5274 1H16.5205C15.9018 0.999385 15.3085 1.24776 14.8732 1.6897L10.6862 5.8967L1.6815 14.9416C1.24512 15.3808 1 15.9761 1 16.5968C1 17.2176 1.24515 17.8128 1.6815 18.2521L4.20161 20.7843C4.20702 20.7897 4.21438 20.7911 4.21979 20.7961C4.28445 20.8587 4.36014 20.9088 4.44287 20.9439L4.45656 20.9478V20.9479C4.54144 20.9818 4.63194 20.9995 4.72325 21H12.2322H12.2425H12.2534H23.2467C23.5095 21 23.7523 20.8592 23.8836 20.6305C24.015 20.402 24.015 20.1202 23.8836 19.8916C23.7523 19.663 23.5095 19.5221 23.2467 19.5221L23.2465 19.5233ZM2.4708 16.5969C2.47049 16.3696 2.56058 16.1514 2.72085 15.9909L11.2078 7.46343L17.5766 13.8627L11.9407 19.5232H5.02379L2.71941 17.2049C2.55833 17.0442 2.46864 16.825 2.47079 16.597L2.4708 16.5969Z' fill='%23009FDE' stroke='%23009FDE' stroke-width='0.25'/%3E%3C/svg%3E"), pointer;
   }
-  
-  
+
+
 
 }
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }

diff --git a/library/math/numbersLine/src/hooks/useDraggableElementAction.ts b/library/math/numbersLine/src/hooks/useDraggableElementAction.ts
@@ -4,16 +4,16 @@ import { v4 as uuidv4 } from "uuid";
 import { LineRange, unitAmount } from "../type/ruler";
 import { ActionTypes, NaviKeniIconsTypes } from "../type/toolbar";
 import {
-  buttonsDraggElementWidth,
   duplicateElementStepSpace,
-  jumpBaseHeight,
-  jumpHeight,
   keniFoot,
   keniHeight,
   keniWidth,
+  maxheightElement,
+  maxheightElementSmallScreen,
   naviFoot,
   naviHeight,
   naviWidth,
+  screenHeightMinimum,
   textBoxWidth,
 } from "../consts/elementConsts";
 import { calcXTransform } from "../lib/utils";
@@ -66,8 +66,7 @@ export const useDraggableElementAction = () => {
     setDuplicateElementSpace((prevPixels) => prevPixels + duplicateElementStepSpace);
     const outOfRange =
       xTranslate > windowSize.width - windowSize.width / calculatUnitsAmount() - calculatRulerPaddingSides() ||
-      yTranslate > windowSize.height - (jumpHeight + jumpBaseHeight + buttonsDraggElementWidth + duplicateElementStepSpace);
-
+      yTranslate > windowSize.height - (windowSize.height < screenHeightMinimum ? maxheightElementSmallScreen: maxheightElement)
     outOfRange && setDuplicateElementSpace(0);
   };