SELECT
`t_general`.`numrequest` AS `id_request`,
SUBSTRING_INDEX(GROUP_CONCAT(`t_general`.`date` ORDER BY `t_general`.`date` DESC), ',', 1) AS `r_date`,
`t_general`.`iddistrict` AS `id_area`,
`t_park`.`stall`,
-- `t_general`.`idreason` AS `id_event`,
SUBSTRING_INDEX(GROUP_CONCAT(`t_general`.`idreason`), ',', 2) AS `id_event`,
SUBSTRING_INDEX(GROUP_CONCAT(`t_general`.`date` ORDER BY `t_general`.`date` ASC), ',', 1) AS `r_date_breakage`,
SUBSTRING_INDEX(GROUP_CONCAT(`t_general`.`idstaff` ORDER BY `t_general`.`idstaff` ASC), ',', 1) AS `applicant`,
SUBSTRING_INDEX(GROUP_CONCAT(`t_general`.`idstaff` ORDER BY `t_general`.`idstaff` DESC), ',', 1) AS `operator`,
`t_general`.`note`
FROM
`t_general`
INNER JOIN
`t_park` ON `t_park`.`id` = `t_general`.`stall`
WHERE
numrequest IN (275822, 275839, 275815, 194567)
AND (action = 0 OR (action = 2 AND idreason = 25))
GROUP BY `t_general`.`numrequest`
display: contents. /* стили для настольных компьютеров и ноутбуков */
@media only screen and (min-width: 1080px) {
.wrapper > div {
display: grid;
grid-template-columns: 40px 100px repeat(8, 1fr) 40px;
grid-template-rows: unset;
border-bottom: 1px solid #e8e9eb; /* Линия снизу от текста */
word-wrap: break-word; /* Перенос слов */
column-gap: 10px;
}
.wrapper > div:first-child {
background: #1cc58e;
color: #fff;
height: 30px;
position: sticky;
top:0px;
}
.wrapper > div:not(:first-child):nth-child(odd) {
background: #dedede;
}
}display: contents;display: subgrid;@media screen {
* {
font-family: 'Podkova', serif;
font-size: 14px;
margin: 0;
padding: 0;
}
}
/* стили для настольных компьютеров и ноутбуков */
@media only screen and (min-width: 1080px) {
.wrapper {
display: grid;
grid-template-columns: repeat(11, 1fr);
background-color: #fff;
border-right: 1px solid #e8e9eb; /* Линия справа от текста */
border-bottom: 1px dotted #e8e9eb; /* Линия снизу от текста */
word-wrap: break-word; /* Перенос слов */
}
.box {
padding: 4px;
color: #425b71;
border-right: 1px solid #e8e9eb; /* Линия справа от текста */
border-bottom: 1px dotted #e8e9eb; /* Линия снизу от текста */
word-wrap: break-word; /* Перенос слов */
}
.box:nth-child(-n+11) {
background-color: #1cc58ebd;
color: #fff;
font-weight: bold;
border-right: 1px solid #fff;
position: sticky;
top: 0;
}
}$('body').on("click", ".j", function(e) {
e.preventDefault();
$(this).next().hide(50);
});куча расчётов, сложные шаблоны с обязательным разрешением переменных, относительные величины ... И анимация сверху чугунной наковальней падает на это всё...
Это конкретно в вашем случае грид организован так хреново, что ему приходится всё перерисовывать.
[Violation] Forced reflow while executing JavaScript took ...ms
/* Переменные */
--typeColumn: 40px; /* Колонка с типом заявки */
--action1: calc(100vw - var(--typeColumn)); /* Боковой блок слева для дальнейших действий по заявке*/
.wrapper {
display: grid;
position: relative;
left: calc(0px - var(--action1));
grid-template-columns: var(--action1) var(--typeColumn) 60px 60px 200px 56px 90px repeat(4, minmax(1%, 35%)) 40px;
grid-auto-rows: unset;
width: calc(100vw + var(--action1));
}async function clickSub(e) {
e.preventDefault();
$(this).hide(50);
}