refactor: update the UI of html template for render

Gausix · Jun 6, 2024 · d9c53ca · d9c53ca
1 parent 4881b47
commit d9c53ca
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 6 deletions.
diff --git a/static/css/base.css b/static/css/base.css
@@ -169,11 +169,11 @@ img {
 .markdown-body {
     margin: auto;
     width: 900px;
-    margin-top: 80px;
+    margin-top: 60px;
     box-sizing: border-box;
     padding: var(--spacing-md);
-    background: var(--color-bg);
     box-shadow: var(--box-shadow);
+    background: var(--color-pre-bg );
     border-radius: var(--border-radius);
     border: .1em solid var(--color-border);
 }

diff --git a/static/js/autoload.js b/static/js/autoload.js
@@ -16,6 +16,15 @@ const Elements = ( e => {
         scrollToDocsBtn: 'scrollToDocsBtn',
         bibTextMaskModal: 'bibTextMaskModal',
 
+        classNames: {
+            modal: 'modal',
+            refsList: 'refs-list',
+            markdownBody: 'markdown-body',
+            contentModal: 'modal-content',
+            pluginSection: 'plugin-section',
+            docsSourceList: 'docs-source-list',
+        },
+
         pageTitle: () => { return pageTitle(); },
     };
 

diff --git a/static/js/citations.js b/static/js/citations.js
@@ -30,7 +30,7 @@ const Citations = ( e => {
             let ul = document.createElement('ul');
             refsList.appendChild(ul);
 
-            document.body.appendChild(refsList);
+            document.querySelector(`.${Elements.classNames.markdownBody}`).appendChild(refsList);
         }
     };
 

diff --git a/static/js/docs-sources.js b/static/js/docs-sources.js
@@ -23,7 +23,7 @@ const DocsSources = ( e => {
         paragraph.appendChild(textLabel);
         pdfLinksList.appendChild(paragraph);
 
-        document.body.appendChild(pdfLinksList);
+        document.querySelector(`.${Elements.classNames.markdownBody}`).appendChild(pdfLinksList);
     };
 
     let checkDocsUrlExt = url => {

diff --git a/static/templates/render.html b/static/templates/render.html
@@ -8,7 +8,7 @@
     <!-- NOT MODIFIED THIS -->
     {{ inject_css }}
 </head>
-<body class='markdown-body'>
+<body>
     <div class='modal-mask' id='bibTextMaskModal'></div>
 
     <header>
@@ -27,7 +27,11 @@
         </div>
     </div>
 
-    {{ markdown_content }}
+    <div class="markdown-body">
+        {{ markdown_content }}
+
+
+    </div>
 
     <!-- NOT MODIFIED THIS -->
     {{ inject_js }}