Оптимизирована генерация QR-кода в компоненте LessonDetail: добавлена обработка изменения размера окна и улучшена логика очистки канваса. Обновлены стили для QRCanvas для обеспечения квадратного соотношения сторон и адаптивности на мобильных устройствах.
This commit is contained in:
parent
1b337278fe
commit
e66b616ba4
@ -72,17 +72,50 @@ const LessonDetail = () => {
|
||||
|
||||
useEffect(() => {
|
||||
if (!isFetching && isSuccess) {
|
||||
QRCode.toCanvas(
|
||||
canvRef.current,
|
||||
userUrl,
|
||||
{ width: 600 },
|
||||
function (error) {
|
||||
if (error) console.error(error)
|
||||
console.log('success!')
|
||||
},
|
||||
)
|
||||
const generateQRCode = () => {
|
||||
if (!canvRef.current) return;
|
||||
|
||||
// Получаем текущую ширину канваса, гарантируя квадратный QR-код
|
||||
const canvas = canvRef.current;
|
||||
const containerWidth = canvas.clientWidth;
|
||||
|
||||
// Очищаем canvas перед новой генерацией
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Устанавливаем одинаковые размеры для ширины и высоты (1:1)
|
||||
canvas.width = containerWidth;
|
||||
canvas.height = containerWidth;
|
||||
|
||||
QRCode.toCanvas(
|
||||
canvas,
|
||||
userUrl,
|
||||
{
|
||||
width: containerWidth,
|
||||
margin: 1 // Небольшой отступ для лучшей читаемости
|
||||
},
|
||||
function (error) {
|
||||
if (error) console.error(error)
|
||||
console.log('success!')
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
// Генерируем QR-код
|
||||
generateQRCode();
|
||||
|
||||
// Перегенерируем при изменении размера окна
|
||||
const handleResize = () => {
|
||||
generateQRCode();
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}
|
||||
}, [isFetching, isSuccess])
|
||||
}, [isFetching, isSuccess, userUrl])
|
||||
|
||||
const studentsArr = useMemo(() => {
|
||||
let allStudents: (User & { present?: boolean })[] = [
|
||||
@ -146,10 +179,12 @@ const LessonDetail = () => {
|
||||
{t('journal.pl.common.people')}
|
||||
</Box>
|
||||
</VStack>
|
||||
<Stack spacing="8" sx={{ flexDirection: { sm: 'column', md: 'row' } }}>
|
||||
<a href={userUrl}>
|
||||
<QRCanvas ref={canvRef} />
|
||||
</a>
|
||||
<Stack spacing="8" direction={{ base: "column", md: "row" }}>
|
||||
<Box flexShrink={0} alignSelf="center">
|
||||
<a href={userUrl}>
|
||||
<QRCanvas ref={canvRef} />
|
||||
</a>
|
||||
</Box>
|
||||
<StudentList>
|
||||
{isTeacher(user) && studentsArr.map((student) => (
|
||||
<UserCard
|
||||
|
@ -24,10 +24,26 @@ export const StudentList = styled.ul`
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: auto;
|
||||
max-height: 600px;
|
||||
padding-right: 0;
|
||||
}
|
||||
`
|
||||
|
||||
export const QRCanvas = styled.canvas`
|
||||
display: block;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: 450px;
|
||||
min-width: 450px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 300px;
|
||||
min-width: auto;
|
||||
}
|
||||
`
|
||||
|
||||
export const ErrorSpan = styled.span`
|
||||
|
Loading…
x
Reference in New Issue
Block a user