Воздушная тема

Настройка Тема
327

Как добавить колонку «Просмотры» в список тем.

Я совсем не разработчик и не программист. Я потратил несколько часов, экспериментируя с CSS-кодом, используя функцию «Инспектировать элемент» в Google Chrome. Мне удалось правильно отобразить колонку с просмотрами, а также изменить размер каждой колонки на своё усмотрение. Вы можете свободно настроить ширину в приведённом ниже CSS-коде. Я также добавил комментарии в код, чтобы вы легко могли понять, какой фрагмент отвечает за какую колонку. Для каждой колонки есть две области (заголовок и строка). Эти ширины должны совпадать.

Надеюсь, это поможет всем вам: @daming @bksubhuti @eddy2

Инструкция

1. Создайте новый компонент.

2. Скопируйте этот CSS

Используйте приведённый ниже обновлённый CSS вместо кода, предоставленного @jordan.vidrine выше.

Вариант A) Добавить колонку «Просмотры» только для десктопа (рекомендуется)

  • Добавьте CSS-код во вкладку Desktop.

Вариант B) Добавить колонку «Просмотры» для десктопа и мобильных устройств.

  • Добавьте CSS-код во вкладку Common.

Вариант C) Добавить колонку «Просмотры» только для мобильных устройств.

  • Добавьте CSS-код во вкладку Mobile.

Примечание: Если вы выбрали вариант B или C…

На мобильных устройствах три колонки (Ответы, Просмотры, Активность) занимают слишком много места и сжимаются. Если вам это нужно для мобильных устройств, я рекомендую удалить одну из трёх колонок. Это можно сделать, добавив Display: none в обе области (Заголовок, Строки) в приведённом ниже CSS-коде для колонки, которую вы хотите скрыть.

/* [Тема] */

    /* Заголовок темы */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
        width: 66%;
    }
    
    /* Строка темы */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.default {
        width: 66%;
    }

/* [Ответы] */

    /* Заголовок ответов */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
        width: 7%;
        order: 2;
    }
    
    /* Строки ответов */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
        width: 7%;
        order: 2;
    }

/* [Просмотры] */

    /* Заголовок просмотров */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.views {
        display: block;
        width: 7%;
        order: 3;
    }
    
    /* Строки просмотров */
    .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;
    }

/* [Активность] */

    /* Заголовок активности */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
        display: block;
        width: 7%;
        order: 4;
    }
    
    /* Строки активности */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
        width: 7%;
        order: 4;
    }

@jordan.vidrine Если у вас есть правки к написанному мной CSS, пожалуйста, дайте мне знать. Я не до конца понимаю, что делаю… но это работает, ха-ха.

6 лайков