students list layout

package.json

@@ -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",

src/__data__/model.ts

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

src/app.tsx

@@ -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 {

src/pages/lesson-details.tsx

@@ -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 })}

src/pages/style.ts

@@ -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;
+          background-color: #000000;
-          color: #919191;
+          opacity: .7;
-          box-shadow: inset 3px 2px 7px #c9b5a9;
+          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;
+`;