Better contrast for input fields
#417
Обединени
dfeyer
обедини 3 ревизии от task-better-inputs
във master
преди 5 години
Reviewers
Request review
No reviewers
Етикети
Изчисти етикети
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
Apply labels
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
Етап
Set milestone
Изчисти етап
No items
Няма етап
Изпълнители
Assign users
Изчисти изпълнители
Няма изпълнители
1 участника
Известия
Due Date
Крайният срок е невалиден или извън обхват. Моля използвайте форматът 'гггг-мм-дд'.
No due date set.
Зависимости
No dependencies set.
Reference: Plume/Plume#417
Reference in New Issue
Все още няма съдържание.
Delete Branch 'task-better-inputs'
Deleting a branch is permanent. It CANNOT be undone. Continue?
Не
Да
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
Reviewers
09a26b4602
.Step 1:
From your project repository, check out a new branch and test the changes.Step 2:
Merge the changes and update on Forgejo.