자기전 정리 2022.10.17(01.)

templates/anime_downloader_ohli24_category.html

@@ -1,46 +1,47 @@
 {% extends "base.html" %} {% block content %}
-
+<div id="yommi_wrapper">
-<div class="input-group mb-2">
+    <div class="input-group mb-2">
-    <input
+        <input
-            id="input_search"
+                id="input_search"
-            type="search"
+                type="search"
-            class="form-control rounded"
+                class="form-control rounded"
-            placeholder="Search"
+                placeholder="Search"
-            aria-label="Search"
+                aria-label="Search"
-            aria-describedby="search-addon"
+                aria-describedby="search-addon"
-    />
+        />
-    <button id="btn_search" type="button" class="btn btn-primary">
+        <button id="btn_search" type="button" class="btn btn-primary">
-        search
+            search
-    </button>
-</div>
-
-<div>
-    <div
-            id="anime_category"
-            class="btn-group"
-            role="group"
-            aria-label="Basic example"
-    >
-        <button id="ing" type="button" class="btn btn-success">방영중</button>
-        <button id="theater" type="button" class="btn btn-primary">극장판</button>
-        <button id="complete_anilist" type="button" class="btn btn-dark">
-            완결
         </button>
     </div>
-    <form id="airing_list_form">
+
-        <div id="airing_list"></div>
+    <div>
-    </form>
+        <div
-    <form id="screen_movie_list_form">
+                id="anime_category"
-        <div id="screen_movie_list" class="container"></div>
+                class="btn-group"
-    </form>
+                role="group"
-    <div class="text-center">
+                aria-label="Basic example"
-        <div id="spinner" class="spinner-border" role="status">
+        >
-            <span class="sr-only">Loading...</span>
+            <button id="ing" type="button" class="btn btn-success">방영중</button>
+            <button id="theater" type="button" class="btn btn-primary">극장판</button>
+            <button id="complete_anilist" type="button" class="btn btn-dark">
+                완결
+            </button>
         </div>
+        <form id="airing_list_form">
+            <div id="airing_list"></div>
+        </form>
+        <form id="screen_movie_list_form">
+            <div id="screen_movie_list" class="container"></div>
+        </form>
+        <div class="text-center">
+            <div id="spinner" class="spinner-border" role="status">
+                <span class="sr-only">Loading...</span>
+            </div>
+        </div>
+        <form id="program_auto_form">
+            <div id="episode_list"></div>
+        </form>
     </div>
-    <form id="program_auto_form">
-        <div id="episode_list"></div>
-    </form>
 </div>
 <!--전체-->
 
@@ -146,8 +147,8 @@
             //  {#    '<span data-tooltip-text="'+data.episode[i].title+'">' + data.episode[i].code + '</span></button></div>';#}
             tmp += '<h5 class="card-title">' + data.anime_list[i].title + '</h5>';
             tmp += '<p class="card-text">' + data.anime_list[i].code + '<button id="add_whitelist" name="add_whitelist" class="btn btn-sm btn-favorite mb-1" data-code="' +
-            data.anime_list[i].code +
+                data.anime_list[i].code +
-            '"><i class="bi bi-heart-fill"></i></button></p>';
+                '"><i class="bi bi-heart-fill"></i></button></p>';
             tmp += '<a href="./request?code=' + data.anime_list[i].code + '" class="btn btn-primary cut-text">' + data.anime_list[i].title + '</a>';
             // tmp +=
             // '<button id="add_whitelist" name="add_whitelist" class="btn btn-sm btn-favorite mb-1" data-code="' +
@@ -405,7 +406,7 @@
         let data_code = $(this).attr("data-code");
         console.log(data_code);
         $.ajax({
-            url: "/" + package_name + "/ajax/"+sub+"/add_whitelist",
+            url: "/" + package_name + "/ajax/" + sub + "/add_whitelist",
             type: "POST",
             cache: false,
             data: JSON.stringify({data_code: data_code}),
@@ -671,6 +672,7 @@
     button.btn-favorite {
         background-color: #e0ff42;
     }
+
     /*.card-columns {*/
     /*    @include media-breakpoint-only(lg) {*/
     /*        column-count: 4;*/
@@ -683,10 +685,12 @@
         .container {
             max-width: 100%;
         }
+
         .card-columns {
             column-count: 2;
             column-gap: 1.25rem;
         }
+
         .card-columns .card {
             display: inline-block;
         }
@@ -694,12 +698,16 @@
 
 
     @media (min-width: 768px) {
-        .card-columns {column-count: 3;}
+        .card-columns {
+            column-count: 3;
+        }
     }
 
     /* Large devices (desktops, 992px and up) */
     @media (min-width: 992px) {
-        .card-columns {column-count: 3;}
+        .card-columns {
+            column-count: 3;
+        }
     }
 
     /* Extra large devices (large desktops, 1200px and up) */
@@ -707,23 +715,34 @@
         .card-columns {
             column-count: 5;
         }
+
+        #yommi_wrapper {
+            max-width: 80%;
+            margin: 0 auto;
+        }
     }
+
     .card {
         margin-bottom: 0.75rem;
     }
+
     .card-columns .card {
         margin-bottom: 0.75rem;
     }
-    .card-columns .card img{
+
+    .card-columns .card img {
         width: 100%;
     }
+
     button#add_whitelist {
         /*top: -70px;*/
         position: relative;
     }
+
     body {
-        font-family: NanumSquareNeo,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
+        font-family: NanumSquareNeo, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
     }
+
     body {
         background-image: linear-gradient(90deg, #233f48, #6c6fa2, #768dae);
     }