Better contrast for input fields
#417
マージ済み
dfeyer
が 3 個のコミットを task-better-inputs
から master
へマージ 5年前
レビューア
レビュー依頼
レビューアなし
ラベル
ラベルをクリア
Related to the REST API
Code running on the server
Stuff related to Federation
Related to the front-end
Translations, and related code
More about project management or code than the project itself
The building, or installation process of Plume
Something isn't working
We need to talk
New feature or request
This is a new feature
Compatibility with different browsers, readers and OS
Related to an external package that Plume uses
UI/UX related issues and PRs
Good for newcomers
Extra attention is needed
Issues affecting only mobile UX
How elements're rendered out for the end user
Something else needs to be fixed first
This issue or pull request already exists
This PR is not complete yet
Issues concern a limited number of instances
This doesn't seem right
Need to be discussed by the community (on Loomio)
This PR is ready to be reviewed
Proposed ideas worth considering
This is issue has been created after a vote on Loomio
This will not be worked on
ラベル付け
A: API
Related to the REST API
A: Backend
Code running on the server
A: Federation
Stuff related to Federation
A: Front-End
Related to the front-end
A: I18N
Translations, and related code
A: Meta
More about project management or code than the project itself
A: Security
Build
The building, or installation process of Plume
C: Bug
Something isn't working
C: Discussion
We need to talk
C: Enhancement
New feature or request
C: Feature
This is a new feature
Compatibility
Compatibility with different browsers, readers and OS
Dependency
Related to an external package that Plume uses
Design
UI/UX related issues and PRs
Documentation
Good first issue
Good for newcomers
Help welcome
Extra attention is needed
Mobile
Issues affecting only mobile UX
Rendering
How elements're rendered out for the end user
S: Blocked
Something else needs to be fixed first
S: Duplicate
This issue or pull request already exists
S: Incomplete
This PR is not complete yet
S: Instance specific
Issues concern a limited number of instances
S: Invalid
This doesn't seem right
S: Needs Voting/Discussion
Need to be discussed by the community (on Loomio)
S: Ready for review
This PR is ready to be reviewed
Suggestion
Proposed ideas worth considering
S: Voted on Loomio
This is issue has been created after a vote on Loomio
S: Wontfix
This will not be worked on
ラベルなし
A: API
A: Backend
A: Federation
A: Front-End
A: I18N
A: Meta
A: Security
Build
C: Bug
C: Discussion
C: Enhancement
C: Feature
Compatibility
Dependency
Design
Documentation
Good first issue
Help welcome
Mobile
Rendering
S: Blocked
S: Duplicate
S: Incomplete
S: Instance specific
S: Invalid
S: Needs Voting/Discussion
S: Ready for review
Suggestion
S: Voted on Loomio
S: Wontfix
マイルストーン
マイルストーンの設定
マイルストーンをクリア
項目なし
マイルストーンなし
担当者
担当者の割り当て
担当者をクリア
担当者なし
1 人の参加者
通知
期日
期日が正しくないか範囲を超えています。 'yyyy-mm-dd' の形式で入力してください。
期日は未設定です。
依存関係
依存関係が設定されていません。
リファレンス: Plume/Plume#417
新しいイシューから参照
まだ内容がありません
ブランチ 'task-better-inputs' の削除
ブランチの削除は恒久的で、元に戻すことはできません。 続行しますか?
いいえ
はい
This change set a white background for input field (text, select and textarea)
to have a better contrast with the page background and improve accessibility for
people with vision problem, and just crappy screen.
This change also remove the round corner for the input to have a clear difference
between editing field and buttons.
This max-width of the form element are a bit bigger too.
Screenshot are better than a long description
This will enforce the max-width for all element inside so we don't have to define the max-width for every element that can be used in a form element
I don't have the full history of the project so I don't know why you use a different box sizing here ?
@ -49,3 +49,3 @@
body > main > *, .h-feed > * {
padding: 0 20%;
margin: 0 20%;
}
Needed to set the max-width on form element, should not break anything
I forgot to say that the margin between to label and the input are smaller with this change, to make the block (label+input/textarea) more "solid".
An other issue we have here is the too low color contrast between the help text/button and the background, will try to solve this in an other PR
Thanks a lot! It indeed greatly improves contrast. My only concern is that buttons seem a bit inconsistent with the rest of the design now, since they are the only elements with slightly rounded corners (everything else has sharp angles, expecting avatars that are totally rounded). Otherwise it looks great! Thanks again.
I don't remember either 😅
@ -49,3 +49,3 @@
body > main > *, .h-feed > * {
padding: 0 20%;
margin: 0 20%;
}
I think it broke the article list on the profile page, but that's not a real problem. However if you want to fix it, just replace
padding
withmargin
in.cards
too.(and actually it is not broken, just different from what we currently have)
@BaptisteGelez Button are my next topic, will need a better visual language to make them different from input, but not too much. Maybe playing with the height of the element, and use plume violet color for the primary action as a background color. Will push an other PR when my design research are more advanced, will try to prototype on figma and share the design here before the implementation.
Okay! Then unless you want to fix this little "issue": https://github.com/Plume-org/Plume/pull/417#discussion_r246444928 I will merge this PR (but I'm totally fine merging it as it is if you don't want to take the time to do the change, I completely understand).
Let's merge this one, and I can fix the margin of cards in an other PR, I hate swapping padding / margin all the time, so maybe we can found a cleaner solution.
Codecov Report
レビューア
09a26b4602
でマージされています。ステップ 1:
あなたのプロジェクトリポジトリで新しいブランチをチェックアウトし、変更内容をテストします。ステップ 2:
変更内容をマージして、Forgejoに反映します。