Learn head: responsive row/col (title full width, 3 equal buttons below on mobile)

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

@@ -46,21 +46,21 @@
             </h1>
 
             <div th:if="${currentUser != null and currentUser.admin}" class="flex flex-wrap gap-2 mb-4">
-                <button class="mini-btn" type="button" data-action="article-edit" title="Править статью" aria-label="Править статью"><i class="ico bi bi-pencil" aria-hidden="true"></i></button>
+                <button class="btn btn-secondary btn-sm p-2" type="button" data-action="article-edit" title="Править статью" aria-label="Править статью"><i class="ico bi bi-pencil" aria-hidden="true"></i></button>
                 <form class="inline-form" th:action="@{/admin/content/articles/toggle-published}" method="post">
                     <input type="hidden" name="_csrf" th:value="${csrfToken}">
                     <input type="hidden" name="id" th:value="${article.id}">
                     <input type="hidden" name="published" th:value="${!article.published}">
                     <input type="hidden" name="back" th:value="${back}">
-                    <button class="mini-btn" type="submit" th:if="${article.published}" title="Скрыть статью" aria-label="Скрыть статью"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
-                    <button class="mini-btn" type="submit" th:unless="${article.published}" title="Опубликовать статью" aria-label="Опубликовать статью"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
+                    <button class="btn btn-secondary btn-sm p-2" type="submit" th:if="${article.published}" title="Скрыть статью" aria-label="Скрыть статью"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
+                    <button class="btn btn-secondary btn-sm p-2" type="submit" th:unless="${article.published}" title="Опубликовать статью" aria-label="Опубликовать статью"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
                 </form>
                 <a class="btn btn-secondary"
                    th:href="@{/learn/{c}(c=${article.chapterSlug})}">К главе</a>
                 <form class="inline-form" th:action="@{/admin/content/articles/{id}/delete(id=${article.id})}" method="post" data-confirm="Удалить статью?">
                     <input type="hidden" name="_csrf" th:value="${csrfToken}">
                     <input type="hidden" name="back" th:value="${backParent}">
-                    <button class="mini-btn danger" type="submit" title="Удалить статью" aria-label="Удалить статью"><i class="cell-ico ico bi bi-trash" aria-hidden="true"></i></button>
+                    <button class="btn btn-danger btn-sm p-2" type="submit" title="Удалить статью" aria-label="Удалить статью"><i class="cell-ico ico bi bi-trash" aria-hidden="true"></i></button>
                 </form>
             </div>
 

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

@@ -16,19 +16,19 @@
 
     <div th:if="${currentUser != null and currentUser.admin}" class="flex flex-wrap gap-2 mb-4">
         <button class="btn btn-primary" type="button" data-modal="modal-new-section">+ Раздел</button>
-        <button class="mini-btn" type="button" data-modal="modal-rename-chapter" title="Переименовать главу" aria-label="Переименовать главу"><i class="cell-ico ico bi bi-pencil" aria-hidden="true"></i></button>
+        <button class="btn btn-secondary btn-sm p-2" type="button" data-modal="modal-rename-chapter" title="Переименовать главу" aria-label="Переименовать главу"><i class="cell-ico ico bi bi-pencil" aria-hidden="true"></i></button>
         <form class="inline-form" th:action="@{/admin/content/chapters/toggle-published}" method="post">
             <input type="hidden" name="_csrf" th:value="${csrfToken}">
             <input type="hidden" name="id" th:value="${chapter.id}">
             <input type="hidden" name="published" th:value="${!chapter.published}">
             <input type="hidden" name="back" th:value="${back}">
-            <button class="mini-btn" type="submit" th:if="${chapter.published}" title="Скрыть главу" aria-label="Скрыть главу"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
-            <button class="mini-btn" type="submit" th:unless="${chapter.published}" title="Опубликовать главу" aria-label="Опубликовать главу"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
+            <button class="btn btn-secondary btn-sm p-2" type="submit" th:if="${chapter.published}" title="Скрыть главу" aria-label="Скрыть главу"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
+            <button class="btn btn-secondary btn-sm p-2" type="submit" th:unless="${chapter.published}" title="Опубликовать главу" aria-label="Опубликовать главу"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
         </form>
         <form class="inline-form" th:action="@{/admin/content/chapters/{id}/delete(id=${chapter.id})}" method="post" data-confirm="Удалить главу со всеми разделами и статьями?">
             <input type="hidden" name="_csrf" th:value="${csrfToken}">
             <input type="hidden" name="back" th:value="${backParent}">
