Learn: section actions on the title row, scrollable tables, copy code

web/src/main/resources/templates/fragments/base.html

@@ -12,6 +12,7 @@
     <script th:src="@{/js/highlight.min.js}" defer></script>
     <script th:src="@{/js/tablekit.js}" defer></script>
     <script th:src="@{/js/ui-state.js}" defer></script>
+    <script th:src="@{/js/md-content.js}" defer></script>
     <script>
         (function(){
             var t = localStorage.getItem('lms-theme') || 'light';
@@ -34,6 +35,12 @@
         function closeModal(id){ var d=document.getElementById(id); if(d) d.close(); }
         function openModalData(btn){ openModal(btn.dataset.modal); }
         function closeModalData(btn){ closeModal(btn.dataset.modal); }
+        function toggleSection(btn){
+            var acc = btn.closest('.sub-acc');
+            if (!acc) return;
+            var collapsed = acc.classList.toggle('collapsed');
+            btn.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+        }
     </script>
 </head>
 <body>

web/src/main/resources/templates/learn/chapter.html

@@ -47,42 +47,43 @@
     </div>
 
     <div class="card card-body chapter-card mb-4" data-section-list>
-        <details th:each="section : ${chapter.sections}" class="sub-acc" th:attr="data-section-id=${section.id}">
-            <summary class="sub-head sort-row">
+        <div th:each="section : ${chapter.sections}" class="sub-acc" th:attr="data-section-id=${section.id}">
+            <div class="sub-head sort-row">
                 <span th:if="${currentUser != null and currentUser.admin}" class="drag-handle" draggable="true"
                       th:attr="data-drag-kind='section',data-drag-id=${section.id}"
                       title="Перетащите мышью: изменить порядок разделов">⠿</span>
-                <span class="sub-arrow" aria-hidden="true"></span>
+                <button type="button" class="sub-toggle" aria-expanded="true" onclick="toggleSection(this)"
+                        title="Свернуть или развернуть раздел">
+                    <span class="sub-arrow" aria-hidden="true"></span>
+                </button>
                 <a class="group-title sort-title m-0"
                    th:href="@{/learn/{c}/{s}(c=${chapter.slug}, s=${section.slug})}"
                    th:text="${section.title}">Раздел</a>
                 <span th:if="${!section.published}" class="badge badge-warn">скрыто</span>
-            </summary>
-            <div class="section-body">
-                <div th:if="${currentUser != null and currentUser.admin}" class="sort-row">
-                    <div class="sort-actions">
-                        <button class="btn btn-secondary btn-sm" type="button"
-                                th:data-modal="|modal-rename-section-${section.id}|" onclick="openModalData(this)">Переименовать</button>
-                        <form class="inline-form" th:action="@{/admin/content/sections/toggle-published}" method="post">
-                            <input type="hidden" name="_csrf" th:value="${csrfToken}">
-                            <input type="hidden" name="id" th:value="${section.id}">
-                            <input type="hidden" name="published" th:value="${!section.published}">
-                            <input type="hidden" name="back" th:value="${back}">
-                            <button class="btn btn-sm" type="submit"
-                                    th:classappend="${section.published} ? 'btn-secondary' : 'btn-primary'"
-                                    th:text="${section.published} ? 'Скрыть' : 'Опубликовать'">Скрыть</button>
-                        </form>
-                        <button class="btn btn-secondary btn-sm" type="button"
-                                th:data-modal="|modal-move-${section.id}|" onclick="openModalData(this)">Перенести статьи и удалить</button>
-                        <form class="inline-form" th:action="@{/admin/content/sections/{id}/delete(id=${section.id})}" method="post"
-                              onsubmit="return confirm('Удалить раздел вместе со статьями?')">
-                            <input type="hidden" name="_csrf" th:value="${csrfToken}">
-                            <input type="hidden" name="back" th:value="${back}">
-                            <button class="btn btn-danger btn-sm" type="submit">Удалить</button>
-                        </form>
-                    </div>
+                <div th:if="${currentUser != null and currentUser.admin}" class="sort-actions">
+                    <button class="btn btn-secondary btn-sm" type="button"
+                            th:data-modal="|modal-rename-section-${section.id}|" onclick="openModalData(this)">Переименовать</button>
+                    <form class="inline-form" th:action="@{/admin/content/sections/toggle-published}" method="post">
+                        <input type="hidden" name="_csrf" th:value="${csrfToken}">
+                        <input type="hidden" name="id" th:value="${section.id}">
+                        <input type="hidden" name="published" th:value="${!section.published}">
+                        <input type="hidden" name="back" th:value="${back}">
+                        <button class="btn btn-sm" type="submit"
+                                th:classappend="${section.published} ? 'btn-secondary' : 'btn-primary'"
+                                th:text="${section.published} ? 'Скрыть' : 'Опубликовать'">Скрыть</button>
+                    </form>
+                    <button class="btn btn-secondary btn-sm" type="button"
+                            th:data-modal="|modal-move-${section.id}|" onclick="openModalData(this)">Перенести статьи и удалить</button>
+                    <form class="inline-form" th:action="@{/admin/content/sections/{id}/delete(id=${section.id})}" method="post"
+                          onsubmit="return confirm('Удалить раздел вместе со статьями?')">
+                        <input type="hidden" name="_csrf" th:value="${csrfToken}">
+                        <input type="hidden" name="back" th:value="${back}">
+                        <button class="btn btn-danger btn-sm" type="submit">Удалить</button>
+                    </form>
                 </div>
+            </div>
 
+            <div class="section-body">
                 <ul class="sort-list text-sm" data-article-list>
                     <li th:each="article : ${section.articles}" th:attr="data-article-id=${article.id}">
                         <span th:if="${currentUser != null and currentUser.admin}" class="drag-handle" draggable="true"
@@ -149,7 +150,7 @@
                     </div>
                 </dialog>
             </th:block>
-        </details>
+        </div>
     </div>
 
     <dialog id="modal-rename-chapter" class="modal">

web/src/main/resources/templates/learn/index.html

@@ -57,41 +57,41 @@
         <div data-section-list>
             <p th:if="${#lists.isEmpty(chapter.sections)}" class="text-sm text-muted mt-2 mb-0">Разделов пока нет</p>
 
-            <details th:each="section : ${chapter.sections}" class="sub-acc"
-                     th:attr="data-section-id=${section.id}">
-                <summary class="sub-head sort-row">
+            <div th:each="section : ${chapter.sections}" class="sub-acc" th:attr="data-section-id=${section.id}">
+                <div class="sub-head sort-row">
                     <span th:if="${currentUser != null and currentUser.admin}" class="drag-handle" draggable="true"
                           th:attr="data-drag-kind='section',data-drag-id=${section.id}"
                           title="Перетащите мышью: изменить порядок или перенести раздел">⠿</span>
-                    <span class="sub-arrow" aria-hidden="true"></span>
+                    <button type="button" class="sub-toggle" aria-expanded="true" onclick="toggleSection(this)"
+                            title="Свернуть или развернуть раздел">
+                        <span class="sub-arrow" aria-hidden="true"></span>
+                    </button>
                     <a class="group-title sort-title m-0"
                        th:href="@{/learn/{c}/{s}(c=${chapter.slug}, s=${section.slug})}"
                        th:text="${section.title}">Раздел</a>
                     <span th:if="${!section.published}" class="badge badge-warn">скрыто</span>
-                </summary>
-                <div class="section-body">
-                    <div th:if="${currentUser != null and currentUser.admin}" class="sort-row">
-                        <div class="sort-actions">
-                            <form class="inline-form" th:action="@{/admin/content/sections/toggle-published}" method="post">
-                                <input type="hidden" name="_csrf" th:value="${csrfToken}">
-                                <input type="hidden" name="id" th:value="${section.id}">
-                                <input type="hidden" name="published" th:value="${!section.published}">
-                                <button class="btn btn-sm" type="submit"
-                                        th:classappend="${section.published} ? 'btn-secondary' : 'btn-primary'"
-                                        th:text="${section.published} ? 'Скрыть раздел' : 'Опубликовать раздел'">Скрыть раздел</button>
-                            </form>
-                            <button class="btn btn-secondary btn-sm" type="button"
-                                    th:data-modal="|modal-rename-section-${section.id}|" onclick="openModalData(this)">Переименовать</button>
-                            <button class="btn btn-secondary btn-sm" type="button"
-                                    th:data-modal="|modal-move-${section.id}|" onclick="openModalData(this)">Перенести статьи</button>
-                            <form class="inline-form" th:action="@{/admin/content/sections/{id}/delete(id=${section.id})}" method="post"
-                                  onsubmit="return confirm('Удалить раздел со всеми статьями?')">
-                                <input type="hidden" name="_csrf" th:value="${csrfToken}">
-                                <button class="btn btn-danger btn-sm" type="submit">Удалить раздел</button>
-                            </form>
-                        </div>
+                    <div th:if="${currentUser != null and currentUser.admin}" class="sort-actions">
+                        <form class="inline-form" th:action="@{/admin/content/sections/toggle-published}" method="post">
+                            <input type="hidden" name="_csrf" th:value="${csrfToken}">
+                            <input type="hidden" name="id" th:value="${section.id}">
+                            <input type="hidden" name="published" th:value="${!section.published}">
+                            <button class="btn btn-sm" type="submit"
+                                    th:classappend="${section.published} ? 'btn-secondary' : 'btn-primary'"
+                                    th:text="${section.published} ? 'Скрыть раздел' : 'Опубликовать раздел'">Скрыть раздел</button>
+                        </form>
+                        <button class="btn btn-secondary btn-sm" type="button"
+                                th:data-modal="|modal-rename-section-${section.id}|" onclick="openModalData(this)">Переименовать</button>
+                        <button class="btn btn-secondary btn-sm" type="button"
+                                th:data-modal="|modal-move-${section.id}|" onclick="openModalData(this)">Перенести статьи</button>
+                        <form class="inline-form" th:action="@{/admin/content/sections/{id}/delete(id=${section.id})}" method="post"
+                              onsubmit="return confirm('Удалить раздел со всеми статьями?')">
+                            <input type="hidden" name="_csrf" th:value="${csrfToken}">
+                            <button class="btn btn-danger btn-sm" type="submit">Удалить раздел</button>
+                        </form>
                     </div>
+                </div>
 
+                <div class="section-body">
                     <ul class="sort-list text-sm" data-article-list>
                         <li th:each="article : ${section.articles}" th:attr="data-article-id=${article.id}">
                             <span th:if="${currentUser != null and currentUser.admin}" class="drag-handle" draggable="true"
@@ -159,7 +159,7 @@
                         </div>
                     </dialog>
                 </th:block>
-            </details>
+            </div>
         </div>
 
         <th:block th:if="${currentUser != null and currentUser.admin}">