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

feat: Enhance mobile responsiveness by adjusting spacing, enabling badge text wrapping, and implementing a 2x2 grid for action buttons.

Browse Source
This commit is contained in:
projectdx
2025-12-30 15:11:57 +09:00
parent 51c91c8e52
commit 288d40c771
1 changed files with 39 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
templates/anime_downloader_ohli24_request.html
View File

@@ -20,9 +20,9 @@
<!-- </div>--> <!-- </div>-->
</div> </div>
</div> </div>
<div id="yommi_wrapper" class="container-fluid mt-4 mx-auto" style="max-width: 100%;"> <div id="yommi_wrapper" class="container-fluid mt-2 mt-md-4 mx-auto" style="max-width: 100%;">
<form id="program_list"> <form id="program_list">
<div class="card p-4 mb-4 border-light" style="background: rgba(30,30,40,0.6); backdrop-filter: blur(10px); box-shadow: 0 4px 6px rgba(0,0,0,0.1);"> <div class="card p-2 p-md-4 mb-2 mb-md-4 border-light" style="background: rgba(30,30,40,0.6); backdrop-filter: blur(10px); box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
<div class="form-group mb-0"> <div class="form-group mb-0">
<label for="code" class="text-white font-weight-bold mb-2"><i class="fa fa-search mr-2"></i>작품 Code / 제목</label> <label for="code" class="text-white font-weight-bold mb-2"><i class="fa fa-search mr-2"></i>작품 Code / 제목</label>
<div class="input-group input-group-lg"> <div class="input-group input-group-lg">
@@ -122,7 +122,7 @@
let str = ""; let str = "";
// 1. Info Card (Top) // 1. Info Card (Top)
str += `<div class='card p-4 mb-4 border-light' style="background: rgba(30,30,40,0.6); backdrop-filter: blur(10px);">`; str += `<div class='card p-2 p-md-4 mb-3 mb-md-4 border-light' style="background: rgba(30,30,40,0.6); backdrop-filter: blur(10px);">`;
str += `<div class="row">`; str += `<div class="row">`;
// Poster // Poster
@@ -144,7 +144,7 @@
// Tags (Genre, etc.) // Tags (Genre, etc.)
str += `<div class="mb-4">`; str += `<div class="mb-4">`;
if (des._tag) str += `<span class="badge badge-info mr-2" style="padding: 6px 12px; font-size:0.9em;">${des._tag}</span>`; if (des._tag) str += `<span class="badge badge-info mr-2" style="padding: 6px 12px; font-size:0.9em; white-space: normal; line-height: 1.4; text-align: left; display: inline-block;">${des._tag}</span>`;
if (des._grade) str += `<span class="badge badge-secondary mr-2" style="padding: 6px 12px; font-size:0.9em;">${des._grade}</span>`; if (des._grade) str += `<span class="badge badge-secondary mr-2" style="padding: 6px 12px; font-size:0.9em;">${des._grade}</span>`;
if (data.date || data.day) str += `<span class="badge badge-dark mr-2" style="padding: 6px 12px; font-size:0.9em;">${data.date || ''} (${data.day || ''})</span>`; if (data.date || data.day) str += `<span class="badge badge-dark mr-2" style="padding: 6px 12px; font-size:0.9em;">${data.date || ''} (${data.day || ''})</span>`;
str += `</div>`; str += `</div>`;
@@ -168,15 +168,15 @@
str += `</div>`; // End detail row str += `</div>`; // End detail row
// Actions Toolbar // Actions Toolbar
str += `<div class="d-flex flex-wrap align-items-center gap-2 p-3 rounded" style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05);">`; str += `<div class="d-flex flex-wrap align-items-center mobile-action-buttons rounded" style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05); padding: 10px; gap: 8px;">`;
// Standard Actions // Standard Actions
str += `<button id="check_download_btn" class="btn btn-primary btn-sm mr-2"><i class="fa fa-download"></i> 선택 다운로드</button>`; str += `<button id="check_download_btn" class="btn btn-primary btn-sm"><i class="fa fa-download"></i> 선택 다운로드</button>`;
str += `<button id="all_check_on_btn" class="btn btn-outline-light btn-sm mr-1">전체 선택</button>`; str += `<button id="all_check_on_btn" class="btn btn-outline-light btn-sm">전체 선택</button>`;
str += `<button id="all_check_off_btn" class="btn btn-outline-secondary btn-sm mr-3">해제</button>`; str += `<button id="all_check_off_btn" class="btn btn-outline-secondary btn-sm">해제</button>`;
// Scheduling (Heart) // Scheduling (Heart)
str += `<button id="add_whitelist" class="btn btn-outline-danger btn-sm mr-3" style="min-width: 120px;"><i class="bi bi-heart"></i> 스케쥴링 추가</button>`; str += `<button id="add_whitelist" class="btn btn-outline-danger btn-sm" style="min-width: 120px;"><i class="bi bi-heart"></i> 스케쥴링 추가</button>`;
str += `</div>`; // End Action Toolbar str += `</div>`; // End Action Toolbar
@@ -676,8 +676,8 @@
.row, form, #program_list, #program_auto_form, #episode_list { .row, form, #program_list, #program_auto_form, #episode_list {
width: 100% !important; width: 100% !important;
max-width: 100% !important; max-width: 100% !important;
padding-left: 10px !important; padding-left: 4px !important;
padding-right: 10px !important; padding-right: 4px !important;
margin-left: 0 !important; margin-left: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;
box-sizing: border-box !important; box-sizing: border-box !important;
@@ -731,10 +731,10 @@
/* ===== 상단 정보 카드 ===== */ /* ===== 상단 정보 카드 ===== */
.card.p-lg-5, .card.border-light { .card.p-lg-5, .card.border-light {
width: calc(100% - 20px) !important; width: calc(100% - 10px) !important;
max-width: 100% !important; max-width: 100% !important;
padding: 15px !important; padding: 6px !important; /* Reduced from 15px */
margin: 10px !important; margin: 5px !important;
border-radius: 12px !important; border-radius: 12px !important;
box-sizing: border-box !important; box-sizing: border-box !important;
} }
@@ -785,6 +785,31 @@
border-radius: 8px !important; border-radius: 8px !important;
box-sizing: border-box !important; box-sizing: border-box !important;
} }
/* Badge Wrap Fix for Mobile */
.badge {
white-space: normal !important;
text-align: left !important;
line-height: 1.4 !important;
height: auto !important;
display: inline-block !important;
}
/* Action Buttons 2x2 Grid for Mobile */
.mobile-action-buttons {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
width: 100% !important;
}
.mobile-action-buttons .btn {
width: 100% !important;
margin: 0 !important;
min-width: auto !important; /* Override inline style */
font-size: 11px !important;
padding: 8px 4px !important;
}
/* 정보 라벨 (제목, 원제 등) */ /* 정보 라벨 (제목, 원제 등) */
.card.p-lg-5 .row .row > [class*="col-"]:first-child { .card.p-lg-5 .row .row > [class*="col-"]:first-child {