/* ============================================================ COMPONENTES COMPARTIDOS — tarjetas, carruseles y paginador ============================================================ Esta hoja es la unica que templates/_tags_.php carga en TODAS las paginas. Aqui va lo que pintan varias vistas a la vez, para que un arreglo no pueda dejarse ninguna fuera. Lo que solo usa una vista NO entra aqui. El mismo marcado -.covered, .subgrid, .slide_item, .city__item- lo usan views/neightborhood.php, views/gates.php, views/suburb.php, views/delegacy.php, views/neighborhood.php, templates/city/index.php y templates/state/index.php. Sus arreglos vivian en una sola de esas vistas, que es como se llego a tener el mismo bloque roto en seis sitios. Se carga desde templates/_tags_.php, o sea en todas las paginas. Las tres reglas son estrechas a proposito: ninguna cambia como se ve algo que ya funcionaba, solo arreglan lo que estaba roto. ============================================================ */ /* 1) LAS FOTOS QUE CARGABAN Y NO SE VEIAN ------------------------------------------------------------ city.css manda la foto detras del contenido con z-index negativo: .covered picture z-index: -2 .covered:after (el velo) z-index: -1 .slide_item .background z-index: -1 Un z-index negativo se va detras del CONTEXTO DE APILAMIENTO mas cercano, y si no hay ninguno entre medias se va detras del fondo de la PAGINA y deja de verse. Lo que quedaba a la vista era el velo rgba(0,0,0,.4) sobre el fondo claro: un gris plano de #8c8c8c. Comprobado en el navegador antes de tocar nada: naturalWidth > 0 y complete = true en las imagenes a la vista. Cargaban, no se pintaban. Las dos ya llevan position:relative, asi que solo les faltaba un z-index para abrir su propio contexto. No se cambia ningun z-index negativo: se acota donde valen, que es dentro de su tarjeta. */ .covered, .slide_item { z-index: 0; } /* 2) EL PIE DE TARJETA QUE SE SALIA ------------------------------------------------------------ .subgrid fija las filas en 500px y 70px. El titulo, la descripcion y el boton no caben en 70px. Medido en /mx/gates/la_vista_lotes: el contenido desbordaba la caja en 570px, o sea el doble de su alto. Con una sola columna, pasar de grid a flex en columna es equivalente, y ademas deja que la fila de texto ocupe lo que necesite. Los !important no son pereza. Esta hoja se carga en el y las vistas piden city.css mas abajo, ya en el cuerpo, asi que su regla -que ademas vive dentro de un @media (min-width:980px)- gana por orden de aparicion. Medido despues de subirlo sin ellos: .subgrid seguia en "500px 70px" y desbordando 570px. Con la misma especificidad y llegando antes, no hay otra forma. */ .subgrid { display: flex !important; flex-direction: column !important; /* stretch marcado porque .subgrid viene siempre acompañada de oh-left, que alinea al principio: sin esto la foto no ocupa el ancho de la tarjeta y se queda en una columna estrecha a la izquierda. */ align-items: stretch !important; grid-template-rows: none !important; height: auto !important; } /* 3) LAS DIAPOSITIVAS QUE SE APILABAN ------------------------------------------------------------ El carril se ensancha a N00% -con doce ciudades, min-width:1200%- y se desplaza con margin-left para traer una al centro. Ese montaje solo funciona si cada hijo ocupa 1/N del carril. Y no lo ocupaba: la clase .city__item no tenia NI UNA REGLA en todo el proyecto. Cada tarjeta se quedaba con el ancho entero -8996px medidos a 1900 de ventana- y las doce se apilaban en vertical. flex:1 1 0 reparte el carril entre sus hijos a partes iguales, asi que cada uno recibe N00%/N = 100% del contenedor visible. Lo bueno es que NO hace falta saber cuantas son: la misma regla vale para las cinco vistas, con las ciudades que tenga cada una. min-width:0 hace falta porque el minimo por defecto de un elemento flex es el ancho de su contenido, y sin el la foto volveria a empujar la caja. */ #__slide__ { display: flex; flex-wrap: nowrap; } #__slide__ > .city__item { flex: 1 1 0; min-width: 0; max-width: none; } /* 4) LA TARJETA DE LUGAR ------------------------------------------------------------ Hasta aqui el bloque de "Elige el lugar de tus suenos" no era una tarjeta: eran una foto y, debajo, una linea suelta con la descripcion y el boton. Como el pie ocupaba lo que dijera el texto, cada lugar media distinto y el boton "Descubrir" caia a una altura diferente en cada uno. Con las descripciones que hay en la base -unas vacias, otras de dos lineas- el bloque se leia descuadrado. Se envuelve cada lugar en una tarjeta blanca de alto identico. Identico de verdad, no "el del vecino mas alto": la foto tiene alto fijo y el hueco de la descripcion reserva sus dos lineas aunque venga vacia, asi que una fila sin descripciones mide lo mismo que otra con ellas. ES OPCIONAL A PROPOSITO. Manda la clase .tarjetas-lugar en la rejilla, que solo lleva views/delegacy.php. El mismo marcado -.subgrid, .covered- lo usan otras cinco vistas, y una de ellas, neightborhood.php, trae su propio