New APIs implementation and various enhancements (#414)

* Handle extra groups APIs response on /groups section Remove old models no longer needed Restructure group items components * Replace underscores with hyphens front-end side Handle eventual redirects * Update [slug].tsx * Better typing in GroupItem component * Remove university groups images * Handle students associations results Add correct image URL to extra groups * Update Requests.ts * Update Faq.ts * Update some models * Some fixes Fix group types visualization on /courses page Add sticky behaviour to rules sub headers (#406) Add global state for header pin state Update metadata for university section * Groups section overhaul #409 * Pages UI/UX and performance overhaul Improve performance Improve group types selector Improve subheaders behaviour in degree page Improve UX and degree resources research Improve services page #352 #407 #404 * Fix google translation break client render #395 * Restructure organization page * Improve typography * Update organization.tsx * Setup new endpoint for featured groups * Format users_count number for groups cards * Improve cards style in services page * Update organization.tsx
StudentiUniMi · Oct 22, 2023 · a15f23c · a15f23c
1 parent 40d30ec
commit a15f23c
Show file tree

Hide file tree

Showing 74 changed files with 856 additions and 935 deletions.
diff --git a/AUTHORS b/AUTHORS
@@ -1,12 +1,8 @@
 Project maintainers:
 
-    Giuseppe Del Campo <[email protected]>
+    Giuseppe Del Campo <[email protected]>
     Marco Aceti <[email protected]>
-    Manuele Lucchi <[email protected]>
-
 
 Contributors:
 
-    Giuseppe Roberti <>
-    Davide Busolin <>
-    Roberto Pinotti <>
+    https://github.com/StudentiUniMi/website/graphs/contributors
diff --git a/components/Atoms/Contributors.tsx b/components/Atoms/Contributors.tsx
diff --git a/components/Atoms/ErrorMessage.tsx b/components/Atoms/ErrorMessage.tsx
@@ -6,10 +6,11 @@
 
 import React from 'react';
 import LocalizationService from "../../services/LocalizationService";
+import JsxParser from 'react-jsx-parser';
+import Image from 'next/image';
 import { semibold } from '../../services/Fonts';
-import { Text, Image, Icon, Link, useTheme } from '@fluentui/react';
+import { Text, Icon, Link, useTheme } from '@fluentui/react';
 import { Container } from 'react-bootstrap';
-import JsxParser from 'react-jsx-parser';
 
 interface Props { error: boolean };
 
@@ -37,7 +38,14 @@ const ErrorMessage = (props: Props) => {
                 {locale?.errorOccured}
             </Text>
             <div style={{ marginLeft: 'auto', marginRight: 'auto' }}>
-                <Image id="not-found" alt="Not found" src={'/images/message/error.png'} style={{ display: 'inline', width: '35%', marginBottom: 5 }} />
+                <Image 
+                    id="not-found" 
+                    alt="Not found" 
+                    src={'/images/message/error.png'} 
+                    objectFit={'contain'}
+                    width={250}
+                    height={250} 
+                />
             </div>
             <JsxParser bindings={{ theme: theme, semibold: semibold }} components={{ Text, Link, Icon }} jsx={locale?.errorContactAdmin} />
         </div>

diff --git a/components/Atoms/GroupTypes.tsx b/components/Atoms/GroupTypes.tsx
@@ -1,7 +1,8 @@
-import { Text, Image, useTheme, mergeStyleSets } from '@fluentui/react';
+import { Text, useTheme, mergeStyleSets } from '@fluentui/react';
 import { Container } from "react-bootstrap";
 import { semibold } from "services/Fonts";
 import { CSSProperties } from 'react';
+import Image from 'next/image';
 import GroupType from "models/GroupType";
 import GroupTypesData from '../../data/GroupTypes.json';
 import LocalizationService from 'services/LocalizationService';
@@ -16,7 +17,7 @@ const GroupTypes = (props: Props) => {
     var theme = useTheme();
     var language: string = LocalizationService.getLanguage() as string;
 
-    const groupTypes: Array<GroupType> = props.page === "courses" ? GroupTypesData.filter(g => g.name['it'] !== "Associazioni studentesche") : GroupTypesData;
+    const groupTypes: Array<GroupType> = props.page === "courses" ? GroupTypesData.filter(g => g.href !== '/courses') : GroupTypesData;
 
     const groupTypesStyle: CSSProperties = {
         justifyContent: 'center',
@@ -50,11 +51,17 @@ const GroupTypes = (props: Props) => {
         <Container> 
             <div className="text-center">
                 <div className="group-types-selector d-flex flex-wrap flex-row" style={groupTypesStyle}>
-                    {groupTypes.map((g:GroupType, i: number) => (
+                    {groupTypes.map((g: GroupType, i: number) => (
                         <a href={g.href} className="text-decoration-none" key={i}>
                             <div className={groupTypeStyle.root + " group-type-selector"}>
-                                <div className="d-flex flex-grow-1 align-items-center justify-content-center">
-                                    <Image src={g.image} alt={g.name[language]} style={{ width: 120, margin: '0 auto' }} />
+                                <div className="d-flex flex-grow-1 align-items-center justify-content-center mb-2">
+                                    <Image 
+                                        src={g.image} 
+                                        alt={g.name[language]} 
+                                        objectFit={'contain'}
+                                        width={120}
+                                        height={100}
+                                    />
                                 </div>
                                 <Text variant="large" styles={semibold}>{g.name[language]}</Text>
                             </div>

diff --git a/components/Atoms/Message.tsx b/components/Atoms/Message.tsx
@@ -4,9 +4,10 @@
  * @author Giuseppe Del Campo
  */
 
-import { Text, Image, Icon, useTheme } from '@fluentui/react';
+import { Text, Icon, useTheme } from '@fluentui/react';
 import { semibold } from '../../services/Fonts';
 import { Container } from 'react-bootstrap';
+import Image from 'next/image';
 
 interface Props { text: string };
 
@@ -17,7 +18,14 @@ const Message = (props: Props) => {
     const InfoMessage = () => (
         <div style={messageBarStyles} className="text-center">
             <div style={{ marginLeft: 'auto', marginRight: 'auto' }}>
-                <Image id="not-found" alt="Not found" src={'/images/message/not-found.png'} style={{ display: 'inline', width: '60%', marginBottom: 10 }} />
+                <Image 
+                    id="not-found" 
+                    alt="Not found" 
+                    src={'/images/message/not-found.png'} 
+                    objectFit={'contain'}
+                    width={175}
+                    height={175} 
+                />
             </div>
             <Text variant="medium" styles={semibold}>
                 <Icon iconName="Info" style={{ fontSize: 12, marginRight: 10 }} />

diff --git a/components/Atoms/PrivacyPolicyDialog.tsx b/components/Atoms/PrivacyPolicyDialog.tsx
@@ -1,6 +1,7 @@
-import { Text, useTheme, IIconProps, DialogType, Dialog, DialogFooter, PrimaryButton, Image, Checkbox, DefaultButton } from '@fluentui/react';
+import { Text, useTheme, IIconProps, DialogType, Dialog, DialogFooter, PrimaryButton, Checkbox, DefaultButton } from '@fluentui/react';
 import { semibold } from '../../services/Fonts';
 import { useContext, useState } from 'react';
+import Image from 'next/image';
 import LocalizationService from 'services/LocalizationService';
 import GlobalContext from 'services/GlobalContext';
 import JsxParser from 'react-jsx-parser';
@@ -32,7 +33,13 @@ const PrivacyPolicyDialog = () => {
                 </Text>
 
                 <div style={{ display: 'flex', justifyContent: 'center' }}>
-                    <Image src={'/images/privacy_policy.png'} alt="Privacy policy" style={{ width: 250 }} />
+                    <Image 
+                        src={'/images/privacy_policy.png'} 
+                        alt="Privacy policy" 
+                        objectFit={'contain'}
+                        width={250}
+                        height={176} 
+                    />
                 </div>
 
                 <div className="p-3 d-flex flex-column" style={{ backgroundColor: theme.palette.neutralLighter, borderRadius: 8, gap: 10 }}>

diff --git a/components/Courses/AdminsList.tsx b/components/Courses/AdminsList.tsx
@@ -3,13 +3,14 @@ import { Persona, PersonaSize, Link, Text, useTheme } from '@fluentui/react';
 import { Container } from 'react-bootstrap';
 import { semibold } from '../../services/Fonts';
 import { Icon } from '@fluentui/react';
-import React, { useEffect, useState } from "react";
+import React, { CSSProperties, useContext, useEffect, useState } from "react";
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 import ErrorMessage from "../Atoms/ErrorMessage";
 import Message from '../Atoms/Message';
 import LocalizationService from "../../services/LocalizationService";
 import Chip from 'components/Atoms/Chip';
+import GlobalContext from 'services/GlobalContext';
 
 interface Props { admins: Admin[], errorLoadingAdmins: boolean };
 
@@ -20,6 +21,19 @@ const AdminsList = (props: Props) => {
     let admins: Admin[] = props.admins;
     let errorLoadingAdmins: boolean = props.errorLoadingAdmins;
 
+    const { isHeaderPinned } = useContext(GlobalContext);
+
+    const subHeader: CSSProperties = { 
+        backgroundColor: theme.palette.neutralLighter, 
+        borderTop: `1px solid ${theme.palette.neutralQuaternary}`,
+        borderBottom: `1px solid ${theme.palette.neutralQuaternary}`,
+        padding: '10px 0px', 
+        position: 'sticky',
+        top: isHeaderPinned ? 44 : 0,
+        transition: 'top 0.2s ease-in-out 0s',
+        zIndex: 2
+    };
+
     const [domLoaded, setDomLoaded] = useState<boolean>(false);
 
     const buildAdminsNumberString = (n: number) => {
@@ -44,7 +58,7 @@ const AdminsList = (props: Props) => {
 
     return (
         <div className="degree-admins mb-4" id="admins">
-            <div className="pb-2 pt-2 mb-4" style={{ backgroundColor: theme.palette.neutralLighter }}>
+            <div className="pb-2 pt-2 mb-4" style={subHeader}>
                 <Container>
                     <div className="d-flex flex-row align-items-center" style={{ gap: 5 }}>
                         <Text variant="medium" styles={semibold}>

diff --git a/components/Courses/DegreeInformations.tsx b/components/Courses/DegreeInformations.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties, useContext } from "react";
 import { semibold } from '../../services/Fonts';
 import { Text, Icon, useTheme } from '@fluentui/react';
 import { Container } from 'react-bootstrap';
@@ -7,6 +7,7 @@ import Message from '../Atoms/Message';
 import ItemsGroup, { Item } from "components/Atoms/ItemsGroup";
 import { DegreeInformation } from "models/DegreeInformation";
 import Chip from "components/Atoms/Chip";
+import GlobalContext from "services/GlobalContext";
 
 interface Props { degreeInformations: any[] };
 
@@ -15,6 +16,8 @@ const DegreeInformations= (props: Props) => {
     const locale = LocalizationService.strings();
     var language: string | undefined = LocalizationService.getLanguage();
 
+    const { isHeaderPinned } = useContext(GlobalContext);
+
     const degreeInformations: Array<DegreeInformation> = props.degreeInformations;
 
     const items: Array<Item> = degreeInformations?.map((x) => ({
@@ -23,6 +26,17 @@ const DegreeInformations= (props: Props) => {
         iconName: x.icon
     }));
 
+    const subHeader: CSSProperties = { 
+        backgroundColor: theme.palette.neutralLighter, 
+        borderTop: `1px solid ${theme.palette.neutralQuaternary}`,
+        borderBottom: `1px solid ${theme.palette.neutralQuaternary}`,
+        padding: '10px 0px', 
+        position: 'sticky',
+        top: isHeaderPinned ? 44 : 0,
+        transition: 'top 0.2s ease-in-out 0s',
+        zIndex: 2
+    };
+
     const buildDegreeInformationsNumberString = (n: number) => {
         if (n === 0) {
             switch (language!) {
@@ -43,7 +57,7 @@ const DegreeInformations= (props: Props) => {
 
     return (   
         <div className='degree-informations mb-4' id="redirects">
-            <div className="pb-2 pt-2 mb-4" style={{ backgroundColor: theme.palette.neutralLighter }}>
+            <div className="pb-2 pt-2 mb-4" style={subHeader}>
                 <Container>
                     <div className="d-flex flex-row align-items-center" style={{ gap: 5 }}>
                         <Text variant="medium" styles={semibold}>