Дмитрий
af2c4cbd15
Прошёл все экраны портала на 390px, нашёл и починил переполнения: 1. NewProjectDialog: кнопки дней недели (ПН…ВС) в окне редактирования проекта не влезали — СБ и ВС уезжали за правый край и были не видны. На телефоне делим ряд поровну между 7 кнопками. 2. DaysBulkDialog (массовое «Дни сбора»): та же беда с двумя рядами дней — тот же приём (flex 1/1/0 на телефоне). 3. ApiTab: пары кнопок «Копировать+Перегенерировать» и «Сохранить+Тестовый webhook» не помещались в строку — длинная вторая кнопка обрезалась. Разрешаем перенос на телефоне (flex-wrap). 4. NotificationsTab: таблица «События × каналы» была шире экрана — колонка Email уезжала, а названия событий крошились по одному слову. На телефоне ужимаем колонки-галочки и уменьшаем отступы, событию достаётся почти вся ширина; заголовки каналов мельче. Все правки — только в phone-media (<600px), десктоп не затронут. Проверено замерами DOM + скриншотами на 390px; тесты затронутых компонентов зелёные. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
113 lines
3.9 KiB
Vue
113 lines
3.9 KiB
Vue
<template>
|
||
<v-dialog v-model="open" max-width="560" :fullscreen="isPhone" scrollable>
|
||
<v-card>
|
||
<v-card-title>Дни сбора лидов — для {{ count }} проектов</v-card-title>
|
||
<v-card-text>
|
||
<div class="mb-4">
|
||
<div class="text-caption text-success font-weight-medium mb-2">➕ Добавить дни</div>
|
||
<div class="d-flex ga-2 day-row">
|
||
<v-btn
|
||
v-for="d in WEEKDAYS"
|
||
:key="`add-${d.bit}`"
|
||
:data-testid="`day-add-${d.bit}`"
|
||
:color="addMask & d.bit ? 'success' : undefined"
|
||
:variant="addMask & d.bit ? 'flat' : 'outlined'"
|
||
size="small"
|
||
@click="toggleAdd(d.bit)"
|
||
>{{ d.short }}</v-btn
|
||
>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-caption text-error font-weight-medium mb-2">➖ Убрать дни</div>
|
||
<div class="d-flex ga-2 day-row">
|
||
<v-btn
|
||
v-for="d in WEEKDAYS"
|
||
:key="`remove-${d.bit}`"
|
||
:data-testid="`day-remove-${d.bit}`"
|
||
:color="removeMask & d.bit ? 'error' : undefined"
|
||
:variant="removeMask & d.bit ? 'flat' : 'outlined'"
|
||
size="small"
|
||
@click="toggleRemove(d.bit)"
|
||
>{{ d.short }}</v-btn
|
||
>
|
||
</div>
|
||
</div>
|
||
</v-card-text>
|
||
<v-card-actions>
|
||
<v-spacer />
|
||
<v-btn data-testid="cancel" @click="open = false">Отмена</v-btn>
|
||
<v-btn color="primary" data-testid="apply" :disabled="addMask === 0 && removeMask === 0" @click="apply"
|
||
>Применить к {{ count }}</v-btn
|
||
>
|
||
</v-card-actions>
|
||
</v-card>
|
||
</v-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch } from 'vue';
|
||
import { WEEKDAYS } from '../../constants/weekdays';
|
||
import { useLayoutTier } from '../../composables/useLayoutTier';
|
||
|
||
// Телефон: на весь экран (ряд кнопок дней недели не влезал в узкий модал).
|
||
const { isPhone } = useLayoutTier();
|
||
|
||
const props = defineProps<{ modelValue: boolean; count: number }>();
|
||
const emit = defineEmits<{
|
||
'update:modelValue': [value: boolean];
|
||
apply: [payload: { add: number; remove: number }];
|
||
}>();
|
||
|
||
const open = ref(props.modelValue);
|
||
const addMask = ref(0);
|
||
const removeMask = ref(0);
|
||
|
||
watch(
|
||
() => props.modelValue,
|
||
(val) => {
|
||
open.value = val;
|
||
if (val) {
|
||
addMask.value = 0;
|
||
removeMask.value = 0;
|
||
}
|
||
},
|
||
);
|
||
|
||
watch(open, (val) => {
|
||
emit('update:modelValue', val);
|
||
});
|
||
|
||
function toggleAdd(bit: number) {
|
||
addMask.value ^= bit;
|
||
if (addMask.value & bit) removeMask.value &= ~bit;
|
||
}
|
||
|
||
function toggleRemove(bit: number) {
|
||
removeMask.value ^= bit;
|
||
if (removeMask.value & bit) addMask.value &= ~bit;
|
||
}
|
||
|
||
function apply() {
|
||
emit('apply', { add: addMask.value, remove: removeMask.value });
|
||
addMask.value = 0;
|
||
removeMask.value = 0;
|
||
open.value = false;
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* Телефон: 7 кнопок дней (ПН…ВС) в d-flex не влезали — СБ/ВС уезжали за край.
|
||
Делим ряд поровну между кнопками, чтобы все семь помещались в ширину. */
|
||
@media (max-width: 599.98px) {
|
||
.day-row {
|
||
width: 100%;
|
||
}
|
||
.day-row > .v-btn {
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
padding-inline: 0;
|
||
}
|
||
}
|
||
</style>
|