Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

QA - styling #11

Merged
merged 23 commits into from
Apr 5, 2022
Merged

QA - styling #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
3341169
empty space on index page fix
Apr 4, 2022
6e2e73f
same size headers on mobile index page
Apr 4, 2022
30c0de1
all black text/icons -> standard dark grey
Apr 4, 2022
ba6e32d
css module affecting other pages fix
Apr 4, 2022
cb83693
footer color fix
Apr 4, 2022
801357f
font types/weights/sizes fix
Apr 4, 2022
a2097d3
removed unused root variables
Apr 4, 2022
6b3d179
added box-shadow to mobile nav
Apr 4, 2022
7dfd7e4
line-height and max characters in a line fix
Apr 4, 2022
e5653f9
fixed box-shadow not visible when menu closed
Apr 4, 2022
1808ee0
biocard layout fixes
Apr 4, 2022
254c24b
various spacing/margin fixes
Apr 4, 2022
80107e7
biocard cleanup unused code
Apr 5, 2022
6588f13
sorting icon same size and baseline as the header
Apr 5, 2022
9748579
mobile backlink icon fix on small screen sizes
Apr 5, 2022
d6a7465
tall header / page - prevent logo from clutter
Apr 5, 2022
385604e
button box-shadow also on desktop
Apr 5, 2022
08d79a3
studentcard hover effect fix (image "pops" out)
Apr 5, 2022
54286a0
sort icon second fix pixelmania
Apr 5, 2022
bad6e25
Merge branch 'development' into bugfix/42-kvalitetssikring
icanseetime Apr 5, 2022
6e168c0
Merge pull request #43 from icanseetime/bugfix/42-kvalitetssikring
icanseetime Apr 5, 2022
c69529a
fixes after merge
Apr 5, 2022
89939f1
Merge branch 'development' into development
icanseetime Apr 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 26 additions & 40 deletions frontend/src/components/BioCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,42 @@
import React, { useEffect, useState } from "react"
import React from "react"
import SanityImage from "gatsby-plugin-sanity-image"
import SocialLinks from "./SocialLinks"

// Components
import * as styles from "../styles/biocard.module.css"

