Страница 1 из 1

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

Добавлено: 2020.02.03, 10:06
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>

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

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

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

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

Или на худой конец js убирать нужный блок.

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

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

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

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

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

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

Добавлено: 2020.02.03, 13:32
Tonni_regoletti
А если что-то типа

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

if (window.innerWidth < 700){
		var block_1 = document.getElementById('block_1');
		block_1.hidden = true;
		
}

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

Добавлено: 2020.02.03, 13:39
unknownby
Tonni_regoletti писал(а): 2020.02.03, 13:32 А если что-то типа
Не всё так просто. Вверху кусок кода. Там нужно убрать кусок впереди и два закрывающих дива после. Реализовал двумя представлениями пока что. :D

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

Добавлено: 2020.02.03, 15:04
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 будет показываться свернутый бокс, а если меньше, то список категорий. Разве должно быть не наоборот?

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

Добавлено: 2020.02.03, 15:16
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 представления, то дважды сработает поиск категорий из модели. Только если ради этого стоит в одном представлении всё оставить. Вопрос стоит ли плодить представления? :)