Skip to content

Commit

Permalink
Upravit TopGrid komponentu podla designu (#212)
Browse files Browse the repository at this point in the history
* Use typography variants in TopGrid

* Refactor and improve TopGrid
  • Loading branch information
Matushl authored Dec 8, 2023
1 parent 14f9da2 commit 828caf1
Show file tree
Hide file tree
Showing 8 changed files with 45 additions and 39 deletions.
6 changes: 2 additions & 4 deletions src/components/PageLayout/Banner/Banner.module.scss
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
.banner{
position: fixed;
width: 100vw;
top: 10rem;
left: 0;
height: 2rem;
background-color: black;
color: white;
border: none;
display: flex;
align-items: center;
padding: 0px;
z-index: 2;
z-index: 3;
margin-bottom: 0.5rem;
}


Expand Down
2 changes: 0 additions & 2 deletions src/components/PageLayout/PageLayout.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
// top offset because of sticky menu/title/banner
padding-top: 12rem;
// bottom offset because of sticky debug footer
padding-bottom: 1rem;
}
Expand Down
2 changes: 0 additions & 2 deletions src/components/PageLayout/PageLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {FC, ReactNode} from 'react'
import {BannerContainer} from '@/utils/BannerContainer'
import {PageTitleContainer} from '@/utils/PageTitleContainer'

import {Banner} from './Banner/Banner'
import {Footer} from './Footer/Footer'
import {MenuMain} from './MenuMain/MenuMain'
import styles from './PageLayout.module.scss'
Expand All @@ -25,7 +24,6 @@ export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', c
<BannerContainer.Provider>
<div className={styles.pageContainer}>
<TopGrid />
<Banner />
<MenuMain />
<div className={styles.grid}>
<StromLogo />
Expand Down
15 changes: 6 additions & 9 deletions src/components/PageLayout/TopGrid/TopGrid.module.scss
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
.container {
position: fixed;
position: sticky;
top: 0;
left: 0;
right: 0;
height: 10rem;
height: auto;
background-color: white;
z-index: 3;
}

.grid {
display: grid;
grid-template: 1fr 1fr / 1fr 2fr 1fr;
grid-template: 1fr auto / 1fr 2fr 1fr;
}

.menu {
Expand All @@ -22,13 +25,9 @@
// second row center column
grid-row: 2;
grid-column: 2;
font-size: 1.7rem;
font-weight: bold;
padding-left: 20px;
display: flex;
align-items: center;
text-transform: uppercase;
font-style: italic;
}

.semesterPicker {
Expand All @@ -40,8 +39,6 @@
}

.menuItem {
font-size: 1.3rem;
font-weight: bold;
padding: 8px;
margin: 10px;
}
Expand Down
1 change: 1 addition & 0 deletions src/components/PageLayout/TopGrid/TopGrid.module.scss.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export type Styles = {
active: string
container: string
grid: string
menu: string
menuItem: string
semesterPicker: string
Expand Down
47 changes: 30 additions & 17 deletions src/components/PageLayout/TopGrid/TopGrid.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import {Stack, Typography} from '@mui/material'
import clsx from 'clsx'
import Link from 'next/link'
import {useRouter} from 'next/router'
Expand All @@ -7,6 +8,7 @@ import {SemesterPicker} from '@/components/SemesterPicker/SemesterPicker'
import {PageTitleContainer} from '@/utils/PageTitleContainer'
import {useSeminarInfo} from '@/utils/useSeminarInfo'

import {Banner} from '../Banner/Banner'
import styles from './TopGrid.module.scss'

export const TopGrid: FC = () => {
Expand All @@ -18,24 +20,35 @@ export const TopGrid: FC = () => {
const {pageTitle} = PageTitleContainer.useContainer()

return (
<div className={styles.container}>
<div className={styles.menu}>
<div className={clsx(styles.menuItem, seminar === 'malynar' && styles.active)}>
<Link href="/malynar">Malynár</Link>
</div>
<div className={clsx(styles.menuItem, seminar === 'matik' && styles.active)}>
<Link href="/matik">Matik</Link>
</div>
<div className={clsx(styles.menuItem, seminar === 'strom' && styles.active)}>
<Link href="/strom">Strom</Link>
<Stack className={styles.container}>
<div className={styles.grid}>
<div className={styles.menu}>
<div className={clsx(styles.menuItem, seminar === 'malynar' && styles.active)}>
<Typography variant="button1">
<Link href="/malynar">Malynár</Link>
</Typography>
</div>
<div className={clsx(styles.menuItem, seminar === 'matik' && styles.active)}>
<Typography variant="button1">
<Link href="/matik">Matik</Link>
</Typography>
</div>
<div className={clsx(styles.menuItem, seminar === 'strom' && styles.active)}>
<Typography variant="button1">
<Link href="/strom">Strom</Link>
</Typography>
</div>
</div>
<Typography variant="h1" className={styles.title}>
{pageTitle}
</Typography>
{(page === 'zadania' || page === 'vysledky') && (
<div className={styles.semesterPicker}>
<SemesterPicker page={page} />
</div>
)}
</div>
<div className={styles.title}>{pageTitle}</div>
{(page === 'zadania' || page === 'vysledky') && (
<div className={styles.semesterPicker}>
<SemesterPicker page={page} />
</div>
)}
</div>
<Banner />
</Stack>
)
}
3 changes: 0 additions & 3 deletions src/components/SemesterPicker/Dropdown.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@
width: fit-content;
display: flex;
align-items: center;
text-transform: uppercase;
font-weight: bold;
font-style: italic;
position: relative;
margin: 0px 20px;

Expand Down
8 changes: 6 additions & 2 deletions src/components/SemesterPicker/Dropdown.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import {Typography} from '@mui/material'
import clsx from 'clsx'
import Link from 'next/link'
import {FC, MouseEvent, useState} from 'react'
Expand Down Expand Up @@ -25,7 +26,10 @@ export const Dropdown: FC<{title: string; options: DropdownOption[]}> = ({title,

return (
<div className={styles.dropdown} onClick={handleClick} onMouseLeave={handleMouseLeave}>
{title} <div className={styles.arrow} />
<Typography variant="button2">
{title}
<div className={styles.arrow} />
</Typography>
<div className={clsx(styles.options, display && styles.displayOptions)}>
{options.map((option) => {
return (
Expand All @@ -34,7 +38,7 @@ export const Dropdown: FC<{title: string; options: DropdownOption[]}> = ({title,
key={option.id}
className={clsx(styles.option, option.selected && styles.selectedOption)}
>
{option.text}
<Typography variant="button2">{option.text}</Typography>
</Link>
)
})}
Expand Down

0 comments on commit 828caf1

Please sign in to comment.