feat:mobileAdaptation (#2186)

* feat:mobileAdaptation

* fix:problem

* format

Author: hwcctn

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

@@ -28,16 +28,25 @@ withDefaults(
 
   &.size-medium {
     width: 988px;
+
     @include responsive(desktop-large) {
       width: 1240px;
     }
   }
 
   &.size-large {
     width: 1240px;
+
     @include responsive(desktop-large) {
       width: 1492px;
     }
   }
+
+  &.size-medium,
+  &.size-large {
+    @include responsive(mobile) {
+      width: 95%;
+    }
+  }
 }
 </style>

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

@@ -14,16 +14,47 @@
       </NavbarDropdown>
     </template>
     <template #right>
-      <div class="search">
+      <div class="search mobile-hide">
         <UITextInput
           v-model:value="searchInput"
           v-radar="{ name: 'Search input', desc: 'Input and press enter to search projects' }"
           :placeholder="$t({ en: 'Search project', zh: '搜索项目' })"
           @keypress.enter="handleSearch"
         >
-          <template #prefix><UIIcon class="search-icon" type="search" /></template>
+          <template #prefix>
+            <UIIcon class="search-icon" type="search" />
+          </template>
         </UITextInput>
       </div>
+      <!-- mobile -->
+      <div class="mobile-search-btn" @click="expandSearch">
+        <UIIcon type="search" />
+      </div>
+
+      <div v-if="isSearchExpanded" class="mobile-search-expanded">
+        <div class="search-input-wrapper">
+          <UITextInput
+            ref="mobileSearchInput"
+            v-model:value="searchInput"
+            v-radar="{ name: 'Mobile search input', desc: 'Mobile search input' }"
+            :placeholder="$t({ en: 'Search project', zh: '搜索项目' })"
+            :autofocus="true"
+            @blur="collapseSearch"
+          >
+            <template #prefix>
+              <UIIcon
+                class="search-icon"
+                type="search"
+                @mousedown.prevent="handleSearch"
+                @touchstart.prevent="handleSearch"
+              />
+            </template>
+          </UITextInput>
+        </div>
+        <UIButton @click="collapseSearch">
+          {{ $t({ en: 'Cancel', zh: '取消' }) }}
+        </UIButton>
+      </div>
     </template>
   </NavbarWrapper>
 </template>
@@ -32,7 +63,7 @@
 import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { getStringParam } from '@/utils/route'
-import { UIMenu, UITextInput, UIIcon } from '@/components/ui'
+import { UIMenu, UITextInput, UIIcon, UIButton } from '@/components/ui'
 import NavbarWrapper from '@/components/navbar/NavbarWrapper.vue'
 import NavbarDropdown from '../navbar/NavbarDropdown.vue'
 import NavbarNewProjectItem from '@/components/navbar/NavbarNewProjectItem.vue'
@@ -42,6 +73,16 @@ import { getSearchRoute } from '@/router'
 
 const router = useRouter()
 const searchInput = ref('')
+// mobile search
+const isSearchExpanded = ref(false)
+const mobileSearchInput = ref<InstanceType<typeof UITextInput> | null>(null)
+function expandSearch() {
+  isSearchExpanded.value = true
+}
+function collapseSearch() {
+  isSearchExpanded.value = false
+  searchInput.value = ''
+}
 
 function handleSearch() {
   router.push(getSearchRoute(searchInput.value))
@@ -71,10 +112,59 @@ watch(
 </script>
 
 <style lang="scss" scoped>
+@import '@/components/ui/responsive.scss';
+
 .search {
   margin-right: 8px;
   width: 340px;
   display: flex;
   align-items: center;
 }
+
+// mobile
+.mobile-search-btn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: auto;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+
+  @include responsive(mobile) {
+    display: flex;
+  }
+}
+
+.mobile-search-expanded {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 50px;
+  background-color: var(--ui-color-primary-main);
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  gap: 12px;
+  z-index: 1000;
+
+  .search-input-wrapper {
+    flex: 1;
+
+    :deep(.ui-text-input) {
+      width: 100%;
+    }
+  }
+}
+
+// mobile-hide
+@include responsive(mobile) {
+  .mobile-hide {
+    display: none !important;
+  }
+}
 </style>

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

@@ -55,28 +55,38 @@ const slots = useSlots()
 </script>
 
 <style lang="scss" scoped>
+@import '@/components/ui/responsive.scss';
+
+section {
+  font-size: 16px;
+
+  @include responsive(mobile) {
+    font-size: 12px;
+  }
+}
+
 .header {
-  height: 52px;
+  height: 3.25em;
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   .title {
-    line-height: 28px;
-    font-size: 20px;
+    line-height: 1.75em;
+    font-size: 1.25em;
     color: var(--ui-color-title);
   }
 
   .link {
     display: flex;
     align-items: center;
-    font-size: 15px;
+    font-size: 0.94em;
   }
 
   .link-icon {
-    margin-left: 8px;
-    width: 20px;
-    height: 20px;
+    margin-left: 0.5em;
+    width: 1.25em;
+    height: 1.25em;
   }
 }
 
@@ -93,21 +103,24 @@ const slots = useSlots()
 .projects {
   display: grid;
   grid-template-columns: repeat(var(--project-num-in-row), 1fr);
-  gap: 20px;
+  gap: 1.25em;
 }
 
 .context-user {
   .header {
     height: 60px;
     padding: 20px 0 8px;
   }
+
   .title {
     font-size: 16px;
     line-height: 26px;
   }
+
   .projects-wrapper {
     margin: 8px 0 16px;
   }
+
   .projects {
     gap: 16px;
   }

spx-gui/src/components/community/home/banner/GuestBanner.vue

@@ -31,8 +31,16 @@ function handleJoin() {
 </template>
 
 <style lang="scss" scoped>
+@import '@/components/ui/responsive.scss';
+
 .guest-banner {
   padding: 12px;
+  font-size: 24px;
+
+  @include responsive(mobile) {
+    padding: 8px;
+    font-size: 18px;
+  }
 }
 
 .main {
@@ -45,15 +53,21 @@ function handleJoin() {
   background-image: url('./bg.svg');
   background-repeat: no-repeat;
   background-position: center right 54px;
+
+  @include responsive(mobile) {
+    padding: 32px 24px 36px;
+    background-position: center right 20px;
+    background-size: auto 80%;
+  }
 }
 
 .title {
-  font-size: 24px;
+  font-size: 1em;
   line-height: 1.5;
 }
 
 .sub-title {
-  font-size: 13px;
+  font-size: 0.5em;
   line-height: 20px;
   margin-top: 8px;
 }

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

@@ -11,11 +11,11 @@ import FollowButton from './FollowButton.vue'
 import UserJoinedAt from './UserJoinedAt.vue'
 import EditProfileModal from './EditProfileModal.vue'
 import { getCoverImgUrl } from './cover'
-
+import { useResponsive } from '@/components/ui/responsive'
 const props = defineProps<{
   user: User
 }>()
-
+const isMobile = useResponsive('mobile')
 const isSignedInUser = computed(() => props.user.username === getSignedInUsername())
 const avatarUrl = useExternalUrl(() => props.user.avatar)
 const coverImgUrl = computed(() => getCoverImgUrl(props.user.username))
@@ -38,23 +38,25 @@ const handleEditProfile = useMessageHandle(async () => invokeEditProfileModal({
           {{ user.displayName }}
           <UserJoinedAt class="joined-at" :time="user.createdAt" />
         </h2>
-        <TextView style="max-height: 66px" :text="user.description" />
+        <TextView v-if="!isMobile" style="max-height: 66px" :text="user.description" />
       </div>
       <div class="op">
         <UIButton
-          v-if="isSignedInUser"
+          v-if="isSignedInUser && !isMobile"
           v-radar="{ name: 'Edit profile button', desc: 'Click to edit user profile' }"
           @click="handleEditProfile"
         >
           {{ $t({ en: 'Edit profile', zh: '编辑' }) }}
         </UIButton>
-        <FollowButton v-else :name="user.username" />
+        <FollowButton v-if="!isSignedInUser" :name="user.username" />
       </div>
     </div>
   </CommunityCard>
 </template>
 
 <style lang="scss" scoped>
+@import '@/components/ui/responsive.scss';
+
 .user-header {
   position: relative;
 }
@@ -66,6 +68,11 @@ const handleEditProfile = useMessageHandle(async () => invokeEditProfileModal({
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
+
+  @include responsive(mobile) {
+    height: 15vh;
+    max-height: 120px;
+  }
 }
 
 .avatar {
@@ -77,13 +84,27 @@ const handleEditProfile = useMessageHandle(async () => invokeEditProfileModal({
   border: 2px solid var(--ui-color-grey-100);
   border-radius: 50%;
   background-color: var(--ui-color-grey-100);
+
+  @include responsive(mobile) {
+    left: 16px;
+    bottom: 16px;
+    width: 80px;
+    height: 80px;
+  }
 }
 
 .content {
   padding: 20px 20px 20px 192px;
   display: flex;
   align-items: end;
   gap: 100px;
+
+  @include responsive(mobile) {
+    padding: 16px 16px 16px 112px;
+    gap: 20px;
+    justify-content: center;
+    align-items: flex-start;
+  }
 }
 
 .info {
@@ -99,6 +120,14 @@ const handleEditProfile = useMessageHandle(async () => invokeEditProfileModal({
     font-size: 20px;
     line-height: 28px;
     color: var(--ui-color-title);
+
+    @include responsive(mobile) {
+      font-size: 16px;
+      line-height: 22px;
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 4px;
+    }
   }
 
   .joined-at {
@@ -116,5 +145,9 @@ const handleEditProfile = useMessageHandle(async () => invokeEditProfileModal({
   flex: 0 0 110px;
   display: flex;
   justify-content: flex-end;
+
+  @include responsive(mobile) {
+    flex: 0 0 auto;
+  }
 }
 </style>

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

@@ -132,6 +132,7 @@ const isMobile = useResponsive('mobile')
   position: relative;
 
   width: 212px;
+
   @include responsive(desktop-large) {
     width: 216px;
   }