diff --git a/templates/manga_view.html b/templates/manga_view.html index 9ae7a12..30c545e 100644 --- a/templates/manga_view.html +++ b/templates/manga_view.html @@ -9,43 +9,39 @@ - -
- -
- -
- -
- - - -
- Страница +
+ + +
+
- -
-
- {% for img in manga.imgs_manga %} -
- Стр {{ forloop.counter }} -
- {% endfor %} + +
+
+ Страница +
+
+
+ {% for img in manga.imgs_manga %} +
+ Стр {{ forloop.counter }} +
+ {% endfor %} +
- - - -
+ + +
- - -
- - + \ No newline at end of file diff --git a/templates/static/css/manga_view.css b/templates/static/css/manga_view.css index 411b136..a8ba46e 100644 --- a/templates/static/css/manga_view.css +++ b/templates/static/css/manga_view.css @@ -1,93 +1,116 @@ /* Основные стили */ -.centered-box { - width: 800px; - margin: 0 auto; /* Автоматические отступы по бокам */ - background: #f0f0f0; +/* Центрируем основной контейнер */ +.main-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + max-width: 900px; + margin: 20px auto; padding: 20px; - align-content: center; -} -.centered-box > *{ - margin: 10px 15px; + background: #f9f9f9; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + border-radius: 8px; } -.image-box { - display: none; +/* Бокс с названием и каталогом */ +.info-box { width: 100%; + padding: 15px; + background: #e0e0e0; + border-radius: 5px; text-align: center; - margin-bottom: 20px; + margin-bottom: 15px; } -#mangaImage { - max-width: 100%; - max-height: 90vh; - object-fit: contain; -} - -.manga-grid-container { +/* Блок с сеткой превью и изображением */ +.preview-box { width: 100%; - margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + background: #fff; + padding: 15px; + border-radius: 5px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } +/* Сетка манги */ .manga-grid { display: grid; - grid-template-columns: repeat(9, 102px); + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; justify-content: center; - margin: 0 auto; - max-width: calc(6 * 102px + 5 * 10px); + width: 100%; + max-width: 600px; } +/* Превью картинок */ .manga-preview { - width: 102px; - height: 142px; + width: 100px; + height: 140px; overflow: hidden; - border-radius: 3px; - box-shadow: 0 1px 3px rgba(0,0,0,0.2); + border-radius: 5px; background: #eee; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + cursor: pointer; + transition: transform 0.2s; } .manga-preview img { width: 100%; height: 100%; object-fit: cover; - object-position: center top; - cursor: pointer; - transition: transform 0.2s; } -.manga-preview img:hover { +.manga-preview:hover { transform: scale(1.05); } -.breadcrumb { - font-weight: bold; - list-style: none; - text-decoration: none; - +/* Основное изображение */ +.image-box { + display: none; + width: 100%; + text-align: center; + margin-top: 15px; } -li.breadcrumb > a { - text-decoration: none !important; - color: green; +#mangaImage { + max-width: 100%; + max-height: 80vh; + object-fit: contain; } +/* Блок с выпадающим списком */ +.select-box { + width: 100%; + margin-top: 15px; + text-align: center; +} +.select-box select { + padding: 8px; + font-size: 16px; + border-radius: 5px; + border: 1px solid #ccc; + cursor: pointer; +} /* Адаптивность */ @media (max-width: 768px) { .manga-grid { - grid-template-columns: repeat(4, 102px); + grid-template-columns: repeat(4, 1fr); } } @media (max-width: 480px) { .manga-grid { - grid-template-columns: repeat(3, 102px); + grid-template-columns: repeat(3, 1fr); } } @media (max-width: 360px) { .manga-grid { - grid-template-columns: repeat(2, 102px); + grid-template-columns: repeat(2, 1fr); } -} \ No newline at end of file +}