-            <button class="mini-btn danger" type="submit" title="Удалить главу со всеми разделами и статьями" aria-label="Удалить главу со всеми разделами и статьями"><i class="cell-ico ico bi bi-trash" aria-hidden="true"></i></button>
+            <button class="btn btn-danger btn-sm p-2" type="submit" title="Удалить главу со всеми разделами и статьями" aria-label="Удалить главу со всеми разделами и статьями"><i class="cell-ico ico bi bi-trash" aria-hidden="true"></i></button>
         </form>
     </div>
 
@@ -60,20 +60,20 @@
                    th:text="${section.title}">Раздел</a>
                 <span th:if="${!section.published}" class="badge badge-warn">скрыто</span>
                 <div th:if="${currentUser != null and currentUser.admin}" class="sort-actions">
-                    <button class="mini-btn" type="button" th:attr="data-modal=|modal-rename-section-${section.id}|" title="Переименовать раздел" aria-label="Переименовать раздел"><i class="cell-ico ico bi bi-pencil" aria-hidden="true"></i></button>
+                    <button class="btn btn-secondary btn-sm p-2" type="button" th:attr="data-modal=|modal-rename-section-${section.id}|" title="Переименовать раздел" aria-label="Переименовать раздел"><i class="cell-ico ico bi bi-pencil" aria-hidden="true"></i></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="mini-btn" type="submit" th:if="${section.published}" title="Скрыть раздел" aria-label="Скрыть раздел"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
-                        <button class="mini-btn" type="submit" th:unless="${section.published}" title="Опубликовать раздел" aria-label="Опубликовать раздел"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
+                        <button class="btn btn-secondary btn-sm p-2" type="submit" th:if="${section.published}" title="Скрыть раздел" aria-label="Скрыть раздел"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
+                        <button class="btn btn-secondary btn-sm p-2" type="submit" th:unless="${section.published}" title="Опубликовать раздел" aria-label="Опубликовать раздел"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
                     </form>
-                    <button class="mini-btn" type="button" th:attr="data-modal=|modal-move-${section.id}|" title="Перенести статьи и удалить" aria-label="Перенести статьи и удалить"><i class="cell-ico ico bi bi-arrow-left-right" aria-hidden="true"></i></button>
+                    <button class="btn btn-secondary btn-sm p-2" type="button" th:attr="data-modal=|modal-move-${section.id}|" title="Перенести статьи и удалить" aria-label="Перенести статьи и удалить"><i class="cell-ico ico bi bi-arrow-left-right" aria-hidden="true"></i></button>
                     <form class="inline-form" th:action="@{/admin/content/sections/{id}/delete(id=${section.id})}" method="post" data-confirm="Удалить раздел вместе со статьями?">
                         <input type="hidden" name="_csrf" th:value="${csrfToken}">
                         <input type="hidden" name="back" th:value="${back}">
-                        <button class="mini-btn danger" type="submit" title="Удалить раздел вместе со статьями" aria-label="Удалить раздел вместе со статьями"><i class="cell-ico ico bi bi-trash" aria-hidden="true"></i></button>
+                        <button class="btn btn-danger btn-sm p-2" type="submit" title="Удалить раздел вместе со статьями" aria-label="Удалить раздел вместе со статьями"><i class="cell-ico ico bi bi-trash" aria-hidden="true"></i></button>
                     </form>
                 </div>
             </div>
@@ -89,15 +89,15 @@
                            th:text="${article.title}">Статья</a>
                         <span th:if="${!article.published}" class="badge badge-warn">скрыто</span>
                         <div th:if="${currentUser != null and currentUser.admin}" class="sort-actions">
-                            <a class="mini-btn" title="Править статью" aria-label="Править статью"
+                            <a class="btn btn-secondary btn-sm p-2" title="Править статью" aria-label="Править статью"
                                th:href="@{/learn/{c}/{s}/{a}(c=${chapter.slug}, s=${section.slug}, a=${article.slug}, edit=1)}"><i class="ico bi bi-pencil" aria-hidden="true"></i></a>
                             <form class="inline-form" th:action="@{/admin/content/articles/toggle-published}" method="post">
                                 <input type="hidden" name="_csrf" th:value="${csrfToken}">
                                 <input type="hidden" name="id" th:value="${article.id}">
                                 <input type="hidden" name="published" th:value="${!article.published}">
                                 <input type="hidden" name="back" th:value="${back}">
