Open faciledictu opened 4 months ago
Нашел проблему. Сделаю пуллреквест сейчас.
P.S. Задачка была от Жака Фреско блин)))
@faciledictu Проблема была в неправильно расположении переписанных переменных в scss. Как я понял, вы ранее писали эти стили и они были не корректно расположены (по vs Code по крайней мере). Я думаю это так шалит компилятор scss, который собрал сначала сборку бутстрапа, а потом по какой-то причине подгружает наши новые переменные. Если не ошибаюсь, даже в доке bs5 указано, что нужно делать перепись после импорта бутстрап компонентов
Передвинул их вниз, думаю что теперь работает корректно.
@bobrov-site Переменные нужно обязательно указывать до импорта модулей, потому что модули используют значения этих переменных для генерации стилей. В коде модулей Bootstrap они указаны с флагом !default на тот случай, если они не были явно заданы перед импортом модулей. Можете глянуть, как это делается, например, тут: https://github.com/twbs/examples/blob/main/color-modes/scss/styles.scss
Про VSCode не понял, что вы имеете в виду?
Со стилями приложения должно быть все в порядке, оно работает хорошо, если загрузить, например, сразу страницу /signin. Проблема в стилях лендинга. Я рискну предположить, что какая-то проблема в том, что делает со стилями лендинг. Лендинг должен брать те же стили, которые уже определены в приложении (например, стили кнопок). А вместо этого он импортирует дефолтные стили бутстрапа (в компоненте Header) — этого быть не должно.
Упс, некорректно предоставил информацию. Да, все верно вы расписали.
Пока что закрою свой пуллреквест, так как нужно детальнее изучить проблему. Если кто-то может уже решить проблему, то вперед)
@bobrov-site смотри, там не должно быть особо сложно. При беглом взгляде — проблема в в этой строчке https://github.com/hexlet-rus/runit/blob/53d1680b2bb5644a2513ce1c5f8554344e0c3041/frontend/src/pages/landing/Header.jsx#L13 Тут происходит импорт стилей бутстрапа при рендеренге лендинга. И эти стили перезаписывают те стили, которые были настроены и импортированы на верхнем уровне приложения. Импорт стилей надо удалить и оставить только импорт стилей чисто для лендинга (там есть два файла). После этого посмотреть, ничего ли не сломалось. По идее, это минимальная работа, которая закроет эту задачу.
@faciledictu похоже, что действительно проблема в импорте этих стилей. Но нужна оценка по корректности работы. С первого взгляда вроде все работает
Проблема не решена.
Возможно, нужно убирать в стилях лендинга кастомизацию цветов. В светлой теме она влияет на интерфейс.
@faciledictu попробую еще посмотреть.
Если честно, не могу сообразить в чем проблема. Я пытался разными способами убирать стили, но все равно не получается довести до нужного результата. Поэтому требуется помощь.
У меня есть предположение, что проблема точно в файле Application.scss. Я пытался убирать стили с Лендинга, но результат тот же.
Summary
В некоторых случаях не происходит загрузка необходимых css-стилей в интерфейсе приложения, поэтому оно отображается не так, как задумано. Замечено, что это происходит в сценарии, когда пользователь переходи из лендинга в приложение.
Reproduction steps
Expected result
Интерфейс отображается как задумано в обоих случаях
Actual result
Вы увидите интерфейс с проблемами. Обратите внимание на цвета фона и цвета карточек со сниппетами, обратите внимание на скругления у кнопок, на оформление модальных окон и прочее.
После перегрузки страницы проблемы исчезают
Browsers
Safari
OS
Mac