Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

控制台移动端优化 #2699

Open
wan92hen opened this issue Nov 14, 2022 · 2 comments
Open

控制台移动端优化 #2699

wan92hen opened this issue Nov 14, 2022 · 2 comments
Assignees
Labels
area/console Issues or PRs related to the Halo Console priority/important-soon Must be staffed and worked on either currently, or very soon, ideally in time for the next release.
Milestone

Comments

@wan92hen
Copy link
Collaborator

你当前使用的版本

2.0.0-beta.1

描述一下此特性

优化控制台在移动端的布局及使用体验。

附加信息

No response

@wan92hen wan92hen added the good first issue Denotes an issue ready for a new contributor, according to the "help wanted" guidelines. label Nov 14, 2022
@ruibaby
Copy link
Member

ruibaby commented Nov 14, 2022

/area console
/assign
/priority important-soon

@f2c-ci-robot f2c-ci-robot bot added area/console Issues or PRs related to the Halo Console priority/important-soon Must be staffed and worked on either currently, or very soon, ideally in time for the next release. labels Nov 14, 2022
@JohnNiang JohnNiang removed the good first issue Denotes an issue ready for a new contributor, according to the "help wanted" guidelines. label Dec 8, 2022
@ruibaby ruibaby added this to the 2.3.x milestone Feb 2, 2023
@ruibaby
Copy link
Member

ruibaby commented Feb 23, 2023

我先尝试做一些可用性优化,至少可以在移动端用起来。

@ruibaby ruibaby modified the milestones: 2.3.x, Backlog Feb 28, 2023
@ruibaby ruibaby modified the milestones: Backlog, 2.7.x May 31, 2023
f2c-ci-robot bot pushed a commit that referenced this issue Jun 25, 2023
#### What type of PR is this?

/area console
/kind improvement
/milestone 2.7.x

#### What this PR does / why we need it:

优化 VModal 组件在 iOS 设备上底部和顶部被遮挡的问题,解决方案来自于:https://github.com/Faisal-Manzer/postcss-viewport-height-correction

| before                                                       | After                                                        |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| ![IMG_0319](https://github.com/halo-dev/halo/assets/21301288/71d15e51-5cf9-402e-b6ce-fff4e1014f72) | ![IMG_0315](https://github.com/halo-dev/halo/assets/21301288/6c3b4b75-2029-4b32-8dcc-eead3e479ab1) |
| ![IMG_0318](https://github.com/halo-dev/halo/assets/21301288/b4f586b4-34e1-48ea-97ed-7f1f70184346) | ![IMG_0316](https://github.com/halo-dev/halo/assets/21301288/7dee64bb-2328-44ef-a9f6-534ea4c005fe) |

<!--fuck apple, fuck safari-->

#### Which issue(s) this PR fixes:

Ref #2699


#### Does this PR introduce a user-facing change?

```release-note
优化 Console 端弹框组件(VModal)在 iOS 设备的高度问题。
```
f2c-ci-robot bot pushed a commit that referenced this issue Jun 26, 2023
#### What type of PR is this?

/area console
/kind improvement
/milestone 2.7.x

#### What this PR does / why we need it:

修复在部分移动端浏览器(比如 iOS Safari)中,下拉框组件(VDropdown)的选项点击无效的问题,即没有触发 click 事件。此问题的原因可能是因为我们用的 floating-vue 组件提供的 `v-close-popper` 指令的兼容问题,最小复现:https://stackblitz.com/edit/vitejs-vite-ncpzhj?file=src%2FApp.vue

此 PR 改写了关闭下拉框的方式,不再使用 v-close-popper 指令,而且对其他使用此组件的地方没有破坏性更新。

#### Which issue(s) this PR fixes:

Fixes #3689
Ref #2699

#### Special notes for your reviewer:

如果有条件可以在移动端测试一下,尤其是 iOS Safari,目前在桌面端 Chrome 的设备模拟中测试正常。

#### Does this PR introduce a user-facing change?

```release-note
修复 Console 端的下拉框组件选项在移动端无法正常点击的问题。
```
@ruibaby ruibaby modified the milestones: 2.7.x, Backlog Jun 27, 2023
f2c-ci-robot bot pushed a commit that referenced this issue Sep 14, 2023
…evices (#4587)

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.10.x

#### What this PR does / why we need it:

改进移动设备上数据列表过滤器区域的样式。

before:

<img width="429" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/c0341b19-0ef5-4e26-94b7-71c52def6578">

after:

<img width="429" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/b2d0f07b-d94d-48d4-86b9-fd2953d141fa">


#### Which issue(s) this PR fixes:

Ref #2699

#### Does this PR introduce a user-facing change?

```release-note
改进 Console 端在移动设备上数据列表过滤器区域的样式。
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/console Issues or PRs related to the Halo Console priority/important-soon Must be staffed and worked on either currently, or very soon, ideally in time for the next release.
Projects
None yet
Development

No branches or pull requests

3 participants