Приветствую. Написал верстку для расписания:
$body .= '
<div class="lessons-per-group" id="mask-per-day">
<div class="lessons-per-grid-day">
<div class="lessons-per-time"></div>
<div class="lessons-per-content">';
$z = 2;
foreach($lessons as $lesson){
if(($lesson['time'] >= $time1) AND ($lesson['time'] <= $time2)){
$top = ($lesson['time'] - $time1) / 1800 * 22;
$height = $lesson['duration'] / 30 * 22;
$time_end = $lesson['time'] + $lesson['duration'] * 60;
$body .= '
<div class="body-table-block-lesson" style="height:'.$height.'px; inset: '.$top.'px 0px 0px 0%;border-color:'.$_LTYPES[$lesson['type']]['color'].';z-index:'.$z.';width:'.$w.'%;" data-admin="'.$lesson['admin'].'" data-user="'.$lesson['user'].'" data-type="'.$lesson['type'].'" data-status="'.$lesson['status'].'" data-lessonid="'.$lesson['id'].'">
<b>'.$_LTYPES[$lesson['type']]['title'].'</b> ('.date('H:i',$lesson['time']).' - '.date('H:i',$time_end).')
'.$lsinfo.'
</div>';
}
}
$body .= '</div>
</div>';
с вот такими параметрами css:
.lessons-per-group{
position: absolute;
top: 0;
width: 100%;
bottom: 0;
z-index: 1;
}
.lessons-per-grid-day{
display: grid;
grid-template-columns: 85px auto;
padding-top: 35.5px;
height: calc(100% - 35.5px);
}.body-table-block-lesson{
position: absolute;
border-width: 1px;
padding: 1px;
overflow: hidden;
right: 0;
border-bottom-width: 6px;
box-sizing: border-box;
border-style: solid;
background-color: white;
border-bottom-left-radius: 5px;
font-size: 0.8em;
cursor: pointer;
}
Соответственно, исходя из времени и длительности занятия выставляется высота и отступ блока. Но столкнулся с задачей, что в случае - когда в 1 час более 2-х занятий( а то их может быть и 6-7) - элементы попросту накладываются друг на друга. В итоге - в таблице виден только 1 элемент, который самый крайний из цикла.
Попробовал написать небольшой JS:
const elements = document.querySelectorAll('.body-table-block-lesson');
let previousInsetValue = null;
let y = 0;
let z = 3;
let sy = 0;
elements.forEach((element, index) => {
const insetValue = element.style.inset.split(' ')[0];
if (index > 0) {
const previousElement = elements[index - 1];
const previousinsetValue = previousElement.style.inset.split(' ')[0];
if (insetValue == previousinsetValue) {
y = y + 14;
z++;
if (y > 84) {
y = 84;
sy = insetValue + 10;
element.style.inset = `${sy} 0px 0px ${y}%`;
element.style.zIndex = z;
} else {
previousElement.style.width = (100 - y),'%';
element.style.inset = `${insetValue} 0px 0px ${y}%`;
element.style.zIndex = z;
console.log('Current z:', z, 'Current y:', y);
}
} else {
y = 0;
z = 3;
}
} else {
}
});
Но, финальной картинкой, если честно не совсем удовлетворен. Если занятий более 3-4 штук - это выглядит еще приемлемо, но, например, когда их 2 - хотелось бы, чтобы они просто занимали 50% от ширины. Или если их 3 - то по 33.3%. Финал получился вот так:
Может кто работал с аналогами или знает какие-нибудь готовые решения - для организации нормальной структуры этих блоков?
Простой
