From 1b0144d87846bfe453454a460c847bcec5522cd7 Mon Sep 17 00:00:00 2001 From: projectdx Date: Wed, 1 Apr 2026 19:09:14 +0900 Subject: [PATCH] fix: polish mobile settings and request UI --- README.md | 6 + info.yaml | 2 +- static/css/mobile_custom.css | 93 ++++++++++++++- static/css/ohli24.css | 106 +++++++++++++++++- .../anime_downloader_anilife_setting.html | 68 ++++++++++- .../anime_downloader_linkkf_setting.html | 44 +++++++- .../anime_downloader_ohli24_request.html | 65 ++++++++--- 7 files changed, 352 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index c92fe16..2e1efba 100644 --- a/README.md +++ b/README.md @@ -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/` ํด๋”๋กœ ์ด๋™ํ•ด ์ž‘์—…์šฉ ์‚ฐ์ถœ๋ฌผ์„ ํ•œ๊ณณ์— ๋ชจ์•˜์Šต๋‹ˆ๋‹ค. diff --git a/info.yaml b/info.yaml index ebf661d..2c3b7ce 100644 --- a/info.yaml +++ b/info.yaml @@ -1,5 +1,5 @@ title: "์• ๋‹ˆ ๋‹ค์šด๋กœ๋”" -version: 0.7.23 +version: 0.7.24 package_name: "anime_downloader" developer: "projectdx" description: "anime downloader" diff --git a/static/css/mobile_custom.css b/static/css/mobile_custom.css index e485657..ec9bd8c 100644 --- a/static/css/mobile_custom.css +++ b/static/css/mobile_custom.css @@ -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; } diff --git a/static/css/ohli24.css b/static/css/ohli24.css index d613dd7..aac4ebf 100644 --- a/static/css/ohli24.css +++ b/static/css/ohli24.css @@ -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; diff --git a/templates/anime_downloader_anilife_setting.html b/templates/anime_downloader_anilife_setting.html index fc07c16..4e4f8fd 100644 --- a/templates/anime_downloader_anilife_setting.html +++ b/templates/anime_downloader_anilife_setting.html @@ -6,9 +6,9 @@
-
+

Anilife ์„ค์ •

-
+
@@ -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); }); -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/templates/anime_downloader_linkkf_setting.html b/templates/anime_downloader_linkkf_setting.html index 1f1bda5..13ba936 100644 --- a/templates/anime_downloader_linkkf_setting.html +++ b/templates/anime_downloader_linkkf_setting.html @@ -6,9 +6,9 @@
-
+

Linkkf ์„ค์ •

-
+
@@ -217,6 +217,44 @@ -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/templates/anime_downloader_ohli24_request.html b/templates/anime_downloader_ohli24_request.html index 4721f47..74b4776 100644 --- a/templates/anime_downloader_ohli24_request.html +++ b/templates/anime_downloader_ohli24_request.html @@ -44,8 +44,8 @@
- - + + Go
@@ -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 += ``; + str += ``; } - str += ``; - str += ``; - str += ``; + str += ``; + str += ``; + str += ``; // Scheduling (Heart) - str += ``; + str += ``; str += `
`; // 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('๋ถ„์„ ์‹คํŒจ
' + 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; }