Skip to content

Commit

Permalink
updateit
Browse files Browse the repository at this point in the history
  • Loading branch information
@summerhasuna
summerhasuna committed Jul 11, 2024
1 parent 3bb83cb commit e2a9a6f
Show file tree
Hide file tree
Showing 12 changed files with 171 additions and 193 deletions.
2 changes: 1 addition & 1 deletion src/app/competents/editorHp/editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -446,7 +446,7 @@ const EditorHp: React.FC<FormProps> = ({ onFormSubmit }) => {
</div>
</div>
</div>
{formData.templateD == "0" || formData.templateM == "0" ? (
{formData.templateD == "0" && formData.templateM == "0" ? (
""
) : (
<div className="ContainerOfInputs UniqueSpaceCounter">
Expand Down
6 changes: 5 additions & 1 deletion src/app/competents/layout/PreviewBanner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,11 @@ video {
overflow: hidden;
font-weight: 700;
max-width: max-content;
margin: 0 6px 0 0;
margin: 0 12px 0 0;

&:last-child {
margin: 0;
}
}

.oneCta {
Expand Down
7 changes: 6 additions & 1 deletion src/app/competents/layout/PreviewBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,12 @@ const PreviewBanner: React.FC<PreviewBannerProps> = ({
: "#"
}
style={{
backgroundColor: backgroundColor === "" ? "#000000" : backgroundColor,
backgroundColor:
backgroundColor === ""
? ImageLink
? ""
: "#000"
: backgroundColor,
}}
className={`${
deviceType == "Mobile"
Expand Down
43 changes: 43 additions & 0 deletions src/app/competents/layout/fullscreen.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from "react";

interface FullScreenProps {
isActive: boolean;
}

const FullScreen: React.FC<FullScreenProps> = ({ isActive }) => {
return (
<div className="flexEnd">
<div className="fullScreen">
{isActive ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
>
<path
d="M3 18V15H0V13H5V18H3ZM13 18V13H18V15H15V18H13ZM0 5V3H3V0H5V5H0ZM13 5V0H15V3H18V5H13Z"
fill="#2196F3"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
>
<path
d="M0 18V13H2V16H5V18H0ZM13 18V16H16V13H18V18H13ZM0 5V0H5V2H2V5H0ZM16 5V2H13V0H18V5H16Z"
fill="#2196F3"
/>
</svg>
)}
</div>
</div>
);
};

export default FullScreen;
142 changes: 95 additions & 47 deletions src/app/competents/layout/layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,65 +11,24 @@
width: 600px;
background-color: #fff;
position: relative;
transition: 0.4s;
transition: 0.2s;

@include tablet-large() {
width: 478px;
}
}

// .cricleClose {
// width: 58px;
// height: 58px;
// background: #2196F3;
// position: absolute;
// right: -32px;
// border-radius: 50px;
// top: 50%;
// transform: translateY(-50%);
// display: flex;
// align-items: center;
// justify-content: center;
// cursor: pointer;
// transform: rotate(0deg);
// transition: 0.4s;
// z-index: 33;
// }

// .hidSideBar {
// transform: translateX(-100%);


// .cricleClose {
// transform: rotate(180deg);
// right: -58px;
// }

// // .nav {
// // opacity: 0;
// // }
// }

// .fullwidth {
// .PreviewSide {
// position: absolute;
// width: 100%;
// left: 0;
// top: 0;
// margin: 0;
// }

// .DesktopStyle {
// height: 500px;
// }
// }

.scrollBar {
padding-bottom: 40px;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
max-height: 90vh;
width: 600px;

@include tablet-large {
width: 239px;
}

&::-webkit-scrollbar {
width: 5px;
Expand Down Expand Up @@ -106,6 +65,7 @@
.PreviewSide {
margin: 100px auto;
width: 1101.304px;
transition: 0.4s;

@include desktop() {
width: 746px;
Expand Down Expand Up @@ -271,4 +231,92 @@ blockquote {
margin: auto;
height: 360px;
overflow: hidden;
}

.fullScreen {
border-radius: 4px;
background: #ffffff;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05), 0px 6px 13px 0px rgba(0, 0, 0, 0.06), 0px 1px 6px 0px rgba(0, 0, 0, 0.04);
width: 38px;
height: 38px;
display: flex;
align-items: center;
text-align: center;
border-radius: 4px;
justify-content: center;
margin-bottom: 32px;
cursor: pointer;
}

.flexEnd {
width: 100%;
display: flex;
justify-content: flex-end;
}

/*Active full screen*/
.activeFullScreen {
.sideBar {
transform: translateX(-100%);
}

.PreviewSide {
width: 100%;
margin: auto;
position: absolute;
left: 0;
right: 0;
}

.flexEnd {
position: absolute;
z-index: 1;
top: 20px;
right: 20px;
}

.previewBanner {
height: 100%;
max-height: 500px;

@include desktop-medium {
max-height: 500px;
min-height: 278px;
}
}

.imagePreview {
aspect-ratio: auto;
display: block;
height: 60vh;
max-height: 500px;
}

.contentPostion {
zoom: 1;
}

.button {
zoom: 1;
}

.halfBanner {
width: 50%;
min-height: 500px;
}

.imagePreviewHalf {
aspect-ratio: auto;
display: block;
height: 60vh;
max-height: 500px;
}

.textside {
zoom: 1;
}

blockquote {
display: none;
}
}
61 changes: 17 additions & 44 deletions src/app/competents/layout/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,32 @@
// components/Layout.tsx
"use client";
import React, { useEffect, useRef } from "react";
import React, { useState } from "react";
import Navbar from "../navbar/navbar";
import PreviewBanner from "./PreviewBanner";
import PreviewCode from "./PreviewCode";
import FullScreen from "./fullscreen";

interface LayoutProps {
children: React.ReactNode;
currentPage: string;
formDataHp: any;
formDataHp: any; // Replace with appropriate type if available
}

const Layout: React.FC<LayoutProps> = ({
children,
currentPage,
formDataHp,
}) => {
// const btnCloseRef = useRef<HTMLDivElement>(null);
// const sideBarRef = useRef<HTMLDivElement>(null);
// const containerRef = useRef<HTMLDivElement>(null);
// useEffect(() => {
// const btnClose = btnCloseRef.current;
// const sideBar = sideBarRef.current;
// const container = containerRef.current;
// const handleToggleSidebar = () => {
// if (sideBar) {
// sideBar.classList.toggle("hidSideBar");
// }
// if (container) {
// container.classList.toggle("fullwidth");
// }
// };
const [isFullScreen, setIsFullScreen] = useState(false);

// if (btnClose) {
// btnClose.addEventListener("click", handleToggleSidebar);
// }
const handleFullScreenClick = () => {
setIsFullScreen(!isFullScreen);
};

// return () => {
// if (btnClose) {
// btnClose.removeEventListener("click", handleToggleSidebar);
// }
// };
// }, []);
return (
<div className="allContainer">
<div className={`allContainer ${isFullScreen ? "activeFullScreen" : ""}`}>
<main className="container">
<div className="sideBar">
<div className="cricleClose">
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="22"
viewBox="0 0 14 22"
fill="none"
>
<path
d="M12 2L2 11L12 20"
stroke="white"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<header>
<Navbar />
</header>
Expand All @@ -85,6 +50,14 @@ const Layout: React.FC<LayoutProps> = ({
)}
{currentPage === "HP" && (
<div>
{formDataHp.device == "Desktop" ? (
<div onClick={handleFullScreenClick}>
<FullScreen isActive={isFullScreen} />
</div>
) : (
""
)}

<PreviewBanner
ImageLink={formDataHp.imageLink}
VideoLink={formDataHp.videoLink}
Expand Down
15 changes: 0 additions & 15 deletions src/app/competents/navbar/navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

.nav {
height: 80px;
display: flex;
margin: 0;
padding: 0;

Expand All @@ -13,17 +12,13 @@

a {
text-decoration: none;
width: 600px;
display: block;
font-size: 24px;
font-style: normal;
font-weight: 700;
text-align: center;
color: #000;

@include tablet-large {
width: 239px;
}
}
}

Expand All @@ -34,14 +29,4 @@
.areaIndicator {
height: 8px;
background-color: #DEDEDE;
}

.indicator {
position: absolute;
bottom: 0;
left: 0;
height: 8px;
width: 50%;
background-color: #2196F3;
transition: left 0.3s ease;
}
Loading

0 comments on commit e2a9a6f

Please sign in to comment.