Изменить Django шаблон l oop поведение в зависимости от размера окна браузера - PullRequest
Новая
       54

Изменить Django шаблон l oop поведение в зависимости от размера окна браузера

0 голосов
/ 26 марта 2020

мое веб-приложение использует шаблон Django для l oop, чтобы отображать 52 недели в году в одной строке. После отображения 52 недель я использую тег <br>, чтобы разбить строку и начать недели следующего года. Это прекрасно работает на больших экранах, но когда я уменьшаю размер экрана менее 1200 пикселей (Bootstrap xl), красивые разрывы строк и затем переполнение заполняет следующую строку, создавая неравномерный разрыв.

Для размер окна браузера больше 1200 пикселей, я хотел бы продолжить отображать 52 недели, которые обозначены монотипным символом (в данном случае "X" и "O").

Для окна браузера, размер которого меньше 1200 пикселей, я хотел бы нравится отображать каждую строку только с 13 неделями (52, разделенными на 4), так что один "год" занимает четыре строки.

Вот код, который у меня есть: 

{% extends 'base.html' %}

{% block content %}
<p class="text-monospace">
    {% for week in week_list %}
    {% if week.is_current_week %}
    <a href="{% url 'week_view' week.week_number %}">H</a>
    {% elif week.is_past %}
    <a href="{% url 'week_view' week.week_number %}">X</a>
    {% else %}
    <a href="{% url 'week_view' week.week_number %}">O</a>
    {% endif %}

    {% if week.week_number|divisibleby:"52" %}
    <br>
    {% endif %}
    {% endfor %}
</p>

{% endblock %}

Я знаю немного javascript но не очень CSS. Каков наилучший способ решения этой проблемы? В некоторых из моих поисков я вижу ответы "использовать медиа-запрос". Если это так, то отлично! Я просто не уверен, как связать его с языком шаблонов Django. Спасибо за помощь.

happiness

sadness

1 Ответ

0 голосов
/ 26 марта 2020

В итоге выяснилось, как реализовать это с сеткой Bootstrap. 

{% extends 'base.html' %}

{% block content %}
<div class="row no-gutters text-monospace">
    <div class="col-xl-3-m-0 col-lg-12-m-0">
        {% for week in week_list %}


        {% if week.is_current_week %}
        <a href="{% url 'week_view' week.week_number %}">H</a>
        {% elif week.is_past %}
        <a href="{% url 'week_view' week.week_number %}">X</a>
        {% else %}
        <a href="{% url 'week_view' week.week_number %}">O</a>
        {% endif %}

        {% if week.week_number|divisibleby:"52" %}
    </div>
</div>
<div class="row no-gutters text-monospace">
    <div class="col-xl-3-m-0 col-lg-12-m-0">
        {% elif week.week_number|divisibleby:"13" %}
    </div>&nbsp;
    <div class="col-xl-3-m-0 col-lg-12-m-0">
        {% endif %}

        {% endfor %}
    </div>
</div>

{% endblock %}
...