-                                <button class="mini-btn" type="submit" th:if="${article.published}" title="Скрыть статью" aria-label="Скрыть статью"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
-                                <button class="mini-btn" type="submit" th:unless="${article.published}" title="Опубликовать статью" aria-label="Опубликовать статью"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
+                                <button class="btn btn-secondary btn-sm p-2" type="submit" th:if="${article.published}" title="Скрыть статью" aria-label="Скрыть статью"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
+                                <button class="btn btn-secondary btn-sm p-2" type="submit" th:unless="${article.published}" title="Опубликовать статью" aria-label="Опубликовать статью"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
                             </form>
                         </div>
                     </li>

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

@@ -3,12 +3,16 @@
 <head><title>Материалы — LMS</title></head>
 <body>
 <div id="content" th:attr="data-csrf=${csrfToken},data-sort-scope='full'">
-    <div class="flex items-center justify-between gap-4 mb-6">
-        <h1 class="page-title">Учебные материалы</h1>
-        <div th:if="${currentUser != null and currentUser.admin}" class="flex gap-2">
-            <button class="btn btn-primary" type="button" data-modal="modal-new-article">+ Статья</button>
-            <button class="btn btn-secondary" type="button" data-modal="modal-import">Импорт zip</button>
-            <button class="btn btn-secondary" type="button" data-modal="modal-new-chapter">+ Глава</button>
+    <div class="row g-3 align-items-center mb-4">
+        <div class="col-12 col-md">
+            <h1 class="page-title m-0">Учебные материалы</h1>
+        </div>
+        <div class="col-12 col-md-auto" th:if="${currentUser != null and currentUser.admin}">
+            <div class="row row-cols-3 row-cols-md-auto g-2">
+                <div class="col"><button class="btn btn-secondary w-100" type="button" data-modal="modal-import">Импорт</button></div>
+                <div class="col"><button class="btn primary w-100" type="button" data-modal="modal-new-chapter">+ Глава</button></div>
+                <div class="col"><button class="btn btn-primary w-100" type="button" data-modal="modal-new-article">+ Статья</button></div>
+            </div>
         </div>
     </div>
     <div th:if="${currentUser != null and currentUser.admin}" id="sort-status" class="sort-status" hidden>
@@ -32,13 +36,13 @@
                     <input type="hidden" name="_csrf" th:value="${csrfToken}">
                     <input type="hidden" name="id" th:value="${chapter.id}">
                     <input type="hidden" name="published" th:value="${!chapter.published}">
-                    <button class="mini-btn" type="submit" th:if="${chapter.published}" title="Скрыть главу" aria-label="Скрыть главу"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
-                    <button class="mini-btn" type="submit" th:unless="${chapter.published}" title="Опубликовать главу" aria-label="Опубликовать главу"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
+                    <button class="btn btn-secondary btn-sm p-2" type="submit" th:if="${chapter.published}" title="Скрыть главу" aria-label="Скрыть главу"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
+                    <button class="btn btn-secondary btn-sm p-2" type="submit" th:unless="${chapter.published}" title="Опубликовать главу" aria-label="Опубликовать главу"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
                 </form>
-                <button class="mini-btn" type="button" th:attr="data-modal=|modal-rename-chapter-${chapter.id}|" title="Переименовать главу" aria-label="Переименовать главу"><i class="cell-ico ico bi bi-pencil" aria-hidden="true"></i></button>
+                <button class="btn btn-secondary btn-sm p-2" type="button" th:attr="data-modal=|modal-rename-chapter-${chapter.id}|" title="Переименовать главу" aria-label="Переименовать главу"><i class="cell-ico ico bi bi-pencil" aria-hidden="true"></i></button>
                 <form class="inline-form" th:action="@{/admin/content/chapters/{id}/delete(id=${chapter.id})}" method="post" data-confirm="Удалить главу со всеми разделами и статьями?">
                     <input type="hidden" name="_csrf" th:value="${csrfToken}">
-                    <button class="mini-btn danger" type="submit" title="Удалить главу со всеми разделами и статьями" aria-label="Удалить главу со всеми разделами и статьями"><i class="cell-ico ico bi bi-trash" aria-hidden="true"></i></button>
+                    <button class="btn btn-danger btn-sm p-2" type="submit" title="Удалить главу со всеми разделами и статьями" aria-label="Удалить главу со всеми разделами и статьями"><i class="cell-ico ico bi bi-trash" aria-hidden="true"></i></button>
                 </form>
             </div>
         </div>
@@ -65,14 +69,14 @@
                             <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="mini-btn" type="submit" th:if="${section.published}" title="Скрыть раздел" aria-label="Скрыть раздел"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