const BioCard = ({ student }) => {
let match = ""
if (typeof window !== "undefined") {
match = window.matchMedia("(min-width: 900px)").matches
}
const [largeScreenSize, setLargeScreenSize] = useState(match)

useEffect(() => {
if (typeof window !== "undefined") {
window.matchMedia("(min-width: 900px)").addEventListener("change", e => {
setLargeScreenSize(e.matches)
})
}
})

return (
<div className={styles.container}>
<div className={styles.cardContainer}>
{student.name && student.surname && <h2 className={styles.fullName}>
{student.name} {student.middle ? student.middle.charAt(0) + "." : ""}{" "}
{student.surname.charAt(0) + "."}
</h2>}
{student.studyprogramme.title && <p className={styles.studyProgramme}>{student.studyprogramme.title}</p>}
<div className={styles.profileImageContainer}>
{student.image && (
<SanityImage
className={styles.profileImage}
asset={student.image._rawAsset}
alt={`${student.name}`}
/>
)}
</div>
{largeScreenSize && (
<div className={styles.test}>
<SocialLinks links={student.social} />
</div>
{student.name && student.surname && (
<h2 className={styles.fullName}>
{`${student.name} ${student.surname.charAt(0)}.`}
</h2>
)}
{student.studyprogramme.title && (
<p className={styles.studyProgramme}>
{student.studyprogramme.title}
</p>
)}
<span>
<div>
{student.image && (
<SanityImage
className={styles.profileImage}
asset={student.image._rawAsset}
alt={`${student.name}`}
/>
)}
</div>
<div className={styles.bioContainer}>
<p>{student.bio.map(bio => bio.children[0].text)}</p>
</div>
</span>
</div>
<div className={styles.bioContainer}>
<p className={styles.bio}>{student.bio.map((bio) => (bio.children[0].text))}</p>
<div>
<SocialLinks links={student.social} />
</div>
{!largeScreenSize && (
<div className={styles.test}>
<SocialLinks links={student.social} />
</div>
)}
</div>
)
}
Expand Down
22 changes: 11 additions & 11 deletions frontend/src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
import React, { useState, useEffect } from "react";
import { Link } from "gatsby";
import logoDark from "../assets/images/logo-dark.svg";
import logo from "../assets/images/logo.svg";
import React, { useState, useEffect } from "react"
import { Link } from "gatsby"
import logoDark from "../assets/images/logo-dark.svg"
import logo from "../assets/images/logo.svg"

// Style
import * as style from "../styles/header.module.css"

function Navbar() {
const [path, setPath] = useState('');
const [darkMode, setDarkMode] = useState('');
const [path, setPath] = useState("")
const [darkMode, setDarkMode] = useState("")

useEffect(() => {
if (typeof window !== "undefined") {
setPath(window.location.pathname);
setPath(window.location.pathname)
}

let colorScheme = ""
if (typeof window !== "undefined") {
colorScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
setDarkMode(colorScheme);
colorScheme = window.matchMedia("(prefers-color-scheme: dark)").matches
setDarkMode(colorScheme)
}

if (typeof window !== "undefined") {
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", e => {
setDarkMode(e.matches);
setDarkMode(e.matches)
})
}
}, [])

return (
<header className={style.header}>
<header className={`${style.header} ${path === "/" && style.tallHeader}`}>
<nav>
{/* Burger for mobile */}
<input type="checkbox" />
Expand Down
220 changes: 152 additions & 68 deletions frontend/src/pages/about.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,163 @@
import { Link } from 'gatsby';
import React from 'react';
import Layout from '../components/Layout';
import Seo from '../components/Seo';
import BackLink from '../components/BackLink';
import { Link } from "gatsby"
import React from "react"
import Layout from "../components/Layout"
import Seo from "../components/Seo"
import BackLink from "../components/BackLink"

import * as header from "../styles/studyprogramme.module.css";
import * as styles from "../styles/about.module.css";
import * as header from "../styles/studyprogramme.module.css"
import * as styles from "../styles/about.module.css"

function About() {
return (
<Layout>
<Seo title="Om" description="De som er ansvarlige for at siden er oppe og går." />
<BackLink to="/" />
<header className={header.header}><h1 className={styles.h1}>Om</h1></header>
return (
<Layout>
<div className={styles.about}>
<Seo
title="Om"
description="De som er ansvarlige for at siden er oppe og går."
/>
<BackLink to="/" />
<header className={header.header}>
<h1>Om</h1>
</header>
<section>
<h2>Bærekraftansvarlig</h2>
<ul>
<li>
<Link to="/bwu/tom-schrier">Tom Schrier</Link>
</li>
</ul>

<section className={styles.section}>
<h2>Bærekraftansvarlig</h2>
<ul>
<li><Link to='/bwu/tom-schrier'>Tom Schrier</Link></li>
</ul>
<h2>Designansvarlige</h2>
<ul>
<li>
<Link to="/bmed/adam-maximilian-stoffel">
Adam Maximilian Stoffel
</Link>
</li>
<li>
<Link to="/bmed/amalie-bach">Amalie Bach</Link>
</li>
<li>
<Link to="/bmed/andrea-hauge-sandvik">Andrea Hauge Sandvik</Link>
</li>
<li>
<Link to="/bmed/johanne-lyster-strande">
Johanne Lyster Strande
</Link>
</li>
<li>
<Link to="/bmed/martine-egeli">Martine Egeli</Link>
</li>
</ul>

<h2>Designansvarlige</h2>
<ul>
<li><Link to='/bmed/adam-maximilian-stoffel'>Adam Maximilian Stoffel</Link></li>
<li><Link to='/bmed/amalie-bach'>Amalie Bach</Link></li>
<li><Link to='/bmed/andrea-hauge-sandvik'>Andrea Hauge Sandvik</Link></li>
<li><Link to='/bmed/johanne-lyster-strande'>Johanne Lyster Strande</Link></li>
<li><Link to='/bmed/martine-egeli'>Martine Egeli</Link></li>
</ul>
<h2>Fotoansvarlige</h2>
<ul>
<li>
<Link to="/bmed/johanne-lyster-strande">
Johanne Lyster Strande
</Link>
</li>
<li>
<Link to="/bmed/marc-daniel-einebakken">
Marc Daniel Einebakken
</Link>
</li>
<li>
<Link to="/bmed/nora-strom-myklebust">Nora Strøm Myklebust</Link>
</li>
</ul>

<h2>Fotoansvarlige</h2>
<ul>
<li><Link to='/bmed/johanne-lyster-strande'>Johanne Lyster Strande</Link></li>
<li><Link to='/bmed/marc-daniel-einebakken'>Marc Daniel Einebakken</Link></li>
<li><Link to='/bmed/nora-strom-myklebust'>Nora Strøm Myklebust</Link></li>
</ul>
<h2>Informasjonsarkitektur-ansvarlige</h2>
<ul>
<li>
<Link to="/bixd/hanna-hernaes">Hanna Hernæs</Link>
</li>
<li>
<Link to="/bixd/ida-emilie-herfoss">Ida Emilie Herfoss</Link>
</li>
<li>
<Link to="/bixd/linde-helene-stormo">Linde Stormo</Link>
</li>
<li>
<Link to="/bixd/michelle-carina-osnes">
Michelle Carina Osnes
</Link>
</li>
<li>
<Link to="/bixd/sine-uberg">Sine Uberg</Link>
</li>
</ul>

<h2>Informasjonsarkitektur-ansvarlige</h2>
<ul>
<li><Link to='/bixd/hanna-hernaes'>Hanna Hernæs</Link></li>
<li><Link to='/bixd/ida-emilie-herfoss'>Ida Emilie Herfoss</Link></li>
<li><Link to='/bixd/linde-helene-stormo'>Linde Stormo</Link></li>
<li><Link to='/bixd/michelle-carina-osnes'>Michelle Carina Osnes</Link></li>
<li><Link to='/bixd/sine-uberg'>Sine Uberg</Link></li>
</ul>
<h2>Innholdsansvarlige</h2>
<ul>
<li>
<Link to="/bixd/ann-margit-krog">Ann Margit Krog</Link>
</li>
<li>
<Link to="#">Andrea Kristoffersen</Link>
</li>
<li>
<Link to="/bwu/kristian-teppan">Kristian Teppan</Link>
</li>
<li>
<Link to="/bixd/lisa-sofie-edelman-saether">
Lisa Sofie Edelman Sæther
</Link>
</li>
<li>
<Link to="/bwu/sandra-kristiansen-smaaberg">
Sandra Kristiansen Smaaberg
</Link>
</li>
<li>
<Link to="/bwu/simen-tokerod-bergo">Simen Tokerød Bergo</Link>
</li>
<li>
<Link to="/bixd/thomas-hoiby">Thomas Høiby</Link>
</li>
</ul>

<h2>Innholdsansvarlige</h2>
<ul>
<li><Link to='/bixd/ann-margit-krog'>Ann Margit Krog</Link></li>
<li><Link to='#'>Andrea Kristoffersen</Link></li>
<li><Link to='/bwu/kristian-teppan'>Kristian Teppan</Link></li>
<li><Link to='/bixd/lisa-sofie-edelman-saether'>Lisa Sofie Edelman Sæther</Link></li>
<li><Link to='/bwu/sandra-kristiansen-smaaberg'>Sandra Kristiansen Smaaberg</Link></li>
<li><Link to='/bwu/simen-tokerod-bergo'>Simen Tokerød Bergo</Link></li>
<li><Link to='/bixd/thomas-hoiby'>Thomas Høiby</Link></li>
</ul>
<h2>Utviklingsansvarlige</h2>
<ul>
<li>
<Link to="/bwu/cornelius-ottar-sandmael">
Cornelius Ottar Sandmæl
</Link>
</li>
<li>
<Link to="/bwu/glenn-eirik-hansen">Glenn Eirik Hansen</Link>
</li>
<li>
<Link to="/bwu/jostein-o-tollefsrud">
Jostein Ødegårdstuen Tollefsrud
</Link>
</li>
</ul>

<h2>Utviklingsansvarlige</h2>
<ul>
<li><Link to='/bwu/cornelius-ottar-sandmael'>Cornelius Ottar Sandmæl</Link></li>
<li><Link to='/bwu/glenn-eirik-hansen'>Glenn Eirik Hansen</Link></li>
<li><Link to='/bwu/jostein-o-tollefsrud'>Jostein Ødegårdstuen Tollefsrud</Link></li>
</ul>

<h2>Stilarkansvarlige</h2>
<ul>
<li><Link to='/bwu/emil-boen'>Emil Bøen</Link></li>
<li><Link to='/bwu/ida-m-r-gjeitsund'>Ida M. R. Gjeitsund</Link></li>
<li><Link to='/bwu/lena-amdal-larsen'>Lena Amdal-Larsen</Link></li>
<li><Link to='/bwu/leonard-avdullahu'>Leonard Avdullahu</Link></li>
<li><Link to='/bwu/vilde-gunnes-bertelsen'>Vilde Gunnes Bertelsen</Link></li>
</ul>
</section>
</Layout>
);
<h2>Stilarkansvarlige</h2>
<ul>
<li>
<Link to="/bwu/emil-boen">Emil Bøen</Link>
</li>
<li>
<Link to="/bwu/ida-m-r-gjeitsund">Ida M. R. Gjeitsund</Link>
</li>
<li>
<Link to="/bwu/lena-amdal-larsen">Lena Amdal-Larsen</Link>
</li>
<li>
<Link to="/bwu/leonard-avdullahu">Leonard Avdullahu</Link>
</li>
<li>
<Link to="/bwu/vilde-gunnes-bertelsen">
Vilde Gunnes Bertelsen
</Link>
</li>
</ul>
</section>
</div>
</Layout>
)
}

export default About;
export default About
1 change: 0 additions & 1 deletion frontend/src/styles/404.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,4 @@

.container p {
margin-top: 20px;
font-size: 16px;
}
5 changes: 0 additions & 5 deletions frontend/src/styles/ProjectCard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
.ProjectCard p {
max-width: 29.1vw;
margin-right: 4.5vw;
font-size: 20px;
}

@media screen and (max-width: 1200px) {
Expand Down Expand Up @@ -43,8 +42,4 @@
cursor: default;
width: 100%;
}

.ProjectCard p {
font-size: 14px;
}
}
Loading