@@ -231,30 +231,28 @@ <h2 class="padding:5px_0px">Demo</h2>
231
231
</ span >
232
232
</ div >
233
233
< div class ="position:sticky top:0 padding:15px_0px height:100vh ">
234
- <!-- SandBox -->
235
- < div class ="container svColumn overflow:hidden card position:relative border-radius:2px width:auto height:100% " id ="sandbox ">
236
- < div class ="font-size:20px position:absolute top:10px right:10px opacity:0.6 ">
237
- < a class ="margin-right:10px " id ="code " show ="#preview " hide ="#code, #view "> < i class ="far fa-eye "> </ i > </ a >
238
- < a class ="margin-right:10px " id ="preview " show ="#code, #view " hide ="#preview " hidden > < i class ="fas fa-code "> </ i > </ a >
239
- < a class ="margin-right:5px " fullscreen target ="#playground "> < i class ="fas fa-expand "> </ i > </ a >
240
- </ div >
241
- < div class ="svRow ">
242
-
243
- < div class ="svColumn ">
244
-
245
- < div class ="svPanel " id ="view ">
246
- < textarea collection ="demos " document_id ="" name ="demo " save ="false " id ="demo " class ="height:100% width:100% border:none resize:none padding:5px "> </ textarea >
247
- </ div >
248
- < div class ="svSplitter svHorizontal "> </ div >
249
-
250
- < div class ="svPanel ">
251
- < iframe get-value ="#demo " frameBorder ="0 " height ="100% " width ="100% " class ="min-width:300px "> </ iframe >
252
- </ div >
253
-
254
- </ div >
255
- </ div >
256
- </ div >
257
- <!-- End SandBox -->
234
+ <!-- SandBox -->
235
+ < div class ="position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px " id ="playground ">
236
+
237
+ < div id ="demo-code " resizable class ="position:relative height:50% ">
238
+ < textarea type ="code " lang ="html " collection ="demos " document_id ="" name ="demo " save ="false " id ="demo " class ="height:100% width:100% outline:none border:none resize:none padding:5px "> </ textarea >
239
+ < div resize ="bottom " class ="background:lightgrey "> </ div >
240
+ </ div >
241
+
242
+ < div id ="demo-preview " class ="position:relative display:flex height:100% background-color:white ">
243
+ < div get-value ="#demo " class ="padding:20px "> </ div >
244
+ </ div >
245
+
246
+ < div class ="font-size:20px position:absolute top:10px right:10px opacity:0.6 ">
247
+ < a class ="margin-right:10px " id ="eye " show ="#eye-slash " hide ="#eye, #demo-preview " toggle ="code-height " toggle-target ="#demo-code "> < i class ="far fa-eye "> </ i > </ a >
248
+ < a class ="margin-right:10px " hidden id ="eye-slash " show ="#eye, #demo-preview " hide ="#eye-slash " toggle ="code-height " toggle-target ="#demo-code "> < i class ="fas fa-eye-slash "> </ i > </ a >
249
+ < a class ="margin-right:10px " id ="code " show ="#code-slash " hide ="#code, #demo-code "> < i class ="fa fa-code "> </ i > </ a >
250
+ < a class ="margin-right:10px " hidden id ="code-slash " show ="#code, #demo-code " hide ="#code-slash "> < i class ="fas fa-code "> </ i > </ a >
251
+ < a class ="margin-right:5px " fullscreen target ="#playground "> < i class ="fas fa-expand "> </ i > </ a >
252
+ </ div >
253
+
254
+ </ div >
255
+ <!-- End SandBox -->
258
256
</ div >
259
257
</ div >
260
258
</ div >
0 commit comments