adição da função fullscreen

thisiscleverson · Apr 12, 2024 · fdc7773 · fdc7773
1 parent e9d405f
commit fdc7773
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 5 deletions.
diff --git a/static/css/markdown.css b/static/css/markdown.css
@@ -1,15 +1,14 @@
 #editor {
   display: flex;
   position: relative;
-  width: fit-content;
   justify-content: center;
   width: 100%;
   height: 480px;
 }
 
 #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
@@ -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
@@ -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 = '<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M33 6v9h9M15 6v9H6M15 42v-9H6M33 42v-9h8.9"></path></svg>'
+      }else{
+         expandButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M33 6h9v9M42 33v9h-9M15 42H6v-9M6 15V6h9"></path></svg>'
+      }
+   });
+
+});
diff --git a/templates/admin/editor.html b/templates/admin/editor.html
@@ -4,7 +4,7 @@
 
    {% include 'components/alert.html'%}
 
-   <form class="container-editor">
+   <div class="container-editor">
       <h1>Publicar novo conteúdo</h1>
 
       <div class="div-title">
@@ -13,7 +13,13 @@ <h1>Publicar novo conteúdo</h1>
       </div>
 
       <label for="editor">corpo do conteúdo</label>
-      <div id="editor">
+      <div class="editor-component">
+         <button id="expandButton">
+            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="none" viewBox="0 0 48 48">
+               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M33 6h9v9M42 33v9h-9M15 42H6v-9M6 15V6h9"></path>
+            </svg>
+         </button>
+
          <textarea name="markdown-content" id="markdown-content" required>{{body}}</textarea>
 
          <div id="html-preview"></div>
@@ -34,8 +40,9 @@ <h1>Publicar novo conteúdo</h1>
             <input type="button" class="bt-publish" value="publicar" onclick="publish()">
          {% endif %}
       </div>
-   </form>
+   </div>
 
    <script type="text/javascript" src="{{ url_for('static',    filename='js/markdownEditor.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',    filename='js/editorButton.js') }}"></script>
+   <script type="text/javascript" src="{{ url_for('static',    filename='js/expandButton.js') }}"></script>
 {% endblock %}