Adjust content sizes for community

spx-gui/src/components/community/ProjectsSection.vue

@@ -1,7 +1,7 @@
 <!-- Project list as a section -->
 
 <template>
- <section :class="`context-${context}`">
+ <section :class="`context-${context}`" :style="{ '--project-num-in-row': numInRow }">
  <header class="header">
  <h2 class="title">
  <slot name="title"></slot>
@@ -11,11 +11,13 @@
  <UIIcon class="link-icon" type="arrowRightSmall" />
  </RouterLink>
  </header>
- <ul class="projects">
- <ListResultWrapper :query-ret="queryRet" :height="260">
- <slot></slot>
+ <div class="projects-wrapper">
+ <ListResultWrapper :query-ret="queryRet" :height="255">
+ <ul class="projects">
+ <slot></slot>
+ </ul>
  </ListResultWrapper>
- </ul>
+ </div>
  </section>
 </template>
 
@@ -36,6 +38,7 @@ defineProps<{
  linkTo?: string
  queryRet: QueryRet<unknown[]>
  context: Context
+ numInRow: number
 }>()
 </script>
 
@@ -71,30 +74,31 @@ defineProps<{
  }
 }
 
-.projects {
- padding: 20px 0;
- margin-bottom: 12px;
+.projects-wrapper {
+ margin: 8px 0 32px;
  position: relative;
+}
 
- display: flex;
- overflow: hidden;
- align-items: center;
+.projects {
+ display: grid;
+ grid-template-columns: repeat(var(--project-num-in-row), 1fr);
  gap: 20px;
 }
 
 .context-user {
  .header {
- height: auto;
+ height: 60px;
  padding: 20px 0 8px;
  }
  .title {
  font-size: 16px;
  line-height: 26px;
  }
+ .projects-wrapper {
+ margin: 8px 0 16px;
+ }
  .projects {
  gap: 16px;
- padding: 8px 0;
- margin-bottom: 24px;
  }
 }
 </style>

spx-gui/src/components/community/user/UserAvatar.vue

@@ -1,6 +1,7 @@
 <template>
  <UserLink
  class="user-avatar"
+ :class="`size-${size}`"
  :style="userInfo != null ? { backgroundImage: `url(${userInfo.avatar})` } : null"
  :user="userInfo"
  ></UserLink>
@@ -11,9 +12,17 @@ import { useAsyncComputed } from '@/utils/utils'
 import { getUser, type User } from '@/apis/user'
 import UserLink from './UserLink.vue'
 
-const props = defineProps<{
- user: string | User
-}>()
+export type Size = 'small' | 'medium'
+
+const props = withDefaults(
+ defineProps<{
+ user: string | User
+ size?: Size
+ }>(),
+ {
+ size: 'medium'
+ }
+)
 
 const userInfo = useAsyncComputed(() =>
  typeof props.user === 'string' ? getUser(props.user) : Promise.resolve(props.user)
@@ -33,6 +42,12 @@ const userInfo = useAsyncComputed(() =>
  background-size: contain;
  transition: 0.1s;
 
+ &.size-small {
+ width: 30px;
+ height: 30px;
+ border-width: 2px;
+ }
+
  &:hover {
  border-color: var(--ui-color-primary-400);
  }

spx-gui/src/components/community/user/UserHeader.vue

@@ -8,6 +8,7 @@ import FollowButton from './FollowButton.vue'
 import UserJoinedAt from './UserJoinedAt.vue'
 import EditProfileModal from './EditProfileModal.vue'
 import { useMessageHandle } from '@/utils/exception'
+import { getCoverImgUrl } from './cover'
 
 const props = defineProps<{
  user: User
@@ -18,6 +19,7 @@ const emit = defineEmits<{
 }>()
 
 const isCurrentUser = computed(() => props.user.username === useUserStore().userInfo()?.name)
+const coverImgUrl = computed(() => getCoverImgUrl(props.user.username))
 
 const invokeEditProfileModal = useModal(EditProfileModal)
 
@@ -32,7 +34,7 @@ const handleEditProfile = useMessageHandle(
 
 <template>
  <CommunityCard class="user-header">
- <div class="cover"></div>
+ <div class="cover" :style="{ backgroundImage: `url(${coverImgUrl})` }"></div>
  <UIImg class="avatar" :src="user.avatar" />
  <div class="content">
  <div class="info">
@@ -59,9 +61,11 @@ const handleEditProfile = useMessageHandle(
 
 .cover {
  width: 100%;
- // TODO: optimize me together with https://github.com/goplus/builder/issues/978
- aspect-ratio: 1280 / 200;
- background: center / cover no-repeat url(./cover.jpg);
+ height: 21.74vh;
+ max-height: 200px;
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
 }
 
 .avatar {

spx-gui/src/components/community/user/content/UserContent.vue

@@ -20,13 +20,13 @@ import CommunityCard from '../../CommunityCard.vue'
 
 <style lang="scss" scoped>
 .user-content {
- padding: 20px 20px 40px;
+ padding: 20px var(--ui-gap-middle);
  display: flex;
  flex-direction: column;
- gap: 20px;
 }
 
 .header {
+ margin-bottom: 8px;
  height: 32px;
  display: flex;
  justify-content: space-between;

spx-gui/src/components/community/user/cover/index.ts

@@ -0,0 +1,18 @@
+import cover1 from './1.jpg'
+import cover2 from './2.jpg'
+import cover3 from './3.jpg'
+import cover4 from './4.jpg'
+import cover5 from './5.jpg'
+import cover6 from './6.jpg'
+import cover7 from './7.jpg'
+
+const coverUrls = [cover1, cover2, cover3, cover4, cover5, cover6, cover7]
+
+/** Get the cover image URL for given user */
+export function getCoverImgUrl(username: string) {
+ // Simple hash function from username to index in `coverUrls`.
+ // We need to ensure that the result is stable for the same user.
+ // In the future we may allow users to customize their cover image.
+ const idx = (username.charCodeAt(0) + username.charCodeAt(username.length - 1)) % coverUrls.length
+ return coverUrls[idx]
+}

spx-gui/src/components/community/user/sidebar/UserSidebar.vue

@@ -98,9 +98,9 @@ defineProps<{
  flex-direction: column;
  gap: 4px;
 
- width: 208px;
+ width: 212px;
  @include responsive(desktop-large) {
- width: 212px;
+ width: 216px;
  }
 }
 </style>

spx-gui/src/components/project/ProjectItem.vue

@@ -3,7 +3,7 @@
  <RouterLink class="link" :to="to" @click="emit('selected')">
  <div class="thumbnail-wrapper">
  <UIImg class="thumbnail" :src="thumbnailUrl" />
- <UIDropdown v-if="context === 'mine'" trigger="click" placement="bottom-end">
+ <UIDropdown v-if="context === 'mine' && isOwner" trigger="click" placement="bottom-end">
  <template #trigger>
  <div class="options" @click.stop.prevent>
  <UIIcon class="icon" type="more" />
@@ -18,21 +18,40 @@
  </UIMenuItem>
  </UIMenu>
  </UIDropdown>
- <UserAvatar v-if="context === 'public'" class="owner-avatar" :user="project.owner" />
+ <div v-if="context === 'public'" class="owner-avatar-wrapper">
+ <svg
+ class="avatar-bg"
+ xmlns="http://www.w3.org/2000/svg"
+ width="67"
+ height="31"
+ viewBox="0 0 67 31"
+ fill="none"
+ >
+ <path
+ d="M48.67 11.94C43.36 6.71 39.42 0 29.3 0H28.7C18.58 0 14.64 6.71 9.33 11.94C5.47 16.76 -2.39 17.81 -9 18V31H67V18C60.39 17.81 52.53 16.76 48.67 11.94Z"
+ fill="white"
+ />
+ </svg>
+ <UserAvatar class="owner-avatar" size="small" :user="project.owner" />
+ </div>
  </div>
  <div class="info">
- <div class="name">{{ project.name }}</div>
- <p class="others">
- <template v-if="context !== 'public'">
- <span v-if="project.visibility === Visibility.Public" class="part">
- <UIIcon type="statePublic" />
- {{ $t({ en: 'Public', zh: '公开' }) }}
- </span>
- <span v-else class="part">
- <UIIcon type="statePrivate" />
- {{ $t({ en: 'Private', zh: '私有' }) }}
- </span>
+ <div class="header">
+ <h5 class="name">{{ project.name }}</h5>
+ <template v-if="context !== 'public' && isOwner">
+ <i
+ v-if="project.visibility === Visibility.Public"
+ class="public"
+ :title="$t({ en: 'Public', zh: '公开' })"
+ >
+ <UIIcon class="icon" type="statePublic" />
+ </i>
+ <i v-else class="private" :title="$t({ en: 'Private', zh: '私有' })">
+ <UIIcon class="icon" type="statePrivate" />
+ </i>
  </template>
+ </div>
+ <p class="others">
  <span class="part" :class="{ liking }" :title="$t(likesTitle)">
  <UIIcon type="heart" />
  {{ $t(humanizeCount(project.likeCount)) }}
@@ -60,10 +79,10 @@ import {
 import { getProjectEditorRoute, getProjectPageRoute } from '@/router'
 import { Visibility, isLiking, type ProjectData } from '@/apis/project'
 import { universalUrlToWebUrl } from '@/models/common/cloud'
+import { useUserStore } from '@/stores'
 import { UIImg, UIDropdown, UIIcon, UIMenu, UIMenuItem } from '@/components/ui'
 import UserAvatar from '@/components/community/user/UserAvatar.vue'
 import { useRemoveProject } from '.'
-import { useUserStore } from '@/stores'
 
 /**
  * Context (list) where the project item is used
@@ -89,6 +108,9 @@ const emit = defineEmits<{
  removed: []
 }>()
 
+const userStore = useUserStore()
+const isOwner = computed(() => props.project.owner === userStore.userInfo()?.name)
+
 const router = useRouter()
 
 const to = computed(() => {
@@ -101,8 +123,6 @@ const thumbnailUrl = useAsyncComputed(async () => {
  return universalUrlToWebUrl(props.project.thumbnail)
 })
 
-const userStore = useUserStore()
-
 const liking = useAsyncComputed(() => {
  if (!userStore.isSignedIn()) return Promise.resolve(false)
  else return isLiking(props.project.owner, props.project.name)
@@ -196,10 +216,25 @@ const handleRemove = useMessageHandle(
  }
  }
 
- .owner-avatar {
+ .owner-avatar-wrapper {
  position: absolute;
- bottom: 13px;
- right: 13px;
+ bottom: -9px;
+ left: 0;
+ width: 100%;
+ height: 13px;
+ background-color: var(--ui-color-grey-100);
+
+ .avatar-bg {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ }
+
+ .owner-avatar {
+ position: absolute;
+ bottom: -2px;
+ left: 14px;
+ }
  }
 }
 
@@ -214,11 +249,46 @@ const handleRemove = useMessageHandle(
 .info {
  padding: var(--ui-gap-middle);
 
- .name {
- font-size: 15px;
- line-height: 24px;
- color: var(--ui-color-title);
- @include text-ellipsis;
+ .header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ .name {
+ flex: 0 1 auto;
+ font-size: 15px;
+ line-height: 24px;
+ color: var(--ui-color-title);
+ @include text-ellipsis;
+ }
+
+ .public,
+ .private {
+ flex: 0 0 auto;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: var(--ui-color-grey-200);
+ }
+
+ .public {
+ color: #378ff6;
+ .icon {
+ width: 14px;
+ height: 14px;
+ }
+ }
+
+ .private {
+ color: #ff972b;
+ .icon {
+ width: 12px;
+ height: 12px;
+ }
+ }
  }
 
  .others {

spx-gui/src/components/ui/index.ts

@@ -45,3 +45,4 @@ export { default as UIPagination } from './UIPagination.vue'
 export * from './select'
 export * from './collapse'
 export * from './timeline'
+export * from './responsive'