-                            <button class="mini-btn" type="submit" th:unless="${section.published}" title="Опубликовать раздел" aria-label="Опубликовать раздел"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
+                            <button class="btn btn-secondary btn-sm p-2" type="submit" th:if="${section.published}" title="Скрыть раздел" aria-label="Скрыть раздел"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
+                            <button class="btn btn-secondary btn-sm p-2" type="submit" th:unless="${section.published}" title="Опубликовать раздел" aria-label="Опубликовать раздел"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
                         </form>
-                        <button class="mini-btn" type="button" th:attr="data-modal=|modal-rename-section-${section.id}|" title="Переименовать раздел" aria-label="Переименовать раздел"><i class="cell-ico ico bi bi-pencil" aria-hidden="true"></i></button>
-                        <button class="mini-btn" type="button" th:attr="data-modal=|modal-move-${section.id}|" title="Перенести статьи в другой раздел" aria-label="Перенести статьи в другой раздел"><i class="cell-ico ico bi bi-arrow-left-right" aria-hidden="true"></i></button>
+                        <button class="btn btn-secondary btn-sm p-2" type="button" th:attr="data-modal=|modal-rename-section-${section.id}|" title="Переименовать раздел" aria-label="Переименовать раздел"><i class="cell-ico ico bi bi-pencil" aria-hidden="true"></i></button>
+                        <button class="btn btn-secondary btn-sm p-2" type="button" th:attr="data-modal=|modal-move-${section.id}|" title="Перенести статьи в другой раздел" aria-label="Перенести статьи в другой раздел"><i class="cell-ico ico bi bi-arrow-left-right" aria-hidden="true"></i></button>
                         <form class="inline-form" th:action="@{/admin/content/sections/{id}/delete(id=${section.id})}" method="post" data-confirm="Удалить раздел со всеми статьями?">
                             <input type="hidden" name="_csrf" th:value="${csrfToken}">
-                            <button class="mini-btn danger" type="submit" title="Удалить раздел со всеми статьями" aria-label="Удалить раздел со всеми статьями"><i class="cell-ico ico bi bi-trash" aria-hidden="true"></i></button>
+                            <button class="btn btn-danger btn-sm p-2" type="submit" title="Удалить раздел со всеми статьями" aria-label="Удалить раздел со всеми статьями"><i class="cell-ico ico bi bi-trash" aria-hidden="true"></i></button>
                         </form>
                     </div>
                 </div>
@@ -92,14 +96,14 @@
                                     <input type="hidden" name="_csrf" th:value="${csrfToken}">
                                     <input type="hidden" name="id" th:value="${article.id}">
                                     <input type="hidden" name="published" th:value="${!article.published}">
-                                    <button class="mini-btn" type="submit" th:if="${article.published}" title="Скрыть статью" aria-label="Скрыть статью"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
-                                    <button class="mini-btn" type="submit" th:unless="${article.published}" title="Опубликовать статью" aria-label="Опубликовать статью"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
+                                    <button class="btn btn-secondary btn-sm p-2" type="submit" th:if="${article.published}" title="Скрыть статью" aria-label="Скрыть статью"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
+                                    <button class="btn btn-secondary btn-sm p-2" type="submit" th:unless="${article.published}" title="Опубликовать статью" aria-label="Опубликовать статью"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
                                 </form>
-                                <a class="mini-btn" title="Править статью" aria-label="Править статью"
+                                <a class="btn btn-secondary btn-sm p-2" title="Править статью" aria-label="Править статью"
                                    th:href="@{/learn/{c}/{s}/{a}(c=${chapter.slug}, s=${section.slug}, a=${article.slug}, edit=1)}"><i class="ico bi bi-pencil" aria-hidden="true"></i></a>
                                 <form class="inline-form" th:action="@{/admin/content/articles/{id}/delete(id=${article.id})}" method="post" data-confirm="Удалить статью?">
                                     <input type="hidden" name="_csrf" th:value="${csrfToken}">
-                                    <button class="mini-btn danger" type="submit" title="Удалить статью" aria-label="Удалить статью"><i class="cell-ico ico bi bi-trash" aria-hidden="true"></i></button>
+                                    <button class="btn btn-danger btn-sm p-2" type="submit" title="Удалить статью" aria-label="Удалить статью"><i class="cell-ico ico bi bi-trash" aria-hidden="true"></i></button>
                                 </form>
                             </div>
                         </li>

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

