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
dfeyer 5 yıl önce yorum yaptı (github.com konumundan göç edildi)

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.

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.
dfeyer 5 yıl önce yorum yaptı (github.com konumundan göç edildi)

Screenshot are better than a long description

image

Screenshot are better than a long description ![image](https://user-images.githubusercontent.com/221173/50851373-efb50080-137c-11e9-8211-ebac3dae5489.png)
dfeyer (github.com konumundan göç edildi) 5 yıl önce incelendi
dfeyer (github.com konumundan göç edildi) 5 yıl önce yorum yaptı

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

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
dfeyer (github.com konumundan göç edildi) 5 yıl önce yorum yaptı

I don't have the full history of the project so I don't know why you use a different box sizing here ?

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%;
}
dfeyer (github.com konumundan göç edildi) 5 yıl önce yorum yaptı

Needed to set the max-width on form element, should not break anything

Needed to set the max-width on form element, should not break anything
dfeyer 5 yıl önce yorum yaptı (github.com konumundan göç edildi)

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

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
elegaanz (github.com konumundan göç edildi) 5 yıl önce bu değişiklikleri onayladı
elegaanz (github.com konumundan göç edildi) bir yorum yaptı

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.

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.
elegaanz (github.com konumundan göç edildi) 5 yıl önce yorum yaptı

I don't remember either 😅

I don't remember either :sweat_smile:
@ -49,3 +49,3 @@
body > main > *, .h-feed > * {
padding: 0 20%;
margin: 0 20%;
}
elegaanz (github.com konumundan göç edildi) 5 yıl önce yorum yaptı

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 with margin in .cards too.

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` with `margin` in `.cards` too.
elegaanz (github.com konumundan göç edildi) 5 yıl önce yorum yaptı

(and actually it is not broken, just different from what we currently have)

(and actually it is not broken, just different from what we currently have)
dfeyer 5 yıl önce yorum yaptı (github.com konumundan göç edildi)

My only concern is that buttons seem a bit inconsistent

@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.

> My only concern is that buttons seem a bit inconsistent @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.
elegaanz 5 yıl önce yorum yaptı (github.com konumundan göç edildi)

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).

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).
dfeyer 5 yıl önce yorum yaptı (github.com konumundan göç edildi)

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.

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[bot] 5 yıl önce yorum yaptı (github.com konumundan göç edildi)

Codecov Report

Merging #417 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #417   +/-   ##
=======================================
  Coverage   27.64%   27.64%           
=======================================
  Files          63       63           
  Lines        7336     7336           
=======================================
  Hits         2028     2028           
  Misses       5308     5308
# [Codecov](https://codecov.io/gh/Plume-org/Plume/pull/417?src=pr&el=h1) Report > Merging [#417](https://codecov.io/gh/Plume-org/Plume/pull/417?src=pr&el=desc) into [master](https://codecov.io/gh/Plume-org/Plume/commit/0490b698cbab7833b171e684bd9f47bbc1260407?src=pr&el=desc) will **not change** coverage. > The diff coverage is `n/a`. ```diff @@ Coverage Diff @@ ## master #417 +/- ## ======================================= Coverage 27.64% 27.64% ======================================= Files 63 63 Lines 7336 7336 ======================================= Hits 2028 2028 Misses 5308 5308 ```

Gözden Geçirenler

Değişiklik isteği 09a26b4602 olarak birleştirildi.
komut satırı talimatlarını da görüntüleyebilirsiniz.

1. Adım:

Proje deponuzdan yeni bir dala göz atın ve değişiklikleri test edin.
git checkout -b task-better-inputs master
git pull origin task-better-inputs

2. Adım:

Forgejo'daki değişiklikleri ve güncellemeleri birleştirin.
git checkout master
git merge --no-ff task-better-inputs
git push origin master
Bu konuşmaya katılmak için oturum aç.
Değerlendirici yok
Kilometre Taşı Yok
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
Yükleniyor…
Henüz bir içerik yok.