Отображение кода

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
unknownby
Сообщения: 749
Зарегистрирован: 2019.11.05, 16:34
Контактная информация:

Отображение кода

Сообщение unknownby »

Суть проблемы в том, что не понятно как лучше сделать данную задачу. :D

Сама задача: нужно убрать или добавить кусок html при разрешении экрана меньше чем 768px.
Кусок кода, который обрамлен if-ом нужно или добавить или убрать.

Код: Выделить всё

<div class="row">
        <div class="col-xs-12">
            <?php if($width > $max_width) { ?>
            <div class="box box-solid collapsed-box">
                <div class="box-header">
                    <h3 class="box-title"><?= Yii::t('main', 'Left menu') ?></h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-plus"></i></button>
                    </div>
                </div>
                <div style="display: none;" class="box-body">
            <?php } ?>
                    <div class="mt-3 list-group list-group-border-blue">
                        <?php foreach($category as $value) { ?>
                            <?= Html::a('<span class="list-group-text">' . $value->productscategory_name . '</span><span class="badge bg-green list-group-badge">' . $value->getProductPublished()->count() . '</span>', ['products', 'url' => $value->productscategory_url], ['class' => 'list-group-item', ]) ?>
                        <?php } ?>
                    </div>
            <?php if($width > $max_width) { ?>
                </div>
            </div>
            <?php } ?>
        </div>
    </div>
P.S. рассматривается вариант как создание двух представлений и прятать их через

Код: Выделить всё

<span class="hidden-lg hidden-md hidden-sm"><span>
или

Код: Выделить всё

<span class="hidden-xs"><span>
Последний раз редактировалось unknownby 2020.02.03, 11:48, всего редактировалось 3 раза.
Аватара пользователя
Tonni_regoletti
Сообщения: 52
Зарегистрирован: 2019.10.11, 09:16

Re: Отображение кода

Сообщение Tonni_regoletti »

Здравствуйте.
Возможно я что-то не так понял.
Но почему бы вам не использовать меди запрос ? css

Код: Выделить всё

@media screen and (max-width: 600px)

Или на худой конец js убирать нужный блок.
unknownby
Сообщения: 749
Зарегистрирован: 2019.11.05, 16:34
Контактная информация:

Re: Отображение кода

Сообщение unknownby »

Tonni_regoletti писал(а): 2020.02.03, 13:13 Здравствуйте.
Возможно я что-то не так понял.
Но почему бы вам не использовать меди запрос ? css

Код: Выделить всё

@media screen and (max-width: 600px)

Или на худой конец js убирать нужный блок.
<span> как раз и ориентированы на медиа-запросы. Я пробовал и думал что-то связать с js, но ничего проще, чем реализовать дополнительное представление не вижу. Отображать нужное представление в зависимости от ширины экрана.
Аватара пользователя
Tonni_regoletti
Сообщения: 52
Зарегистрирован: 2019.10.11, 09:16

Re: Отображение кода

Сообщение Tonni_regoletti »

А если что-то типа

Код: Выделить всё

if (window.innerWidth < 700){
		var block_1 = document.getElementById('block_1');
		block_1.hidden = true;
		
}
unknownby
Сообщения: 749
Зарегистрирован: 2019.11.05, 16:34
Контактная информация:

Re: Отображение кода

Сообщение unknownby »

Tonni_regoletti писал(а): 2020.02.03, 13:32 А если что-то типа
Не всё так просто. Вверху кусок кода. Там нужно убрать кусок впереди и два закрывающих дива после. Реализовал двумя представлениями пока что. :D
yiiliveext
Сообщения: 910
Зарегистрирован: 2019.08.13, 01:49

Re: Отображение кода

Сообщение yiiliveext »

Код: Выделить всё

<style>

    .big-screen {
        display: none;
    }

    @media (min-width: 768px) {
        .small-screen {
            display: none;
        }

        .big-screen {
            display: block;
        }
    }


</style>

<div class="row">
    <div class="col-xs-12">
        <div class="box box-solid collapsed-box big-screen">
            <div class="box-header">
                <h3 class="box-title"><?= Yii::t('main', 'Left menu') ?></h3>
                <div class="box-tools pull-right">
                    <button class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-plus"></i></button>
                </div>
            </div>
            <div style="display: none;" class="box-body">
                <div class="mt-3 list-group list-group-border-blue">
                    <?php foreach($category as $value) { ?>
                            <?= Html::a('<span class="list-group-text">' . $value->productscategory_name . '</span><span class="badge bg-green list-group-badge">' . $value->getProductPublished()->count() . '</span>', ['products', 'url' => $value->productscategory_url], ['class' => 'list-group-item', ]) ?>
                    <?php } ?>
                </div>
            </div>
        </div>
        <div class="mt-3 list-group list-group-border-blue small-screen">
            <?php foreach($category as $value) { ?>
                    <?= Html::a('<span class="list-group-text">' . $value->productscategory_name . '</span><span class="badge bg-green list-group-badge">' . $value->getProductPublished()->count() . '</span>', ['products', 'url' => $value->productscategory_url], ['class' => 'list-group-item', ]) ?>
            <?php } ?>
        </div>
    </div>
</div>
Хотя, мне кажется, что у вас неправильная логика в приведенном примере. Сейчас при ширине экрана большей или равной 768px будет показываться свернутый бокс, а если меньше, то список категорий. Разве должно быть не наоборот?
unknownby
Сообщения: 749
Зарегистрирован: 2019.11.05, 16:34
Контактная информация:

Re: Отображение кода

Сообщение unknownby »

yiiliveext писал(а): 2020.02.03, 15:04 Хотя, мне кажется, что у вас неправильная логика в приведенном примере. Сейчас при ширине экрана большей или равной 768px будет показываться свернутый бокс, а если меньше, то список категорий. Разве должно быть не наоборот?
Я там тестировал по разному, в какой-то момент потерял логику как должно быть и решил два представления сделать всё же. :D

Код: Выделить всё

<div class="row">
	<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <span class="hidden-xs">
                    <?= $this->render('_leftmenu', ['productscategoryparent' => $model->productscategoryparent_id]) ?>
                </span>
                <span class="hidden-lg hidden-md hidden-sm">
                    <?= $this->render('_leftmenu_sm', ['productscategoryparent' => $model->productscategoryparent_id]) ?>
                </span>
	</div>
</div>
По сути принцип один и тот же, если в одном или в разных представлениях. Разница наверное в том, что если 2 представления, то дважды сработает поиск категорий из модели. Только если ради этого стоит в одном представлении всё оставить. Вопрос стоит ли плодить представления? :)
Ответить