@@ -18,20 +18,20 @@
 
     <div th:if="${currentUser != null and currentUser.admin}" class="flex flex-wrap gap-2 mb-4">
         <button class="btn btn-primary" type="button" data-modal="modal-new-article">+ Статья</button>
-        <button class="mini-btn" type="button" data-modal="modal-rename-section" title="Переименовать раздел" aria-label="Переименовать раздел"><i class="cell-ico ico bi bi-pencil" aria-hidden="true"></i></button>
+        <button class="btn btn-secondary btn-sm p-2" type="button" data-modal="modal-rename-section" title="Переименовать раздел" aria-label="Переименовать раздел"><i class="cell-ico ico bi bi-pencil" aria-hidden="true"></i></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="mini-btn" type="submit" th:if="${section.published}" title="Скрыть раздел" aria-label="Скрыть раздел"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
-            <button class="mini-btn" type="submit" th:unless="${section.published}" title="Опубликовать раздел" aria-label="Опубликовать раздел"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
+            <button class="btn btn-secondary btn-sm p-2" type="submit" th:if="${section.published}" title="Скрыть раздел" aria-label="Скрыть раздел"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
+            <button class="btn btn-secondary btn-sm p-2" type="submit" th:unless="${section.published}" title="Опубликовать раздел" aria-label="Опубликовать раздел"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
         </form>
-        <button class="mini-btn" type="button" data-modal="modal-move-section" title="Перенести статьи и удалить" aria-label="Перенести статьи и удалить"><i class="cell-ico ico bi bi-arrow-left-right" aria-hidden="true"></i></button>
+        <button class="btn btn-secondary btn-sm p-2" type="button" data-modal="modal-move-section" title="Перенести статьи и удалить" aria-label="Перенести статьи и удалить"><i class="cell-ico ico bi bi-arrow-left-right" aria-hidden="true"></i></button>
         <form class="inline-form" th:action="@{/admin/content/sections/{id}/delete(id=${section.id})}" method="post" data-confirm="Удалить раздел вместе со статьями?">
             <input type="hidden" name="_csrf" th:value="${csrfToken}">
             <input type="hidden" name="back" th:value="${backParent}">
-            <button class="mini-btn danger" type="submit" title="Удалить раздел вместе со статьями" aria-label="Удалить раздел вместе со статьями"><i class="cell-ico ico bi bi-trash" aria-hidden="true"></i></button>
+            <button class="btn btn-danger btn-sm p-2" type="submit" title="Удалить раздел вместе со статьями" aria-label="Удалить раздел вместе со статьями"><i class="cell-ico ico bi bi-trash" aria-hidden="true"></i></button>
         </form>
     </div>
 
@@ -56,15 +56,15 @@
                     <span th:if="${!article.published}" class="badge badge-warn ml-1">скрыто</span>
                 </td>
                 <td class="text-right actions-cell">
-                    <a class="mini-btn" title="Править статью" aria-label="Править статью"
+                    <a class="btn btn-secondary btn-sm p-2" title="Править статью" aria-label="Править статью"
                        th:href="@{/learn/{c}/{s}/{a}(c=${chapter.slug}, s=${section.slug}, a=${article.slug}, edit=1)}"><i class="ico bi bi-pencil" aria-hidden="true"></i></a>
                     <form class="inline-form" th:action="@{/admin/content/articles/toggle-published}" method="post">
                         <input type="hidden" name="_csrf" th:value="${csrfToken}">
                         <input type="hidden" name="id" th:value="${article.id}">
                         <input type="hidden" name="published" th:value="${!article.published}">
                         <input type="hidden" name="back" th:value="${back}">
-                        <button class="mini-btn" type="submit" th:if="${article.published}" title="Скрыть статью" aria-label="Скрыть статью"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
-                        <button class="mini-btn" type="submit" th:unless="${article.published}" title="Опубликовать статью" aria-label="Опубликовать статью"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
+                        <button class="btn btn-secondary btn-sm p-2" type="submit" th:if="${article.published}" title="Скрыть статью" aria-label="Скрыть статью"><i class="cell-ico ico bi bi-eye" aria-hidden="true"></i></button>
+                        <button class="btn btn-secondary btn-sm p-2" type="submit" th:unless="${article.published}" title="Опубликовать статью" aria-label="Опубликовать статью"><i class="cell-ico ico bi bi-eye-slash" aria-hidden="true"></i></button>
                     </form>
                     <form class="inline-form" th:action="@{/admin/content/articles/{id}/delete(id=${article.id})}" method="post" data-confirm="Удалить статью?">
                         <input type="hidden" name="_csrf" th:value="${csrfToken}">