Skip to content

Commit 18874e6

Browse files
ajay-dhangarajay-dhangar
committed
update css for responsive design of Editor
1 parent a1633b8 commit 18874e6

File tree

3 files changed

+227
-125
lines changed

3 files changed

+227
-125
lines changed

‎.imgbotconfig

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎src/pages/LiveEditor/index.css

Lines changed: 171 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,171 @@
1-
.editor_select_container{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:25rem;width:100vw}
2-
.editor_selcet_text{font-family:monospace;position:absolute;top:2%}
3-
.editor_select_imgage_container{display:flex;flex-direction:column;align-items:center}
4-
.editor_select_image{height:10rem}
5-
.editor_container{flex:1 0 20rem;display:flex;gap:1rem;justify-content:center;align-items:center;position:relative;padding:3rem;cursor:pointer}
6-
.editor_container:hover{border: 1px solid;}
7-
.normal_editor{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;width:100vw}
8-
.normal_editor .editor_box{
9-
flex: 1 0 30rem;
10-
height: 35rem;
11-
position:relative;
12-
}
13-
.normal_editor .output_container{height: 32.3rem;width: 100%;}
14-
.normal_editor .output_container{background: white;}
15-
.editor_box .editor_nav{position: absolute;z-index: 2;gap: 1rem;display: flex;top: 2%;justify-content: center;align-items: center;right: 1%;}
16-
.editor_nav .btn_activated{padding: 0.3rem 1rem;border: none;font-family: monospace;font-weight: 600;cursor: pointer;}
17-
.editor_nav .html{background: rgb(230,81,0);color: white;}
18-
.editor_nav .css{background:rgb(2,119,189);color: white;}
19-
.editor_nav .js{background:rgb(255,214,0);color: rgb(0, 0, 0);}
20-
.editor_nav .btn_deactivated{display: none;}
21-
.editor_settings_nav{position: absolute;bottom: 1%;right: 1%;}
22-
.editor_settings_nav img{height: 1.5rem;cursor: pointer;filter: var(--image-filter);}
23-
.editor_settings_nav .editor_setting_icon{display: flex;justify-content: flex-end;}
24-
.editor_settings_menu_con{border: 1px solid;padding: 0.3rem;margin-bottom: 0.2rem;transition: 0.3s ease-in;background: var(--docsearch-hit-background);}
25-
.editor_settings_menu_con.activate_menu{opacity: 1;}
26-
.editor_settings_menu_con.deactivate_menu{display: none;}
27-
.editor_settings_menu{display: flex;gap: 1rem;justify-content: space-between;align-items: center;margin: 0.5rem;}
28-
.editor_settings_menu p{margin: 0;}
29-
.editor_settings_menu button{height: 1.5rem; width: 1.5rem;display: flex;justify-content: center;font-family: monospace;font-weight: 900;background:rgb(2,119,189);color: white;border: none;align-items: center;}
30-
.editor_settings_menu input{height: 3rem;width: 3rem;}
31-
.editor_textarea_activate{
32-
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
33-
width: 100%;
34-
min-height: 100%;
35-
float: left;
36-
line-height: 14pt;
37-
font-weight: 200;
38-
padding: 10px;
39-
border: 1px solid;
40-
background: transparent;
41-
box-shadow: inset rgba(0,0,0,.05) 0 3px 10px;
42-
border-radius: 3px;
43-
transition: all 0.2s ease-in-out;
44-
appearance: none;
45-
-moz-appearance: none;
46-
-webkit-appearance: none;
47-
}
48-
49-
.editor_textarea_activate:focus {
50-
border-color: #33dd33;
51-
}
52-
.editor_textarea_deactivate{display: none;}
53-
1+
.editor_select_container {
2+
display: grid;
3+
grid-template-columns: repeat(2, minmax(0, 1fr));
4+
gap: 1rem;
5+
padding: 2rem 1rem;
6+
}
7+
8+
.editor_container {
9+
border-radius: 0.5rem;
10+
transition: 0.3s ease-in;
11+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
12+
padding: 1rem;
13+
cursor: pointer;
14+
border: 1px solid #ccc;
15+
}
16+
.editor_container:hover {
17+
border: 1px solid var(--ifm-color-primary);
18+
}
19+
.editor_container .editor_select_image_container {
20+
display: grid;
21+
grid-template-columns: repeat(3, minmax(0, 1fr));
22+
padding: 0.5rem;
23+
}
24+
.editor_select_text {
25+
font-family: monospace;
26+
font-weight: 600;
27+
text-align: center;
28+
}
29+
30+
.editor_container .editor_select_image_container .editor_select_image {
31+
height: 100%;
32+
width: 100%;
33+
border-radius: 0.5rem;
34+
object-fit: cover;
35+
}
36+
37+
.normal_editor {
38+
display: flex;
39+
flex-wrap: wrap;
40+
justify-content: center;
41+
align-items: center;
42+
width: 100vw;
43+
}
44+
.normal_editor .editor_box {
45+
flex: 1 0 30rem;
46+
height: 35rem;
47+
position: relative;
48+
}
49+
.normal_editor .output_container {
50+
height: 32.3rem;
51+
width: 100%;
52+
}
53+
.normal_editor .output_container {
54+
background: white;
55+
}
56+
.editor_box .editor_nav {
57+
position: absolute;
58+
z-index: 2;
59+
gap: 1rem;
60+
display: flex;
61+
top: 2%;
62+
justify-content: center;
63+
align-items: center;
64+
right: 1%;
65+
}
66+
.editor_nav .btn_activated {
67+
padding: 0.3rem 1rem;
68+
border: none;
69+
font-family: monospace;
70+
font-weight: 600;
71+
cursor: pointer;
72+
}
73+
.editor_nav .html {
74+
background: rgb(230, 81, 0);
75+
color: white;
76+
}
77+
.editor_nav .css {
78+
background: rgb(2, 119, 189);
79+
color: white;
80+
}
81+
.editor_nav .js {
82+
background: rgb(255, 214, 0);
83+
color: rgb(0, 0, 0);
84+
}
85+
.editor_nav .btn_deactivated {
86+
display: none;
87+
}
88+
.editor_settings_nav {
89+
position: absolute;
90+
bottom: 1%;
91+
right: 1%;
92+
}
93+
.editor_settings_nav img {
94+
height: 1.5rem;
95+
cursor: pointer;
96+
filter: var(--image-filter);
97+
}
98+
.editor_settings_nav .editor_setting_icon {
99+
display: flex;
100+
justify-content: flex-end;
101+
}
102+
.editor_settings_menu_con {
103+
border: 1px solid;
104+
padding: 0.3rem;
105+
margin-bottom: 0.2rem;
106+
transition: 0.3s ease-in;
107+
background: var(--docsearch-hit-background);
108+
}
109+
.editor_settings_menu_con.activate_menu {
110+
opacity: 1;
111+
}
112+
.editor_settings_menu_con.deactivate_menu {
113+
display: none;
114+
}
115+
.editor_settings_menu {
116+
display: flex;
117+
gap: 1rem;
118+
justify-content: space-between;
119+
align-items: center;
120+
margin: 0.5rem;
121+
}
122+
.editor_settings_menu p {
123+
margin: 0;
124+
}
125+
.editor_settings_menu button {
126+
height: 1.5rem;
127+
width: 1.5rem;
128+
display: flex;
129+
justify-content: center;
130+
font-family: monospace;
131+
font-weight: 900;
132+
background: rgb(2, 119, 189);
133+
color: white;
134+
border: none;
135+
align-items: center;
136+
}
137+
.editor_settings_menu input {
138+
height: 3rem;
139+
width: 3rem;
140+
}
141+
.editor_textarea_activate {
142+
font-family: "Courier New", Courier, "Lucida Sans Typewriter",
143+
"Lucida Typewriter", monospace;
144+
width: 100%;
145+
min-height: 100%;
146+
float: left;
147+
line-height: 14pt;
148+
font-weight: 200;
149+
padding: 10px;
150+
border: 1px solid;
151+
background: transparent;
152+
box-shadow: inset rgba(0, 0, 0, 0.05) 0 3px 10px;
153+
border-radius: 3px;
154+
transition: all 0.2s ease-in-out;
155+
appearance: none;
156+
-moz-appearance: none;
157+
-webkit-appearance: none;
158+
}
159+
160+
.editor_textarea_activate:focus {
161+
border-color: #33dd33;
162+
}
163+
.editor_textarea_deactivate {
164+
display: none;
165+
}
166+
167+
@media screen and (max-width: 768px) {
168+
.editor_select_container {
169+
grid-template-columns: repeat(1, minmax(0, 1fr));
170+
}
171+
}

