From 3fcfc6e130b02c4cb2d5c9361139a86141d1c23c Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Wed, 6 May 2026 14:07:21 +0330
Subject: [PATCH] Complete article page responsive

Co-authored-by: Copilot <copilot@github.com>
---
 frontend/pages/article/[id].vue | 213 +++++++++++++++++++++++++++++---
 1 file changed, 198 insertions(+), 15 deletions(-)

diff --git a/frontend/pages/article/[id].vue b/frontend/pages/article/[id].vue
index fdfa9c5..eb475eb 100644
--- a/frontend/pages/article/[id].vue
+++ b/frontend/pages/article/[id].vue
@@ -5,6 +5,7 @@ import useGetArticle from "~/composables/api/blog/useGetArticle";
 
 // state
 
+const router = useRouter();
 const route = useRoute();
 
 const id = route.params.id as string | undefined;
@@ -33,7 +34,24 @@ if (response.isError) {
 
 <template>
     <div class="container">
-        <div class="w-full h-[80svh] rounded-3xl relative overflow-hidden">
+        <!-- Back Button -->
+        <div class="w-full flex mb-6 md:mb-8 mt-4 md:mt-8 px-4">
+            <button
+                @click="router.back()"
+                class="flex items-center gap-2 p-2 md:p-3 rounded-lg hover:bg-slate-100 transition-colors duration-200"
+            >
+                <span class="typo-label-sm md:typo-label-md text-blue-500">بازگشت</span>
+
+                <Icon
+                    name="ci:arrow-left"
+                    size="20px"
+                    class="md:!w-6 md:!h-6 **:stroke-blue-500"
+                />
+            </button>
+        </div>
+
+        <!-- Hero Section -->
+        <div class="w-full h-60 md:h-[70svh] lg:h-[80svh] rounded-2xl md:rounded-3xl relative overflow-hidden">
             <NuxtImg
                 class="absolute object-cover size-full"
                 :alt="article!.title"
@@ -42,19 +60,26 @@ if (response.isError) {
                 loading="eager"
                 fetch-priority="high"
             />
-            <div class="absolute bg-linear-to-t from-black/75 to-transparent size-full" />
-            <div class="absolute pl-10 right-10 bottom-10 flex flex-col gap-6">
-                <h1 class="typo-h-4 text-white pl-8">
+            <div class="absolute bg-linear-to-t from-black from-10% to-transparent size-full max-md:hidden" />
+
+            <!-- Hero Content Desktop -->
+            <div class="absolute inset-0 flex flex-col justify-end p-6 lg:p-10 gap-6 max-md:hidden">
+                <!-- Title -->
+                <h1 class="typo-h-4 text-white pl-8 line-clamp-3">
                     {{ article!.title }}
                 </h1>
 
+                <!-- Summary -->
                 <div
-                    class="typo-p-lg text-slate-200 mb-6 text-justify w-[70%]"
+                    class="typo-p-lg text-slate-200 text-justify w-[80%]"
                     v-html="article!.summery"
                 />
 
-                <div class="flex items-center justify-between">
-                    <div class="flex items-center gap-4">
+                <!-- Info Section -->
+                <div class="flex gap-0 flex-row items-center justify-between">
+                    <!-- Left Info -->
+                    <div class="flex items-center gap-2 md:gap-4 flex-wrap">
+                        <!-- Author Badge -->
                         <div
                             class="w-fit pr-2 pl-5 h-[50px] rounded-full flex items-center justify-center gap-3 bg-white"
                         >
@@ -69,18 +94,24 @@ if (response.isError) {
                                     fetch-priority="low"
                                 />
                             </div>
-                            <span class="typo-label-sm">
+                            <span class="typo-label-sm text-nowrap">
                                 {{ article!.author.full_name }}
                             </span>
                         </div>
+
+                        <!-- Category Badge -->
                         <div
                             class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white"
                         >
-                            <span class="typo-label-sm mt-0.5"> دسته بندی موبایل </span>
+                            <span class="typo-label-sm text-nowrap">
+                                {{ article?.category.name }}
+                            </span>
                         </div>
                     </div>
 
-                    <div class="flex items-center gap-4">
+                    <!-- Right Info -->
+                    <div class="flex items-center gap-4 flex-wrap">
+                        <!-- Date Badge -->
                         <div
                             class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white"
                         >
@@ -89,8 +120,12 @@ if (response.isError) {
                                 size="24px"
                                 class="**:stroke-white"
                             />
-                            <span class="typo-label-sm mt-0.5"> ۲۴ مهر 1403 </span>
+                            <span class="typo-label-sm mt-0.5 text-nowrap">
+                                {{ article?.created_at }}
+                            </span>
                         </div>
+
+                        <!-- Views Badge -->
                         <div
                             class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white"
                         >
@@ -99,7 +134,7 @@ if (response.isError) {
                                 size="24px"
                                 class="**:stroke-white"
                             />
-                            <span class="typo-label-sm mt-0.5">
+                            <span class="typo-label-sm mt-0.5 text-nowrap">
                                 {{ article!.views }}
                             </span>
                         </div>
@@ -108,13 +143,161 @@ if (response.isError) {
             </div>
         </div>
 
-        <div class="flex gap-4 mt-8">
+        <!-- Hero Content Mobile -->
+        <div class="flex flex-col justify-end py-4 px-2 gap-5 md:hidden mt-6">
+            <div class="flex items-center gap-2 flex-wrap">
+                <!-- Date Badge -->
+                <div
+                    class="w-fit flex items-center justify-center gap-1 text-black bg-black/5 rounded-full py-1.5 px-3"
+                >
+                    <Icon
+                        name="ci:calendar"
+                        size="18px"
+                        class="**:stroke-black"
+                    />
+                    <span class="typo-label-xs mt-0.5 text-nowrap"> {{ article?.created_at }} </span>
+                </div>
+
+                <!-- Views Badge -->
+                <div
+                    class="w-fit flex items-center justify-center gap-1 text-black bg-black/5 rounded-full py-1.5 px-3"
+                >
+                    <Icon
+                        name="ci:eye-open"
+                        size="18px"
+                        class="**:stroke-black"
+                    />
+                    <span class="typo-label-xs mt-0.5 text-nowrap">
+                        {{ article!.views }}
+                    </span>
+                </div>
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <!-- Title -->
+                <h1 class="typo-h-6 text-black">
+                    {{ article!.title }}
+                </h1>
+
+                <!-- Summary -->
+                <div
+                    class="typo-p-sm text-slate-800 w-full md:w-[80%]"
+                    v-html="article!.summery"
+                />
+            </div>
+
+            <!-- Info Section -->
+            <div class="flex items-center gap-2 md:gap-4 flex-wrap">
+                <!-- Author Badge -->
+                <div
+                    class="w-fit pr-2 pl-4 md:pr-2 md:pl-5 h-10 md:h-[50px] rounded-full flex items-center justify-center gap-2 md:gap-3 bg-black"
+                >
+                    <div
+                        class="relative flex items-center justify-center rounded-full overflow-hidden size-7 md:size-[35px]"
+                    >
+                        <NuxtImg
+                            class="size-full object-cover absolute"
+                            :src="article!.author.profile_photo"
+                            alt="article-author"
+                            loading="lazy"
+                            fetch-priority="low"
+                        />
+                    </div>
+                    <span class="typo-label-xs md:typo-label-sm text-nowrap text-white">
+                        {{ article!.author.full_name }}
+                    </span>
+                </div>
+
+                <!-- Category Badge -->
+                <div
+                    class="w-fit pr-3 pl-4 md:pr-4 md:pl-5 h-10 md:h-[50px] rounded-full flex items-center justify-center gap-1 md:gap-2 border-[1.5px] border-black text-black"
+                >
+                    <span class="typo-label-xs md:typo-label-sm text-nowrap"> {{ article?.category.name }}</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Content Section -->
+        <div class="flex flex-col lg:flex-row gap-4 md:gap-6 mt-6 md:mt-12">
+            <!-- Article Content -->
             <div
-                class="p-8 flex-1 text-zinc-800 flex flex-col gap-6 [&_p,ul]:text-zinc-500 [&_h1]:typo-h-4 [&_h2]:typo-h-5 [&_h3]:typo-h-6 [&_p]:typo-p-md [&_ul]:list-disc [&_ul]:typo-p-md [&_ul]:space-y-2"
+                class="article-content flex-1 px-2 md:px-6 lg:px-8 text-zinc-800 flex flex-col gap-4 md:gap-6"
                 v-html="article!.content"
             />
 
-            <aside class="mt-8 p-8 h-fit bg-slate-100 w-[400px] sticky top-4 rounded-3xl">asdsa</aside>
+            <!-- Sidebar -->
+            <aside
+                class="w-full lg:w-[350px] p-4 md:p-6 lg:p-8 h-fit bg-slate-100 lg:sticky lg:top-4 rounded-2xl md:rounded-3xl mt-4 md:mt-0"
+            >
+                <p class="typo-label-md text-slate-700">مقالات مرتبط</p>
+            </aside>
         </div>
     </div>
 </template>
+
+<style>
+.article-content :deep(h1) {
+    font-size: 32px;
+    font-weight: 600;
+    color: black;
+}
+
+.article-content :deep(h2) {
+    font-size: 24px;
+    font-weight: 600;
+    color: black;
+}
+
+.article-content :deep(h3) {
+    font-size: 24px;
+    font-weight: 300;
+    color: black;
+}
+
+.article-content :deep(p),
+.article-content :deep(ul) {
+    font-size: 14px;
+    font-weight: 300;
+}
+
+.article-content :deep(ul) {
+    list-style: disc;
+}
+
+.article-content {
+    line-height: 200% !important;
+    font-size: 14px;
+    color: hsl(217, 33%, 17%);
+}
+
+.article-content :deep(ul li + li) {
+    margin-top: 0.5rem;
+}
+
+@media (min-width: 48rem) {
+    .article-content :deep(h1) {
+        font-size: 40px;
+        font-weight: 600;
+    }
+
+    .article-content :deep(h2) {
+        font-size: 32px;
+        font-weight: 600;
+    }
+
+    .article-content :deep(h3) {
+        font-size: 24px;
+        font-weight: 600;
+    }
+
+    .article-content :deep(p),
+    .article-content :deep(ul) {
+        font-size: 16px;
+        font-weight: 300;
+    }
+
+    .article-content {
+        font-size: 16px;
+    }
+}
+</style>