1

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!

1 respuesta 1

0

Tu grilla debiera mantener un tamaño constante. Son los recuadros en su interior los que debieran fluir. Por lo mismo modificar la propiedad transform aumentando la escala del contenedor no funciona para lo que quieres.

En el ejemplo siguiente implementé el redimensionamiento haciendo que el ancho de las columnas variase acorde al tamaño de la tipografía (esto es lo que debiera ocurrir cuando usas un control justamente para manipular el font-size)

let fontSizeDiv = document.querySelector('#fontSize'),
  gridContainer = document.querySelector('.grid'),
  gridFontSize = document.querySelector('.set-size'),
  rooms = document.querySelector('.grid')

let fontSize = 14,baseScale=1;

init();

function displayGrid() {
  let toAppend = '';
  [{
      event_status: 1,
      has_guest: 0,
      room: 1,
      room_status: 'free'
    },
    {
      event_status: 1,
      has_guest: 1,
      room: 1,
      room_status: 'used'
    },
    {
      event_status: 1,
      has_guest: 0,
      room: 1,
      room_status: 'free'
    },
    {
      event_status: 1,
      has_guest: 1,
      room: 1,
      room_status: 'used'
    },
    {
      event_status: 1,
      has_guest: 0,
      room: 1,
      room_status: 'free'
    },
    {
      event_status: 1,
      has_guest: 1,
      room: 1,
      room_status: 'used'
    },
    {
      event_status: 1,
      has_guest: 0,
      room: 1,
      room_status: 'free'
    },
    {
      event_status: 1,
      has_guest: 1,
      room: 1,
      room_status: 'used'
    },
    {
      event_status: 1,
      has_guest: 1,
      room: 1,
      room_status: 'used'
    }
  ]
  .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()
}

// Filtrar etiquetas



// Tamaño de letra y elementos

gridFontSize.addEventListener('click', e => {
  let classValue = e.target;

  setSize(classValue)
})

function setSize(value) {

  if (value.className == 'up') {
    fontSize += 0.5;
    baseScale+=0.1;
  } else if (value.className == 'down') {
    fontSize -= 0.5;
    baseScale-=0.1;
  }
  fontSizeDiv.innerText=`Font Size: ${fontSize}, scale: ${baseScale}`;

  document.querySelector('.grid').style.fontSize = `${fontSize}px`;
 
}
* {
  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 */


/* Container */

.container {
  padding: 0;
  width: 100%;
  margin: 0;
}


/* 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(6em, 1fr));
  font-size: 14px;
  transition: all 0.2s;
  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: 2px 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
}


/* Guest status */

.guest-icon {
  color: var(--azul-nuvola);
}

.no-guest {
  color: rgba(0, 0, 0, .1)
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">

<div class="content">


  <div class="container">
    <header class="tags-header">

      <div class="set-size">
        <div class="down">a</div>
        <div class="separador"> > </div>
        <div class="up">A</div>
        <div class="separador"> &nbsp; </div>
        <div class="separador"> Tamaño de letra: <span id="fontSize">
        </span> </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>

Con transform:scale(...)` también se puede, pero me tomó tanto tiempo limpiar el código de HTML, JS y CSS completamente ajeno a la pregunta que no me queda tiempo para probar ese approach.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.