Верстка страницы со списком студентов #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",
"main": "./src/index.tsx",
"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:prod": "npm run clean && ijl-cli build",
"clean": "rimraf dist",

View File

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

View File

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

View File

@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef, useMemo } from 'react'
import { useParams, Link } from 'react-router-dom'
import dayjs from 'dayjs'
import QRCode from 'qrcode'
import { sha256 } from 'js-sha256'
import { getConfigValue, getNavigationsValue } from '@ijl/cli'
import {
Box,
@ -21,10 +22,20 @@ import {
AddMissedButton,
UnorderList,
BreadcrumbsWrapper,
Avatar,
} from './style'
import { api } from '../__data__/api/api'
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 { lessonId, courseId } = useParams()
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])
return (
@ -110,7 +121,7 @@ const LessonDetail = () => {
</BreadcrumbItem>
</Breadcrumb>
</BreadcrumbsWrapper>
<Container maxW="container.xl" centerContent px="200">
<Container maxW="2280px">
<VStack align="left">
<Heading as="h3" mt="4" mb="3">
Тема занятия:
@ -125,7 +136,7 @@ const LessonDetail = () => {
человек
</Box>
</VStack>
<HStack spacing="8">
<HStack spacing="8" sx={{ flexDirection: { sm: 'column', md: 'row' }}} >
<a href={userUrl}>
<QRCanvas ref={canvRef} />
</a>
@ -133,7 +144,12 @@ const LessonDetail = () => {
{studentsArr.map((student) => (
<LessonItem key={student.sub} warn={!student.present}>
<Lessonname>
<Avatar
src={student.picture || getGravatarURL(student.email, null)}
/>
<p style={{ marginTop: 6 }}>
{student.name || student.preferred_username}{' '}
</p>
{!student.present && (
<AddMissedButton
onClick={() => manualAdd({ lessonId, user: student })}

View File

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