From 8f67f27b36b3e1a90cb5dcd66da000f67c7843af Mon Sep 17 00:00:00 2001
From: Kavehhn174 <Kavehhn174@gmail.com>
Date: Sun, 16 Aug 2026 08:48:49 +0330
Subject: [PATCH] fix: raise registration form to reduce scrolling.

Fold the page title into the card header, tighten vertical spacing, and hide the footer on registration routes.
---
 src/layouts/PublicLayout.vue        |   8 +-
 src/router/index.js                 |   4 +-
 src/views/ClassRegistrationView.vue | 135 ++++++++++++++++++----------
 3 files changed, 95 insertions(+), 52 deletions(-)

diff --git a/src/layouts/PublicLayout.vue b/src/layouts/PublicLayout.vue
index 52486bd..d11994b 100644
--- a/src/layouts/PublicLayout.vue
+++ b/src/layouts/PublicLayout.vue
@@ -4,14 +4,18 @@
     <main>
       <RouterView />
     </main>
-    <SiteFooter />
+    <SiteFooter v-if="!hideFooter" />
   </div>
 </template>
 
 <script setup>
-import { RouterView } from 'vue-router'
+import { computed } from 'vue'
+import { RouterView, useRoute } from 'vue-router'
 import SiteHeader from '@/components/SiteHeader.vue'
 import SiteFooter from '@/components/SiteFooter.vue'
+
+const route = useRoute()
+const hideFooter = computed(() => Boolean(route.meta.hideFooter))
 </script>
 
 <style scoped>
diff --git a/src/router/index.js b/src/router/index.js
index 3d2d4a3..677089b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -22,13 +22,13 @@ const routes = [
         path: 'register/upcoming/:classId',
         name: 'register-upcoming',
         component: () => import('@/views/ClassRegistrationView.vue'),
-        meta: { title: 'ثبت‌نام در کلاس | گام نو', registrationType: 'enrollment' }
+        meta: { title: 'ثبت‌نام در کلاس | گام نو', registrationType: 'enrollment', hideFooter: true }
       },
       {
         path: 'register/request/:classId',
         name: 'register-request',
         component: () => import('@/views/ClassRegistrationView.vue'),
-        meta: { title: 'درخواست تشکیل کلاس | گام نو', registrationType: 'class_request' }
+        meta: { title: 'درخواست تشکیل کلاس | گام نو', registrationType: 'class_request', hideFooter: true }
       }
     ]
   },
diff --git a/src/views/ClassRegistrationView.vue b/src/views/ClassRegistrationView.vue
index c51d3a0..d540b4c 100644
--- a/src/views/ClassRegistrationView.vue
+++ b/src/views/ClassRegistrationView.vue
@@ -1,16 +1,6 @@
 <template>
   <div class="registration-page">
-    <div class="container">
-      <header class="page-head">
-        <RouterLink to="/" class="back-link">
-          <span aria-hidden="true">→</span>
-          بازگشت به صفحه اصلی
-        </RouterLink>
-        <p class="page-eyebrow">{{ isClassRequest ? 'درخواست تشکیل کلاس' : 'ثبت‌نام در کلاس' }}</p>
-        <h1>{{ pageTitle }}</h1>
-        <p v-if="cls" class="page-lead">{{ cls.course?.title || cls.name }}</p>
-      </header>
-
+    <div class="container registration-wrap">
       <div v-if="loading" class="state-card loading-block">
         <div class="spinner" aria-label="در حال بارگذاری"></div>
       </div>
@@ -18,6 +8,19 @@
       <div v-else-if="loadError" class="state-card alert" role="alert">{{ loadError }}</div>
 
       <div v-else-if="cls" class="registration-card">
+        <header class="card-topbar">
+          <RouterLink to="/" class="back-link">
+            <span aria-hidden="true">→</span>
+            بازگشت
+          </RouterLink>
+          <div class="card-topbar-title">
+            <p class="page-eyebrow">{{ isClassRequest ? 'درخواست تشکیل کلاس' : 'ثبت‌نام در کلاس' }}</p>
+            <h1>{{ pageTitle }}</h1>
+          </div>
+          <p v-if="cls.course?.title" class="card-topbar-course">{{ cls.course.title }}</p>
+        </header>
+
+        <div class="card-columns">
         <aside class="summary-panel">
           <div class="summary-inner">
             <p class="summary-label">خلاصه کلاس</p>
@@ -247,6 +250,7 @@
             </div>
           </div>
         </section>
+        </div>
       </div>
     </div>
   </div>
