Верстка страницы со списком студентов #20

Merged
primakov merged 2 commits from feature/students-layout into master 2024-04-04 10:36:50 +03:00
5 changed files with 46 additions and 12 deletions
Showing only changes of commit 927bf3929d - Show all commits

View File

@ -4,7 +4,7 @@
"description": "inno-js platform journal ui repo", "description": "inno-js platform journal ui repo",
"main": "./src/index.tsx", "main": "./src/index.tsx",
"scripts": { "scripts": {
"start": "start chrome http://ift-b1.kc.inno-js.test/journal.pl && ijl-cli server --port=80", "start": "start chrome http://ift-b1.kc.inno-js.test/journal.pl & ijl-cli server --port=80",
"build": "npm run clean && ijl-cli build --dev", "build": "npm run clean && ijl-cli build --dev",
"build:prod": "npm run clean && ijl-cli build", "build:prod": "npm run clean && ijl-cli build",
"clean": "rimraf dist", "clean": "rimraf dist",

View File

@ -74,6 +74,7 @@ export interface User {
given_name: string; given_name: string;
family_name: string; family_name: string;
email: string; email: string;
picture?: string;
} }
export interface Course { export interface Course {

View File

@ -45,7 +45,7 @@ const App = ({ store }) => {
/* rgba(255, 255, 255, 0) 65% */ /* rgba(255, 255, 255, 0) 65% */
); );
height: 100%; height: 100%;
font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif; /* font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif; */
font-weight: 600; font-weight: 600;
} }
#app { #app {

View File

@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef, useMemo } from 'react'
import { useParams, Link } from 'react-router-dom' import { useParams, Link } from 'react-router-dom'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import QRCode from 'qrcode' import QRCode from 'qrcode'
import { sha256 } from 'js-sha256'
import { getConfigValue, getNavigationsValue } from '@ijl/cli' import { getConfigValue, getNavigationsValue } from '@ijl/cli'
import { import {
Box, Box,
@ -21,10 +22,20 @@ import {
AddMissedButton, AddMissedButton,
UnorderList, UnorderList,
BreadcrumbsWrapper, BreadcrumbsWrapper,
Avatar,
} from './style' } from './style'
import { api } from '../__data__/api/api' import { api } from '../__data__/api/api'
import { User } from '../__data__/model' import { User } from '../__data__/model'
export function getGravatarURL(email, user) {
if (!email) return void 0
const address = String(email).trim().toLowerCase()
const hash = sha256(address)
// Grab the actual image URL
return `https://www.gravatar.com/avatar/${hash}?d=robohash`
}
const LessonDetail = () => { const LessonDetail = () => {
const { lessonId, courseId } = useParams() const { lessonId, courseId } = useParams()
const canvRef = useRef(null) const canvRef = useRef(null)
@ -83,7 +94,7 @@ const LessonDetail = () => {
} }
} }
return allStudents return allStudents.sort((a, b) => (a.present ? -1 : 1))
}, [accessCode?.body, AllStudents.data]) }, [accessCode?.body, AllStudents.data])
return ( return (
@ -110,7 +121,7 @@ const LessonDetail = () => {
</BreadcrumbItem> </BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
</BreadcrumbsWrapper> </BreadcrumbsWrapper>
<Container maxW="container.xl" centerContent px="200"> <Container maxW="2280px">
<VStack align="left"> <VStack align="left">
<Heading as="h3" mt="4" mb="3"> <Heading as="h3" mt="4" mb="3">
Тема занятия: Тема занятия:
@ -125,7 +136,7 @@ const LessonDetail = () => {
человек человек
</Box> </Box>
</VStack> </VStack>
<HStack spacing="8"> <HStack spacing="8" sx={{ flexDirection: { sm: 'column', md: 'row' }}} >
<a href={userUrl}> <a href={userUrl}>
<QRCanvas ref={canvRef} /> <QRCanvas ref={canvRef} />
</a> </a>
@ -133,7 +144,12 @@ const LessonDetail = () => {
{studentsArr.map((student) => ( {studentsArr.map((student) => (
<LessonItem key={student.sub} warn={!student.present}> <LessonItem key={student.sub} warn={!student.present}>
<Lessonname> <Lessonname>
<Avatar
src={student.picture || getGravatarURL(student.email, null)}
/>
<p style={{ marginTop: 6 }}>
{student.name || student.preferred_username}{' '} {student.name || student.preferred_username}{' '}
</p>
{!student.present && ( {!student.present && (
<AddMissedButton <AddMissedButton
onClick={() => manualAdd({ lessonId, user: student })} onClick={() => manualAdd({ lessonId, user: student })}

View File

@ -86,8 +86,13 @@ export const Wrapper = styled.div`
export const UnorderList = styled.ul` export const UnorderList = styled.ul`
padding-left: 0px; padding-left: 0px;
height: 600px; height: 600px;
overflow: auto; /* overflow: auto; */
justify-content: space-evenly;
padding-right: 20px; padding-right: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
` `
export const Svg = styled.svg` export const Svg = styled.svg`
@ -114,22 +119,28 @@ export const LessonItem = styled.li<{ warn?: boolean }>`
box-shadow: 2px 2px 6px #0000005c; box-shadow: 2px 2px 6px #0000005c;
margin-bottom: 12px; margin-bottom: 12px;
transition: all 0.5; transition: all 0.5;
position: relative;
/* padding-bottom: 32px; */
width: 180px;
max-height: 200px;
${(props) => ${(props) =>
props.warn props.warn
? css` ? css`
background-color: #fde3c5; background-color: #000000;
color: #919191; opacity: .7;
box-shadow: inset 3px 2px 7px #c9b5a9; color: #e4e4e4;
` `
: ''} : ''}
` `
export const AddMissedButton = styled.button` export const AddMissedButton = styled.button`
float: right; position: absolute;
bottom: 8px;
right: 12px;
border: none; border: none;
background-color: #00000000; background-color: #00000000;
opacity: 0.1; opacity: 0.2;
:hover { :hover {
cursor: pointer; cursor: pointer;
@ -180,3 +191,9 @@ export const AddButton = styled.button`
box-shadow: 3px 2px 5px #00000038; box-shadow: 3px 2px 5px #00000038;
} }
` `
export const Avatar = styled.img`
width: 96px;
height: 96px;
margin: 0 auto;
`;