feat: consistent cards

DeFUCC · May 2, 2023 · b536983 · b536983
1 parent 143036d
commit b536983
Show file tree

Hide file tree

Showing 14 changed files with 35 additions and 36 deletions.
diff --git a/examples/messages.html b/examples/messages.html
@@ -2,14 +2,14 @@
 <html lang="en">
 
 <head>
-  <title>Chat example</title>
+  <title>Private chat example</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://unpkg.com/@gun-vue/components/dist/style.css">
   <script type="importmap">
   {
     "imports": {
-      "app": "../app/dist/app.js"
+      "app": "https://unpkg.com/@gun-vue/app"
     }
   }
   </script>
@@ -28,15 +28,16 @@
 
 <body>
 
-  <div id="app" class="flex-col">
-    <h1>Chat example app!</h1>
+  <div id="app" class="flex-col gap-2">
+    <h1 class="text-2xl p-2">Private chat example Gun-Vue app</h1>
     <div class="flex flex-wrap items-center gap-2 p-4">
       <gun-relay></gun-relay>
       <user-icon></user-icon>
       <room-button></room-button>
     </div>
     <keep-alive>
-      <user-list v-if="!other" @user="other=$event"></user-list>
+      <guest-list v-if="!other" @user="other=$event"></guest-list>
+      <guest-list v-if="!other" @user="other=$event" state="offline"></guest-list>
       <chat-private v-else :pub="other">
         <button class="button" @click="other=''">Close</button>
         </chat-room>

