diff --git a/public/assets/locales/en/translation.json b/public/assets/locales/en/translation.json index 738c19f..bf0e390 100644 --- a/public/assets/locales/en/translation.json +++ b/public/assets/locales/en/translation.json @@ -1,9 +1,9 @@ { "demo-title": "Available demonstrations", - "popup-main-title": "Start new demonstration", + "popup-main-title": "Connect", "popup-main-caption": "Connect to an existing one", "popup-main-select": "Select residential complex", - "popup-main-btn-start": "Start", + "popup-main-btn-start": "Connect", "popup-main-btn-connect": "Connect", "popup-connect-title": "Connection code", "popup-connect-btn-mode": "Select demonstration mode", diff --git a/public/assets/locales/ru/translation.json b/public/assets/locales/ru/translation.json index 3059524..0ee4112 100644 --- a/public/assets/locales/ru/translation.json +++ b/public/assets/locales/ru/translation.json @@ -1,9 +1,9 @@ { "demo-title": "Доступные демонстрации", - "popup-main-title": "Начать новую демонстрацию", + "popup-main-title": "Подключиться", "popup-main-caption": "Подключиться к существующией", "popup-main-select": "Выбор жилого комплекса", - "popup-main-btn-start": "Начать", + "popup-main-btn-start": "Подключиться", "popup-main-btn-connect": "Подключиться", "popup-connect-title": "Код подключения к демонстрации", "popup-connect-btn-mode": "Выбор способа демонстрации", diff --git a/src/App.css b/src/App.css index 06354d8..e2c85b6 100644 --- a/src/App.css +++ b/src/App.css @@ -1,70 +1,96 @@ .background { - background-image: url(./images/background.png); + background: #151619; height: 100vh; width: 100%; - background-size: cover; } -.blur { - backdrop-filter: blur(12px); - height: 100vh; - width: 100%; - position: relative; -} + .content__container { + height: 100vh; + width: 400px; + display: flex; + justify-content: center; + align-items: center; position: absolute; - top: 50%; /* position the top edge of the element at the middle of the parent */ - left: 50%; /* position the left edge of the element at the middle of the parent */ - - transform: translate(-50%, -50%); /* This is a shorthand of + top: 50%; + left: 50%; + border-width: 0px 2px; + border-style: solid; + border-color: #23242A; + + transform: translate(-50%, -50%); + /* This is a shorthand of */ } -.content__player { - position: absolute; - top: 0; - bottom: 0; - height: auto; - overflow: hidden; - width: 100%; - +.card-container { + display: flex; + flex-direction: row; + gap: 30px; } -.content__container_off { - display: none; -} - -@media screen and (max-width: 639px) { - .content__container { - display: block; - position: static; - } - - .background { - background-image: none; - background-color: #262626; - } - - .blur { - position: relative; - overflow: hidden; - } -} - -.demos__tittle { - margin: 0; +.card-title { + margin: 28px 0 40px 0; font-style: normal; font-weight: 400; - font-size: 48px; + font-size: 38px; line-height: 100%; - /* or 40px */ - margin-bottom: 56px; + /* identical to box height, or 38px */ - color: #ffffff; + + color: #FFFFFF; } .demos_container { background: #141414; border-radius: 16px; } + + + +@media screen and (max-width: 1440px) { + .card-title { + margin: 22px 0 40px 0; + + } + + .card-container { + gap: 24px; + } +} + +@media screen and (max-width: 1152px) { + .card-container { + gap: 20px; + } + + .card-title { + margin: 42px 0 40px 0; + + } +} + +@media screen and (max-width: 920px) { + + .card-title { + margin: 36px 0 32px 0; + + } + + .card-title { + font-size: 28px; + } + + .card-container { + flex-direction: column; + gap: 10px; + } + + .content__container { + width: 100%; + border: none; + } + + +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index e086bf0..23c4ff6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,7 +3,7 @@ import { useEffect } from "react"; import { Redirect, Route, Switch, useHistory } from "react-router-dom"; import { Header } from "./components/header/header"; -import { Demos } from "./components/demos/demos"; +import { Card } from "./components/demos/Card"; import { Main } from "./components/Main/Main"; import { PlayerComponent } from "./components/playerComponent/playerComponent"; @@ -45,14 +45,14 @@ const App: React.FC = () => {
-

{t("demo-title")}

-
+

{t("demo-title")}

+
{cards.map((i: ICards) => ( - handleCards(i)} key={i._id} item={i} - > + > ))}
@@ -60,11 +60,9 @@ const App: React.FC = () => { {currentCard ? (
-
-
) : ( diff --git a/src/components/ControlPanel/ControlPanel.tsx b/src/components/ControlPanel/ControlPanel.tsx index cafe215..f2c0cf9 100644 --- a/src/components/ControlPanel/ControlPanel.tsx +++ b/src/components/ControlPanel/ControlPanel.tsx @@ -9,19 +9,20 @@ export const ControlPanel: React.FC = ({ handleOpenSharePopup, handleOpenExitPopup, handleMuteClick, - isMuted + isMuted, + isSidebarWide }) => { return (
- console.log("click!")}> - + console.log("click!")}> +
- - console.log("click!")}> + + console.log("click!")}>
- +
); }; diff --git a/src/components/LoadingPopup/LoadingPopup.css b/src/components/LoadingPopup/LoadingPopup.css index c66af4a..41db4e5 100644 --- a/src/components/LoadingPopup/LoadingPopup.css +++ b/src/components/LoadingPopup/LoadingPopup.css @@ -1,107 +1,26 @@ -.popup__content { - display: flex; - flex-direction: column; - gap: 24px; -} - -.popup__title { - font-style: normal; - font-weight: 400; - font-size: 22px; - line-height: 130%; - /* identical to box height, or 29px */ - margin: 0; - - /* App/White */ - - color: #ffffff; -} - -.logo__popup { - height: auto; - width: 100%; - margin-bottom: 48px; - object-fit: cover; -} - -.logo__popup_ex { - display: none; -} - -.popup__input { - padding: 5px 0px; - border-radius: 12px; - background: #404040; - height: 76px; - font-style: normal; - font-weight: 300; - font-size: 38px; - line-height: 46px; - /* identical to box height */ - text-align: center; - - letter-spacing: 0.3em; - - /* App/White */ - box-sizing: border-box; - border: none; - outline: none; - color: #ffffff; -} - -@media screen and (max-width: 639px) { - .logo__popup { - margin-bottom: 40px; - } - - .logo__popup_ex { - display: block; - height: auto; - width: 100%; - margin-bottom: 24px; - object-fit: cover; - } - - .popup__input { - height: 48px; - font-size: 30px; - } - - .popup__title { - font-size: 16px; - width: 78%; - } - - .popup__content { - gap: 16px; - } -} - .loader-container { - width: 494px; + width: 100%; + background: transparent; + padding: 56px; box-sizing: border-box; - background-color: #262626; - border: 1px solid #404040; - border-radius: 32px; - padding: 45px 0 51px 0; display: flex; flex-direction: column; - gap: 51px; + gap: 58px; align-items: center; } +.loading-logo-container { + display: flex; + flex-direction: column; +} + .loading-caption { font-style: normal; font-weight: 400; - font-size: 22px; - line-height: 130%; - /* identical to box height, or 29px */ - - text-align: center; - - /* Landing/White */ - - color: #ebebeb; + font-size: 16px; + line-height: 140%; + /* or 22px */ + color: #C5C7CE; } .loader { @@ -110,16 +29,15 @@ border-radius: 50%; display: inline-block; position: relative; - background: conic-gradient( - from 135deg at 50% 50%, - rgba(255, 255, 255, 0) -6.26deg, - #ffffff 314.83deg, - rgba(255, 255, 255, 0) 353.74deg, - #ffffff 674.83deg - ); + background: conic-gradient(from 135deg at 50% 50%, + rgba(255, 255, 255, 0) -6.26deg, + #ffffff 314.83deg, + rgba(255, 255, 255, 0) 353.74deg, + #ffffff 674.83deg); box-sizing: border-box; animation: rotation 1s linear infinite; } + .loader::after { content: ""; box-sizing: border-box; @@ -130,13 +48,15 @@ width: 100px; height: 100px; border-radius: 50%; - background: #262626; + background: #151619; } + @keyframes rotation { 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } -} +} \ No newline at end of file diff --git a/src/components/LoadingPopup/LoadingPopup.tsx b/src/components/LoadingPopup/LoadingPopup.tsx index ded2697..b61da3d 100644 --- a/src/components/LoadingPopup/LoadingPopup.tsx +++ b/src/components/LoadingPopup/LoadingPopup.tsx @@ -4,13 +4,16 @@ import loader from "./loader.svg"; import { useHistory } from "react-router-dom"; import { useTranslation } from "react-i18next"; -export const LoadingPopup: React.FC = ({}) => { +export const LoadingPopup: React.FC = ({ logo }) => { const history = useHistory(); const { t } = useTranslation(); return (
- Пожалуйста подождите +
+ лого + Пожалуйста подождите +
); diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx index b6ef1f3..c0374f4 100644 --- a/src/components/Main/Main.tsx +++ b/src/components/Main/Main.tsx @@ -50,7 +50,7 @@ export const Main: React.FC = () => { exit={"hidden"} > dispatch(createSession(currentCard.title))} > @@ -64,7 +64,8 @@ export const Main: React.FC = () => { animate={"show"} exit={"hidden"} > - + )} diff --git a/src/components/demos/Card.css b/src/components/demos/Card.css new file mode 100644 index 0000000..04c1f2a --- /dev/null +++ b/src/components/demos/Card.css @@ -0,0 +1,190 @@ +.card { + cursor: pointer; + width: 460px; + background: #1C1D21; + border-radius: 4px 0px 0px 4px; + +} + +.card-image { + border-radius: 4px; + + width: 100%; + height: 364px; + min-height: 260px; + min-width: 300px; +} + +.card-body { + box-sizing: border-box; + padding: 20px 24px 32px; +} + +.card-header { + display: flex; + flex-direction: row; + gap: 24px; + margin-bottom: 20px; + +} + +.card-icon { + width: 40px; + height: 40px; +} + +.caption-name { + margin: 0; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 125%; + margin-bottom: 2px; +} + +.card-location { + margin: 0; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 130%; + color: #73788C; +} + +.card-description-block { + display: flex; + flex-direction: column; + gap: 8px; +} + +.card-description { + font-style: normal; + font-weight: 400; + font-size: 20px; + margin: 0; + line-height: 140%; +} + +.card-description-second { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 140%; + /* or 22px */ + margin: 0; + /* Graff/Gray/5 */ + + color: #73788C; +} + +@media screen and (max-width: 1440px) { + .card { + width: 384px; + } + + .card-image { + height: 300px; + } + + .card-header { + gap: 16px; + } + + .card-body { + padding: 20px 20px 24px; + } + + .card-description { + font-size: 16px; + } + + .card-description-second { + font-size: 14px; + } + +} + +@media screen and (max-width: 1152px) { + .card { + width: 300px; + } + + .card-header { + gap: 12px; + } + + .card-image { + height: 260px; + } + + .card-body { + padding: 20px 12px 16px; + } + + + .caption-name {} + + .card-description { + font-size: 14px; + } + + .card-description-second { + font-size: 12px; + } + +} + +@media screen and (max-width: 920px) { + .card { + width: auto; + } + + .card-image { + height: auto; + } + + .card-header { + gap: 16px; + } + + .card-body { + padding: 20px 20px 24px; + } + + .card-description { + font-size: 16px; + } + + .card-description-second { + font-size: 14px; + } +} + +@media screen and (max-width: 640px) { + .card { + width: 100%; + } + + .card-header { + gap: 12px; + } + + .card-image { + height: auto; + } + + .card-body { + padding: 20px 12px 16px; + } + + + + .card-description { + font-size: 14px; + } + + .card-description-second { + font-size: 12px; + } + +} \ No newline at end of file diff --git a/src/components/demos/Card.tsx b/src/components/demos/Card.tsx new file mode 100644 index 0000000..d81e2a3 --- /dev/null +++ b/src/components/demos/Card.tsx @@ -0,0 +1,37 @@ +import "./Card.css"; +import "../../styles/styles.css"; +import iconButton from "./iconButton.svg"; +import { useAppSelector } from "../../hooks/redux"; + +export const Card: React.FC = ({ item, onClick }) => { + const { currentLang } = useAppSelector((state) => state.languageReducer); + + console.log(currentLang); + return ( +
onClick()} className="card"> + building +
+
+ лого +
+

