Меняет расположение формы и статьи

Fix: #521
doka-guide · Oct 11, 2021 · d107e43 · d107e43
1 parent 1e6d8ec
commit d107e43
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 14 deletions.
diff --git a/src/styles/blocks/article.css b/src/styles/blocks/article.css
@@ -286,8 +286,12 @@
     margin-bottom: 0;
   }
 
-  .contributors__item:not(:first-child) {
-    margin-top: 0;
+  .article__content {
+    display: contents;
+  }
+
+  .article__content-inner {
+    padding: inherit;
   }
 }
 

diff --git a/src/styles/blocks/contributors.css b/src/styles/blocks/contributors.css
@@ -11,3 +11,9 @@
   margin: 0;
   display: inline;
 }
+
+@media not all and (min-width: 1024px) {
+  .contributors__item:not(:first-child) {
+    margin-top: 0;
+  }
+}
diff --git a/src/styles/blocks/doc.css b/src/styles/blocks/doc.css
@@ -19,8 +19,7 @@
 .doc__article {}
 
 .doc__feedback-form {
-  grid-column-start: 2;
-  grid-column-end: span 1;
+  order: 2;
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--offset);

diff --git a/src/transforms/code-transform.js b/src/transforms/code-transform.js
@@ -27,7 +27,7 @@ function highlightCode(source, language) {
  * @param {Window} window
  */
 module.exports = function(window) {
-  const articleContent = window.document.querySelector('.article__content')
+  const articleContent = window.document.querySelector('.article__content-inner')
 
   articleContent
     ?.querySelectorAll('pre[data-lang]')

diff --git a/src/transforms/image-transform.js b/src/transforms/image-transform.js
@@ -31,7 +31,7 @@ const baseConfig = {
  */
 module.exports = function(window, content, outputPath) {
   // замена img на picture внутри статьи
-  const articleContainer = window.document.querySelector('.article__content')
+  const articleContainer = window.document.querySelector('.article__content-inner')
   if (!articleContainer) {
     return
   }

diff --git a/src/transforms/toc-transform.js b/src/transforms/toc-transform.js
@@ -5,7 +5,7 @@ const HeadingHierarchy = require('../libs/heading-hierarchy/heading-hierarchy')
  * @param {Window} window
  */
 module.exports = function(window) {
-   const articleContent = window.document.querySelector('.article__content')
+   const articleContent = window.document.querySelector('.article__content-inner')
 
    if (!articleContent) {
      return

diff --git a/src/views/doc.njk b/src/views/doc.njk
@@ -99,16 +99,18 @@
           </footer>
         </div>
 
-        <div class="article__content doc__wrapper content">
-          {{ doc.templateContent | safe }}
-          {% include "practices.njk" %}
+        <div class="article__content doc__wrapper">
+          <div class="article__content-inner content">
+            {{ doc.templateContent | safe }}
+            {% include "practices.njk" %}
+          </div>
+
+          <aside class="doc__feedback-form">
+            {% include "feedback-form.njk" %}
+          </aside>
         </div>
       </div>
     </article>
-
-    <aside class="doc__feedback-form">
-      {% include "feedback-form.njk" %}
-    </aside>
   </main>
 
   <div class="doc__footer doc__wrapper">