From 114a031e3696dcc69611ee7e834db34e18f524e6 Mon Sep 17 00:00:00 2001
From: Vladislav Kopnin <vlad.kopnen@mail.ru>
Date: Thu, 17 Sep 2026 17:36:54 +0300
Subject: [PATCH] Learn: outline panel moved to the left of the article

- article layout: content column on the right, sticky outline (chapters, sections,
  articles) on the left; on narrow screens the article comes first and the
  outline follows it
---
 web/src/main/resources/static/css/app.css     |  5 +-
 .../resources/templates/learn/article.html    | 49 ++++++++++---------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/web/src/main/resources/static/css/app.css b/web/src/main/resources/static/css/app.css
index dd9003b..3fcbbea 100644
--- a/web/src/main/resources/static/css/app.css
+++ b/web/src/main/resources/static/css/app.css
@@ -369,7 +369,7 @@ th.th-filterable { padding-bottom: 0.35rem; }
 }
 
 /* Чтение материалов: контент + боковое содержание */
-.learn-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.5rem; align-items: start; }
+.learn-layout { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
 .learn-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; font-size: 0.875rem; }
 .side-chapter { font-weight: 600; margin: 0.6rem 0 0.2rem; }
 .side-section { margin: 0.25rem 0 0.5rem 0.75rem; }
@@ -382,5 +382,6 @@ th.th-filterable { padding-bottom: 0.35rem; }
 .article-nav .ml-auto, .article-nav a:last-child:not(:only-child) { margin-left: auto; }
 @media (max-width: 1000px) {
     .learn-layout { grid-template-columns: 1fr; }
-    .learn-side { position: static; max-height: none; order: -1; }
+    .learn-main { order: 1; }
+    .learn-side { position: static; max-height: none; order: 2; }
 }
diff --git a/web/src/main/resources/templates/learn/article.html b/web/src/main/resources/templates/learn/article.html
index 72b927c..9095da5 100644
--- a/web/src/main/resources/templates/learn/article.html
+++ b/web/src/main/resources/templates/learn/article.html
@@ -4,6 +4,30 @@
 <body>
 <div id="content">
     <div class="learn-layout">
+        <aside class="learn-side">
+            <div class="card card-body">
+                <p class="text-sm text-muted mb-2">Содержание</p>
+                <div th:each="c : ${tree.chapters}">
+                    <div class="side-chapter">
+                        <a th:href="@{/learn/{c}(c=${c.slug})}" th:text="${c.title}">Глава</a>
+                        <span th:if="${!c.published}" class="badge badge-warn">скрыто</span>
+                    </div>
+                    <div th:each="s : ${c.sections}" class="side-section">
+                        <a th:href="@{/learn/{c}/{s}(c=${c.slug}, s=${s.slug})}" th:text="${s.title}">Раздел</a>
+                        <span th:if="${!s.published}" class="badge badge-warn">скрыто</span>
+                        <ul class="side-articles">
+                            <li th:each="a : ${s.articles}">
+                                <a th:href="@{/learn/{c}/{s}/{a2}(c=${c.slug}, s=${s.slug}, a2=${a.slug})}"
+                                   th:text="${a.title}"
+                                   th:classappend="${a.slug == article.slug and s.slug == article.sectionSlug and c.slug == article.chapterSlug} ? 'side-current'">Статья</a>
+                                <span th:if="${!a.published}" class="badge badge-warn">скрыто</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </aside>
+
         <div class="learn-main">
             <nav class="text-sm mb-4 breadcrumb">
                 <a th:href="@{/learn}" class="nav-link">Материалы</a>
@@ -71,30 +95,7 @@
             </nav>
         </div>
 
-        <aside class="learn-side">
-            <div class="card card-body">
-                <p class="text-sm text-muted mb-2">Содержание</p>
-                <div th:each="c : ${tree.chapters}">
-                    <div class="side-chapter">
-                        <a th:href="@{/learn/{c}(c=${c.slug})}" th:text="${c.title}">Глава</a>
-                        <span th:if="${!c.published}" class="badge badge-warn">скрыто</span>
-                    </div>
-                    <div th:each="s : ${c.sections}" class="side-section">
-                        <a th:href="@{/learn/{c}/{s}(c=${c.slug}, s=${s.slug})}" th:text="${s.title}">Раздел</a>
-                        <span th:if="${!s.published}" class="badge badge-warn">скрыто</span>
-                        <ul class="side-articles">
-                            <li th:each="a : ${s.articles}">
-                                <a th:href="@{/learn/{c}/{s}/{a2}(c=${c.slug}, s=${s.slug}, a2=${a.slug})}"
-                                   th:text="${a.title}"
-                                   th:classappend="${a.slug == article.slug and s.slug == article.sectionSlug and c.slug == article.chapterSlug} ? 'side-current'">Статья</a>
-                                <span th:if="${!a.published}" class="badge badge-warn">скрыто</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </aside>
-    </div>
+        </div>
 
     <dialog id="modal-edit-article" class="modal">
         <div class="modal-header">