Fix certain improper rendering of forms #560

Слито
marek-lach слито 39 коммит(ов) из fix-webkit-specific-rendering-of-forms в master 5 лет назад
marek-lach прокомментировал(а) 5 лет назад (Перенесено из github.com)

Attempt at fixing the jumbled styling of the search form in Apple's Safari, which is not present in Blink browsers like Opera, or Chrome:
Screenshot 2019-05-03 at 21 28 28

It appears I forgot about that one in my PR some months back which addressed how forms in Safari were displayed (maybe search wasn't even there then...?).

Safari does seem a bit like the new Internet Explorer these days, unfortunately.

This is otherwise a rather small and safe PR for merging, since it has practically no reason to break anything anywhere else.

Attempt at fixing the jumbled styling of the search form in Apple's Safari, which is not present in Blink browsers like Opera, or Chrome: <img width="805" alt="Screenshot 2019-05-03 at 21 28 28" src="https://user-images.githubusercontent.com/45913977/57161018-c831ea00-6dea-11e9-8319-c7e2cc1fcefb.png"> It appears I forgot about that one in my PR some months back which addressed how forms in Safari were displayed (_maybe search wasn't even there then...?_). Safari does seem a bit like the new Internet Explorer these days, unfortunately. This is otherwise a rather small and safe PR for merging, since it has practically no reason to break anything anywhere else.
elegaanz прокомментировал(а) 5 лет назад (Перенесено из github.com)

I don't think this issue has anything to do with display: flex. Safari should support it normally. I think it is more that it tries to apply a "native" style to search fields by default (<input type="search">), and that a CSS rule to prevent that should be added here:

appearence: none;

But I tested your changes, and it doesn't seem to break anything with Firefox, so it is still safe to merge if you want.

I don't think this issue has anything to do with `display: flex`. Safari should support it normally. I think it is more that it tries to apply a "native" style to search fields by default ([`<input type="search">`](https://github.com/Plume-org/Plume/blob/master/templates/search/index.rs.html#L9)), and that a CSS rule to prevent that should be added [here](https://github.com/Plume-org/Plume/blob/master/static/css/_forms.scss#L6): ```css appearence: none; ``` But I tested your changes, and it doesn't seem to break anything with Firefox, so it is still safe to merge if you want.
elegaanz прокомментировал(а) 5 лет назад (Перенесено из github.com)

I also merged master into this branch, so it should be available at https://pr-560.joinplu.me soon, if you want to test in Safari.

I also merged master into this branch, so it should be available at https://pr-560.joinplu.me soon, if you want to test in Safari.
marek-lach прокомментировал(а) 5 лет назад (Перенесено из github.com)

I don't think this issue has anything to do with display: flex. Safari should support it normally. I think it is more that it tries to apply a "native" style to search fields by default (<input type="search">), and that a CSS rule to prevent that should be added here:

appearence: none;

I actually do think you are correct, but just in case that didn't sufficiently fix the issue with the search bar (or any other input/submit form), I didn't want to do 2 separate PRs with basically the same objective in the near future.
So I basically just put everything in relation to Safari into this one PR and hopefully that would be sufficient for anything Apple may decide to break with how Safari displays things for the forseeable future :-)

