Merge pull request #5908 from webkom/readme-revamp

README REVAMP

Author: celiacisternas

lego-webapp/pages/bdb/company-interest/CompanyInterestForm.module.css

@@ -62,3 +62,28 @@
 .label {
   color: var(--danger-color);
 }
+
+.readMe :global([class*='heading']) {
+  font-size: var(--font-size-lg);
+}
+
+.readMe :global([class*='thumbnailContainer']) {
+  padding-top: 0px;
+  margin: 0px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, min-content);
+  gap: var(--spacing-xs);
+  overflow: hidden;
+
+  @media (--mobile-device) {
+    gap: var(--spacing-xs);
+  }
+
+  @media (--small-viewport) {
+    gap: var(--spacing-xs);
+  }
+}
+.readMe {
+  padding-top: 25px;
+}

lego-webapp/pages/bdb/company-interest/CompanyInterestForm.tsx

@@ -22,6 +22,7 @@ import SubmissionError from '~/components/Form/SubmissionError';
 import { SubmitButton } from '~/components/Form/SubmitButton';
 import ToggleSwitch from '~/components/Form/ToggleSwitch';
 import { readmeIfy } from '~/components/ReadmeLogo';
+import LatestReadme from '~/pages/index/LatestReadme';
 import {
   fetchSemesters,
   fetchSemestersForInterestform,
@@ -31,6 +32,7 @@ import {
   fetchCompanyInterest,
   updateCompanyInterest,
 } from '~/redux/actions/CompanyInterestActions';
+import { fetchReadmes } from '~/redux/actions/FrontpageActions';
 import { useAppDispatch, useAppSelector } from '~/redux/hooks';
 import { selectCompanyInterestById } from '~/redux/slices/companyInterest';
 import {
@@ -52,6 +54,7 @@ import {
   COMPANY_TYPES,
   EVENTS,
   FORM_LABELS,
+  OTHER_DESCRIPTIONS,
   OTHER_OFFERS,
   SURVEY_OFFERS,
   TARGET_GRADES,
@@ -69,8 +72,10 @@ import {
   sortSemesterChronologically,
   surveyOffersToString,
   targetGradeToString,
+  othersDescriptionToString,
 } from './utils';
 import type { ReactNode } from 'react';
+
 import type { DetailedCompanyInterest } from '~/redux/models/CompanyInterest';
 import type CompanySemester from '~/redux/models/CompanySemester';
 
@@ -184,11 +189,20 @@ const OtherBox = ({
         label={readmeIfy(OTHER_OFFERS[otherOffersToString(key)][language])}
         type="checkbox"
         component={CheckBox.Field}
+        description={
+          OTHER_DESCRIPTIONS[othersDescriptionToString(key)][language]
+        }
       />
     ))}
   </Flex>
 );
 
+const readMe = (
+  <Flex className={styles.readMe}>
+    <LatestReadme expandedInitially={true} />
+  </Flex>
+);
+
 const CollaborationBox = ({
   fields,
   language,
@@ -339,6 +353,10 @@ const CompanyInterestForm = ({ language }: Props) => {
     [companyInterestId, edit],
   );
 
+  usePreparedEffect('fetchReadmes', () => dispatch(fetchReadmes(2)), [
+    dispatch,
+  ]);
+
   const allEvents = Object.keys(EVENTS);
   const allOtherOffers = Object.keys(OTHER_OFFERS);
   const allCollaborations = Object.keys(COLLABORATION_TYPES);
@@ -742,6 +760,7 @@ const CompanyInterestForm = ({ language }: Props) => {
                       component={OtherBox}
                     />
                   </MultiSelectGroup>
+                  {readMe}
                 </Flex>
               </Flex>
               <div className={styles.topline} />

lego-webapp/pages/bdb/company-interest/Translations.ts

@@ -205,6 +205,19 @@ export const COLLABORATION_DESCRIPTIONS = {
   },
 };
 
+export const OTHER_DESCRIPTIONS = {
+  ad_readme: {
+    norwegian:
+      'readme er Gløshaugens største linjeforeningsmagasin, som kommer ut tre ganger i semesteret, og vi har et opplag på 500 eksemplarer hver utgave. Magasinet er gratis, distribueres på hele NTNUs campus Gløshaugen, og når ut til over 900 studenter innenfor datateknologi, cybersikkerhet, datakommunikasjon og informasjonsteknologi.',
+    english:
+      'readme is the largest student association magazine at Gløshaugen. It is published three times per semester, with a print run of 500 copies per issue. The magazine is free, distributed across NTNU’s Gløshaugen campus, and reaches more than 900 students in computer science, cyber security, data communications, and information technology',
+  },
+  prof_social_media: {
+    norwegian: '',
+    english: '',
+  },
+};
+
 export const TARGET_GRADES = {
   '1': {
     norwegian: '1. klasse',

lego-webapp/pages/bdb/company-interest/utils.tsx

@@ -8,6 +8,7 @@ import {
   OTHER_OFFERS,
   TARGET_GRADES,
   COLLABORATION_DESCRIPTIONS,
+  OTHER_DESCRIPTIONS,
 } from './Translations';
 import type CompanySemester from '~/redux/models/CompanySemester';
 
@@ -86,6 +87,9 @@ export const otherOffersToString = (offer) =>
 export const collaborationToString = (collab) =>
   Object.keys(COLLABORATION_TYPES)[Number(collab.charAt(collab.length - 2))];
 
+export const othersDescriptionToString = (others) =>
+  Object.keys(OTHER_DESCRIPTIONS)[Number(others.charAt(others.length - 2))];
+
 export const targetGradeToString = (targetGrade) =>
   Object.keys(TARGET_GRADES)[
     Number(targetGrade.charAt(targetGrade.length - 2))

lego-webapp/pages/index/LatestReadme.tsx

@@ -20,7 +20,6 @@ const LatestReadme = ({
   displayCount = 4,
 }: Props) => {
   const readmes = useAppSelector((state) => state.readme);
-
   return (
     <Card className={styles.latestReadme} style={style}>
       <Accordion