‎src/pages/LiveEditor/index.tsx

Lines changed: 56 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
1-
import React,{useState,useEffect} from "react";
1+
import React, { useState, useEffect } from "react";
22
import Layout from "@theme/Layout";
3-
import "./index.css";
3+
import "./index.css";
44
import BasicEditor from "./BasicEditor";
5-
const html="/icons/html-5.svg"
6-
const css="/icons/css.svg"
7-
const Js="/icons/js.svg"
8-
const react="/icons/jsx.svg"
5+
const html = "/icons/html-5.svg";
6+
const css = "/icons/css.svg";
7+
const Js = "/icons/js.svg";
8+
const react = "/icons/jsx.svg";
99
export default function LiveEditor() {
10-
const [state,setState]=useState("none")
11-
const [Theme,setNewTheme]=useState("dark")
10+
const [state, setState] = useState("none");
11+
const [Theme, setNewTheme] = useState("dark");
1212

1313
useEffect(() => {
1414
const htmlElement = document.documentElement;
1515

1616
// Function to update theme
1717
const updateTheme = () => {
18-
const newTheme = htmlElement.getAttribute('data-theme');
18+
const newTheme = htmlElement.getAttribute("data-theme");
1919

20-
if (newTheme === 'dark') {
21-
setNewTheme("dark")
20+
if (newTheme === "dark") {
21+
setNewTheme("dark");
2222
} else {
23-
setNewTheme("light")
23+
setNewTheme("light");
2424
}
2525
};
2626

2727
// Initial theme setup
28-
updateTheme();
28+
updateTheme();
2929
const observer = new MutationObserver(() => {
3030
updateTheme();
3131
});
3232

3333
observer.observe(htmlElement, {
3434
attributes: true,
35-
attributeFilter: ['data-theme'],
35+
attributeFilter: ["data-theme"],
3636
});
3737
return () => {
3838
observer.disconnect();
@@ -45,52 +45,53 @@ export default function LiveEditor() {
4545
margin: "1rem",
4646
display: "flex",
4747
justifyContent: "center",
48-
alignItems: "center"
48+
alignItems: "center",
4949
}}
5050
>
51-
{state==="none"?
52-
<div className="editor_select_container">
53-
<div className="editor_container" onClick={()=>setState("basic")}>
54-
<h2 className="editor_selcet_text">HTML CSS JS Editor</h2>
55-
<div className="editor_select_imgage_container">
56-
<img src={html} alt="html" className="editor_select_image" />
57-
<h2>HTML</h2>
51+
{state === "none" ? (
52+
<div className="editor_select_container">
53+
<div className="editor_container" onClick={() => setState("basic")}>
54+
<h2 className="editor_select_text">
55+
Basic Text Editor
56+
</h2>
57+
<div className="editor_select_image_container">
58+
<img src={html} alt="html" className="editor_select_image" />
59+
<img src={css} alt="css" className="editor_select_image" />
60+
<img src={Js} alt="js" className="editor_select_image" />
61+
</div>
5862
</div>
59-
<div className="editor_select_imgage_container">
60-
<img src={css} alt="css" className="editor_select_image" />
61-
<h2>CSS</h2>
63+
<div
64+
className="editor_container"
65+
onClick={() => setState("advance")}
66+
>
67+
<h2 className="editor_select_text">React.Js Editor</h2>
68+
<div className="editor_select_image_container">
69+
<img src={react} alt="react" className="editor_select_image" />
70+
</div>
6271
</div>
63-
<div className="editor_select_imgage_container">
64-
<img src={Js} alt="js" className="editor_select_image" />
65-
<h2>JavaScript</h2>
66-
</div>
67-
</div>
68-
<div className="editor_container" onClick={()=>setState("advance")}>
69-
<h2 className="editor_selcet_text">React.Js Editor</h2>
70-
<div className="editor_select_imgage_container">
71-
<img src={react} alt="react" className="editor_select_image"/>
72-
<h2>React.JS</h2>
7372
</div>
74-
</div>
75-
</div>
76-
:state==="advance"?
77-
<iframe
78-
src={`https://codesandbox.io/embed/github/Ajay-Dhangar/my-react-app/main?fontsize=14&hidenavigation=1&theme=${Theme==="dark"?"dark":"light"}`}
79-
style={{
80-
width: "100%",
81-
height: "600px",
82-
border: "0",
83-
borderRadius: 8,
84-
overflow: "hidden",
85-
position: "static",
86-
zIndex: 0,
87-
}}
88-
className="shadow-2xl"
89-
title="dazzling-swanson-wne32"
90-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
91-
sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
92-
/> :<BasicEditor />
93-
}
73+
) : state === "advance" ? (
74+
<iframe
75+
src={`https://codesandbox.io/embed/github/Ajay-Dhangar/my-react-app/main?fontsize=14&hidenavigation=1&theme=${
76+
Theme === "dark" ? "dark" : "light"
77+
}`}
78+
style={{
79+
width: "100%",
80+
height: "600px",
81+
border: "0",
82+
borderRadius: 8,
83+
overflow: "hidden",
84+
position: "static",
85+
zIndex: 0,
86+
}}
87+
className="shadow-2xl"
88+
title="dazzling-swanson-wne32"
89+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
90+
sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
91+
/>
92+
) : (
93+
<BasicEditor />
94+
)}
9495
</div>
9596
</Layout>
9697
);

0 commit comments

Comments
 (0)