sv

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,14 +74,14 @@ 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;
 }
 
@@ -91,10 +94,11 @@ defineProps<{
  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/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,7 +20,7 @@ import CommunityCard from '../../CommunityCard.vue'
 
 <style lang="scss" scoped>
 .user-content {
- padding: 20px 20px 40px;
+ padding: 20px var(--ui-gap-middle) 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;

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/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" />
@@ -23,7 +23,7 @@
  <div class="info">
  <div class="name">{{ project.name }}</div>
  <p class="others">
- <template v-if="context !== 'public'">
+ <template v-if="context !== 'public' && isOwner">
  <span v-if="project.visibility === Visibility.Public" class="part">
  <UIIcon type="statePublic" />
  {{ $t({ en: 'Public', zh: '公开' }) }}
@@ -60,10 +60,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 +89,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 +104,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)

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'

spx-gui/src/components/ui/responsive.scss

@@ -1,16 +1,17 @@
 // definition for responsive mixin
 
 @mixin responsive($size) {
+ // Note: remember to keep these values in sync with the breakpoints in ./responsive.ts
  @if $size == mobile {
  @media (max-width: 767px) {
  @content;
  }
  } @else if $size == tablet {
- @media (min-width: 768px) {
+ @media (min-width: 768px) and (max-width: 1279px) {
  @content;
  }
  } @else if $size == desktop {
- @media (min-width: 1280px) {
+ @media (min-width: 1280px) and (max-width: 1679px) {
  @content;
  }
  } @else if $size == desktop-large {

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

@@ -0,0 +1,36 @@
+import { onUnmounted, ref } from 'vue'
+
+export type ReponsiveSize = 'mobile' | 'tablet' | 'desktop' | 'desktop-large'
+
+function getQuery(size: ReponsiveSize) {
+ let query: string
+ switch (size) {
+ // Note: remember to keep these values in sync with the breakpoints in ./responsive.scss
+ case 'mobile':
+ query = '(max-width: 767px)'
+ break
+ case 'tablet':
+ query = '(min-width: 768px) and (max-width: 1279px)'
+ break
+ case 'desktop':
+ query = '(min-width: 1280px) and (max-width: 1679px)'
+ break
+ case 'desktop-large':
+ query = '(min-width: 1680px)'
+ break
+ }
+ return query
+}
+
+export function useResponsive(size: ReponsiveSize) {
+ const query = getQuery(size)
+ const mqList = window.matchMedia(query)
+ const isMatched = ref(mqList.matches)
+ function onMQListChange(event: MediaQueryListEvent) {
+ isMatched.value = event.matches
+ }
+
+ mqList.addEventListener('change', onMQListChange)
+ onUnmounted(() => mqList.removeEventListener('change', onMQListChange))
+ return isMatched
+}

spx-gui/src/pages/community/home.vue

@@ -3,6 +3,7 @@
  <ProjectsSection
  v-if="userStore.isSignedIn()"
  context="home"
+ :num-in-row="numInRow"
  :link-to="myProjectsRoute"
  :query-ret="myProjects"
  >
@@ -32,6 +33,7 @@
  <ProjectsSection
  :link-to="communityLikingRoute"
  context="home"
+ :num-in-row="numInRow"
  :query-ret="communityLikingProjects"
  >
  <template #title>
@@ -59,6 +61,7 @@
  <ProjectsSection
  :link-to="communityRemixingRoute"
  context="home"
+ :num-in-row="numInRow"
  :query-ret="communityRemixingProjects"
  >
  <template #title>
@@ -86,6 +89,7 @@
  <ProjectsSection
  v-if="userStore.isSignedIn()"
  context="home"
+ :num-in-row="numInRow"
  :link-to="followingCreatedRoute"
  :query-ret="followingCreatedProjects"
  >
@@ -120,11 +124,13 @@ import { useQuery } from '@/utils/exception'
 import { ExploreOrder, exploreProjects, listProject } from '@/apis/project'
 import { getExploreRoute, getUserPageRoute } from '@/router'
 import { useUserStore } from '@/stores'
+import { useResponsive } from '@/components/ui'
 import ProjectsSection from '@/components/community/ProjectsSection.vue'
 import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
 import ProjectItem from '@/components/project/ProjectItem.vue'
 
-const numInRow = 5 // at most 5 projects in a row, depending on the screen width
+const isDesktopLarge = useResponsive('desktop-large')
+const numInRow = computed(() => (isDesktopLarge.value ? 5 : 4))
 
 const userStore = useUserStore()
 
@@ -140,7 +146,7 @@ const myProjects = useQuery(
  if (userInfo.value == null) return []
  const { data: projects } = await listProject({
  pageIndex: 1,
- pageSize: numInRow,
+ pageSize: numInRow.value,
  orderBy: 'updatedAt',
  sortOrder: 'desc'
  })
@@ -152,14 +158,14 @@ const myProjects = useQuery(
 const communityLikingRoute = getExploreRoute(ExploreOrder.MostLikes)
 
 const communityLikingProjects = useQuery(
- () => exploreProjects({ order: ExploreOrder.MostLikes, count: numInRow }),
+ () => exploreProjects({ order: ExploreOrder.MostLikes, count: numInRow.value }),
  { en: 'Failed to load projects', zh: '加载失败' }
 )
 
 const communityRemixingRoute = getExploreRoute(ExploreOrder.MostRemixes)
 
 const communityRemixingProjects = useQuery(
- () => exploreProjects({ order: ExploreOrder.MostRemixes, count: numInRow }),
+ () => exploreProjects({ order: ExploreOrder.MostRemixes, count: numInRow.value }),
  { en: 'Failed to load projects', zh: '加载失败' }
 )
 
@@ -171,7 +177,7 @@ const followingCreatedRoute = computed(() => {
 const followingCreatedProjects = useQuery(
  async () => {
  if (userInfo.value == null) return []
- return exploreProjects({ order: ExploreOrder.FollowingCreated, count: numInRow })
+ return exploreProjects({ order: ExploreOrder.FollowingCreated, count: numInRow.value })
  },
  { en: 'Failed to load projects', zh: '加载失败' }
 )