Conversation
L1s-is
left a comment
L1s-is
left a comment
There was a problem hiding this comment.
Все хорошо, но опять же стоило проверить верстку на планшетном/мобильном разрешениях, чтобы убедиться, что ничего никуда не уехало.
Так же немного непохожи стили с макетом в части размера шрифтов(о них я указала) и внутренних паддингов самого виджета, они на макете побольше.
Не забывай правильно расставлять заголовки и вешать transition для плавных переходов между состояниями элементов
| <link rel="stylesheet" href="/pie-chart/styles.css" /> | ||
| </head> | ||
| <body> | ||
| <div class="container"> |
There was a problem hiding this comment.
По внешнему виду это единая сущность виджета, я бы сделала это тегом article и дала бы общий класс(например chart или что-то похожее, а далее по методологии БЭМ шли бы уже chart__header, chart__content итд
Ну и конечно в таком случае нужно было бы перенести виджет полностью в main :)
| <header class="header"> | ||
| <h3 class="header__title">Нарушения</h3> | ||
| <ul class="header__tabs"> | ||
| <li class="header__tabs-item">Час</li> |
There was a problem hiding this comment.
У тебя табы должны быть интерактивными элементами, в данном случае следовало бы добавить внутрь элементов списка button`ы(по клику на которые в теории у нас бы табы переключались и менялось бы содержимое вкладок)
| <body> | ||
| <div class="container"> | ||
| <header class="header"> | ||
| <h3 class="header__title">Нарушения</h3> |
There was a problem hiding this comment.
По семантике на каждой странице у нас должен быть один заголовок первого уровня(h1). Поскольку этот виджет с графиком - единственный контент, то данный заголовок "Нарушения" должен быть заголовком первого уровня
| <main> | ||
| <section class="chart"> | ||
| <div class="chart__circle"> | ||
| <h3 class="chart__circle-total">24774</h3> |
There was a problem hiding this comment.
В данном случае это не должно быть заголовком. Заголовок должен нам говорить о том, что находится в текущей секции, а тут просто цифры, сами по себе они ни о чем не говорят
По хорошему, если взять все заголовки страницы - у тебя должна выстроиться структура документа, о чем он итд, так можно себя проверять.
| </ul> | ||
| </header> | ||
| <main> | ||
| <section class="chart"> |
There was a problem hiding this comment.
Семантически, это не секция. По хорошему, секция должна иметь заголовок и контент, в данном случае тут график, даже без описания, т.к. описание помещено в другую секцию, что тоже не очень хорошо)
| </section> | ||
| <section class="violations"> | ||
| <ul class="violations__list"> | ||
| <li class="violations__list-item"> |
There was a problem hiding this comment.
Верстка у элементов едет в зависимости от количества процентов https://imgur.com/zoeJfS9
У тебя больше 100% по логике быть не может, поэтому стоило задать ширину элемента с процентами фиксировано, тогда все будет выглядеть аккуратно
| </div> | ||
| <div class="violations__list-item_count unauthorized-access"> | ||
| <span class="amount">7937</span> | ||
| <span class="percent">32%</span> |
There was a problem hiding this comment.
Тут также возникают вопросы к именованию. Можно назвать violations__list-itemAmount, violations__list-itemPercent итд Для глубоковложенных элементов не обязательно соблюдать всю иерархию в названии, главное, чтобы название это было уникально
| gap: 25px; | ||
| } | ||
|
|
||
| .header__tabs-item { |
There was a problem hiding this comment.
https://imgur.com/mXKjaLx Как будто бы шрифт слишком большой по сравнению с макетом
Так же не хватает transition для плавного перехода между состояниями
| z-index: 1; | ||
| margin-top: 20px; | ||
| top: 45%; | ||
| transform: translateY(-50%); |
There was a problem hiding this comment.
Думаю лучше объединить chart__circle-total и chart__circle-text в общий родитель, и уже этому родителю задавать стили белого фона и все то, что задано для chart__circle::before. Тогда не пришлось бы городить кучу одинаковых стилей абсолютного позиционирования итд
| </div> | ||
| </li> | ||
| <li class="violations__list-item"> | ||
| <div class="violations__list-item_name license-plate"> |
There was a problem hiding this comment.
license-plate и все подобные стили можно было сделать через модификатор к li.violations__list-item и не пришлось бы дублироваться
2 participants
This project is a web page displaying a pie chart of violations and their categorization. The page uses HTML to structure the content, including a list of violations with the number and percentage for each category. CSS styling provides an attractive design, including color-coded categories and interactive elements such as text highlighting on hover. The main goal of the project is to visually present data on violations in an easy-to-understand format, ensuring simplicity and ease of code support.