gaogaotiantian / biliscope

Bilibili chrome extension to show uploader's stats
MIT License
594 stars 46 forks source link

Some small UI improvements 一些小的UI改进 #7

Closed painttist closed 1 year ago

painttist commented 1 year ago
  1. Changed border-radius 4px -> 8px to maintain a more similar style
  2. Changed the height of the header 120px -> 100px because it is unnecessary information. Would consider reduce it further to 85px which aligns with the usual info panel.
  3. Adds muted badges to help reduce layout shift which help improve readability at a glance
  4. Adds a transition (and corresponding wrapper) to the canvas element so the loading feels less abrupt & more polished.

很喜欢这个小插件,意外有用,感谢分享

  1. 改了边框圆角 4px -> 8px 保持风格和B站统一
  2. 缩小了头图 120px -> 100px 无用信息建议缩减,B站自己的是 85px 左右
  3. 添加了灰色的标签,目的是减少加载过程中的布局变化来辅助高速信息阅读(也有更高质量的感觉)
  4. 添加了 canvas 的过度让整体感觉更丝滑。
gaogaotiantian commented 1 year ago

有没有截图可以看一下你改了什么。

B站的id card有(起码)两种,一个是在动态里的,一个是关注列表里的。我完全照抄的关注列表里的,border-radius是4px,然后height也是现在的这个。你看的应该是动态的,所以不一样。

canvas的部分你用的show和muted?这是不是依赖于bootstrap的?

painttist commented 1 year ago

静态 image

因为大部分是加载过程中和动画效果,所以不太方便截图,就录了个屏 https://user-images.githubusercontent.com/50148803/224472341-d4eabf1c-04ec-4c3c-bd06-66cc9019cb85.mp4

painttist commented 1 year ago

关于 id-card 我看的是一般视频页面右边,移动到UP头像上的那个弹出框。考虑到主要使用场景是主页和视频推荐,页面上大部分元素都是 6px 的 border radius,我觉得这个弹出框的 border radius 6px-8px 比较合适,4px稍微小了点。

不需要 bootstrap,show 和 muted 我添加了对应需要的 javascript 和 css。名字主要是比较常用简洁,可以更改。因为有配合ID来写 css query,应该也不用担心和其它样式有冲突。

painttist commented 1 year ago

谢谢这么细心的Review!这是我第一次尝试提交 Pull Request。虽然内容很简单但是很多细节确实有点随意,学习了。上述的问题应该都解决好了。