{currentLang === "ru" ? item.title_full.ru : item.title_full.en}

+

{currentLang === "ru" ? item.location.ru : item.location.en}

+
+
+
+

{currentLang === "ru" + ? item.description.ru + : item.description.en} +

+ {item.description_second ?

{currentLang === "ru" + ? item.description_second.ru + : item.description_second.en} +

:

} + +
+ +
+
+ + ); +}; diff --git a/src/components/demos/demos.css b/src/components/demos/demos.css deleted file mode 100644 index 9ce0e59..0000000 --- a/src/components/demos/demos.css +++ /dev/null @@ -1,280 +0,0 @@ -.demo__container_mobile { - padding: 0; -} - -.demos_container { - font-family: "Inter"; - display: flex; - flex-direction: row; - justify-content: center; - border-radius: 16px; - position: relative; - text-decoration: none; -} - -.demo__container { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 24px; -} - - -.demo { - cursor: pointer; - display: flex; - flex-direction: column; - height: 581px; -} - -.demo_image { - background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); - border-radius: 16px; - object-fit: cover; - width: 100%; - height: 300px; -} - -.demo_info { - box-sizing: border-box; - position: relative; - padding: 32px; - display: flex; - flex-direction: column; - gap: 20px; - width: 100%; -} - -.title__demo { - font-style: normal; - font-weight: 500; - font-size: 22px; - line-height: 100%; - /* identical to box height, or 24px */ - - /* Landing/White */ - - color: #ebebeb; -} - -.caption { - margin: 0; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 120%; - /* identical to box height, or 17px */ - - /* Landing/White */ - - color: #ebebeb; - - opacity: 0.5; -} - - -.caption1 { - margin: 0 0 10px 0; - - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 130%; - - /* or 25px */ - - /* Landing/White */ - - color: #ebebeb; -} - -.caption2 { - margin: 0; - - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 140%; - /* or 20px */ - - /* Landing/White */ - - color: #ebebeb; - - opacity: 0.5; -} - -.width { - align-items: flex-end; -} - -.title__block { - display: flex; - gap: 5px; - flex-direction: column; -} - -.title__demo { - margin: 0; -} - -.demo__icon { - position: absolute; - width: 16px; - height: 16px; - right: 32px; - top: 58%; -} - - -.demos_container:hover > div > img { - transition: opacity ease-out 0.2s; - opacity: 1; -} - -.demos__list { - display: flex; - flex-direction: column; - gap: 20px; -} - -@media screen and (min-width: 1600px) { - .demo__icon { - top: 56%; - } - - .demo_image { - height: 360px; - } - - .title__demo { - font-size: 26px; - } - - .caption { - font-size: 16px; - } - - .caption1 { - font-size: 20px; - } - - .caption2 { - font-size: 16px; - } - - .demo { - height: 700px; - } - - .demo__container { - gap: 30px; - } -} - -@media screen and (max-width: 1279px) { - .demo__icon { - top: 334px; - top: 234px; - right: 24px; - } - - .demos__tittle { - font-size: 40px; - } - - .demo_image { - height: 210px; - } - - .demo__container { - gap: 20px; - } - - .demo_info { - padding: 32px; - } - - .title__demo { - font-size: 16px; - } - - .caption { - font-size: 12px; - } - - .caption1 { - font-size: 13px; - } - - .caption2 { - font-size: 11px; - } - - .demo_info { - gap: 12px; - padding: 24px; - } - - .demo { - height: 434px; - } -} - -@media screen and (max-width: 1024px) { - .title__demo { - font-size: 1.5vw; - } - - .caption { - font-size: 1.2vw; - } - - .caption1 { - font-size: 1.3vw; - } - - .caption2 { - font-size: 1.1vw; - } -} - -@media screen and (max-width: 639px) { - .demo__container { - grid-template-columns: 1fr; - gap: 10px; - } - - .demo__icon { - right: 16px; - top: 228px; - } - - .title__demo { - font-size: 3.5vw; - } - - .caption { - font-size: 2.9vw; - } - - .caption1 { - font-size: 3.2vw; - } - - .caption2 { - font-size: 2.9vw; - } - - .demo_info { - padding: 16px; - } - - .demos__tittle { - font-size: 28px; - width: 300px; - } - - .demo { - height: 436px; - } -} diff --git a/src/components/demos/demos.tsx b/src/components/demos/demos.tsx deleted file mode 100644 index 5b56859..0000000 --- a/src/components/demos/demos.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import "./demos.css"; -import "../../styles/styles.css"; -import iconButton from "./iconButton.svg"; -import { useAppSelector } from "../../hooks/redux"; - -export const Demos: React.FC = ({ item, onClick }) => { - const { currentLang } = useAppSelector((state) => state.languageReducer); - - console.log(currentLang); - return ( -
onClick()} className="main-block__container"> -
-
- icon -
-
- buildingImg -
-
-

