الگو:جعبه اطلاعات کتاب: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر تفاوت با ویرایش جدیدتر ←

دیداریویکی‌متن

نسخهٔ ‏۲۶ اکتبر ۲۰۲۵، ساعت ۱۲:۰۷

الگو:توضیحات الگو

@@ خط ۳: / خط ۳: @@
 </noinclude>
 <includeonly>
-<div style="display: flex; direction: rtl; margin: 15px 0; border: 1px solid #e0e0e0; padding: 20px; background: #ffffff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); flex-wrap: wrap;">
-     <!-- بخش عکس کتاب -->
+<!-- نسخه دسکتاپ -->
+<div class="book-desktop" style="display: flex; direction: rtl; margin: 15px 0; border: 1px solid #e0e0e0; padding: 20px; background: #ffffff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+     <!-- بخش عکس کتاب برای دسکتاپ -->
      <div style="margin-left: 20px; flex: 0 0 200px; text-align: center;">
          [[پرونده:{{{عکس|}}}|200px|فریم|پیوند={{{لینک_عکس|}}}|alt=جلد کتاب {{{عنوان|}}}]]
      </div>
-     <!-- بخش مشخصات کتاب -->
+     <!-- بخش مشخصات کتاب برای دسکتاپ -->
-     <div style="flex: 1; min-width: 250px;">
+     <div style="flex: 1;">
          <h2 style="margin: 0 0 15px 0; color: #2c3e50; font-size: 1.4em; border-bottom: 2px solid #3498db; padding-bottom: 8px;">{{{عنوان|}}}</h2>
@@ خط ۲۱: / خط ۲۳: @@
          </div>
-         <!-- دکمه دانلود و مطالعه کتاب -->
+         <!-- دکمه برای دسکتاپ -->
-         <div style="margin-top: 20px; width: 100%;">
+        <table style="width: 100%; border-collapse: collapse; margin-top: 20px;">
-             <div style="background: #000000; padding: 4px 0; border-radius: 3px; text-align: center; width: 100%;">
+            <tr>
-                 <span style="color: white; text-decoration: none; font-weight: bold; font-size: 0.95em;">
+                <td style="background: #000000; padding: 3px 0; border-radius: 2px; text-align: center;">
+                    <span style="color: white; text-decoration: none; font-weight: bold; font-size: 0.9em;">
+                        [[:پرونده:{{{فایل_کتاب|}}}|<span style="color: white;">دانلود و مطالعه کتاب</span>]]
+                    </span>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+<!-- نسخه موبایل -->
+<div class="book-mobile" style="display: none; direction: rtl; margin: 15px 0; border: 1px solid #e0e0e0; padding: 15px; background: #ffffff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center;">
+    <!-- عنوان کتاب در بالای عکس برای موبایل -->
+    <h2 style="margin: 0 0 15px 0; color: #2c3e50; font-size: 1.3em; padding-bottom: 8px;">{{{عنوان|}}}</h2>
+    <!-- عکس کتاب در موبایل -->
+    <div style="text-align: center; margin-bottom: 15px;">
+         [[پرونده:{{{عکس|}}}|250px|فریم|پیوند={{{لینک_عکس|}}}|alt=جلد کتاب {{{عنوان|}}}]]
+    </div>
+    <!-- مشخصات کتاب در موبایل -->
+    <div style="text-align: right; margin-bottom: 15px; line-height: 1.8;">
+        <strong>✍️ نویسنده:</strong> {{{نویسنده|}}}<br>
+        <strong>🏢 ناشر:</strong> {{{ناشر|}}}<br>
+        <strong>📅 سال انتشار:</strong> {{{سال|}}}<br>
+        <strong>📄 تعداد صفحات:</strong> {{{صفحات|}}}
+    </div>
+    <!-- دکمه برای موبایل -->
+    <table style="width: 100%; border-collapse: collapse;">
+        <tr>
+             <td style="background: #000000; padding: 2px 0; border-radius: 2px; text-align: center;">
+                 <span style="color: white; text-decoration: none; font-weight: bold; font-size: 0.9em;">
                      [[:پرونده:{{{فایل_کتاب|}}}|<span style="color: white;">دانلود و مطالعه کتاب</span>]]
                  </span>
-             </div>
+             </td>
-         </div>
+         </tr>
-     </div>
+     </table>
 </div>
+<style>
+@media only screen and (max-width: 768px) {
+    .book-desktop {
+        display: none !important;
+    }
+    .book-mobile {
+        display: block !important;
+    }
+}
+@media only screen and (min-width: 769px) {
+    .book-mobile {
+        display: none !important;
+    }
+    .book-desktop {
+        display: flex !important;
+    }
+}
+</style>
 </includeonly>