feat:mobileAdaptation #2186
feat:mobileAdaptation #2186
Conversation
🔍 PR Review: Mobile Adaptation ImplementationReview Progress
📋 Review SummaryThis PR implements comprehensive mobile adaptations across the community section of the SPX GUI. The changes focus on responsive design patterns, mobile-specific UI components, and improved user experience on smaller screens. ✅ Strengths1. Consistent Responsive Design Patterns
2. Mobile-First Feature Implementations
3. Smart Icon Adaptations
|
|
@nighca 寒星老师，这个是移动端适配的代码 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @hwcctn, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request significantly improves the application's responsiveness and user experience on mobile devices. It introduces a range of adaptations, from adjusting component layouts and font sizes to implementing mobile-specific interaction patterns like an expandable search bar and a share hint overlay. The changes ensure that the community and project browsing functionalities are intuitive and visually appealing across various screen sizes.
Highlights
- Mobile-First Layouts: Implemented responsive design principles across several components (CenteredWrapper, ProjectsSection, GuestBanner, UserHeader, ProjectItem, explore.vue, project.vue, user/index.vue, user/projects.vue) to ensure optimal viewing and interaction on mobile devices.
- Enhanced Mobile Navigation: Introduced a mobile-specific, expandable search bar in the CommunityNavbar and a toggleable sidebar for user profiles, improving accessibility and usability on smaller screens.
- Conditional UI Elements: Dynamically hides or replaces certain UI elements (e.g., NavbarDropdown, NavbarTutorials, user description, edit/remix buttons, Copilot UI) on mobile to streamline the interface and focus on essential functionalities.
- Mobile Share Functionality: Added a mobile-specific share hint overlay in the project detail page, guiding users on how to share projects from their mobile browsers.
- New Icon: Introduced a new arrowShare SVG icon to support the mobile share hint feature.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request introduces responsive adaptations for mobile devices across several components. The overall approach using responsive mixins and adapting layouts for smaller screens is good. However, I've identified a critical logic bug in UserHeader.vue that results in incorrectly displaying a "Follow" button on a user's own profile. Additionally, there's a high-severity race condition in the new mobile search implementation that could lead to incorrect search behavior. I've also provided several medium-severity suggestions to improve code quality, consistency, and user experience.
| 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 :name="user.username" /> |
There was a problem hiding this comment.
The v-else on the FollowButton was removed, while the v-if on the preceding UIButton was changed to v-if="isSignedInUser && !isMobile". This incorrectly allows the 'Follow' button to be displayed on a user's own profile.
The FollowButton should only be displayed for other users' profiles. You should restore the conditional logic by adding v-if="!isSignedInUser" to the FollowButton.
<FollowButton v-if="!isSignedInUser" :name="user.username" />
| @blur="collapseSearch" | ||
| > | ||
| <template #prefix> | ||
| <UIIcon class="search-icon" type="search" @click="handleSearch" /> |
There was a problem hiding this comment.
There's a potential race condition here. When the user clicks the search icon, the UITextInput can lose focus, triggering the @blur event which calls collapseSearch. collapseSearch then clears searchInput. Immediately after, the @click event on the search icon calls handleSearch. If blur fires first, handleSearch will be called with an empty search string, which is not the user's intent.
To fix this, you can replace the click event with the mousedown event and add the .prevent modifier. This will prevent the UITextInput from blurring when the icon is clicked, avoiding the race condition.
<UIIcon class="search-icon" type="search" @mousedown.prevent="handleSearch" />
| &.size-medium { | ||
| width: 988px; | ||
|
|
||
| @include responsive(desktop-large) { | ||
| width: 1240px; | ||
| } | ||
|
|
||
| @include responsive(mobile) { | ||
| width: 95%; | ||
| } | ||
| } | ||
|
|
||
| &.size-large { | ||
| width: 1240px; | ||
|
|
||
| @include responsive(desktop-large) { | ||
| width: 1492px; | ||
| } | ||
|
|
||
| @include responsive(mobile) { | ||
| width: 95%; | ||
| } | ||
| } |
There was a problem hiding this comment.
The @include responsive(mobile) block is duplicated for both .size-medium and .size-large. You can avoid this duplication by defining the mobile styles for both sizes together, improving maintainability.
&.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%;
}
}
| v-model:value="searchInput" | ||
| v-radar="{ name: 'Mobile search input', desc: 'Mobile search input' }" | ||
| :placeholder="$t({ en: 'Search project', zh: '搜索项目' })" | ||
| @blur="collapseSearch" |
There was a problem hiding this comment.
For consistency with the desktop search input and better usability, you should also add @keypress.enter="handleSearch" to the mobile UITextInput to allow searching by pressing the Enter key.
@blur="collapseSearch"
@keypress.enter="handleSearch"
| function expandSearch() { | ||
| isSearchExpanded.value = true | ||
| } |
There was a problem hiding this comment.
For a better user experience, you should automatically focus the search input when it's expanded. You can use nextTick to ensure the element is visible before calling focus. You will need to import nextTick from 'vue'.
function expandSearch() {
isSearchExpanded.value = true
nextTick(() => {
mobileSearchInput.value?.focus()
})
}
| // border-radius: 50%; | ||
| // background-color: rgba(255, 255, 255, 0.1); | ||
| // transition: background-color 0.2s; |
There was a problem hiding this comment.
This commented-out code should be removed to improve code clarity and maintainability.
hwcctn
force-pushed
the
trailhead_sharing_dev_MobileAdaptation
branch
from
8014928 to
de50213
Compare
|
This PR has been deployed to the preview environment. You can explore it using the preview URL. Warning Please note that deployments in the preview environment are temporary and will be automatically cleaned up after a certain period. Make sure to explore it before it is removed. For any questions, contact the XBuilder team. |
| z-index: 999; | ||
|
|
||
| &:hover { | ||
| background-color: var(--ui-color-primary-dark); |
No description provided.