riemelt/toxin

Hotel website

toxin's Issues

Package.json

Перенеси пожалуйста в dependencies всё то без чего твоя prod сборка не соберется или не будет работать после компиляции, а в devDependencies остальное. Это как один из вариантов распределения зависимостей, заодно познакомишься с этим

BEM

1. Тк БЭМ требует, чтобы блок был независим, необходимо, чтобы картинки, принадлежащие блоку, находились в папке с этим блоком
2. Модификатор _with-bigger-title (и другие подобные) звучит несколько нечетко. На мой взгляд лучше _title-size_big или _title-size_l
3. У блока button использованы булевые модификаторы, хотя нужны ключ-значение.

Readme

Добавь пожалуйста версию node и npm которая используется в проекте. Можешь указать свою текущую на системе

PP и недочеты сайта

Привет!) Будут вопросы пиши в тг :)

Курсор при наведении на интерактивные элементы должен становится pointer

Клик на пустое пространство переключает кнопку

Давай тут и в header при наведении курсора будем убирать непрозрачность текста, чтобы визуально обозначить что элемент интерактивный

Тоже cursor pointer

Так же давай запретим бронировать номера задним числом.
(Бронировать можно от текущей даты и дальше, выбирать прошедшее число нельзя)

Блок Button

Toxin/src/components/button/button.pug

Lines 30 to 37 in 85b547b

	const themeClass = {
	default: '',
	bordered: ` ${className}_theme_bordered`,
	filled: ` ${className}_theme_filled`,
	long: ` ${className}_theme_long`,
	borderedHeader: ` ${className}_theme_bordered-header`,
	longHeader: ` ${className}_theme_long-header`,
	}

Это не совсем все к теме относится, желательно разбить на разные модификаторы, чтобы можно было задавать цвет, тему и размер отдельно.

Scss

1. Глобальные стили не допустимы. Допустимы только для тегов body, html и для переопределения box-sizing для всех тегов

Pug

Для таких штук удобно использовать объекты по ключам.

Пример

Common

1. Не запускается проект, вот одна из 7 ошибок:
   

JS

Наши бп (бест практис) основан на airbnb style guid. Для строк следует использовать одинарные кавычки тык. js в pug не является исключением.

UI/UX

1. Такой выпадающий список лучше делать position: absolute, иначе сдвигается весь контент внизу
   
2. Текст под заголовком тоже лучше сделать кликабельным
   
3. При наведении странные стили: текст становится тусклым
   
4. На больших экранах лучше сделать так:
   края страницы сделать в цвет футера и/или хедера (белый)
   продолжить хедер/футер (без контента) и за края макета
   
5. Кнопки кажутся слишком большими
   
6. В планшетных/мобильных версиях лучше выравнивать по вертикали
   
7. На мобилках можно сократить расстояния (на картинке) + всегда нужно следить, чтобы ничего не слипалось и оставлять хотя бы небольшое расстояние