بهبود پنل کاربر

src/components/Widgets/Classroom/ClassroomList/ClassroomList.vue

@@ -41,7 +41,9 @@
       </template>
     </template>
     <template #entity-index-table-item-cell="{inputData}">
-      <user-classroom-card :registration="inputData.props.row" />
+      <q-card class="user-classroom-card-list">
+        <user-classroom-card :registration="inputData.props.row" />
+      </q-card>
     </template>
   </entity-index>
 </template>
@@ -357,4 +359,7 @@ export default {
 .FAILED_DUE_TO_PRE_CONDITIONAL{
   color: red;
 }
+.user-classroom-card-list {
+  margin: 8px 0;
+}
 </style>

src/components/Widgets/Classroom/UserClassroomCard/UserClassroomCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="classroom-card row">
+  <q-card-section class="classroom-card row">
     <div class="right-side col-6">
       <img class="thumbnail"
            :src="registration.classroom_info.thumbnail">
@@ -10,10 +10,15 @@
     </div>
     <div class="left-side col-6">
       <div class="title-box">
-        <q-banner class="banner">{{ registration.classroom_info.title }}</q-banner>
-        {{ getHoldingType(registration.classroom_info.holding_type) }}
-        |
-        {{ registration.classroom_info.sessions_count }} جلسه
+        <q-banner class="banner">{{ convertClassroomTitle(registration.classroom_info.title) }}</q-banner>
+        <div>
+          {{ getClassroomTitleCaption(registration.classroom_info.title) }}
+        </div>
+        <div>
+          {{ getHoldingType(registration.classroom_info.holding_type) }}
+          |
+          {{ registration.classroom_info.sessions_count }} جلسه
+        </div>
       </div>
       <div class="status-box">
         <div class="registration-status-box">
@@ -28,7 +33,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </q-card-section>
 </template>
 
 <script>
@@ -104,6 +109,24 @@ export default {
     }
   },
   methods: {
+    getClassroomTitleCaption(title) {
+      const match = title.match(/^(.*?)\s*\((.*?)\)$/)
+      if (match) {
+        const insideParenthesis = match[2]
+        return `${insideParenthesis}`
+      } else {
+        return ''
+      }
+    },
+    convertClassroomTitle(title) {
+      const match = title.match(/^(.*?)\s*\((.*?)\)$/)
+      if (match) {
+        const beforeParenthesis = match[1]
+        return `${beforeParenthesis}`
+      } else {
+        return title
+      }
+    },
     getTitledDateTime (dateTime) {
       return ShamsiDate.getTitledDateTime(dateTime)
     },
@@ -228,18 +251,21 @@ export default {
 <style scoped lang="scss">
 .classroom-card {
   display: flex;
-  margin-bottom: 8px;
   justify-content: space-between;
   align-items: flex-start;
   align-self: stretch;
-  border-radius: 8px;
-  background: #FFF;
-  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  padding: 0;
+  :deep(.q-card__section--vert){
+    padding: 0;
+  }
+  .q-card__section.q-card__section--vert.classroom-card.row {
+    padding: 0;
+  }
   .right-side {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    padding: 0 4px;
+    padding: 0 4px 0 0;
 
     .thumbnail {
       max-width: 100%;
@@ -250,11 +276,10 @@ export default {
     .q-btn {
       display: flex;
       height: 48px;
-      padding: 8px 24px;
       justify-content: center;
       align-items: center;
       align-self: stretch;
-      border-radius: 0 0 0 8px;
+      border-radius: 0 0 0 4px;
     }
   }
   .left-side {
@@ -263,7 +288,7 @@ export default {
     flex-direction: column;
     justify-content: center;
     align-items: flex-end;
-    gap: 12px;
+    gap: 16px;
     align-self: stretch;
 
     .title-box {
@@ -272,6 +297,7 @@ export default {
       justify-content: center;
       align-items: flex-start;
       align-self: stretch;
+      gap: 8px;
 
       :deep(.q-banner) {
         padding: 8px 4px;