> I don't think this issue has anything to do with `display: flex`. Safari should support it normally. I think it is more that it tries to apply a "native" style to search fields by default ([`<input type="search">`](https://github.com/Plume-org/Plume/blob/master/templates/search/index.rs.html#L9)), and that a CSS rule to prevent that should be added [here](https://github.com/Plume-org/Plume/blob/master/static/css/_forms.scss#L6): > > ```css > appearence: none; > ``` I actually do think you are correct, but just in case that didn't sufficiently fix the issue with the search bar (or any other input/submit form), I didn't want to do 2 separate PRs with basically the same objective in the near future. So I basically just put everything in relation to Safari into this one PR and hopefully that would be sufficient for anything Apple may decide to break with how Safari displays things for the forseeable future :-)
elegaanz (Перенесено из github.com) рассмотрел(а) изменения 5 лет назад
@ -6,7 +6,7 @@
@:base(ctx, i18n!(ctx.1, "Search"), {}, {}, {
elegaanz (Перенесено из github.com) прокомментировал(а) 5 лет назад

Why don't you add it to the stylesheet directly?

Why don't you add it to the stylesheet directly?
codecov[bot] прокомментировал(а) 5 лет назад (Перенесено из github.com)

Codecov Report

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

@@           Coverage Diff           @@
##           master     #560   +/-   ##
=======================================
  Coverage   35.06%   35.06%           
=======================================
  Files          67       67           
  Lines        7851     7851           
  Branches     1886     1886           
=======================================
  Hits         2753     2753           
  Misses       4336     4336           
  Partials      762      762
# [Codecov](https://codecov.io/gh/Plume-org/Plume/pull/560?src=pr&el=h1) Report > Merging [#560](https://codecov.io/gh/Plume-org/Plume/pull/560?src=pr&el=desc) into [master](https://codecov.io/gh/Plume-org/Plume/commit/c52aac012c358eb784ab5d872f0b9e08f1e7918f?src=pr&el=desc) will **not change** coverage. > The diff coverage is `n/a`. ```diff @@ Coverage Diff @@ ## master #560 +/- ## ======================================= Coverage 35.06% 35.06% ======================================= Files 67 67 Lines 7851 7851 Branches 1886 1886 ======================================= Hits 2753 2753 Misses 4336 4336 Partials 762 762 ```
marek-lach (Перенесено из github.com) рассмотрел(а) изменения 5 лет назад
@ -6,7 +6,7 @@
@:base(ctx, i18n!(ctx.1, "Search"), {}, {}, {
marek-lach (Перенесено из github.com) прокомментировал(а) 5 лет назад

Where do you mean, I am not too sure...sorry. In the .css files I have adressed every form and input field that I felt like it needed to be adressed. I have reformatted the line you higlighted, so it should be all fine now, I guess? :-)

Where do you mean, I am not too sure...sorry. In the `.css` files I have adressed every form and `input` field that I felt like it needed to be adressed. I have reformatted the line you higlighted, so it should be all fine now, I guess? :-)
marek-lach прокомментировал(а) 5 лет назад (Перенесено из github.com)

The appearence of the search bar is now properly fixed:

Screenshot 2019-05-05 at 12 25 48
The appearence of the search bar is now properly fixed: <img width="805" alt="Screenshot 2019-05-05 at 12 25 48" src="https://user-images.githubusercontent.com/45913977/57192457-020d0880-6f31-11e9-9429-ca16ca326f1a.png">
elegaanz (Перенесено из github.com) рассмотрел(а) изменения 5 лет назад
@ -6,7 +6,7 @@
@:base(ctx, i18n!(ctx.1, "Search"), {}, {}, {
elegaanz (Перенесено из github.com) прокомментировал(а) 5 лет назад

(sorry for the late reply)

You actually forgot this one: https://github.com/Plume-org/Plume/pull/560/files#diff-339bac14a232fb01418ef93c2cb5e1ecR6

I think if you add appearence: none here, you could remove all the inline styles and have them all in one place.

(sorry for the late reply) You actually forgot this one: https://github.com/Plume-org/Plume/pull/560/files#diff-339bac14a232fb01418ef93c2cb5e1ecR6 I think if you add `appearence: none` here, you could remove all the inline styles and have them all in one place.
marek-lach прокомментировал(а) 5 лет назад (Перенесено из github.com)

@BaptisteGelez This PR is ready to be merged, I think, once the build tests suceed.

@BaptisteGelez This PR is ready to be merged, I think, once the build tests suceed.
elegaanz (Перенесено из github.com) рассмотрел(а) изменения 5 лет назад
elegaanz (Перенесено из github.com) оставил комментарий

Sorry, I still have some remarks/questions.

Also, I'm not sure all the -webkit-flex are necessary, as Webkit have been supporting flex for quite a long time now I think (I tested with GNOME Web, that uses a not-so-recent version of Webkit, and everything seems to be displayed correctly without these prefixed rules).

Sorry, I still have some remarks/questions. Also, I'm not sure all the `-webkit-flex` are necessary, as Webkit have been supporting `flex` for quite a long time now I think (I tested with GNOME Web, that uses a not-so-recent version of Webkit, and everything seems to be displayed correctly without these prefixed rules).
elegaanz (Перенесено из github.com) прокомментировал(а) 5 лет назад

What does it do?

What does it do?
@ -131,3 +140,4 @@
-webkit-appearance: none;
}
.button + .button {
elegaanz (Перенесено из github.com) прокомментировал(а) 5 лет назад

I think using the unprefixed appearence (if it works) would be better, because Safari may drop support for the prefixed version one day, as they are mostly used when the property is in "beta".

I think using the unprefixed `appearence` (if it works) would be better, because Safari may drop support for the prefixed version one day, as they are mostly used when the property is in "beta".
elegaanz (Перенесено из github.com) прокомментировал(а) 5 лет назад

I would prefer to avoid adding inline styles if possible, and to keep them as much as possible in the stylesheets. For instance, you can probably add this rule to #plume-editor { ... } in _article.scss

I would prefer to avoid adding inline styles if possible, and to keep them as much as possible in the stylesheets. For instance, you can probably add this rule to `#plume-editor { ... }` in `_article.scss`
marek-lach (Перенесено из github.com) рассмотрел(а) изменения 5 лет назад
@ -131,3 +140,4 @@
-webkit-appearance: none;
}
.button + .button {
marek-lach (Перенесено из github.com) прокомментировал(а) 5 лет назад

Right. As you say, it's best to make these changes to be as universal, and platform agnostic as possible in the long-term.
I have now ammended the commits.

Right. As you say, it's best to make these changes to be as universal, and platform agnostic as possible in the long-term. I have now ammended the commits.
marek-lach (Перенесено из github.com) рассмотрел(а) изменения 5 лет назад
@ -6,7 +6,7 @@
@:base(ctx, i18n!(ctx.1, "Search"), {}, {}, {
marek-lach (Перенесено из github.com) прокомментировал(а) 5 лет назад

Unfortunately, in some cases, like with imput forms and buttons, there just has to be the -webkit prefix present, otherwise the buttons are disorted when it's just appearance: none;, and so the desired effect is not achievable otherwise it seems like...
Checkboxes are also rendered poorly without -webkit-appearance: checkbox;

I did try to keep the platform specific prefix only to an absolutely necessary minimum though.

Unfortunately, in some cases, like with imput forms and buttons, there just has to be the `-webkit` prefix present, otherwise the buttons are disorted when it's just `appearance: none;`, and so the desired effect is not achievable otherwise it seems like... Checkboxes are also rendered poorly without `-webkit-appearance: checkbox;` I did try to keep the platform specific prefix only to an absolutely necessary minimum though.
marek-lach прокомментировал(а) 5 лет назад (Перенесено из github.com)

@BaptisteGelez So I finally tested the compiled version on the live instance both in desktop Safari for OSX and in mobile Safari for iOS and it looks nice!

Screenshot 2019-05-06 at 18 54 51

Even things like native shortcuts work (notice the little x at the end, also autocorrect is automatically applied too) in the searchbar now, which was not the case before. That is honestly an even better result than I had originally hoped for.

I think this PR is now really ready :-)

By the way, I tested in Firefox too and everything is there just as it was before, so nothing's broken:
Screenshot 2019-05-06 at 19 07 10

@BaptisteGelez So I finally tested the compiled version on the live instance both in desktop Safari for OSX and in mobile Safari for iOS and it looks nice! <img width="1280" alt="Screenshot 2019-05-06 at 18 54 51" src="https://user-images.githubusercontent.com/45913977/57241253-da04ce80-7030-11e9-9764-552104aa3c7e.png"> Even things like native shortcuts work (notice the little `x` at the end, also autocorrect is automatically applied too) in the searchbar now, which was not the case before. That is honestly an even better result than I had originally hoped for. I think this PR is now really ready :-) By the way, I tested in Firefox too and everything is there just as it was before, so nothing's broken: <img width="1280" alt="Screenshot 2019-05-06 at 19 07 10" src="https://user-images.githubusercontent.com/45913977/57241828-33213200-7032-11e9-8717-f0e58baa11f2.png">
elegaanz (Перенесено из github.com) одобрил(а) эти изменения 5 лет назад
elegaanz (Перенесено из github.com) оставил комментарий

Looks good! Thank you for you work and your patience!

Looks good! Thank you for you work and your patience!

Рецензенты

Запрос на слияние был объединен как 33619abdfb.
Вы также можете просмотреть инструкции командной строки.

Шаг 1:

В репозитории вашего проекта посмотрите новую ветку и протестируйте изменения.
git checkout -b fix-webkit-specific-rendering-of-forms master
git pull origin fix-webkit-specific-rendering-of-forms

Шаг 2:

Объединить изменения и обновить на Forgejo.
git checkout master
git merge --no-ff fix-webkit-specific-rendering-of-forms
git push origin master
Войдите, чтобы присоединиться к обсуждению.
Нет рецензентов
Нет этапа
Нет назначенных лиц
1 участников
Уведомления
Срок выполнения
Срок действия недействителен или находится за пределами допустимого диапазона. Пожалуйста, используйте формат 'гггг-мм-дд'.

Срок выполнения не установлен.

Зависимости

Зависимостей нет.

Reference: Plume/Plume#560
Загрузка…
Пока нет содержимого.