Tema Aire

Tema
,
327

Cómo agregar la columna “Vistas” a la lista de temas.

No soy desarrollador ni programador. Pasé unas horas jugando con el código CSS usando la función “Inspeccionar elemento” en Google Chrome. Pude hacer que la columna de vistas se mostrara correctamente y también redimensioné cada columna a mi gusto. Siéntete libre de ajustar el ancho en el código CSS a continuación. También he agregado comentarios en el código para que puedas distinguir fácilmente qué código corresponde a cada columna. Para cada columna, hay 2 áreas (Encabezado y fila). Estos anchos deben coincidir.

Espero que esto les ayude a todos: @daming @bksubhuti @eddy2

Instrucciones

1. Crear un nuevo componente.

2. Copia este CSS

Usa este CSS actualizado a continuación en lugar del código proporcionado por @jordan.vidrine arriba.

Opción A) Agrega la columna Vistas solo para Escritorio (Recomendado)

  • Agrega el código CSS en la pestaña Escritorio.

Opción B) Agrega la columna Vistas tanto para Escritorio como para Móvil.

  • Agrega el código CSS en la pestaña Común.

Opción C) Agrega la columna Vistas solo para Móvil.

  • Agrega el código CSS en la pestaña Móvil.

Nota: Si elegiste la Opción B o C…

En dispositivos móviles, las 3 columnas (Respuestas, Vistas, Actividad) ocupan demasiado espacio y quedan apretadas. Si necesitas esto para dispositivos móviles, te sugiero eliminar una de las 3 columnas. Puedes hacerlo agregando Display: none a ambas áreas (Encabezado, Filas) en el código CSS a continuación para la columna que deseas ocultar.

/* [Tema] */

    /* Encabezado del tema */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
        width: 66%;
    }
    
    /* Fila del tema */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.default {
        width: 66%;
    }

/* [Respuestas] */

    /* Encabezado de Respuestas */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
        width: 7%;
        order: 2;
    }
    
    /* Filas de Respuestas */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
        width: 7%;
        order: 2;
    }

/* [Vistas] */

    /* Encabezado de Vistas */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.views {
        display: block;
        width: 7%;
        order: 3;
    }
    
    /* Filas de Vistas */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
        width: 7%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* [Actividad] */

    /* Encabezado de Actividad */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
        display: block;
        width: 7%;
        order: 4;
    }
    
    /* Filas de Actividad */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
        width: 7%;
        order: 4;
    }

@jordan.vidrine Si tienes alguna revisión del CSS que escribí, házmelo saber. No sé completamente lo que estoy haciendo… ¡pero funciona, lol.

6 Me gusta