diff --git a/src/post/PostCard.vue b/src/post/PostCard.vue
@@ -60,7 +60,7 @@ const hasText = computed(() => post.icon || post.title || post.statement || post
         slot
     .flex.gap-1.rounded-xl.p-1.bg-dark-50.bg-opacity-20.flex-wrap.items-center(
       v-if="actions" 
-      style="flex: 1 1 130px"
+      style="flex: 1 1 230px"
       )
       post-action-react(
         :authors="authors" 

diff --git a/src/post/PostList.vue b/src/post/PostList.vue
@@ -113,7 +113,7 @@ const filteredPosts = computed(() => {
       )
         button.button(@click="user.auth = true") Authorize to post here
         slot
-  .flex.flex-wrap.gap-4
+  .flex.flex-wrap.gap-4.p-2
     transition-group(name="list")
       post-card.max-w-xl.flex-1.shadow-xl(
         v-for="(authors, hash) in filteredPosts"

diff --git a/src/private/index.vue b/src/private/index.vue
@@ -14,11 +14,12 @@ const props = defineProps({
 <template lang='pug'>
 .flex
   chat-private-list(
+    style="flex: 1 0 200px"
     @chat="$router.push(`/private/${$event}`)"
     :current="pub"
     )
   router-view(v-slot="{ Component }")
     transition(name="fade")
       keep-alive
-        component(:is="Component" )
+        component(:is="Component" style="flex: 6" )
 </template>
diff --git a/src/project/ProjectCard.vue b/src/project/ProjectCard.vue
@@ -77,7 +77,8 @@ defineProps({
 
 <style lang="postcss" scoped>
 .card {
-  @apply transition duration-300ms ease-out min-w-280px p-2px pl-2 rounded-2xl cursor-pointer flex flex-wrap items-end bg-cover bg-center dark-bg-dark-700;
+  @apply transition duration-300ms ease-out min-w-280px p-2px pl-2 rounded-2xl cursor-pointer flex flex-wrap items-end bg-cover bg-center dark-bg-dark-700 max-w-360px;
+  flex: 1 1 200px;
   filter: grayscale(10%) brightness(95%);
 }
 

diff --git a/src/project/ProjectList.vue b/src/project/ProjectList.vue
@@ -2,12 +2,9 @@
 import { useProjects, currentRoom } from '#composables';
 import { ProjectCard } from '#components'
 import ProjectForm from './ProjectForm.vue';
+import { computed } from 'vue';
 
-const props = defineProps({
-  pub: { type: String, default: currentRoom?.pub }
-})
-
-const { candidates, search } = useProjects(props.pub)
+const projects = computed(() => useProjects(currentRoom?.pub))
 
 defineEmits(['open'])
 </script>
@@ -16,19 +13,19 @@ defineEmits(['open'])
 .flex.flex-col 
   .p-2.flex.flex-col.gap-2
     input.p-2.rounded-xl.shadow.dark-bg-dark-400(
-      v-model="search" 
+      v-model="projects.search.value" 
       placeholder="Start typing a project title"
       )
-  .flex.flex-col.gap-4.p-2
+  .flex.flex-wrap.gap-4.p-2
     transition-group(name="list")
       project-card(
-        v-for="(proj, path) in candidates" 
+        v-for="(proj, path) in projects.candidates.value" 
         :key="path"
-        :project="proj.item"
-        :path="proj.item.path"
-        :style="{ opacity: 1 - proj.score }"
-        @click="$emit('open', proj.item.path)"
+        :project="proj?.item"
+        :path="proj?.item?.path"
+        :style="{ opacity: 1 - proj?.score }"
+        @click="$emit('open', proj?.item?.path)"
         )
   .p-2.flex.flex-col.gap-2
-    project-form(:title="search" v-if="search" @added="search=''")
+    project-form(:title="projects.search.value" v-if="projects.search.value" @added="projects.search.value=''")
 </template>
diff --git a/src/project/index.vue b/src/project/index.vue
@@ -6,9 +6,7 @@ import { ProjectList } from '../components'
 
 <template lang="pug">
 .flex.flex-col
-	.p-1
-		project-list(
-			:key="currentRoom.pub"
-			@open="$router.push(`/projects/${encodeURI($event)}`)"
-			)
+	project-list(
+		@open="$router.push(`/projects/${encodeURI($event)}`)"
+		)
 </template>
diff --git a/src/user/UserList.vue → src/room/GuestList.vue b/src/user/UserList.vue → src/room/GuestList.vue
diff --git a/src/room/RoomPage.vue b/src/room/RoomPage.vue
@@ -2,7 +2,7 @@
 <script setup>
 import { useRoom, rootRoom, currentRoom, useColor, useUser, useBackground, useMd } from '#composables';
 import { ref, computed, reactive } from 'vue'
-import { RoomLogo, FormTitle, AccountBadge, RoomActions, RoomFeature, FormText, UserList } from '../components'
+import { RoomLogo, FormTitle, AccountBadge, RoomActions, RoomFeature, FormText, GuestList } from '../components'
 import { features } from '../../gun.config.json'
 
 const props = defineProps({
@@ -13,7 +13,7 @@ const props = defineProps({
   }
 })
 
-defineEmits(['rooms', 'browse'])
+defineEmits(['rooms', 'browse', 'user'])
 
 const { user } = useUser()
 
@@ -70,7 +70,7 @@ const bg = computed(() => useBackground({ pub: roomPub.value, size: 1200, attach
 
   slot
   .flex.flex-col.items-center.bg-light-300.dark-bg-dark-400
-    user-list
+
     .flex.flex-wrap.items-center.gap-2.p-4
       room-feature(
         v-for="(title, c) in titles" 
@@ -96,5 +96,6 @@ const bg = computed(() => useBackground({ pub: roomPub.value, size: 1200, attach
         v-model:text="edit.text" 
         @close="updateRoomProfile('text', edit.text); edit.text = false"
         )
-
+    guest-list(@user="$emit('user',$event)")
+    guest-list(state="offline" @user="$emit('user',$event)")
 </template>
diff --git a/src/room/[room].vue b/src/room/[room].vue
@@ -17,5 +17,6 @@ ui-layer(
     style="flex: 1 1 200px"
     :pub="room"
     @browse="$router.push(`/${$event}/`)"
+    @user="$router.push(`/users/${$event}/`)"
     ) 
 </template>
diff --git a/src/room/components.ts b/src/room/components.ts
@@ -11,4 +11,5 @@ export const RoomList = defineAsyncComponent(() => import('./RoomList.vue'))
 export const RoomPage = defineAsyncComponent(() => import('./RoomPage.vue'))
 export const RoomProfile = defineAsyncComponent(() => import("./RoomProfile.vue"))
 export const RoomButton = defineAsyncComponent(() => import('./RoomButton.vue'))
-export const RoomActions = defineAsyncComponent(() => import('./RoomActions.vue'))
+export const RoomActions = defineAsyncComponent(() => import('./RoomActions.vue'))
+export const GuestList = defineAsyncComponent(() => import("./GuestList.vue"));
diff --git a/src/user/UserListOverlay.vue b/src/user/UserListOverlay.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onClickOutside, useMediaQuery } from '@vueuse/core';
 import { useGuests, joinRoom, useUser } from '#composables';
-import { AccountBadge } from '../components'
+import { AccountBadge, GuestList } from '../components'
 import { reactive, ref, computed, toRef } from 'vue'
 
 const isLarge = useMediaQuery('(min-width: 640px)')
@@ -54,5 +54,5 @@ transition(name="fade")
       .flex.items-center
         .text-xl.mr-2.capitalize {{ state }}
         .px-2.py-1.rounded-xl.font-bold {{ guests.count[state] }}
-      UserList(:state="state")
+      guest-list(:state="state" @user="$emit('user',$event)")
 </template> 
diff --git a/src/user/[pub].vue b/src/user/[pub].vue
@@ -14,7 +14,6 @@ onMounted(() => {
   open.value = true
 })
 
-
 </script>
 
 <template lang="pug">

diff --git a/src/user/components.ts b/src/user/components.ts
@@ -5,7 +5,6 @@ export const UserAvatar = defineAsyncComponent(() => import("./UserAvatar.vue"))
 export const UserGraph = defineAsyncComponent(() => import("./UserGraph.vue"));
 export const UserHome = defineAsyncComponent(() => import("./UserHome.vue"));
 export const UserIcon = defineAsyncComponent(() => import("./UserIcon.vue"));
-export const UserList = defineAsyncComponent(() => import("./UserList.vue"));
 export const UserListOverlay = defineAsyncComponent(() => import("./UserListOverlay.vue"));
 
 export const UserPanel = defineAsyncComponent(() => import("./UserPanel.vue"));