Расчет высоты бронирований в календаре за неделю - PullRequest
Новая
       17

Расчет высоты бронирований в календаре за неделю

1 голос
/ 21 января 2020

Я создаю календарь, который должен давать абстрактную визуализацию часов, которые вы забронировали на этой неделе. Таким образом, каждый элемент .bar означает x минут, потраченных на что-либо. Теперь я изо всех сил пытаюсь найти способ убедиться, что дни остаются пропорциональными друг другу.

Что я сделал, так это то, что я взял самый длинный день недели и высоту контейнера, в котором находятся столбики. Таким образом, я могу рассчитать, как высоко (px) 1 минута в самый длинный день, и использовать это значение для всех дней. Я надеюсь, что это имеет смысл.

Я сделал эту скрипку с некоторыми жестко закодированными данными: https://jsfiddle.net/luffyyyyy/vate1d4h/13/

new Vue({
        el: '#app',
        data: {
            minuteHeight: 0,
            longestDay: 600
        },
        mounted() {
            window.addEventListener('resize', this.handleResize);
            this.handleResize();
        },
        destroyed() {
            window.removeEventListener('resize', this.handleResize);
        },
        methods: {
            handleResize() {
                this.minuteHeight = this.$refs.container.offsetHeight / this.longestDay;
                console.log(this.minuteHeight);
            }
        }
    });

Теперь это работает, когда вы загружаете страницу, и это работает, когда вы делаете страницу больше (она масштабируется). Но когда вы начинаете делать страницу меньше, она остается самой большой по размеру (я думаю?).

  1. Это правильный путь к go по этому поводу?
  2. Почему нет? Уменьшить ли его размер при уменьшении размера браузера?

1 Ответ

2 голосов
/ 21 января 2020

Я бы порекомендовал иметь фиксированную высоту для longestDay, другими словами, можно сказать, что 1 минута имеет height из 2px. Таким образом, ваш расчет становится намного проще, если у вас достаточно вертикального пространства. В вашем примере кода 1 минута равна 0.396px в меньшем окне просмотра.

Если вы хотите пометить заказы, вам нужно рассмотреть случай, если бронирование слишком маленькое.

Редактировать : Я исправил проблему с изменением размера, изменив метод расчета handleResize. В настоящее время высота контейнера используется для расчета. При увеличении высоты окна контейнер расширяется в соответствии с вашими правилами css. При уменьшении высоты окна появляется полоса прокрутки, поскольку высота контейнера не изменяется. Вы должны использовать внутреннюю высоту окна для своих расчетов. 

handleResize() {
    this.minuteHeight = window.innerHeight / this.longestDay;
}
...