v11

src/pages/ChatPage.vue

@@ -1,9 +1,10 @@
 <template>
-  <pn-page-card>
+  <pn-page-template>
     <template #title>
       {{ $t('chat_card__title') }}
     </template>
-    <template #footer>
+    
+    <template #card-actions>
       <q-btn
         rounded color="primary"
         class="w100"
@@ -14,65 +15,63 @@
       </q-btn>
     </template>
 
-    <pn-scroll-list>
+    <div
+      v-if="chat"
+      class="flex column items-center q-px-md q-pt-md q-pb-sm"
+      >
+      <pn-auto-avatar
+        :img="chat.logo"
+        :name="chat.name"
+        size="100px"
+        rounded
+      />
       <div
-        v-if="chat"
-        class="flex column items-center q-px-md q-pt-md q-pb-sm"
+        class="flex row items-start justify-center q-pt-md text-bold text-center"
         >
-        <pn-auto-avatar
-          :img="chat.logo"
-          :name="chat.name"
-          size="100px"
-          rounded
-        />
-        <div
-          class="flex row items-start justify-center q-pt-md text-bold text-center"
-          >
-          {{ chat.name }}
-        </div>
-        <div
-          v-if="chat.description"
-          class="flex row items-start justify-center text-caption text-center text-grey"
-          >
-          {{ chat.description }}
-        </div>
+        {{ chat.name }}
       </div>
-      <div class="q-pb-md w100" v-if="chat">
-        <pn-chat-type-item
-          :access="chat.bot_access"
-          :time="chat.bot_access_date"
-        />
-        <pn-chat-type-item
-          v-if="chat.state !== 1"
-          :state="chat.state"
-          :time="chat.state_date ?? 0"
-        />
+      <div
+        v-if="chat.description"
+        class="flex row items-start justify-center text-caption text-center text-grey"
+        >
+        {{ chat.description }}
       </div>
+    </div>
+    <div class="q-pb-md w100" v-if="chat">
+      <pn-chat-type-item
+        :access="chat.bot_access"
+        :time="chat.bot_access_date"
+      />
+      <pn-chat-type-item
+        v-if="chat.state !== 1"
+        :state="chat.state"
+        :time="chat.state_date ?? 0"
+      />
+    </div>
 
-      <q-list separator v-if="chatUsers.length !== 0">
-        <q-item-label class="text-caption text-bold q-py-none" header>
-          {{ $t('chat_card__members') + ' (' + chatUsers.length +')' }}
-        </q-item-label>
-        <q-item
-          v-for="item in chatUsers"
-          :key="item.id"
-          v-ripple
-          clickable
-          class="w100"
-          @click="goUserInfo(item.id)"
-          >
-          <pn-user-list-item-body :item showStatus>
-            <q-item-label  class="text-caption text-amber-10" lines="1" v-if="chat?.owner_id === item.id">
-              <div class="flex items-center">
-                <q-icon name="star" class="q-pr-xs"/>
-                {{ $t('chat_card__owner') }}
-              </div>
-            </q-item-label>
-          </pn-user-list-item-body>
-        </q-item>
-      </q-list>
-    </pn-scroll-list>
-  </pn-page-card>
+    <q-list v-if="chatUsers.length !== 0">
+      <q-item-label class="text-caption text-bold q-py-none" header>
+        {{ $t('chat_card__members') + ' (' + chatUsers.length +')' }}
+      </q-item-label>
+      <q-item
+        v-for="item in chatUsers"
+        :key="item.id"
+        v-ripple
+        clickable
+        class="w100"
+        @click="goUserInfo(item.id)"
+        >
+        <pn-user-list-item-body :item showStatus>
+          <q-item-label  class="text-caption text-amber-10" lines="1" v-if="chat?.owner_id === item.id">
+            <div class="flex items-center">
+              <q-icon name="star" class="q-pr-xs"/>
+              {{ $t('chat_card__owner') }}
+            </div>
+          </q-item-label>
+        </pn-user-list-item-body>
+      </q-item>
+    </q-list>
+  </pn-page-template>
 
 </template>