From 59b7715a9386c915d7a84a6b3b371d1ceffba412 Mon Sep 17 00:00:00 2001 From: projectdx Date: Mon, 12 Jan 2026 21:07:57 +0900 Subject: [PATCH] Final mobile layout stabilization (v0.7.5): Fix horizontal shift and background rendering --- README.md | 13 ++ info.yaml | 2 +- static/css/anilife.css | 6 + static/css/mobile_custom.css | 144 ++++++++---------- .../anime_downloader_anilife_request.html | 8 +- 5 files changed, 91 insertions(+), 82 deletions(-) diff --git a/README.md b/README.md index d308791..209d75c 100644 --- a/README.md +++ b/README.md @@ -84,6 +84,19 @@ ## πŸ“ λ³€κ²½ 이λ ₯ (Changelog) +### v0.7.5 (2026-01-12) +- **λͺ¨λ°”일 λ ˆμ΄μ•„μ›ƒ κ°€λ‘œ 핏 μ™„λ²½ μ΅œμ ν™”**: + - 화면이 70%만 보이고 였λ₯Έμͺ½μœΌλ‘œ λ°€λ¦¬λ˜ ν˜„μƒμ„ ν•΄κ²°ν•˜κΈ° μœ„ν•΄ 전역적인 λ„ˆλΉ„ μ •κ·œν™”(`width: 100%`)와 μ˜€λ²„ν”Œλ‘œμš° 차단을 μ μš©ν–ˆμŠ΅λ‹ˆλ‹€. + - λͺ¨λ°”일 λΈŒλΌμš°μ € λ Œλ”λ§ 였λ₯˜λ₯Ό μœ λ°œν•˜λŠ” `background-attachment: fixed` 속성을 λͺ¨λ°”일 ν•œμ •μœΌλ‘œ ν•΄μ œν–ˆμŠ΅λ‹ˆλ‹€. + - λͺ¨λ“  μš”μ†Œμ— `box-sizing: border-box`λ₯Ό κ°•μ œν•˜μ—¬ νŒ¨λ”©μœΌλ‘œ μΈν•œ λ„ˆλΉ„ ν™•μž₯을 λ°©μ§€ν–ˆμŠ΅λ‹ˆλ‹€. + - μ—ν”Όμ†Œλ“œ κ·Έλ¦¬λ“œλ₯Ό λͺ¨λ°”일 1μ—΄ 배치둜 μ΅œμ ν™”ν•˜μ—¬ μ˜€λ²„ν”Œλ‘œμš°λ₯Ό μ›μ²œ μ°¨λ‹¨ν–ˆμŠ΅λ‹ˆλ‹€. + +### v0.7.4 (2026-01-12) +- **λͺ¨λ°”일 λ ˆμ΄μ•„μ›ƒ μ‹œν”„νŠΈ μ΅œμ’… μˆ˜μ •**: + - λΆ€νŠΈμŠ€νŠΈλž© `row`의 음수 λ§ˆμ§„μœΌλ‘œ 인해 화면이 였λ₯Έμͺ½μœΌλ‘œ λ°€λ € 보이던 ν˜„μƒμ„ μ •κ·œν™” μž‘μ—…μ„ 톡해 ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€. + - `html`, `body` λ ˆλ²¨μ—μ„œ κ°€λ‘œ μ˜€λ²„ν”Œλ‘œμš°λ₯Ό μ°¨λ‹¨ν•˜κ³  전역적인 λ‹¨μœ„ λŒ€μ‘(`100vw`)을 μ μš©ν•˜μ—¬ μ•ˆμ •μ μΈ κ°€λ‘œ 핏을 κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€. + - 상단 메뉴(λΈŒλ ˆλ“œν¬λŸΌ)κ°€ λΆ€λͺ¨ λ„ˆλΉ„λ₯Ό ν™•μž₯μ‹œν‚€μ§€ μ•Šλ„λ‘ `display` 속성을 κ°œμ„ ν–ˆμŠ΅λ‹ˆλ‹€. + ### v0.7.3 (2026-01-12) - **Anilife λͺ¨λ°”일 UI μ΅œμ ν™” (프리미엄 개편)**: - **뢄석 νŽ˜μ΄μ§€**: κ°€λ‘œ 여백을 μ΅œμ†Œν™”(15px -> 2px)ν•˜μ—¬ λͺ¨λ°”일 가독성 μ¦λŒ€. diff --git a/info.yaml b/info.yaml index b1ea84c..6bc5039 100644 --- a/info.yaml +++ b/info.yaml @@ -1,5 +1,5 @@ title: "μ• λ‹ˆ λ‹€μš΄λ‘œλ”" -version: 0.7.3 +version: 0.7.5 package_name: "anime_downloader" developer: "projectdx" description: "anime downloader" diff --git a/static/css/anilife.css b/static/css/anilife.css index 9299061..5bedee8 100644 --- a/static/css/anilife.css +++ b/static/css/anilife.css @@ -14,6 +14,12 @@ body { color: #e0e7ff !important; } +@media (max-width: 768px) { + body { + background-attachment: scroll !important; /* Fixed background causes shift on some mobile browsers */ + } +} + /* Common Layout Wrapper - Responsive */ .anilife-common-wrapper { max-width: 100%; diff --git a/static/css/mobile_custom.css b/static/css/mobile_custom.css index 89548a5..88b8e38 100644 --- a/static/css/mobile_custom.css +++ b/static/css/mobile_custom.css @@ -54,111 +54,95 @@ font-weight: 600 !important; } -/* Common Mobile Responsive Fixes */ +/* Common Mobile Responsive Fixes - Comprehensive Normalization */ @media (max-width: 768px) { - body { - padding-top: 5px !important; - overflow-x: hidden !important; - } - - /* Compact Navbar */ - .navbar { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; - } - - /* Global Navigation Pills Fix & Premium Styling */ - ul.nav.nav-pills.bg-light { - background-color: rgba(30, 41, 59, 0.6) !important; - backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 10px !important; - padding: 4px !important; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important; - display: flex !important; /* Changed from inline-flex to prevent horizontal stretching */ - flex-wrap: nowrap !important; /* Force scrollable row */ - overflow-x: auto !important; - -webkit-overflow-scrolling: touch; - width: 100% !important; /* Max width constraint */ - max-width: 100% !important; + *, ::before, ::after { box-sizing: border-box !important; - margin-top: 2px !important; - } - - /* Override for the fallback above to be tighter */ - ul.nav.nav-pills.bg-light { - margin-top: 4px !important; - } - - /* Tighten spacing between 2nd and 3rd level menus */ - #menu_module_div ul.nav.nav-pills.bg-light { - margin-bottom: 2px !important; } - #menu_page_div ul.nav.nav-pills.bg-light { - margin-top: -4px !important; - margin-bottom: 12px !important; - } - - ul.nav.nav-pills .nav-item { - margin: 0 2px; - } - - ul.nav.nav-pills .nav-link { - border-radius: 6px !important; - padding: 6px 12px !important; - color: #94a3b8 !important; /* Muted text */ - font-weight: 600; - transition: all 0.3s ease; - white-space: nowrap !important; /* Necessary for scrollable items */ - font-size: 12px !important; - } - - ul.nav.nav-pills .nav-link:hover { - background-color: rgba(255, 255, 255, 0.1); - color: #fff !important; - transform: translateY(-1px); - } - - ul.nav.nav-pills .nav-link.active { - background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; - color: #fff !important; - box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4); - } - - /* Layout Expansion on Mobile - Critical Fix for Horizontal Shift */ - html, body { + html, body { + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; + padding: 0 !important; overflow-x: hidden !important; - width: 100vw !important; - position: relative; + position: relative !important; + -webkit-text-size-adjust: 100%; + touch-action: manipulation; } + /* Layout Expansion on Mobile - Critical Fix for Horizontal Shift */ .container, .container-fluid, #main_container { width: 100% !important; max-width: 100% !important; - padding-left: 5px !important; - padding-right: 5px !important; + min-width: 0 !important; + padding-left: 6px !important; + padding-right: 6px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; - overflow-x: hidden !important; /* Prevent internal bleed from stretching body */ + overflow-x: hidden !important; } .row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; + display: flex; + flex-wrap: wrap; } [class*="col-"] { - padding-left: 5px !important; - padding-right: 5px !important; + padding-left: 4px !important; + padding-right: 4px !important; + min-width: 0 !important; + } + + /* Compact Navbar Fix */ + .navbar { + width: 100% !important; + max-width: 100% !important; + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + margin: 0 !important; } - form { + /* Global Navigation Pills Fix */ + ul.nav.nav-pills.bg-light { + background-color: rgba(30, 41, 59, 0.6) !important; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 8px !important; + padding: 4px !important; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; + display: flex !important; + flex-wrap: nowrap !important; + overflow-x: auto !important; + -webkit-overflow-scrolling: touch; width: 100% !important; - margin: 0 !important; + max-width: 100% !important; box-sizing: border-box !important; + margin-top: 2px !important; + justify-content: flex-start !important; /* Critical for scrollable access */ + } + + ul.nav.nav-pills .nav-item { + flex: 0 0 auto !important; + } + + ul.nav.nav-pills .nav-link { + border-radius: 6px !important; + padding: 6px 12px !important; + color: #94a3b8 !important; + font-weight: 600; + transition: all 0.3s ease; + white-space: nowrap !important; + font-size: 11px !important; + } + + ul.nav.nav-pills .nav-link.active { + background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; + color: #fff !important; } /* Card/Table Container Fix */ @@ -166,7 +150,7 @@ width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; - border-radius: 12px !important; + border-radius: 8px !important; } } diff --git a/templates/anime_downloader_anilife_request.html b/templates/anime_downloader_anilife_request.html index 9244d17..f2092f8 100644 --- a/templates/anime_downloader_anilife_request.html +++ b/templates/anime_downloader_anilife_request.html @@ -606,10 +606,16 @@ body { .episode-list-container { margin-top: 20px; display: grid; - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } + @media (max-width: 600px) { + .episode-list-container { + grid-template-columns: 1fr !important; + } + } + /* μ—ν”Όμ†Œλ“œ μΉ΄λ“œ */ .episode-card { display: flex;