diff --git a/static/css/markdown.css b/static/css/markdown.css index ffbc3d4..b8dd431 100644 --- a/static/css/markdown.css +++ b/static/css/markdown.css @@ -1,7 +1,6 @@ #editor { display: flex; position: relative; - width: fit-content; justify-content: center; width: 100%; height: 480px; @@ -9,7 +8,7 @@ #markdown-content, #html-preview { - padding: 20px; + padding: 40px 20px 0 20px; width: 100%; height: auto; overflow-y: auto; diff --git a/static/css/style.css b/static/css/style.css index 1b355ca..bec402b 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -213,6 +213,55 @@ footer{ font-weight: bolder; } +.editor-component{ + display: flex; + position: relative; + justify-content: center; + width: 100%; + height: 480px; +} + +#expandButton{ + position: absolute; + top: 10px; + right: 10px; + border: none; + cursor: pointer; +} + +#expandButton:hover{ + cursor: pointer; + border-radius: 4px; + background-color: #c9c9c97a; +} + +#expandButton > svg{ + display: block; + padding: 4px; +} + + +#fullscreenComponent { + background-color: lightblue; + color: black; + padding: 20px; + box-sizing: border-box; + transition: all 0.3s ease; +} + +.fullscreen { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 9999; + + display: flex; + justify-content: center; + /*align-items: center;*/ +} + .div-title{ display: flex; flex-direction: column; diff --git a/static/js/expandButton.js b/static/js/expandButton.js new file mode 100644 index 0000000..2b5b61d --- /dev/null +++ b/static/js/expandButton.js @@ -0,0 +1,17 @@ +document.addEventListener('DOMContentLoaded', function () { + let fullscreenActivated = false + const expandButton = document.getElementById('expandButton'); + const fullscreenComponent = document.querySelector('.editor-component'); + + expandButton.addEventListener('click', function () { + fullscreenComponent.classList.toggle('fullscreen'); + fullscreenActivated = !fullscreenActivated + + if(fullscreenActivated){ + expandButton.innerHTML = '' + }else{ + expandButton.innerHTML = '' + } + }); + +}); \ No newline at end of file diff --git a/templates/admin/editor.html b/templates/admin/editor.html index 69416dc..73de322 100644 --- a/templates/admin/editor.html +++ b/templates/admin/editor.html @@ -4,7 +4,7 @@ {% include 'components/alert.html'%} -