Better contrast for input fields
#417
Birleştirildi
dfeyer
5 yıl önce task-better-inputs
içindeki 3 işlemeyi master
ile birleştirdi
Gözden Geçirenler
İnceleme iste
Değerlendirici yok
Etiketler
Etiketleri temizle
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
Etiketleri uygula
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
Etiket Yok
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
Kilometre Taşı
Kilometre taşı ayarla
Kilometre Taşlarını Temizle
Öge yok
Kilometre Taşı Yok
Atananlar
Kullanıcı ata
Atamaları Temizle
Atanan Kişi Yok
1 Katılımcı
Bildirimler
Bitiş Tarihi
Bitiş tarihi geçersiz veya aralık dışında. Lütfen 'yyyy-aa-gg' biçimini kullanın.
Bitiş tarihi atanmadı.
Bağımlılıklar
Bağımlılık yok.
Referans: Plume/Plume#417
Yeni konuda referans
Henüz bir içerik yok.
'task-better-inputs' Dalını Sil
Bir dalı silmek kalıcıdır. GERİ ALINAMAZ. Devam edilsin mi?
Hayır
Evet
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
Gözden Geçirenler
09a26b4602
olarak birleştirildi.1. Adım:
Proje deponuzdan yeni bir dala göz atın ve değişiklikleri test edin.2. Adım:
Forgejo'daki değişiklikleri ve güncellemeleri birleştirin.