Landings/Services
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

выуживаю высоту секции(сломано)

Browse Source
This commit is contained in:
Tamara 2023-07-27 22:10:32 +03:00
parent fc9f0010c1
commit d357242cde
5 changed files with 71 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
package-lock.json generated
View File

@ -38,6 +38,7 @@
"start-server-and-test": "^2.0.0",
"styled-components": "^5.3.6",
"typescript": "^4.9.5",
"use-resize-observer": "^9.1.0",
"web-vitals": "^2.1.4",
"zustand": "^4.3.8"
}
@ -3254,6 +3255,11 @@
"@jridgewell/sourcemap-codec": "1.4.14"
}
},
"node_modules/@juggle/resize-observer": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
"integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
},
"node_modules/@leichtgewicht/ip-codec": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@ -17968,6 +17974,18 @@
"requires-port": "^1.0.0"
}
},
"node_modules/use-resize-observer": {
"version": "9.1.0",
"resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",
"integrity": "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==",
"dependencies": {
"@juggle/resize-observer": "^3.3.1"
},
"peerDependencies": {
"react": "16.8.0 - 18",
"react-dom": "16.8.0 - 18"
}
},
"node_modules/use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@ -21283,6 +21301,11 @@
"@jridgewell/sourcemap-codec": "1.4.14"
}
},
"@juggle/resize-observer": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
"integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
},
"@leichtgewicht/ip-codec": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@ -31760,6 +31783,14 @@
"requires-port": "^1.0.0"
}
},
"use-resize-observer": {
"version": "9.1.0",
"resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",
"integrity": "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==",
"requires": {
"@juggle/resize-observer": "^3.3.1"
}
},
"use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",

1
package.json
View File

@ -33,6 +33,7 @@
"start-server-and-test": "^2.0.0",
"styled-components": "^5.3.6",
"typescript": "^4.9.5",
"use-resize-observer": "^9.1.0",
"web-vitals": "^2.1.4",
"zustand": "^4.3.8"
},

9
src/kit/section.tsx
View File

@ -2,6 +2,8 @@ import * as React from "react";
import Box from "@mui/material/Box";
import { SxProps, Theme, useMediaQuery } from "@mui/material";
import { useTheme } from "@mui/material/styles";
// import {createRef, useEffect} from "react";
// import useResizeObserver from "use-resize-observer";
interface Props {
sxsect?: SxProps<Theme>;
@ -11,14 +13,19 @@ interface Props {
bg: string;
children: React.ReactNode;
sxcont?: SxProps<Theme>;
ref?: any
}
export default function Section(props: Props) {
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMinTablet = useMediaQuery(theme.breakpoints.down(886));
const isRubberSmall = useMediaQuery(theme.breakpoints.down(500));
return (
<Box
ref={props.ref}
component={props.tag}
backgroundColor={props.bg}
sx={{
@ -27,7 +34,7 @@ export default function Section(props: Props) {
display: "flex",
justifyContent: "center",
alignItems: "center",
// padding: isRubberSmall ? (height === 600 ? "0 0 10px 0" : "0 0 32px 0") : "136px 0 110px 0",
...props.sxsect,
}}
>

17
src/pages/MobileApps/Section1/Section1.tsx
View File

@ -1,4 +1,4 @@
import { useState } from "react";
import { createRef, useEffect} from "react";
import { Box, Typography, Button, useMediaQuery } from "@mui/material";
import { useTheme } from "@mui/material/styles";
@ -7,6 +7,7 @@ import Section from "../../../kit/section";
import phoneImage from "../../../image/img_mobile/phone1.png";
import phoneMobil from "../../../image/img_mobile/img_phone_bubbles_1.png";
import { setIsContactFormOpen } from "../../../stores/contactForm";
import useResizeObserver from "use-resize-observer";
export default function Section1() {
const theme = useTheme();
@ -15,8 +16,13 @@ export default function Section1() {
const isMinTablet = useMediaQuery(theme.breakpoints.down(886));
const isRubberSmall = useMediaQuery(theme.breakpoints.down(500));
const { ref, width, height } = useResizeObserver<HTMLDivElement>();
console.log(height)
return (
<Section
ref={ref}
tag="section"
bg="#F2F3F7"
mwidth="1200px"
@ -79,7 +85,14 @@ export default function Section1() {
Текст-заполнитель — это текст, который имеет некоторые характеристики
реального письменного текста, но является
</Typography>
<Box sx={{ position: "relative "}}>
{/*тут пример того как это работает, у этого бокса высота 84, если подставить её, то фон становится черным, */}
{/*если использовать <== всё сломается*/}
<Box
//ref={ref}
sx={{
position: "relative",
// backgroundColor: height === 70 ? "black" : "tomato"
}}>
<Button
onClick={() => setIsContactFormOpen(true)}
disableRipple

16
yarn.lock
View File

@ -1680,6 +1680,11 @@
"@jridgewell/resolve-uri" "3.1.0"
"@jridgewell/sourcemap-codec" "1.4.14"
"@juggle/resize-observer@^3.3.1":
"integrity" "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
"resolved" "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz"
"version" "3.4.0"
"@leichtgewicht/ip-codec@^2.0.1":
"integrity" "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
"resolved" "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz"
@ -8494,7 +8499,7 @@
"strip-ansi" "^6.0.1"
"text-table" "^0.2.0"
"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", "react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>= 16.8.0", "react-dom@>=16.6.0", "react-dom@>=16.8":
"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", "react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>= 16.8.0", "react-dom@>=16.6.0", "react-dom@>=16.8", "react-dom@16.8.0 - 18":
"integrity" "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="
"resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
"version" "18.2.0"
@ -8622,7 +8627,7 @@
"loose-envify" "^1.4.0"
"prop-types" "^15.6.2"
"react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>= 16.8.0", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0":
"react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>= 16.8.0", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0", "react@16.8.0 - 18":
"integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
"resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
"version" "18.2.0"
@ -9997,6 +10002,13 @@
"querystringify" "^2.1.1"
"requires-port" "^1.0.0"
"use-resize-observer@^9.1.0":
"integrity" "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow=="
"resolved" "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz"
"version" "9.1.0"
dependencies:
"@juggle/resize-observer" "^3.3.1"
"use-sync-external-store@1.2.0":
"integrity" "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA=="
"resolved" "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"