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

fix: polish mobile settings and request UI

Browse Source
This commit is contained in:
projectdx
2026-04-01 19:09:14 +09:00
parent ce537f431a
commit 1b0144d878
7 changed files with 352 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+6
View File
@@ -84,6 +84,12 @@
## 📝 변경 이력 (Changelog)
### v0.7.24 (2026-04-01)
- **모바일 UI 가독성 및 설정 화면 정리**:
- Ohli24 요청 화면의 액션 버튼 대비를 높이고, `Go` 버튼이 현재 작품의 원본 상세 페이지로 새 탭 이동하도록 보강했습니다.
- 모바일 토스트 알림의 폭, 내부 여백, 닫기 버튼 위치를 조정해 화면 밖으로 넘치거나 텍스트가 들러붙어 보이던 문제를 완화했습니다.
- Anilife/Linkkf 설정 화면에서 모바일 시 `업데이트`, `설정 저장` 버튼을 제목 아래로 재배치하고, 탭 콘텐츠 좌우 보더가 길게 보이던 문제를 정리했습니다.
### v0.7.23 (2026-04-01)
- **루트 정리 및 개발 보관 폴더 분리**:
- 루트에 흩어져 있던 `test_*`, 디버그 스크립트, 임시 HTML/노트북/구버전 백업 파일을 `dev_scratch/` 폴더로 이동해 작업용 산출물을 한곳에 모았습니다.
info.yaml
+1 -1
View File
@@ -1,5 +1,5 @@
title: "애니 다운로더"
version: 0.7.23
version: 0.7.24
package_name: "anime_downloader"
developer: "projectdx"
description: "anime downloader"
static/css/mobile_custom.css
+87 -6
View File
@@ -3,18 +3,23 @@
/* Custom Notify Styling - Mobile Default */
.bootstrap-notify-container,
[data-notify="container"] {
max-width: 90vw !important;
width: auto !important;
right: 5vw !important;
left: 5vw !important;
padding: 12px 16px !important;
border-radius: 10px !important;
position: fixed !important;
max-width: calc(100vw - 12px) !important;
width: calc(100vw - 12px) !important;
right: auto !important;
left: 6px !important;
top: 10px !important;
margin: 0 !important;
transform: none !important;
padding: 12px 38px 12px 16px !important;
border-radius: 12px !important;
background: var(--notify-bg) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid var(--notify-border) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
color: #e0e7ff !important;
font-size: 13px !important;
line-height: 1.45 !important;
z-index: 10000 !important;
}
@@ -47,15 +52,91 @@
[data-notify="message"] {
color: #e0e7ff !important;
display: block !important;
padding-right: 0 !important;
padding-left: 0 !important;
margin-left: 0 !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
}
[data-notify="title"] {
color: #fff !important;
font-weight: 600 !important;
display: block !important;
margin-bottom: 4px !important;
padding-right: 0 !important;
padding-left: 0 !important;
margin-left: 0 !important;
white-space: normal !important;
}
[data-notify="icon"] {
display: inline-block !important;
margin-right: 10px !important;
margin-left: 0 !important;
opacity: 0.95;
}
[data-notify="dismiss"] {
position: absolute !important;
top: 8px !important;
right: 10px !important;
margin: 0 !important;
padding: 2px 6px !important;
color: rgba(255, 255, 255, 0.88) !important;
font-size: 18px !important;
line-height: 1 !important;
opacity: 0.9 !important;
}
[data-notify="dismiss"]:hover,
[data-notify="dismiss"]:focus {
color: #ffffff !important;
opacity: 1 !important;
}
/* Common Mobile Responsive Fixes - Comprehensive Normalization */
@media (max-width: 768px) {
.bootstrap-notify-container,
[data-notify="container"] {
left: 4px !important;
right: auto !important;
width: calc(100vw - 8px) !important;
max-width: calc(100vw - 8px) !important;
top: 8px !important;
margin: 0 !important;
transform: none !important;
padding: 11px 34px 11px 14px !important;
font-size: 12.5px !important;
border-radius: 10px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32) !important;
}
.bootstrap-notify-container > *,
[data-notify="container"] > * {
max-width: 100% !important;
}
[data-notify="title"] {
font-size: 14px !important;
margin-bottom: 3px !important;
padding-left: 2px !important;
}
[data-notify="message"] {
font-size: 12.5px !important;
line-height: 1.4 !important;
padding-left: 2px !important;
}
[data-notify="dismiss"] {
top: 7px !important;
right: 8px !important;
font-size: 17px !important;
}
*, ::before, ::after {
box-sizing: border-box !important;
}
static/css/ohli24.css
+104 -2
View File
@@ -40,8 +40,8 @@ body {
/* General Layout Fixes */
.container-fluid {
padding-left: 5px !important;
padding-right: 5px !important;
padding-left: 3px !important;
padding-right: 3px !important;
max-width: 100%;
}
@@ -181,6 +181,108 @@ ul.nav.nav-pills .nav-link.active {
.btn-search { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white !important; }
.btn-reset { background: rgba(148, 163, 184, 0.1); color: #94a3b8 !important; }
/* Request Page Buttons */
.ohli24-request-page .input-group .btn,
.ohli24-request-page .mobile-action-buttons .btn {
font-weight: 700 !important;
letter-spacing: -0.01em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
border-width: 1px !important;
}
.ohli24-request-page .input-group .btn i,
.ohli24-request-page .mobile-action-buttons .btn i {
margin-right: 6px;
}
.ohli24-request-page .ohli24-primary-action,
.ohli24-request-page .ohli24-watch-action {
color: #ffffff !important;
border: 1px solid rgba(96, 165, 250, 0.55) !important;
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28);
}
.ohli24-request-page .ohli24-primary-action:hover,
.ohli24-request-page .ohli24-watch-action:hover,
.ohli24-request-page .ohli24-primary-action:focus,
.ohli24-request-page .ohli24-watch-action:focus {
color: #ffffff !important;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
border-color: rgba(147, 197, 253, 0.9) !important;
}
.ohli24-request-page .ohli24-secondary-action {
color: #f8fafc !important;
border: 1px solid rgba(148, 163, 184, 0.5) !important;
background: rgba(30, 41, 59, 0.92) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ohli24-request-page .ohli24-secondary-action:hover,
.ohli24-request-page .ohli24-secondary-action:focus {
color: #ffffff !important;
background: rgba(51, 65, 85, 0.98) !important;
border-color: rgba(226, 232, 240, 0.75) !important;
}
.ohli24-request-page .ohli24-muted-action {
color: #e2e8f0 !important;
border: 1px solid rgba(100, 116, 139, 0.65) !important;
background: rgba(51, 65, 85, 0.65) !important;
}
.ohli24-request-page .ohli24-muted-action:hover,
.ohli24-request-page .ohli24-muted-action:focus {
color: #ffffff !important;
background: rgba(71, 85, 105, 0.9) !important;
border-color: rgba(203, 213, 225, 0.65) !important;
}
.ohli24-request-page .ohli24-danger-action {
color: #fecaca !important;
border: 1px solid rgba(248, 113, 113, 0.45) !important;
background: rgba(69, 10, 10, 0.35) !important;
}
.ohli24-request-page .ohli24-danger-action:hover,
.ohli24-request-page .ohli24-danger-action:focus {
color: #ffffff !important;
border-color: rgba(252, 165, 165, 0.75) !important;
background: rgba(127, 29, 29, 0.78) !important;
}
.ohli24-request-page .mobile-action-buttons {
row-gap: 10px !important;
}
@media (max-width: 768px) {
.ohli24-request-page.ohli24-common-wrapper {
margin-top: 0.5rem !important;
}
.ohli24-request-page {
padding-left: 1px !important;
padding-right: 1px !important;
}
.ohli24-request-page .glass-card {
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 10px !important;
}
.ohli24-request-page .input-group-append .btn {
padding-left: 12px !important;
padding-right: 12px !important;
}
.ohli24-request-page .mobile-action-buttons .btn {
flex: 1 1 auto;
min-width: 112px;
}
}
/* Episode Card (Mobile-First) - Scoped to List Page */
.ohli24-list-page .episode-card {
display: flex;
templates/anime_downloader_anilife_setting.html
+65 -3
View File
@@ -6,9 +6,9 @@
<div id="anilife_setting_wrapper" class="container-fluid mt-4 mx-auto content-cloak" style="max-width: 100%;">
<div class="glass-card p-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="d-flex justify-content-between align-items-center mb-4 anilife-setting-header">
<h2 class="text-white font-weight-bold"><i class="bi bi-gear-fill mr-2"></i>Anilife 설정</h2>
<div>
<div class="anilife-setting-actions">
<button type="button" class="btn btn-outline-info btn-sm mr-2" id="btn-self-update" title="최신 버전으로 업데이트">
<i class="bi bi-arrow-repeat"></i> 업데이트
</button>
@@ -418,6 +418,68 @@
display: flex; align-items: center; justify-content: center;
font-size: 0.75rem;
}
@media (max-width: 768px) {
.anilife-setting-header {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px;
}
.anilife-setting-actions {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 8px;
}
.anilife-setting-actions .btn,
.anilife-setting-actions #globalSettingSaveBtn {
margin-right: 0 !important;
}
.anilife-setting-actions > div {
display: inline-flex;
}
#anilife_auto_make_folder_div {
border-left: none !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
#anilife_setting_wrapper .tab-pane {
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 이 페이지에서는 모바일 스크롤 힌트/세로 라인 제거 */
#menu_module_div::after,
#menu_page_div::after {
display: none !important;
content: none !important;
background: none !important;
}
#menu_module_div,
#menu_page_div,
#anilife_setting_wrapper,
#anilife_setting_wrapper .glass-card {
border-left: none !important;
border-right: none !important;
box-shadow: none !important;
}
#anilife_setting_wrapper .row,
#anilife_setting_wrapper .col-sm-9,
#anilife_setting_wrapper .col-sm-3 {
border-left: none !important;
border-right: none !important;
}
}
.tag-chip .tag-remove:hover { background: rgba(239, 68, 68, 0.9); }
.tag-chip .tag-index {
width: 20px; height: 20px;
@@ -815,4 +877,4 @@ $(document).ready(function(){
}, 100);
});
</script>
{% endblock %}
{% endblock %}
templates/anime_downloader_linkkf_setting.html
+41 -3
View File
@@ -6,9 +6,9 @@
<div id="linkkf_setting_wrapper" class="container-fluid mt-4 mx-auto content-cloak" style="max-width: 100%; padding-left: 5px; padding-right: 5px;">
<div class="glass-card p-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="d-flex justify-content-between align-items-center mb-4 linkkf-setting-header">
<h2 class="text-white font-weight-bold"><i class="bi bi-gear-fill mr-2"></i>Linkkf 설정</h2>
<div>
<div class="linkkf-setting-actions">
<button type="button" class="btn btn-outline-info btn-sm mr-2" id="btn-self-update" title="최신 버전으로 업데이트">
<i class="bi bi-arrow-repeat"></i> 업데이트
</button>
@@ -217,6 +217,44 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<style>
@media (max-width: 768px) {
.linkkf-setting-header {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px;
}
.linkkf-setting-actions {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 8px;
}
.linkkf-setting-actions .btn,
.linkkf-setting-actions #globalSettingSaveBtn {
margin-right: 0 !important;
}
.linkkf-setting-actions > div {
display: inline-flex;
}
#linkkf_auto_make_folder_div {
border-left: none !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
#linkkf_setting_wrapper .tab-pane {
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* Global Background */
body {
font-family: 'NamumSquareNeo', system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif;
@@ -834,4 +872,4 @@ $(document).on('click', '#confirmUpdateBtn', function() {
50% { opacity: 1; }
}
</style>
{% endblock %}
{% endblock %}
templates/anime_downloader_ohli24_request.html
+48 -17
View File
@@ -44,8 +44,8 @@
<div class="input-group input-group-lg">
<input type="text" id="code" name="code" class="form-control border-0" placeholder="URL 또는 제목을 입력하세요 (예: 녹을 먹는 비스코)" style="background: rgba(0,0,0,0.4); color: #fff; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);">
<div class="input-group-append">
<button id="analysis_btn" class="btn btn-primary px-4 font-weight-bold" style="box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);">분석</button>
<button id="go_ohli24_btn" class="btn btn-outline-light px-3">Go OHLI24</button>
<button type="button" id="analysis_btn" class="btn btn-primary px-4 font-weight-bold ohli24-primary-action" style="box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);">분석</button>
<a id="go_ohli24_btn" class="btn btn-outline-light px-3 ohli24-secondary-action d-inline-flex align-items-center" href="{{ arg['ohli24_url'] or 'https://ani.ohli24.com' }}" target="_blank" rel="noopener noreferrer">Go</a>
</div>
</div>
<div class="d-flex align-items-center mt-2 text-muted small">
@@ -78,6 +78,39 @@
get: (searchParams, prop) => searchParams.get(prop),
})
function resolveGoTargetUrl(rawValue) {
const baseUrl = (ohli24_url && ohli24_url.trim()) ? ohli24_url.trim().replace(/\/$/, '') : 'https://ani.ohli24.com';
const raw = (rawValue || '').trim();
if (!raw) {
return baseUrl;
}
if (/^https?:\/\//i.test(raw)) {
return raw;
}
if (raw.startsWith('/c/') || raw.startsWith('/e/')) {
return baseUrl + raw;
}
if (raw.includes('/c/')) {
return baseUrl + '/c/' + raw.split('/c/')[1];
}
if (raw.includes('/e/')) {
return baseUrl + '/e/' + raw.split('/e/')[1];
}
// 분석 결과의 code 값 또는 수동 입력 code는 작품 상세(/c/)로 연결
return baseUrl + '/c/' + raw;
}
function updateGoButtonHref(rawValue) {
const targetUrl = resolveGoTargetUrl(rawValue);
$('#go_ohli24_btn').attr('href', targetUrl);
}
const loader = document.getElementById("preloader");
const dismissLoadingScreen = function () {
@@ -137,6 +170,7 @@
function make_program(data) {
current_data = data;
updateGoButtonHref(data.code || $('#code').val() || params.code);
// // console.log(data);
let str = "";
@@ -192,14 +226,14 @@
// Standard Actions
if (data.first_exist_filepath) {
str += `<button type="button" class="btn btn-success btn-sm mr-2 btn-watch" data-path="${data.first_exist_filepath.replace(/\\/g, '\\\\')}"><i class="fa fa-play"></i> 보기</button>`;
str += `<button type="button" class="btn btn-success btn-sm mr-2 btn-watch ohli24-watch-action" data-path="${data.first_exist_filepath.replace(/\\/g, '\\\\')}"><i class="fa fa-play"></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">전체 선택</button>`;
str += `<button id="all_check_off_btn" class="btn btn-outline-secondary btn-sm">해제</button>`;
str += `<button id="check_download_btn" class="btn btn-primary btn-sm ohli24-primary-action"><i class="fa fa-download"></i> 선택 다운로드</button>`;
str += `<button id="all_check_on_btn" class="btn btn-outline-light btn-sm ohli24-secondary-action">전체 선택</button>`;
str += `<button id="all_check_off_btn" class="btn btn-outline-secondary btn-sm ohli24-muted-action">해제</button>`;
// Scheduling (Heart)
str += `<button id="add_whitelist" class="btn btn-outline-danger btn-sm" style="min-width: 120px;"><i class="bi bi-heart"></i> 스케쥴링 추가</button>`;
str += `<button id="add_whitelist" class="btn btn-outline-danger btn-sm ohli24-danger-action" style="min-width: 120px;"><i class="bi bi-heart"></i> 스케쥴링 추가</button>`;
str += `</div>`; // End Action Toolbar
@@ -255,6 +289,7 @@
}
$(function () {
updateGoButtonHref(params.code || $('#code').val());
// // console.log(params.wr_id)
// // console.log(findGetParameter('wr_id'))
// // console.log(params.code)
@@ -332,6 +367,7 @@
if (ret.ret === 'success' && ret.data != null) {
// console.log(ret.code)
// // console.log(ret.data)
updateGoButtonHref((ret.data && ret.data.code) || code);
make_program(ret.data)
} else {
$.notify('<strong>분석 실패</strong><br>' + ret.log, {type: 'warning'});
@@ -374,11 +410,6 @@
});
});
$("body").on('click', '#go_ohli24_btn', function (e) {
e.preventDefault();
window.open("{{arg['ohli24_url']}}", "_blank");
});
$("body").on('click', '#all_check_on_btn', function (e) {
e.preventDefault();
$('input[id^="checkbox_"]').bootstrapToggle('on')
@@ -718,8 +749,8 @@
.row, form, #program_list, #program_auto_form, #episode_list {
width: 100% !important;
max-width: 100% !important;
padding-left: 4px !important;
padding-right: 4px !important;
padding-left: 2px !important;
padding-right: 2px !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
@@ -773,10 +804,10 @@
/* ===== 상단 정보 카드 ===== */
.glass-card {
width: calc(100% - 10px) !important;
width: calc(100% - 4px) !important;
max-width: 100% !important;
padding: 10px !important;
margin: 5px !important;
padding: 8px !important;
margin: 2px !important;
border-radius: 12px !important;
box-sizing: border-box !important;
}