style: media detail

eallion · Sep 13, 2024 · bd7a97e · bd7a97e
1 parent 921e94a
commit bd7a97e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 13 deletions.
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
@@ -1958,8 +1958,8 @@ select {
   max-height:0.75rem
 }
 
-.max-h-\[405px\] {
-  max-height:405px
+.max-h-72 {
+  max-height:18rem
 }
 
 .max-h-\[5rem\] {
@@ -2038,6 +2038,10 @@ select {
   width:100%
 }
 
+.w-\[1024px\] {
+  width:1024px
+}
+
 .w-\[10px\] {
   width:10px
 }
@@ -2132,6 +2136,11 @@ select {
   max-width:100%
 }
 
+.max-w-max {
+  max-width:-moz-max-content;
+  max-width:max-content
+}
+
 .max-w-prose {
   max-width:65ch
 }
@@ -3010,6 +3019,10 @@ select {
   line-height:1.75rem
 }
 
+.leading-8 {
+  line-height:2rem
+}
+
 .leading-\[12px\] {
   line-height:12px
 }
@@ -5673,6 +5686,11 @@ pre {
     width:49%
   }
 
+  .sm\:max-w-fit {
+    max-width:-moz-fit-content;
+    max-width:fit-content
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns:repeat(2, minmax(0, 1fr))
   }
@@ -5751,6 +5769,10 @@ pre {
     height:200px
   }
 
+  .md\:max-h-80 {
+    max-height:20rem
+  }
+
   .md\:w-1\/3 {
     width:33.333333%
   }
@@ -5771,6 +5793,11 @@ pre {
     width:auto
   }
 
+  .md\:max-w-fit {
+    max-width:-moz-fit-content;
+    max-width:fit-content
+  }
+
   .md\:grid-cols-3 {
     grid-template-columns:repeat(3, minmax(0, 1fr))
   }
@@ -5882,6 +5909,10 @@ pre {
     display:block
   }
 
+  .lg\:flex {
+    display:flex
+  }
+
   .lg\:grid {
     display:grid
   }
@@ -5918,6 +5949,10 @@ pre {
     width:auto
   }
 
+  .lg\:max-w-5xl {
+    max-width:64rem
+  }
+
   .lg\:max-w-7xl {
     max-width:80rem
   }

diff --git a/layouts/_default/media.html b/layouts/_default/media.html
@@ -71,12 +71,12 @@ <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
                 <span class="text-neutral-600 bg-neutral-100 dark:text-neutral-100 dark:bg-neutral-700 text-sm px-3 py-1 mr-2 mb-2 rounded-sm cursor-pointer hover:bg-neutral-700 hover:text-neutral-100 dark:hover:bg-neutral-100 dark:hover:text-neutral-600 flex justify-center items-center">{{ partial "icon.html" "random" }} <span class="neodb_random ml-1">今天看什么？（Top250 随机）</span></span>
             </div>
 
-            <div class="movie_popup hidden fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-neutral-300 dark:bg-neutral-700 p-5 border border-neutral-300 dark:border-neutral-300 shadow-lg z-50" id="moviePopup">
-              <h2 class="flex flex-row items-end"><a id="movieId" target="_blank" rel="nofollow noopener noreferrer"><div id="movieTitle" class="text-4xl text-gray-500 hover:text-primary-600 dark:hover:text-primary-400 mr-2"></div></a> <span id="randomMovieYear" class="text-xl"></span></h2>
-              <div class="flex flex-row justify-start items-start h-full gap-3">
-                <img id="randomMovieCover" src="" alt="Movie Cover" class="max-h-[405px] aspect-[2/3] m-0 p-0 nozoom">
+            <div class="movie_popup text-sm w-[1024px] max-w-max sm:max-w-fit md:max-w-fit lg:max-w-5xl hidden fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-neutral-300 dark:bg-neutral-700 p-5 border border-neutral-300 dark:border-neutral-300 shadow-lg z-50" id="moviePopup">
+              <h2 class="flex flex-row items-end mt-2"><a id="movieId" target="_blank" rel="nofollow noopener noreferrer"><div id="movieTitle" class="text-4xl text-gray-500 hover:text-primary-600 dark:hover:text-primary-400 mr-2"></div></a> <span id="randomMovieYear" class="text-xl"></span></h2>
+              <div class="flex flex-col lg:flex-row justify-start items-start h-full gap-3">
+                <img id="randomMovieCover" src="" alt="Movie Cover" class="self-center max-h-72 md:max-h-80 aspect-[2/3] m-0 p-0 nozoom">
                 <div class="flex flex-col">
-                  <div class="flex flex-row items-center mb-0 mb-2">评分：<div class="flex items-center">
+                  <div class="flex flex-row items-center mt-0 mb-2">评分：<div class="flex items-center">
                     <div class="flex items-center relative p-0">
                         <div class="flex items-center"><svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" class="flex-shrink-0"><path fill="#ff9800" d="M235.38 98.53A11.82 11.82 0 0 0 225 90.29l-59.45-5.14a4 4 0 0 1-3.32-2.44L139 27.36a11.95 11.95 0 0 0-22.06 0l-23.2 55.35a4 4 0 0 1-3.32 2.44L31 90.29a12 12 0 0 0-6.83 21.07l45.1 39.35a4 4 0 0 1 1.28 4L57 213.22a11.88 11.88 0 0 0 4.67 12.48a11.76 11.76 0 0 0 13.19.53l51.1-31a3.89 3.89 0 0 1 4.08 0l51.1 31a12 12 0 0 0 17.86-13l-13.52-58.54a4 4 0 0 1 1.28-4l45.1-39.35a11.89 11.89 0 0 0 3.52-12.81m-8.78 6.8l-45.1 39.35a12 12 0 0 0-3.82 11.8L191.2 215a4 4 0 0 1-1.56 4.2a3.86 3.86 0 0 1-4.35.17l-51.1-31a11.88 11.88 0 0 0-12.38 0l-51.1 31a3.86 3.86 0 0 1-4.35-.17a4 4 0 0 1-1.56-4.2l13.52-58.54a12 12 0 0 0-3.82-11.8l-45.1-39.33a4 4 0 0 1-1.18-4.33a4 4 0 0 1 3.44-2.75l59.45-5.14a12 12 0 0 0 10-7.31l23.22-55.36a4 4 0 0 1 7.32 0l23.22 55.36a12 12 0 0 0 10 7.31l59.45 5.14a4 4 0 0 1 3.44 2.75a4 4 0 0 1-1.16 4.33"/></svg><svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" class="flex-shrink-0"><path fill="#ff9800" d="M235.38 98.53A11.82 11.82 0 0 0 225 90.29l-59.45-5.14a4 4 0 0 1-3.32-2.44L139 27.36a11.95 11.95 0 0 0-22.06 0l-23.2 55.35a4 4 0 0 1-3.32 2.44L31 90.29a12 12 0 0 0-6.83 21.07l45.1 39.35a4 4 0 0 1 1.28 4L57 213.22a11.88 11.88 0 0 0 4.67 12.48a11.76 11.76 0 0 0 13.19.53l51.1-31a3.89 3.89 0 0 1 4.08 0l51.1 31a12 12 0 0 0 17.86-13l-13.52-58.54a4 4 0 0 1 1.28-4l45.1-39.35a11.89 11.89 0 0 0 3.52-12.81m-8.78 6.8l-45.1 39.35a12 12 0 0 0-3.82 11.8L191.2 215a4 4 0 0 1-1.56 4.2a3.86 3.86 0 0 1-4.35.17l-51.1-31a11.88 11.88 0 0 0-12.38 0l-51.1 31a3.86 3.86 0 0 1-4.35-.17a4 4 0 0 1-1.56-4.2l13.52-58.54a12 12 0 0 0-3.82-11.8l-45.1-39.33a4 4 0 0 1-1.18-4.33a4 4 0 0 1 3.44-2.75l59.45-5.14a12 12 0 0 0 10-7.31l23.22-55.36a4 4 0 0 1 7.32 0l23.22 55.36a12 12 0 0 0 10 7.31l59.45 5.14a4 4 0 0 1 3.44 2.75a4 4 0 0 1-1.16 4.33"/></svg><svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" class="flex-shrink-0"><path fill="#ff9800" d="M235.38 98.53A11.82 11.82 0 0 0 225 90.29l-59.45-5.14a4 4 0 0 1-3.32-2.44L139 27.36a11.95 11.95 0 0 0-22.06 0l-23.2 55.35a4 4 0 0 1-3.32 2.44L31 90.29a12 12 0 0 0-6.83 21.07l45.1 39.35a4 4 0 0 1 1.28 4L57 213.22a11.88 11.88 0 0 0 4.67 12.48a11.76 11.76 0 0 0 13.19.53l51.1-31a3.89 3.89 0 0 1 4.08 0l51.1 31a12 12 0 0 0 17.86-13l-13.52-58.54a4 4 0 0 1 1.28-4l45.1-39.35a11.89 11.89 0 0 0 3.52-12.81m-8.78 6.8l-45.1 39.35a12 12 0 0 0-3.82 11.8L191.2 215a4 4 0 0 1-1.56 4.2a3.86 3.86 0 0 1-4.35.17l-51.1-31a11.88 11.88 0 0 0-12.38 0l-51.1 31a3.86 3.86 0 0 1-4.35-.17a4 4 0 0 1-1.56-4.2l13.52-58.54a12 12 0 0 0-3.82-11.8l-45.1-39.33a4 4 0 0 1-1.18-4.33a4 4 0 0 1 3.44-2.75l59.45-5.14a12 12 0 0 0 10-7.31l23.22-55.36a4 4 0 0 1 7.32 0l23.22 55.36a12 12 0 0 0 10 7.31l59.45 5.14a4 4 0 0 1 3.44 2.75a4 4 0 0 1-1.16 4.33"/></svg><svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" class="flex-shrink-0"><path fill="#ff9800" d="M235.38 98.53A11.82 11.82 0 0 0 225 90.29l-59.45-5.14a4 4 0 0 1-3.32-2.44L139 27.36a11.95 11.95 0 0 0-22.06 0l-23.2 55.35a4 4 0 0 1-3.32 2.44L31 90.29a12 12 0 0 0-6.83 21.07l45.1 39.35a4 4 0 0 1 1.28 4L57 213.22a11.88 11.88 0 0 0 4.67 12.48a11.76 11.76 0 0 0 13.19.53l51.1-31a3.89 3.89 0 0 1 4.08 0l51.1 31a12 12 0 0 0 17.86-13l-13.52-58.54a4 4 0 0 1 1.28-4l45.1-39.35a11.89 11.89 0 0 0 3.52-12.81m-8.78 6.8l-45.1 39.35a12 12 0 0 0-3.82 11.8L191.2 215a4 4 0 0 1-1.56 4.2a3.86 3.86 0 0 1-4.35.17l-51.1-31a11.88 11.88 0 0 0-12.38 0l-51.1 31a3.86 3.86 0 0 1-4.35-.17a4 4 0 0 1-1.56-4.2l13.52-58.54a12 12 0 0 0-3.82-11.8l-45.1-39.33a4 4 0 0 1-1.18-4.33a4 4 0 0 1 3.44-2.75l59.45-5.14a12 12 0 0 0 10-7.31l23.22-55.36a4 4 0 0 1 7.32 0l23.22 55.36a12 12 0 0 0 10 7.31l59.45 5.14a4 4 0 0 1 3.44 2.75a4 4 0 0 1-1.16 4.33"/></svg><svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" class="flex-shrink-0"><path fill="#ff9800" d="M235.38 98.53A11.82 11.82 0 0 0 225 90.29l-59.45-5.14a4 4 0 0 1-3.32-2.44L139 27.36a11.95 11.95 0 0 0-22.06 0l-23.2 55.35a4 4 0 0 1-3.32 2.44L31 90.29a12 12 0 0 0-6.83 21.07l45.1 39.35a4 4 0 0 1 1.28 4L57 213.22a11.88 11.88 0 0 0 4.67 12.48a11.76 11.76 0 0 0 13.19.53l51.1-31a3.89 3.89 0 0 1 4.08 0l51.1 31a12 12 0 0 0 17.86-13l-13.52-58.54a4 4 0 0 1 1.28-4l45.1-39.35a11.89 11.89 0 0 0 3.52-12.81m-8.78 6.8l-45.1 39.35a12 12 0 0 0-3.82 11.8L191.2 215a4 4 0 0 1-1.56 4.2a3.86 3.86 0 0 1-4.35.17l-51.1-31a11.88 11.88 0 0 0-12.38 0l-51.1 31a3.86 3.86 0 0 1-4.35-.17a4 4 0 0 1-1.56-4.2l13.52-58.54a12 12 0 0 0-3.82-11.8l-45.1-39.33a4 4 0 0 1-1.18-4.33a4 4 0 0 1 3.44-2.75l59.45-5.14a12 12 0 0 0 10-7.31l23.22-55.36a4 4 0 0 1 7.32 0l23.22 55.36a12 12 0 0 0 10 7.31l59.45 5.14a4 4 0 0 1 3.44 2.75a4 4 0 0 1-1.16 4.33"/></svg></div>
                         <div id="ratingWidth" class="flex items-center overflow-hidden absolute top-0"><svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" class="flex-shrink-0"><path fill="#ff9800" d="m234.5 114.38l-45.1 39.36l13.51 58.6a16 16 0 0 1-23.84 17.34l-51.11-31l-51 31a16 16 0 0 1-23.84-17.34l13.49-58.54l-45.11-39.42a16 16 0 0 1 9.11-28.06l59.46-5.15l23.21-55.36a15.95 15.95 0 0 1 29.44 0L166 81.17l59.44 5.15a16 16 0 0 1 9.11 28.06Z"/></svg><svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" class="flex-shrink-0"><path fill="#ff9800" d="m234.5 114.38l-45.1 39.36l13.51 58.6a16 16 0 0 1-23.84 17.34l-51.11-31l-51 31a16 16 0 0 1-23.84-17.34l13.49-58.54l-45.11-39.42a16 16 0 0 1 9.11-28.06l59.46-5.15l23.21-55.36a15.95 15.95 0 0 1 29.44 0L166 81.17l59.44 5.15a16 16 0 0 1 9.11 28.06Z"/></svg><svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" class="flex-shrink-0"><path fill="#ff9800" d="m234.5 114.38l-45.1 39.36l13.51 58.6a16 16 0 0 1-23.84 17.34l-51.11-31l-51 31a16 16 0 0 1-23.84-17.34l13.49-58.54l-45.11-39.42a16 16 0 0 1 9.11-28.06l59.46-5.15l23.21-55.36a15.95 15.95 0 0 1 29.44 0L166 81.17l59.44 5.15a16 16 0 0 1 9.11 28.06Z"/></svg><svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" class="flex-shrink-0"><path fill="#ff9800" d="m234.5 114.38l-45.1 39.36l13.51 58.6a16 16 0 0 1-23.84 17.34l-51.11-31l-51 31a16 16 0 0 1-23.84-17.34l13.49-58.54l-45.11-39.42a16 16 0 0 1 9.11-28.06l59.46-5.15l23.21-55.36a15.95 15.95 0 0 1 29.44 0L166 81.17l59.44 5.15a16 16 0 0 1 9.11 28.06Z"/></svg><svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" class="flex-shrink-0"><path fill="#ff9800" d="m234.5 114.38l-45.1 39.36l13.51 58.6a16 16 0 0 1-23.84 17.34l-51.11-31l-51 31a16 16 0 0 1-23.84-17.34l13.49-58.54l-45.11-39.42a16 16 0 0 1 9.11-28.06l59.46-5.15l23.21-55.36a15.95 15.95 0 0 1 29.44 0L166 81.17l59.44 5.15a16 16 0 0 1 9.11 28.06Z"/></svg></div>
@@ -85,14 +85,14 @@ <h2 class="flex flex-row items-end"><a id="movieId" target="_blank" rel="nofollo
                     <span class="text-sm hover:text-neutral-100 text-[#ff9800] ml-1">(<span id="randomMovieRatingCount"></span>)</span>
                     </div>
                   </div>
-                  <p class="my-2 flex"><span class="whitespace-nowrap">又名：</span><span id="otherTitle"></span></p>
-                  <p class="my-2 flex"><span class="whitespace-nowrap">分类：</span><span id="randomMovieGenre"></span></p>
-                  <p class="my-2 flex"><span class="whitespace-nowrap">导演：</span><span id="movieDirector"></span></p>
-                  <p class="my-2 flex"><span class="whitespace-nowrap">主演：</span><span id="movieActor"></span></p>
-                  <p class="mt-2 mb-0">倒计时：<span class="text-sm">随机影片功能有冷却时间，不能无限随机，倒记时冷却时长为随机的影片时长。倒计时结束后，可随机一部新影片。</p>
+                  <p class="my-2 hidden sm:flex"><span class="whitespace-nowrap">又名：</span><span id="otherTitle" class="leading-8"></span></p>
+                  <p class="my-2 hidden sm:flex"><span class="whitespace-nowrap">分类：</span><span id="randomMovieGenre"></span></p>
+                  <p class="my-2 hidden sm:flex"><span class="whitespace-nowrap">导演：</span><span id="movieDirector"></span></p>
+                  <p class="my-2 hidden sm:flex"><span class="whitespace-nowrap">主演：</span><span id="movieActor" class="leading-8"></span></p>
+                  <p class="mt-2 mb-0 hidden lg:flex">倒计时：<span class="text-sm">随机影片功能有冷却时间，不能无限随机，倒记时冷却时长为随机的影片时长。倒计时结束后，可随机一部新影片。</p>
                 </div>
               </div>
-              <p>简介：<span id="movieDescription"></span></p>
+              <p class="hidden lg:flex">简介：<span id="movieDescription"></span></p>
               <div class="flex justify-center">
                 <button id="closePopup" class="rounded-md bg-neutral-800 py-2 px-4 border border-transparent text-center text-sm text-neutral-100 transition-all shadow-md hover:shadow-lg focus:bg-neutral-700 focus:shadow-none active:bg-neutral-700 hover:bg-neutral-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">关闭</button>
               </div>