- {currentLang === "ru" ? item.title_full.ru : item.title_full.en} -

-

{item.location.ru}

-
-
-
-

- {currentLang === "ru" - ? item.description.ru - : item.description.en} -

- {item.description_second ? ( -

- {currentLang === "ru" - ? item.description_second.ru - : item.description_second.en} -

- ) : ( - <> - )} -
-
-
-
-
-
- ); -}; diff --git a/src/components/demos/iconButton.svg b/src/components/demos/iconButton.svg index 78c5309..5d0c365 100644 --- a/src/components/demos/iconButton.svg +++ b/src/components/demos/iconButton.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/components/playerComponent/playerComponent.tsx b/src/components/playerComponent/playerComponent.tsx index e8a7674..d793e89 100644 --- a/src/components/playerComponent/playerComponent.tsx +++ b/src/components/playerComponent/playerComponent.tsx @@ -35,7 +35,6 @@ export const PlayerComponent: React.FC = ({ closeStream }) => {
- logoRC -
-
-

{t("popup-main-title")}

- -
-
- - -
+
+ лого +
+ +
+
+ ); }; diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 4779e16..e94147d 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -6,17 +6,19 @@ import { PopupShare } from "../PopupShare/PopupShare"; import { ExitPopup } from "../ExitPopup/ExitPopup"; import { ControlPanel } from "../ControlPanel/ControlPanel"; import { AnimatePresence, motion } from "framer-motion"; -import { sidebarVariants, popupAnimation } from "../../utils/animationProps"; +import { sidebarVariants, popupAnimation, wideSidebarVariants } from "../../utils/animationProps"; +import { WideSidebarButton } from "../ui/WideSidebarButton/WideSidebarButton"; export const Sidebar: React.FC = ({ closeStream }) => { - const [open, setOpen] = useState(true); + const [open, setOpen] = useState(false); const [popup, setPopup] = useState({ popup1: false, popup2: false, }); const [selected, setSelected] = useState(false); + const [wideSidebar, setWideSidebar] = useState(false) const [isMuted, setMuted] = useState(true); @@ -46,10 +48,13 @@ export const Sidebar: React.FC = ({ closeStream }) => { } function closeSideBar() { - setOpen((prev) => !prev); setSelected(false); + setOpen(false); + setWideSidebar(false) } + + useEffect(() => () => unmountComponent(), []); function unmountComponent() { @@ -60,29 +65,36 @@ export const Sidebar: React.FC = ({ closeStream }) => { }); } + console.log(wideSidebar, 'wide', open, 'open') return (
-
+
- - + +
+ setWideSidebar(true)} className="toolbar-field-part"> + +
-
+ {!open && setOpen(true)} className="toolbar-open-button"> -
+ } {popup.popup1 && ( diff --git a/src/components/sidebar/toolbar.css b/src/components/sidebar/toolbar.css index 7884141..a819941 100644 --- a/src/components/sidebar/toolbar.css +++ b/src/components/sidebar/toolbar.css @@ -13,6 +13,14 @@ box-sizing: border-box; } +.toolbar-wide-button { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + position: absolute; + +} + .toolbar-confirm-block { display: flex; gap: 8px; @@ -26,15 +34,15 @@ } .toolbar-field { - width: 60px; background: #333333; + overflow: hidden; padding: 14px 15px; box-sizing: border-box; height: 100%; display: flex; flex-direction: column; justify-content: space-between; - align-items: center; + align-items: flex-start; } .toolbar-field-part { @@ -90,8 +98,10 @@ } .toolbar-button-area { + align-items: center; position: relative; display: flex; + gap: 8px; /* background-color: #333333; */ /* border-top-left-radius: 50px solid #4f4f4f; */ } diff --git a/src/components/ui/ControlButton/ControlButton.tsx b/src/components/ui/ControlButton/ControlButton.tsx index 6568b10..d75fc23 100644 --- a/src/components/ui/ControlButton/ControlButton.tsx +++ b/src/components/ui/ControlButton/ControlButton.tsx @@ -4,7 +4,7 @@ import control from "../../../images/icons/control.svg"; import { THOC } from "../../../utils/types"; -export const ControlButton: React.FC = ({ onClick }) => { +export const ControlButton: React.FC = ({ onClick, isSidebarWide }) => { const [active, setActive] = useState(false); const button = { icon: control, @@ -19,6 +19,6 @@ export const ControlButton: React.FC = ({ onClick }) => { } return
- +
}; diff --git a/src/components/ui/ExitButton/ExitButton.tsx b/src/components/ui/ExitButton/ExitButton.tsx index ad6199c..9a1f176 100644 --- a/src/components/ui/ExitButton/ExitButton.tsx +++ b/src/components/ui/ExitButton/ExitButton.tsx @@ -3,7 +3,7 @@ import { Button } from "../button/button"; import exit from "../../../images/icons/exit.svg"; import { THOC } from "../../../utils/types"; -export const ExitButton: React.FC = ({ onClick }) => { +export const ExitButton: React.FC = ({ onClick, isSidebarWide }) => { const [active, setActive] = useState(false); const button = { icon: exit, @@ -20,7 +20,7 @@ export const ExitButton: React.FC = ({ onClick }) => { return (
- +
); }; \ No newline at end of file diff --git a/src/components/ui/FullscreenButton/FullscreenButton.tsx b/src/components/ui/FullscreenButton/FullscreenButton.tsx index 6423ebd..67ff5c0 100644 --- a/src/components/ui/FullscreenButton/FullscreenButton.tsx +++ b/src/components/ui/FullscreenButton/FullscreenButton.tsx @@ -5,7 +5,7 @@ import fullscreen from "../../../images/icons/fullscreen.svg"; import fullscreenOff from "../../../images/icons/fullscreenOff.svg"; -export const FullscreenButton = ({ }) => { +export const FullscreenButton: React.FC = ({isSidebarOpen}) => { const [active, setActive] = useState(Boolean(document.fullscreenElement)); const [button, setButton] = useState({ icon: fullscreen, @@ -15,7 +15,7 @@ export const FullscreenButton = ({ }) => { }); - function handleClick() { + const handleClick = () => { setActive(Boolean(document.fullscreenElement)) if (!document.fullscreenElement) { document.body.requestFullscreen() @@ -38,7 +38,7 @@ export const FullscreenButton = ({ }) => { useEffect(() => { - function onFullscreenChange() { + const onFullscreenChange = () => { setActive(Boolean(document.fullscreenElement)); } document.addEventListener('fullscreenchange', onFullscreenChange); diff --git a/src/components/ui/LanguageButton/LanguageButton.tsx b/src/components/ui/LanguageButton/LanguageButton.tsx index 8e35fb4..e1d7828 100644 --- a/src/components/ui/LanguageButton/LanguageButton.tsx +++ b/src/components/ui/LanguageButton/LanguageButton.tsx @@ -18,7 +18,7 @@ const container = { }, }; -export const LanguageButton: React.FC = ({ hover, setHover }) => { +export const LanguageButton: React.FC = ({ hover, setHover, isSidebarWide }) => { const [active, setActive] = useState(false); const [open, setOpen] = useState(false); @@ -36,7 +36,7 @@ export const LanguageButton: React.FC = ({ hover, setHover }) => { return (
- + {open && ( = ({ onClick, isMuted, - translation, + isSidebarWide }) => { const button = { icon: microOn, @@ -19,7 +19,7 @@ export const MicroButton: React.FC = ({ return (
- +
); }; diff --git a/src/components/ui/ShareButton/ShareButton.tsx b/src/components/ui/ShareButton/ShareButton.tsx index 96b1e5f..47f5b22 100644 --- a/src/components/ui/ShareButton/ShareButton.tsx +++ b/src/components/ui/ShareButton/ShareButton.tsx @@ -2,7 +2,7 @@ import { Button } from "../button/button"; import share from "../../../images/icons/Share.svg"; -export const ShareButton: React.FC = ({ onClick }) => { +export const ShareButton: React.FC = ({ onClick, isSidebarWide }) => { const button = { icon: share, @@ -20,7 +20,7 @@ export const ShareButton: React.FC = ({ onClick }) => { return ( <>
- +
diff --git a/src/components/ui/WideSidebarButton/Menu.svg b/src/components/ui/WideSidebarButton/Menu.svg new file mode 100644 index 0000000..6d0f591 --- /dev/null +++ b/src/components/ui/WideSidebarButton/Menu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/ui/WideSidebarButton/WideSidebarButton.tsx b/src/components/ui/WideSidebarButton/WideSidebarButton.tsx new file mode 100644 index 0000000..2f1d93f --- /dev/null +++ b/src/components/ui/WideSidebarButton/WideSidebarButton.tsx @@ -0,0 +1,22 @@ +import { Button } from "../button/button" +import { useState, useEffect } from "react"; +import wideButton from './Menu.svg' + +export const WideSidebarButton: React.FC = ({ close, isSidebarWide }) => { + + + const [active, setActive] = useState(Boolean(document.fullscreenElement)); + const [button, setButton] = useState({ + icon: wideButton, + inactive: "fullscreen-control-btn", + active: "fullscreen-control-btn-active", + type: "fullscreen", + }); + + return ( +
+ + Скрыть меню +
+ ) +} \ No newline at end of file diff --git a/src/components/ui/button/button.tsx b/src/components/ui/button/button.tsx index 72c9bdb..85fea36 100644 --- a/src/components/ui/button/button.tsx +++ b/src/components/ui/button/button.tsx @@ -5,13 +5,16 @@ import { AnimatePresence, motion } from "framer-motion"; import { animationButton } from "../../../utils/animationProps"; import { useTranslation } from "react-i18next"; import { useAppSelector } from "../../../hooks/redux"; -export const Button: React.FC = ({ button, onClick, active }) => { +export const Button: React.FC = ({ button, onClick, active, isSidebarWide }) => { const [hover, setHover] = useState(false); const { currentLang } = useAppSelector((state) => state.languageReducer); + console.log(isSidebarWide) + const typeButton = button.type !== "fullscreen" && button.type !== "language"; function handleClick() { + setHover(false) onClick(); } @@ -45,7 +48,7 @@ export const Button: React.FC = ({ button, onClick, active }) => { )} - {hover && ( + { !isSidebarWide && hover && ( ) => { + console.log(action.payload) state.isLoading = false; state.error = action.payload; }, diff --git a/src/styles/styles.css b/src/styles/styles.css index 8c3f5d0..39b6d20 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -226,17 +226,16 @@ } .popup__container { - width: 494px; + width: 100%; - background: #262626; + background: transparent; - border-radius: 32px; - padding: 40px 48px 16px; + padding: 56px; box-sizing: border-box; } .logo__popup { - height: auto; + height: 94px; width: 100%; margin-bottom: 48px; object-fit: cover; @@ -309,7 +308,7 @@ transition: 0.3 ease; } -.line { +.popup-line { height: 1px; background-color: #404040; width: 280px; @@ -418,9 +417,7 @@ height: 100vh; } - .logo__popup { - margin-bottom: 40px; - } + .line { width: 80%; diff --git a/src/utils/animationProps.js b/src/utils/animationProps.js index 7aa303f..a5a215c 100644 --- a/src/utils/animationProps.js +++ b/src/utils/animationProps.js @@ -15,10 +15,18 @@ export const animationButton = { } export const sidebarVariants = { - open: { x: 0, transition: { ease: "easeIn" } }, + open: { x: -1, transition: { ease: "easeIn" } }, closed: { x: "-61px", transition: { ease: "easeIn" } }, }; +export const wideSidebarVariants = { + open: { width: "220px", transition: { ease: "easeIn" } }, + closed: { x: "-61px", transition: { ease: "easeIn" } }, +}; + + + + export const popupAnimation = { hidden: { opacity: 0, diff --git a/src/utils/api.ts b/src/utils/api.ts index 5e2c008..0d7e1e5 100644 --- a/src/utils/api.ts +++ b/src/utils/api.ts @@ -4,15 +4,17 @@ export default class MainApi { this._url = url; } - _checkStatus(promise: any) { + _checkStatus(promise: Promise) { return promise.then((res: any) => { if (res.ok) { return res.json(); } - return Promise.reject(`Ошибка ${res.status}`); + console.log(res.text(), 'test') + return Promise.reject(res.status); }); } + getRC() { const promise = fetch(`${this._url}/title/get`, { method: "GET", @@ -36,7 +38,7 @@ export default class MainApi { connectSession(code: any) { const promise = fetch( `${this._url}/session/connect?` + - new URLSearchParams({ session_id: code }), + new URLSearchParams({ session_id: code }), { method: "GET", }