выуживаю высоту секции(сломано)
This commit is contained in:
Tamara
parent
fc9f0010c1
commit
d357242cde
31
package-lock.json
generated
31
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
},
|
||||
|
||||
@ -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,
|
||||
}}
|
||||
>
|
||||
|
||||
@ -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));
|
||||
|
||||
return (
|
||||
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
16
yarn.lock
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user