qia-audio-clip: Updated Graphic Design
- UUID: b9dd0a3b-bbca-4aa7-9a1d-08212855cccb
- Links
- [JH-Articles: Web Components ~ qia-audio-clip (UUID:b407d24c-a4bf-434e-a8ea-1f0c8b42614b)]
- Timestamps
- 20231211.Split from JH-Articles
- 20231211.Re-published on JH-Blog
The visual representation is updated.
The design ideas under the hood include
- Adding placeholder title
[Qia Audio Clip]
when this is no truthytitle
attribute set onqia-audio-clip
HTML tag- to make the whole representation more "balanced"
- Making audio metadata display into two lines and having the playing indication
O
take the line above the playback control button- to avoid playback control button hanging when audio metadata is long or screen width is short
- to have better separation among diffent elements
![Static State.After Update](/blog/images/original/!Qia-Software/@Web-Components/qia-image/qia-audio-clip.one/images/20231113-162341.png)
![Static State.Before Update](/blog/images/original/!Qia-Software/@Web-Components/qia-image/qia-audio-clip.one/images/20231112-123114.png)
![Playing State.After Update](/blog/images/original/!Qia-Software/@Web-Components/qia-image/qia-audio-clip.one/images/20231113-162357.png)
![Playing State.Before Update](/blog/images/original/!Qia-Software/@Web-Components/qia-image/qia-audio-clip.one/images/20231112-123147.png)
![Loaded State.Before Update](/blog/images/original/!Qia-Software/@Web-Components/qia-image/qia-audio-clip.one/images/20231112-123217.png)
![Loaded State.After Update](/blog/images/original/!Qia-Software/@Web-Components/qia-image/qia-audio-clip.one/images/20231113-162420.png)
* cached version, generated at 2023-12-12 02:03:03 UTC.
Subscribe by RSS