Merge pull request #3793 from webkom/ivarnakken/aba-395-improve-nytti…

…ge-lenker-on-public
webkom · Apr 17, 2023 · 6df20b6 · 6df20b6
2 parents b3da08d + 91b0deb
commit 6df20b6
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 79 deletions.
diff --git a/app/assets/frontpage-graphic-buddyweek.png b/app/assets/frontpage-graphic-buddyweek.png
diff --git a/app/assets/frontpage-graphic-data.png b/app/assets/frontpage-graphic-data.png
diff --git a/app/assets/frontpage-graphic-for-companies.png b/app/assets/frontpage-graphic-for-companies.png
diff --git a/app/assets/frontpage-graphic-komtek.png b/app/assets/frontpage-graphic-komtek.png
diff --git a/app/assets/frontpage-graphic-readme.png b/app/assets/frontpage-graphic-readme.png
diff --git a/app/components/Button/Button.css b/app/components/Button/Button.css
@@ -171,6 +171,23 @@
   cursor: pointer;
 }
 
+.ghost {
+  background: none;
+  box-shadow: none;
+  border: 1px solid var(--button-dark-background);
+  color: var(--button-dark-background);
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--button-dark-box-shadow-focus);
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--button-dark-background);
+    border-color: var(--button-dark-background);
+    color: var(--button-color);
+  }
+}
+
 .small {
   padding: 10px 15px;
   font-size: 0.8rem;

diff --git a/app/components/Button/index.tsx b/app/components/Button/index.tsx
@@ -33,6 +33,9 @@ type Props = {
 
   /** Make it look like a link */
   flat?: boolean;
+
+  /** Ghost button styling */
+  ghost?: boolean;
 };
 
 /**
@@ -53,6 +56,7 @@ function Button({
   danger = false,
   success = false,
   flat = false,
+  ghost = false,
   ...rest
 }: Props & ButtonHTMLAttributes<HTMLButtonElement>) {
   return (
@@ -66,6 +70,7 @@ function Button({
               dark && styles.dark,
               danger && styles.danger,
               success && styles.success,
+              ghost && styles.ghost,
               className
             )
       }

diff --git a/app/components/Card/Card.css b/app/components/Card/Card.css
@@ -48,4 +48,5 @@ html[data-theme='dark'] .danger a:hover {
 .header {
   font-weight: 600;
   font-size: var(--font-size-large);
+  line-height: 1.3;
 }
diff --git a/app/components/Card/index.tsx b/app/components/Card/index.tsx
@@ -4,8 +4,13 @@ import Flex from 'app/components/Layout/Flex';
 import styles from './Card.css';
 import type { HTMLAttributes, ReactNode } from 'react';
 
-const CardHeader = ({ children }: { children: ReactNode }) => (
-  <div className={styles.header}>{children}</div>
+type CardHeaderProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+const CardHeader = ({ children, className }: CardHeaderProps) => (
+  <div className={cx(styles.header, className)}>{children}</div>
 );
 
 type Props = {

diff --git a/app/routes/overview/components/PublicFrontpage.css b/app/routes/overview/components/PublicFrontpage.css
@@ -35,35 +35,25 @@
   margin: auto;
 }
 
-.facebookIframeContainer {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.facebookIframe {
-  border: none;
-  overflow: hidden;
-  height: 500px;
-  width: 340px;
-}
-
-.usefulLinks {
-  composes: rootCardStyle;
-  flex: 1.8;
-  margin-right: 30px;
+.usefulLink {
+  width: 325px;
+  height: 400px;
+  line-height: 1.3;
 }
 
-.usefulLinks a {
-  font-size: 20px;
+.usefulLinkHeader {
+  height: 14%;
 }
 
-.usefulLinks li {
-  margin-bottom: 15px;
+.usefulLinkDescription {
+  color: var(--lego-font-color);
+  height: 30%;
 }
 
-.linkDescription {
-  margin-left: 30px;
+.usefulLinkGraphic {
+  margin: 0 auto;
+  width: auto;
+  height: 40%;
 }
 
 .latestReadme {

diff --git a/app/routes/overview/components/PublicFrontpage.tsx b/app/routes/overview/components/PublicFrontpage.tsx
@@ -1,9 +1,14 @@
-import { Link } from 'react-router-dom';
+import buddyWeekGraphic from 'app/assets/frontpage-graphic-buddyweek.png';
+import dataGraphic from 'app/assets/frontpage-graphic-data.png';
+import forCompaniesGraphic from 'app/assets/frontpage-graphic-for-companies.png';
+import komtekGraphic from 'app/assets/frontpage-graphic-komtek.png';
+import readmeGraphic from 'app/assets/frontpage-graphic-readme.png';
 import netcompany from 'app/assets/netcompany_dark.png';
 import AuthSection from 'app/components/AuthSection/AuthSection';
+import Button from 'app/components/Button';
 import Card from 'app/components/Card';
 import { Image } from 'app/components/Image';
-import { Container } from 'app/components/Layout';
+import { Container, Flex } from 'app/components/Layout';
 import { readmeIfy } from 'app/components/ReadmeLogo';
 import type { Readme } from 'app/models';
 import type { WithDocumentType } from 'app/reducers/frontpage';
@@ -68,10 +73,8 @@ const PublicFrontpage = ({ frontpage, readmes }: Props) => {
           collapsible={false}
           style={{ gridArea: 'readme' }}
         />
-        <Card style={{ gridArea: 'links' }}>
-          <UsefulLinks />
-        </Card>
       </Container>
+      <UsefulLinks />
     </Container>
   );
 };
@@ -117,59 +120,81 @@ const LatestArticle = ({ frontpage }: Pick<Props, 'frontpage'>) => (
   </>
 );
 
+const usefulLinksConf = [
+  {
+    title: 'Fadderperioden 2022',
+    image: buddyWeekGraphic,
+    description:
+      'Abakus arrangerer fadderperioden for alle nye studenter, og her finner du informasjon om fadderperioden 2022.',
+    buttonText: 'Les deg opp',
+    link: '/articles/414',
+    isInternalLink: true,
+  },
+  {
+    title: 'Datateknologi',
+    image: dataGraphic,
+    description:
+      'Datateknologi er en helt sentral del av alle fremtidsrettede teknologier; som for eksempel kunstig intelligens, medisinsk teknologi og søkemotorteknologi.',
+    buttonText: 'Sjekk ut studiet',
+    link: 'https://www.ntnu.no/studier/mtdt',
+    isInternalLink: false,
+  },
+  {
+    title: 'Kommunikasjonsteknologi og digital sikkerhet',
+    image: komtekGraphic,
+    description:
+      'Vi bruker stadig mer av livene våre på nett, på jobb som i fritid. Kommunikasjonsteknologi og digital sikkerhet blir stadig viktigere i en digital verden.',
+    buttonText: 'Sjekk ut studiet',
+    link: 'https://www.ntnu.no/studier/mtkom',
+    isInternalLink: false,
+  },
+  {
+    title: 'For bedrifter',
+    image: forCompaniesGraphic,
+    description:
+      "Her finner du som bedriftsrepresentant informasjon om Abakus' prosedyrer for bedriftspresentasjoner, og andre nyttige fakta.",
+    buttonText: 'Undersøk muligheter',
+    link: '/pages/bedrifter/for-bedrifter',
+    isInternalLink: true,
+  },
+  {
+    title: 'readme',
+    image: readmeGraphic,
+    description:
+      'Abakus har sitt eget magasin, readme. Her kan du lese om hva vi driver med, og få et innblikk i oss som organisasjon.',
+    buttonText: 'Utforsk magasiner',
+    link: 'https://readme.abakus.no/',
+    isInternalLink: false,
+  },
+];
+
 const UsefulLinks = () => (
   <>
     <h2 className="u-mb">Nyttige lenker</h2>
-    <ul>
-      <li>
-        <Link to="/articles/414">
-          <i className="fa fa-caret-right" /> Fadderperioden 2022
-        </Link>
-        <div className={styles.linkDescription}>
-          Informasjon om fadderperioden 2022
-        </div>
-      </li>
-      <li>
-        <a href="https://www.ntnu.no/studier/mtdt" target="blank">
-          <i className="fa fa-caret-right" /> Datateknologi
-        </a>
-        <div className={styles.linkDescription}>
-          Datateknologi er en helt sentral del av alle fremtidsrettede
-          teknologier, som for eksempel kunstig intelligens, medisinsk teknologi
-          og søkemotorteknologi.
-        </div>
-      </li>
-      <li>
-        <a href="http://www.ntnu.no/studier/mtkom" target="blank">
-          <i className="fa fa-caret-right" /> Kommunikasjonsteknologi og digital
-          sikkerhet
-        </a>
-        <div className={styles.linkDescription}>
-          Vi bruker stadig mer av livene våre på nett, på jobb som i fritid.
-          Kommunikasjonsteknologi og digital sikkerhet blir stadig viktigere i
-          en digital verden.
-        </div>
-      </li>
-      <li>
-        <Link to="/pages/bedrifter/for-bedrifter">
-          <i className="fa fa-caret-right" /> For bedrifter
-        </Link>
-        <div className={styles.linkDescription}>
-          Her finner du som bedriftsrepresentant informasjon om Abakus{"' "}
-          prosedyrer for bedriftspresentasjoner og andre nyttige fakta.
-        </div>
-      </li>
-      <li>
-        <a href="https://readme.abakus.no">
-          <i className="fa fa-caret-right" /> {readmeIfy('readme')}
+
+    <Flex wrap justifyContent="center" gap={40}>
+      {usefulLinksConf.map((item) => (
+        <a
+          href={item.link}
+          key={item.title}
+          rel="noreferrer"
+          target={item.isInternalLink ? '_self' : '_blank'}
+        >
+          <Card isHoverable className={styles.usefulLink}>
+            <Card.Header className={styles.usefulLinkHeader}>
+              {readmeIfy(item.title)}
+            </Card.Header>
+            <Image
+              src={item.image}
+              alt={item.title}
+              className={styles.usefulLinkGraphic}
+            />
+            <p className={styles.usefulLinkDescription}>{item.description}</p>
+            <Button ghost>{item.buttonText}</Button>
+          </Card>
         </a>
-        <div className={styles.linkDescription}>
-          Abakus har sitt eget magasin skrevet av {readmeIfy('readme')}. Her kan
-          du lese om hva abakus driver med og få et innblikk i abakus som
-          organisasjon.
-        </div>
-      </li>
-    </ul>
+      ))}
+    </Flex>
   </>
 );