ff_plugins/anime_downloader
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fix mobile layout shift and menu overflow (comprehensive CSS normalization)

Browse Source
This commit is contained in:
projectdx
2026-01-12 21:04:11 +09:00
parent 41c7fa456e
commit 50982f19b0
3 changed files with 51 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
static/css/mobile_custom.css
View File

@@ -72,14 +72,17 @@
background-color: rgba(30, 41, 59, 0.6) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50rem !important; /* Pill shape container */
padding: 6px !important;
border-radius: 10px !important;
padding: 4px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
display: inline-flex !important; /* Fit content */
flex-wrap: wrap; /* allow wrap on small screens */
justify-content: center;
width: auto !important; /* Prevent full width */
margin-top: 2px !important; /* Reduced for modularity */
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;
box-sizing: border-box !important;
margin-top: 2px !important;
}
/* Override for the fallback above to be tighter */
@@ -102,11 +105,13 @@
}
ul.nav.nav-pills .nav-link {
border-radius: 50rem !important;
padding: 6px 16px !important;
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 {
@@ -121,15 +126,39 @@
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}
/* Layout Expansion on Mobile */
.container, .container-fluid, .row, form, #main_container {
/* Layout Expansion on Mobile - Critical Fix for Horizontal Shift */
html, body {
overflow-x: hidden !important;
width: 100vw !important;
position: relative;
}
.container, .container-fluid, #main_container {
width: 100% !important;
max-width: 100% !important;
padding-left: 8px !important;
padding-right: 8px !important;
padding-left: 5px !important;
padding-right: 5px !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
overflow-x: hidden !important; /* Prevent internal bleed from stretching body */
}
.row {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
[class*="col-"] {
padding-left: 5px !important;
padding-right: 5px !important;
}
form {
width: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* Card/Table Container Fix */

26
templates/anime_downloader_anilife_queue.html
View File

@@ -92,20 +92,12 @@
.queue-btn-top { flex: 1; justify-content: center; font-size: 11px !important; padding: 10px !important; }
.queue-meta { font-size: 10px; margin-top: 4px; }
/* Force container padding reduction for mobile queue */
#main_container { padding-left: 2px !important; padding-right: 2px !important; }
/* Fix navigation pills overflow */
#menu_module_div .nav-pills, #menu_page_div .nav-pills {
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
/* Ensure breadcrumb span doesn't force width */
#menu_module_div span.nav-link {
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
white-space: nowrap !important;
display: flex !important;
}
#menu_module_div .nav-link, #menu_page_div .nav-link {
padding: 8px 12px !important;
font-size: 12px !important;
}
/* Header buttons wrap and layout */
@@ -116,13 +108,7 @@
min-width: 120px;
}
/* Ensure breadcrumb span doesn't force width */
#menu_module_div span.nav-link {
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
white-space: nowrap;
}
/* Ensure breadcrumb span doesn't force width - moved up */
}
.mobile-queue-card {

31
templates/anime_downloader_anilife_request.html
View File

@@ -11,20 +11,10 @@ body {
background-attachment: fixed !important;
}
/* Global Container Margin Overrides */
/* Global Container Margin Overrides - mobile_custom.css와 통합 */
#main_container {
width: 100% !important;
max-width: 100% !important;
padding-left: 2px !important; /* 15px -> 2px */
padding-right: 2px !important; /* 15px -> 2px */
margin-left: 0 !important;
margin-right: 0 !important;
}
.container, .container-fluid:not(.anilife-common-wrapper) {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
</style>
@@ -775,27 +765,12 @@ body {
/* 모바일 반응형 - Bootstrap 모든 레이아웃 강제 덮어쓰기 */
@media (max-width: 768px) {
/* 상단 서브메뉴가 SJVA 메인 navbar에 가려지지 않도록 여백 추가 */
ul.nav.nav-pills.bg-light {
margin-top: 60px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
display: flex !important;
width: 100% !important;
border-radius: 10px !important;
}
ul.nav.nav-pills .nav-link {
padding: 8px 12px !important;
font-size: 11px !important;
white-space: nowrap !important;
}
/* Ensure breadcrumb span doesn't force width */
#menu_module_div span.nav-link {
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
max-width: 150px;
white-space: nowrap !important;
}
/* 입력창 크기 최적화 */