diff --git a/playground/css.css b/playground/css.css index 75de740..f0949f0 100644 --- a/playground/css.css +++ b/playground/css.css @@ -1,14 +1,14 @@ #content { position: absolute; width: 100%; - height: 94vh; + height: 95vh; top: 55px; } #content div { float: left; } #codeContent { - height: 100%; + height: 95vh; width: 50%; background-color: #222226; } @@ -47,3 +47,12 @@ height: 100%; width: 50%; } +@media screen and (min-width:0px) and (max-width:1079px) { + #codeContent { + display: block!important; + width: 100%; + } + iframe { + width: 100%!important; + } +} diff --git a/playground/index.html b/playground/index.html index 893b107..8bd9d56 100644 --- a/playground/index.html +++ b/playground/index.html @@ -17,14 +17,14 @@
- - - + + + - - - + + +
diff --git a/playground/js.js b/playground/js.js index 5b0e6aa..74fa61b 100644 --- a/playground/js.js +++ b/playground/js.js @@ -1,4 +1,5 @@ var d = document.getElementById.bind(document); +var g = document.querySelector.bind(document); var autoRunCheck = localStorage.getItem("autoRun") var setCodeHTML = localStorage.getItem("writtenCodeHTML") var setCodeCSS = localStorage.getItem("writtenCodeCSS") @@ -30,16 +31,18 @@ function autoRun() { } function showCode(lang) { - d("cssInput").style = "display: none" - d("jsInput").style = "display: none" - d("htmlInput").style = "display: none" + $(".langButton").css("background-color", "#3b3c45") + $(".langInput").css("display", "none") if (lang == "html") { + d("htmlButton").style = "background-color: #27282e;" d("htmlInput").style = "display: block" } else if (lang == "css") { + d("cssButton").style = "background-color: #27282e;" d("cssInput").style = "display: block" } else { + d("jsButton").style = "background-color: #27282e;" d("jsInput").style = "display: block" } } @@ -48,15 +51,13 @@ function updateCode(source) { var autoRunCheck = localStorage.getItem("autoRun") var code = "" + "" + d("htmlInput").value if (source == "run" || autoRunCheck == "on") { + localStorage.setItem("writtenCodeHTML", d("htmlInput").value) + localStorage.setItem("writtenCodeCSS", d("cssInput").value) + localStorage.setItem("writtenCodeJS", d("jsInput").value) d("htmlOutput").setAttribute('srcdoc', code) } - localStorage.setItem("writtenCodeHTML", d("htmlInput").value) - localStorage.setItem("writtenCodeCSS", d("cssInput").value) - localStorage.setItem("writtenCodeJS", d("jsInput").value) } emmet.require('textarea').setup({ -pretty_break: true, // enable formatted line breaks (when inserting - // between opening and closing tag) use_tab: true // expand abbreviations by Tab key });