@@ -106,30 +106,28 @@ <h2 class="padding:5px_0px">Demo</h2>
106
106
</ span >
107
107
</ div >
108
108
< div class ="position:sticky top:0 padding:15px_0px height:100vh ">
109
- <!-- SandBox -->
110
- < div class ="container svColumn overflow:hidden card position:relative border-radius:2px width:auto height:100% " id ="sandbox ">
111
- < div class ="font-size:20px position:absolute top:10px right:10px opacity:0.6 ">
112
- < a class ="margin-right:10px " id ="code " show ="#preview " hide ="#code, #view "> < i class ="far fa-eye "> </ i > </ a >
113
- < a class ="margin-right:10px " id ="preview " show ="#code, #view " hide ="#preview " hidden > < i class ="fas fa-code "> </ i > </ a >
114
- < a class ="margin-right:5px " fullscreen target ="#playground "> < i class ="fas fa-expand "> </ i > </ a >
115
- </ div >
116
- < div class ="svRow ">
117
-
118
- < div class ="svColumn ">
119
-
120
- < div class ="svPanel " id ="view ">
121
- < textarea collection ="demos " document_id ="" name ="demo " save ="false " id ="demo " class ="height:100% width:100% border:none resize:none padding:5px "> </ textarea >
122
- </ div >
123
- < div class ="svSplitter svHorizontal "> </ div >
124
-
125
- < div class ="svPanel ">
126
- < iframe get-value ="#demo " frameBorder ="0 " height ="100% " width ="100% " class ="min-width:300px "> </ iframe >
127
- </ div >
128
-
129
- </ div >
130
- </ div >
131
- </ div >
132
- <!-- End SandBox -->
109
+ <!-- SandBox -->
110
+ < div class ="position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px " id ="playground ">
111
+
112
+ < div id ="demo-code " resizable class ="position:relative height:50% ">
113
+ < 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 >
114
+ < div resize ="bottom " class ="background:lightgrey "> </ div >
115
+ </ div >
116
+
117
+ < div id ="demo-preview " class ="position:relative display:flex height:100% background-color:white ">
118
+ < div get-value ="#demo " class ="padding:20px "> </ div >
119
+ </ div >
120
+
121
+ < div class ="font-size:20px position:absolute top:10px right:10px opacity:0.6 ">
122
+ < 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 >
123
+ < 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 >
124
+ < a class ="margin-right:10px " id ="code " show ="#code-slash " hide ="#code, #demo-code "> < i class ="fa fa-code "> </ i > </ a >
125
+ < a class ="margin-right:10px " hidden id ="code-slash " show ="#code, #demo-code " hide ="#code-slash "> < i class ="fas fa-code "> </ i > </ a >
126
+ < a class ="margin-right:5px " fullscreen target ="#playground "> < i class ="fas fa-expand "> </ i > </ a >
127
+ </ div >
128
+
129
+ </ div >
130
+ <!-- End SandBox -->
133
131
</ div >
134
132
</ div >
135
133
0 commit comments