fix: polish mobile settings and request UI

2026-04-01 19:09:14 +09:00
parent ce537f431a
commit 1b0144d878
7 changed files with 352 additions and 32 deletions
@@ -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 %}
@@ -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 %}
@@ -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;
            }