Сайт не подстраивает позицию элементов в зависимости от размера окна
Я написал на Javascript код который берет из json файла данные по кабинетам и расставляет их на сайте по координатам x, y, но проблема в том что при изменении размера окна браузера или на телефоне, кабинеты остаются на том же месте и не меняют положение в зависимости от размера окна. Что делать?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Кабинетs</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://apis.google.com/js/api.js"></script>
<script src="../../scripts/options.js"></script>
<link rel="stylesheet" href="..\..\style.css">
<link rel="stylesheet" href="style.css">
<link type="image/x-icon" href="https://oksei.ru/public/img/logo.png" rel="icon">
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet"/>
</head>
<body>
<div class="mainTitle">
<a href="../../index.html"><img src="https://oksei.ru/public/img/logo.png" style="height:60px; width: auto; margin-left: 10px; padding: 10px;"></a>
<h1 style="align-self: left; margin-left: 10px; padding: 5px;">ГАПОУ "ОКЭИ" Кабинеты</h1>
</div>
<div class="gridBox">
<div class="gridComponent">
<div id="map"></div>
<div class="floor-menu">
<button class="floor-btn" data-floor="1">Этаж 1</button>
<button class="floor-btn" data-floor="2">Этаж 2</button>
<button class="floor-btn" data-floor="3">Этаж 3</button>
<button class="floor-btn" data-floor="4">Этаж 4</button>
<!-- Добавьте кнопки для других этажей по аналогии -->
</div>
<div class="tooltip" id="tooltip"></div> <!-- Элемент для отображения подсказки -->
<script src="cabscript.js"></script>
<!--<div class="left-col">
<div class="gridComponent">
</div>
<div class="gridComponent">
</div>
</div>
<div class="right-col gridComponent">
</div>-->
</div>
</body>
CSS:
.gridBox {
padding-top: 10px;
display: flex;
flex-direction: row;
height: 85vh;
}
.gridComponent {
height: 100%;
}
.gridComponent:hover {
transform: none;
}
.left-col .gridComponent {
height: 50%;
}
.left-col {
display: flex;
flex-direction: column;
width: 33.3%;
justify-content: space-between;
}
.right-col {
width: 66.6%;
padding-bottom: 0px;
}
.room {
max-width: 60px; /* Изменяем ширину комнаты на 8% от ширины экрана при ширине экрана до 768px */
max-height: 60px; /* Также изменяем высоту комнаты */
border: 2px solid black;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
border-radius: 5px;
color: black;
cursor: pointer; /* Добавляем указатель при наведении */
}
@media screen and (max-width: 2000px) {
.room {
width: 5%;
height: 7%;
}
.stream-room {
width: 10%;
height: 14%;
}
}
@media screen and (max-width: 990px) {
.room {
width: 6%;
height: 8%;
}
.stream-room {
width: 12%;
height: 16%;
}
}
@media screen and (max-width: 768px) {
.room {
width: 8%;
height: 10%;
}
.stream-room {
width: 16%;
height: 20%;
}
}
.computer-room {
border-color: blue;
}
.stream-room {
max-width: 100px;
max-height: 140px;
}
.tooltip {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px;
display: none;
}
.floor-menu {
display: flex;
justify-content: center;
margin-bottom: 10px;
position: relative;
}
/* Определяем стили для всех кнопок */
.floor-btn {
background-color: #33333300;
color: rgba(255, 255, 255, 0.233);
font-size: x-large;
border: none;
padding: 10px 20px;
margin: 0 5px;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 6px; /* добавляем округление углов */
}
/* Определяем стили для кнопок при наведении */
.floor-btn:hover {
background-color: #555;
}
/* Определяем дополнительные стили для активной кнопки */
.floor-btn.active {
background-color: rgba(65, 76, 233, 0.548); /* изменяем цвет активной кнопки */
font-size: xx-large; /* изменяем размер шрифта при активации */
color: white; /* изменяем цвет текста */
}
JavaScript:
let classrooms_ = void 0;
async function LoadCabinetsData()
{
const dataShit = await fetch("./myAss.json");
const fuck = await dataShit.json();
return fuck["floor"];
}
async function drawCabinets(floor) {
if(classrooms_ === undefined)
{
console.log("Loading Classroms");
classrooms_ = await LoadCabinetsData();
}
let classrooms = classrooms_[floor-1];
var map = document.getElementById('map');
var tooltip = document.getElementById('tooltip');
console.log(classrooms)
if(classrooms !== undefined)
{
classrooms.forEach(function(classroom) {
var room = document.createElement('div');
room.className = 'room';
room.style.left = classroom.location[0] + 'px';
room.style.top = classroom.location[1] + 'px';
room.style.backgroundColor = getColor(classroom.students, classroom.capacity);
room.innerText = classroom.cabinet;
if (classroom.type === 'Компьютерный') {
room.classList.add('computer-room');
}
if (classroom.type === 'Поточный') {
room.classList.add('stream-room');
}
room.addEventListener('mouseover', function() {
tooltip.innerHTML = `Кабинет №${classroom.cabinet}<br>Тип: ${classroom.type}<br>Вместимость: ${classroom.capacity}<br>Сейчас в кабинете: ${classroom.students} студентов<br>Группы: ${classroom.groups.join(', ')}`;
tooltip.style.left = (classroom.location[0] + 40) + 'px';
tooltip.style.top = (classroom.location[1] - 20) + 'px';
tooltip.style.display = 'block';
});
room.addEventListener('mouseout', function() {
tooltip.style.display = 'none';
});
map.appendChild(room);
});
}
function getColor(students, capacity) {
var percentage = (students / capacity) * 100;
if (percentage < 25) {
return 'green';
} else if (percentage < 50) {
return 'lightgreen';
} else if (percentage < 75) {
return 'yellow';
} else if (percentage < 90) {
return 'orange';
} else {
return 'red';
}
}
}
drawCabinets(1);
document.addEventListener('DOMContentLoaded', function() {
var buttons = document.querySelectorAll('.floor-btn');
buttons.forEach(function(button) {
button.addEventListener('click', function(event) {
var floorNumber = parseInt(this.getAttribute('data-floor'));
//console.log(floorNumber)
changeFloor(floorNumber);
});
});
changeFloor(1);
});
function changeFloor(floorNumber) {
var buttons = document.querySelectorAll('.floor-btn');
buttons.forEach(function(btn) {
btn.classList.remove('active'); // Убираем класс active у всех кнопок
});
var button = document.querySelector('.floor-btn[data-floor="' + floorNumber + '"]');
button.classList.add('active'); // Добавляем класс active к нажатой кнопке
while (map.firstChild) {
map.removeChild(map.lastChild);
}
drawCabinets(floorNumber);
}