CSS Homework Review

[seiraye]

Привет, 👋🏻

Я посмотрел твою домашку и мне она понравилась, особенно понравилось наличие анимаций при взаимодействии пользователя 💪🏻. Тем не менее есть пара рекомендаций:

Календарик

• По коду у тебя есть такие вот стили, но кажется смысла в них не много :)

 display: grid;
 grid-template-columns: 1fr;

Галерея картинок

• Загружать результаты работы компилятора TS необязательно (я про app.js). Обычно в репозитории хранят только исходный код (в твоем случае app.ts)
• Можно заметить, что картинки не сохраняют свое исходное соотношение ширины и высоты (aspect ratio). Попробуй это исправить :).
• При открытии галереи можно увидеть, как весь лэйаут "скачет" в момент, когда картинки загружаются. Это ведет к не очень хорошему пользовательскому опыту. Тоже можно попробовать это исправить :).

[user-of-github]

Привет, 👋🏻

Я посмотрел твою домашку и мне она понравилась, особенно понравилось наличие анимаций при взаимодействии пользователя 💪🏻. Тем не менее есть пара рекомендаций:

Календарик

• По коду у тебя есть такие вот стили, но кажется смысла в них не много :)

 display: grid;
 grid-template-columns: 1fr;

Галерея картинок

• Загружать результаты работы компилятора TS необязательно (я про app.js). Обычно в репозитории хранят только исходный код (в твоем случае app.ts)
• Можно заметить, что картинки не сохраняют свое исходное соотношение ширины и высоты (aspect ratio). Попробуй это исправить :).
• При открытии галереи можно увидеть, как весь лэйаут "скачет" в момент, когда картинки загружаются. Это ведет к не очень хорошему пользовательскому опыту. Тоже можно попробовать это исправить :).

Здравствуйте! Поправил calendar. Вроде что-то и по images подправил, но видимых итогов вроде пока нет... Все изменения уже в репозитории

Мне приходили идеи для исправления скачущего лэйаута сделать следующее:
-прописать min-height для контейнера, например, 1000px (но это влечёт растягивание отступов по вертикали),
-вначале сформировать полную строку с HTML и потом запихнуть её в container, но почему-то только первое фото при таком раскладе отрисовывается и всё

Для исправления aspect ratio я хотел сделать следующее:

• сделать фото object-fit: contain
• после рендеринга фото пройтись ещё раз по всем фотографиям и сделать их родительский блок + overlay такой же ширины, как и фото
  Но это также не дало результатов. Могли бы вы предложить исправления / дополнения в описанных мной способах для решения двух этих проблем ?

[seiraye]

Привет.

Можно попробовать прятать картинки, до тех пор пока они не загрузятся.
Для того, чтобы отследить, когда загрузилась картинка, можно использовать событие onLoad.

Для того, чтобы посчитать aspect ratio, можно воспользоваться оригинальной шириной и высотой картинки.

[seiraye]

При этом необязательно проходиться по списку несколько раз, это можно сделать в одной итерации.

Хорошо, если размеры картинок заранее известны (например, api возвращает).
Но также может быть, что размеры неизвестны, тогда можно посчитать их вручную. Например можно загрузить картинку до того, как она была вставлена в DOM. Для этого можно воспользоваться объектом Image в JS.

[seiraye]

Пример

const img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

[user-of-github]

Исправил. Перепроверьте, пожалуйста. Круто, что есть объект Image: он-то мне и был нужен. Aspect-Ratio не нарушен, но теперь и не такое красивое выравнивание (в плане что разные отступы остаются в конце строк). Но это, наверное, можно как-то поправить: например, каждый раз хранить текущую длину строки в сумме и добавлять по изображению, а в случае чего (когда вдруг ширина перевысила допустимую) вновь проходиться по текущему набору картинок в строке и уменьшать их высоты и ширины. Далее убирать уже добавленные картинки в прошлую строку и начинать заново тот же процесс. (но это как-то долго и затратно, либо я неправильно мыслю)

https://github.com/user-of-github/evo-ts-bootcamp/tree/master/homeworks/02-css-instruments/images-layout