diff --git a/public/notes.html b/public/notes.html index f44e007..662cca0 100644 --- a/public/notes.html +++ b/public/notes.html @@ -4,7 +4,7 @@ Заметки - + diff --git a/public/style.css b/public/style.css index 37de9e4..07d87d7 100644 --- 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; + } +}