este es mi primera pregunta en SO.
Tengo estos codigos, y los ejecuto en Live Server, sin embargo, todo funciona, hasta que cambio el tamaño de la Cuadricula, ya que no se redimensiona y simplemente se hace pequeño o muy gigante.
Lo que yo deseo es que al cambiar el tamaño de la cuadricula, se acomoden el numero de cuadros por columna y fila, y no simplemente que se acomode el tamaño nada mas.
Muchas gracias de antemano y les dejo mis codigos!
let headerTags = document.querySelector('.tags');
let gridContainer = document.querySelector('.grid');
let gridFontSize = document.querySelector('.set-size');
let rooms = document.querySelector('.grid')
let gridBaseSize = 1;
init();
function displayGrid () {
fetch('./rooms.json')
.then(res => res.json())
.then(res => {
let toAppend = '';
res.forEach(el => {
let evStatus = el['event_status'];
let element =
`<div class="room ev-${evStatus}">
<div class="room--header">
<div class="guest-icon"><i class="material-icons ${el['has_guest'] ? 'guest' : 'no-guest'}">person</i></div>
<div class="room-status">${el['room_status']}</div>
</div>
<div class="room--body">${numeral(el['room']).format('000')}</div>
</div>`;
toAppend += element;
});
gridContainer.innerHTML = toAppend;
})
}
function filterTags (filter, toApply) {
for (i=0; i<toApply.length; i++) {
if (toApply[i].classList.contains(filter)) {
toApply[i].classList.add('selected')
} else {
toApply[i].classList.remove('selected')
}
}
}
// Iniciar aplicacion
function init () {
displayGrid()
filterTags("ev-pending", rooms.children)
console.log(rooms)
}
// Filtrar etiquetas
headerTags.addEventListener('click', (e) => {
let tagName = e.target.classList[0];
let etiqueta = e.target.classList[1];
console.log(e.target.classList)
if(tagName = 'tag') {
filterTags(etiqueta, rooms.children)
}
})
// Tamaño de letra y elementos
gridFontSize.addEventListener('click', e => {
let classValue = e.target;
setSize(classValue)
})
function setSize (value) {
if (value.className == 'up') {
gridBaseSize += 0.1
rooms.style.transform = `scale(${gridBaseSize})`
} else if ( value.className == 'down') {
gridBaseSize -= 0.1
rooms.style.transform = `scale(${gridBaseSize})`
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
--pending: rgba(56, 169, 214, 0.2);
--completed: rgba(104, 188, 87, 0.2);
--closed: rgba(194, 76, 76, 0.2);
--delayed: rgba(14, 103, 141, 0.2);
--borde-claro: #f4f4f4;
--texto-claro: #c1c1c1;
--azul-nuvola: #0E678D;
--light-blue: #E8EEF2;
--black-nuvola: #333333;
--tag-pending: #38a9d6;
--tag-completed: #68bc57;
--tag-closed: #c24c4c;
--tag-delayed: #0e678d;
}
body {
background-color: var(--light-blue);
}
.content {
display: flex;
width: 100%;
}
/* Header */
header.main-header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0;
z-index: 99;
}
header.main-header .top {
width: 100%;
height: 40px;
background-color: white;
}
header.main-header .bottom {
width: 100%;
height: 20px;
background-color: var(--azul-nuvola);
}
/* Navbar */
nav.main-nav {
width: 42px;
display: flex;
flex-direction: column;
align-items: flex-start;
position: fixed;
top: 60px;
left: 0;
bottom: 0;
background-color: white;
box-shadow: 2px 0px 4px rgba(0, 0, 0, .2);
padding: 10px 0px;
z-index: 9;
transition: all .4s;
overflow: hidden;
}
nav.main-nav:hover {
width: 200px;
}
nav.main-nav a {
font-weight: normal;
padding: 8px 10px;
text-decoration: none;
color: white;
color: var(--black-nuvola);
display: flex;
align-items: center;
word-wrap: none;
}
nav.main-nav a.active {
background-color: var(--light-blue);
color: var(--azul-nuvola);
font-weight: bold;
position: relative;
}
nav.main-nav a.active::before {
content: '';
position: absolute;
left: 0;
width: 4px;
height: 100%;
border-radius: 0px 4px 4px 0px;
background-color: var(--azul-nuvola);
}
nav.main-nav a p {
font-family: 'Lato';
margin-left: 10px;
width: 200px;
word-wrap: none;
}
/* Container */
.container {
padding: 20px;
width: 100%;
margin-left: 42px;
margin-top: 60px;
}
/* Header */
.tags-header {
width: 100%;
height: 46px;
margin-bottom: 20px;
font-family: 'Lato';
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .2);
padding: 8px 12px;
border-radius: 4px;
}
.tags {
display: flex;
height: 100%;
align-items: center;
}
.tags .tag {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
min-width: 60px;
padding: 0px 12px;
border-radius: 4px;
margin-right: 8px;
border: 1px solid var(--borde-claro);
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all .5s;
}
.tag.ev-pending {
border: 1px solid var(--tag-pending);
color: var(--tag-pending);
}
.tag.ev-pending.active {
box-shadow: 0px -2px var(--tag-pending) inset;
}
.tag.ev-completed {
border: 1px solid var(--tag-completed);
color: var(--tag-completed);
}
.tag.ev-completed.active {
box-shadow: 0px -2px var(--tag-completed) inset;
}
.tag.ev-closed {
border: 1px solid var(--tag-closed);
color: var(--tag-closed);
}
.tag.ev-closed.active {
box-shadow: 0px -2px var(--tag-closed) inset;
}
.tag.ev-delayed {
border: 1px solid var(--tag-delayed);
color: var(--tag-delayed);
}
.tag.ev-delayed.active {
box-shadow: 0px -2px var(--tag-delayed) inset;
}
/* Set size */
.set-size {
display: flex;
align-items: center;
height: 100%;
}
.set-size .down {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
min-width: 25px;
border: 1px solid var(--azul-nuvola);
color: var(--azul-nuvola);
border-radius: 2px;
font-weight: bold;
cursor: pointer;
}
.set-size .separador {
margin: 0px 10px;
}
.set-size .up {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
min-width: 25px;
border: 1px solid var(--azul-nuvola);
color: var(--azul-nuvola);
border-radius: 2px;
font-weight: bold;
cursor: pointer;
}
/* Grid */
.grid {
width: 100%;
height: 100%;
display: grid;
/* flex-wrap: wrap; */
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
font-size: 14px;
transition: all 1s;
padding: 10px;
border-radius: 4px;
background-color: white;
margin-bottom: 20px;
/* transform-origin: top left; */
}
.room {
/* min-width: 54px; */
font-family: 'Lato';
font-size: 1em;
font-weight: normal;
border-radius: 2px;
border: 1px solid var(--borde-claro);
margin: 2px;
background-color: white;
transition: all 1s;
color: var(--texto-claro);
/* transform: scale(.6) */
}
.room--header {
font-size: 1em;
display: flex;
align-items: center;
justify-content: space-between;
padding: 2px 6px;
border-bottom: 1px solid var(--borde-claro);
color: inherit
}
.room--header .guest-icon {
display: flex;
justify-content: center;
align-items: center;
}
.room--header .guest-icon i {
font-size: .9em;
position: relative;
left: -2px;
}
.room--header .room-status {
font-size: .8em;
}
.room--body {
font-size: 1em;
font-weight: inherit;
display: flex;
justify-content: center;
align-items: center;
padding: 4px 6px;
color: inherit
}
/* Event - No event */
.ev-no-event {
color: var(--texto-claro);
font-weight: normal;
}
.ev-no-event .room--body {
color: var(--texto-claro);
}
/* Guest status */
.guest-icon {
color: var(--azul-nuvola);
}
.no-guest {
color: rgba(0, 0, 0, .1)
}
/* Estado de evento */
.room.selected .room--header {
color: var(--azul-nuvola);
border-bottom: 1px solid inherit;
}
.ev-pending.selected {
background-color: var(--pending);
transition: all .5s;
border: 1px solid var(--tag-pending);
}
.ev-pending.selected .room--body {
font-weight: bold;
color: var(--tag-pending);
}
.ev-completed.selected {
background-color: var(--completed);
transition: all .5s;
border: 1px solid var(--tag-completed);
}
.ev-completed.selected .room--body {
font-weight: bold;
color: var(--tag-completed);
}
.ev-closed.selected {
background-color: var(--closed);
transition: all .5s;
border: 1px solid var(--tag-closed);
}
.ev-closed.selected .room--body {
font-weight: bold;
color: var(--tag-closed);
}
.ev-delayed.selected {
background-color: var(--delayed);
transition: all .5s;
border: 1px solid var(--tag-delayed);
}
.ev-delayed.selected .room--body {
font-weight: bold;
color: var(--tag-delayed);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Room Grid</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header class="main-header">
<div class="top"></div>
<div class="bottom"></div>
</header>
<div class="content">
<nav class="main-nav">
<a href="#" class="active">
<i class="material-icons">home</i>
<p>Home</p>
</a>
<a href="#">
<i class="material-icons">person</i>
<p>Profile</p>
</a>
<a href="#">
<i class="material-icons">list</i>
<p>Event list</p>
</a>
</nav>
<div class="container">
<header class="tags-header">
<div class="tags">
<div class="tag ev-pending">Pending</div>
<div class="tag ev-completed">Completed</div>
<div class="tag ev-closed">Closed</div>
<div class="tag ev-delayed">Delayed</div>
</div>
<div class="set-size">
<div class="down">a</div>
<div class="separador"> > </div>
<div class="up">A</div>
</div>
</header>
<div class="grid"></div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>
Agradezco mucho su ayuda, y espero que sea resulta, gracias!