@@ -391,14 +395,44 @@ onMounted(async () => {
 
 <style scoped>
 .registration-page {
-  min-height: 100vh;
-  padding: calc(var(--header-h) + 2rem) 0 3.5rem;
+  min-height: calc(100vh - var(--header-h));
+  padding: calc(var(--header-h) + 0.65rem) 0 2rem;
   background:
     radial-gradient(circle at 12% 0%, rgba(45, 106, 79, 0.1), transparent 42%),
     radial-gradient(circle at 88% 8%, rgba(232, 163, 23, 0.1), transparent 38%),
     linear-gradient(180deg, var(--canvas) 0%, var(--canvas-deep) 100%);
 }
 
+.registration-wrap {
+  max-width: 960px;
+}
+
+.card-topbar {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 1rem 1.25rem;
+  padding: 0.85rem 1.5rem;
+  border-bottom: 1px solid rgba(20, 53, 43, 0.08);
+  background: rgba(45, 106, 79, 0.03);
+}
+
+.card-topbar-title {
+  min-width: 0;
+}
+
+.card-topbar-course {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--ink-soft);
+  white-space: nowrap;
+}
+
+.card-columns {
+  display: grid;
+  grid-template-columns: minmax(220px, 280px) 1fr;
+}
+
 .page-head {
   max-width: 42rem;
   margin-bottom: 2rem;
@@ -408,11 +442,11 @@ onMounted(async () => {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
-  margin-bottom: 1rem;
-  font-size: 0.875rem;
+  font-size: 0.82rem;
   font-weight: 600;
   color: var(--ink-soft);
   transition: color 0.2s ease;
+  white-space: nowrap;
 }
 
 .back-link:hover {
@@ -420,22 +454,18 @@ onMounted(async () => {
 }
 
 .page-eyebrow {
-  font-size: 0.8rem;
+  font-size: 0.72rem;
   font-weight: 800;
   letter-spacing: 0.02em;
   color: var(--saffron-deep);
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.15rem;
 }
 
+.card-topbar-title h1,
 .page-head h1 {
   font-family: var(--font-display);
-  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
-  margin-bottom: 0.5rem;
-}
-
-.page-lead {
-  font-size: 1.05rem;
-  color: var(--ink-soft);
+  font-size: 1.15rem;
+  line-height: 1.3;
 }
 
 .state-card {
@@ -447,12 +477,12 @@ onMounted(async () => {
 }
 
 .registration-card {
-  display: grid;
-  grid-template-columns: minmax(240px, 300px) 1fr;
+  display: flex;
+  flex-direction: column;
   gap: 0;
   max-width: 960px;
   margin-inline: auto;
-  border-radius: 1.5rem;
+  border-radius: 1.25rem;
   overflow: hidden;
   border: 1px solid rgba(20, 53, 43, 0.08);
   box-shadow: var(--shadow);
@@ -466,9 +496,9 @@ onMounted(async () => {
 }
 
 .summary-inner {
-  padding: 2rem 1.75rem;
+  padding: 1.35rem 1.5rem;
   position: sticky;
-  top: calc(var(--header-h) + 1.5rem);
+  top: calc(var(--header-h) + 0.5rem);
 }
 
 .summary-label {
@@ -481,9 +511,9 @@ onMounted(async () => {
 }
 
 .summary-title {
-  font-size: 1.15rem;
+  font-size: 1.05rem;
   line-height: 1.45;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .summary-list {
@@ -528,15 +558,15 @@ onMounted(async () => {
 }
 
 .form-panel {
-  padding: 2rem 2.25rem 2.25rem;
+  padding: 1.35rem 1.75rem 1.5rem;
 }
 
 .stepper {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  margin-bottom: 2rem;
-  padding-bottom: 1.5rem;
+  margin-bottom: 1.25rem;
+  padding-bottom: 1rem;
   border-bottom: 1px solid rgba(20, 53, 43, 0.08);
 }
 
@@ -587,25 +617,25 @@ onMounted(async () => {
 }
 
 .step-header {
-  margin-bottom: 1.75rem;
+  margin-bottom: 1.15rem;
 }
 
 .step-header h2 {
-  font-size: 1.25rem;
-  margin-bottom: 0.5rem;
+  font-size: 1.1rem;
+  margin-bottom: 0.35rem;
 }
 
 .step-header p {
   color: var(--ink-soft);
-  font-size: 0.925rem;
-  line-height: 1.75;
+  font-size: 0.875rem;
+  line-height: 1.6;
   max-width: 36rem;
 }
 
 .fields-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 1.25rem 1.5rem;
+  gap: 0.9rem 1.25rem;
 }
 
 .field-wide {
@@ -657,8 +687,8 @@ onMounted(async () => {
 }
 
 .form-actions {
-  margin-top: 2rem;
-  padding-top: 0.25rem;
+  margin-top: 1.35rem;
+  padding-top: 0;
 }
 
 .form-actions--split {
@@ -875,8 +905,21 @@ onMounted(async () => {
 }
 
 @media (max-width: 820px) {
-  .registration-card {
+  .card-topbar {
     grid-template-columns: 1fr;
+    gap: 0.5rem;
+    padding: 0.85rem 1.25rem;
+  }
+
+  .card-topbar-course {
+    white-space: normal;
+  }
+
+  .card-columns {
+    grid-template-columns: 1fr;
+  }
+
+  .registration-card {
     max-width: 520px;
   }
 
@@ -915,11 +958,7 @@ onMounted(async () => {
 
 @media (max-width: 560px) {
   .registration-page {
-    padding-top: calc(var(--header-h) + 1.25rem);
-  }
-
-  .page-head {
-    margin-bottom: 1.5rem;
+    padding-top: calc(var(--header-h) + 0.4rem);
   }
 
   .fields-grid {