fix: обновлены стили для мобильной адаптации и изменена версия CSS

- Обновлена версия подключения стилей в notes.html - Добавлены новые стили для мобильной адаптации в style.css, включая изменения для контейнеров, заголовков и кнопок
2025-10-19 15:49:23 +07:00 · 2025-10-19 15:49:23 +07:00 · 810e309db8
commit 810e309db8
parent e4b2be3052
2 changed files with 91 additions and 1 deletions
--- a/public/notes.html
+++ b/public/notes.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Заметки</title>
-    <link rel="stylesheet" href="/style.css?v=2" />
+    <link rel="stylesheet" href="/style.css?v=4" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"></script>
  </head>
  <body>
--- a/public/style.css
+++ b/public/style.css
@ -895,3 +895,93 @@ textarea:focus {
  background-color: #ffc107;
  color: #000;
 }
+
+/* Мобильная адаптация */
+@media (max-width: 768px) {
+  /* Скрываем левый блок с календарем, поиском и тегами */
+  .container-leftside {
+    display: none !important;
+  }
+  
+  /* На мобильных устройствах меняем направление flex и центрируем */
+  body {
+    flex-direction: column;
+    gap: 0;
+    padding: 0 10px;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  
+  /* Центральный контейнер занимает всю ширину, но центрируется */
+  .center {
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+  
+  /* Адаптируем контейнер заметок */
+  .container {
+    width: 100%;
+    max-width: none;
+    margin-top: 10px;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+  
+  /* Адаптируем заголовок заметок */
+  .notes-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    width: 100%;
+  }
+  
+  .notes-header-left {
+    width: 100%;
+  }
+  
+  .user-info {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+  
+  /* Адаптируем кнопки markdown */
+  .markdown-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    width: 100%;
+    justify-content: flex-start;
+  }
+  
+  .markdown-buttons .btnMarkdown {
+    flex: 0 1 auto;
+    min-width: auto;
+    margin-right: 0;
+    padding: 8px 12px;
+    font-size: 14px;
+  }
+  
+  /* Адаптируем textarea */
+  textarea {
+    min-height: 100px;
+  }
+  
+  /* Адаптируем кнопку сохранения */
+  .save-button-container {
+    width: 100%;
+    flex-direction: column;
+  }
+  
+  .btnSave {
+    width: 100%;
+  }
+  
+  /* Адаптируем footer */
+  .footer {
+    position: relative;
+    margin-top: 20px;
+  }
+}