-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
Pxweb2 164 presentation page (#125)
PXWEB2-164 a basic version of the "whole" website with some of our building blocks,
1 parent
f83571f
commit b0fbcf2
Showing
19 changed files
with
757 additions
and
275 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
apps/pxweb2/src/app/app.spec.tsx → apps/pxweb2/src/app/app.spec.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
18 changes: 18 additions & 0 deletions
18
apps/pxweb2/src/app/components/Content/Content.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
@use '$ui/style-dictionary/dist/scss/fixed-variables.scss' as fixed; | ||
|
||
.contentWrapper { | ||
@media (min-width: fixed.$breakpoints-medium-min-width) { | ||
background-color: var(--px-color-background-subtle); | ||
} | ||
|
||
border-top-left-radius: var(--px-border-radius-xlarge); | ||
} | ||
|
||
.content { | ||
margin: fixed.$spacing-6; | ||
@media (min-width: fixed.$breakpoints-medium-min-width) { | ||
padding: fixed.$spacing-12; | ||
} | ||
background-color: var(--px-color-background-default); | ||
border-radius: var(--px-border-radius-xlarge); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import React from 'react'; | ||
import styles from './Content.module.scss'; | ||
|
||
export interface ContentProps { | ||
children: React.ReactNode; | ||
} | ||
|
||
export const Content: React.FC<ContentProps> = ({ children }) => { | ||
return ( | ||
<div className={styles.contentWrapper}> | ||
<div className={styles.content}>{children}</div> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
@use '$ui/style-dictionary/dist/scss/fixed-variables.scss' as fixed; | ||
|
||
.header { | ||
width: 100%; | ||
background-color: white; | ||
display: flex; | ||
align-items: center; | ||
justify-content: space-between; | ||
height: 88px; | ||
padding-left: fixed.$spacing-4; | ||
padding-right: 0; | ||
|
||
.headerRight { | ||
display: flex; | ||
} | ||
|
||
.desktopMenu { | ||
display: none; | ||
} | ||
|
||
.mobileMenu { | ||
display: block; | ||
} | ||
|
||
@media (min-width: fixed.$breakpoints-medium-min-width) { | ||
padding-left: fixed.$spacing-6; | ||
padding-right: fixed.$spacing-12; | ||
.desktopMenu { | ||
display: flex; | ||
} | ||
.mobileMenu { | ||
display: none; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import React from 'react'; | ||
import styles from './Header.module.scss'; | ||
import { Button, Heading } from '@pxweb2/pxweb2-ui'; | ||
import { getConfig } from '../../util/config/getConfig'; | ||
import { useTranslation } from 'react-i18next'; | ||
|
||
export const Header: React.FC = () => { | ||
const { t } = useTranslation(); | ||
const config = getConfig(); | ||
return ( | ||
<div className={styles.header}> | ||
<div> | ||
<Heading size="medium">PXWEB2</Heading> | ||
</div> | ||
<div className={styles.headerRight}> | ||
<div className={styles.desktopMenu}> | ||
<Button variant="tertiary" icon="House"> | ||
{t('presentation_page.header.statistics')} | ||
</Button> | ||
<Button variant="tertiary" icon="Globe"> | ||
{config.language.supportedLanguages.length + | ||
' ' + | ||
t('presentation_page.header.languagebutton')} | ||
</Button> | ||
<Button variant="secondary" size="medium" icon="MagnifyingGlass"> | ||
{t('presentation_page.header.searchbutton')} | ||
</Button> | ||
</div> | ||
<div className={styles.mobileMenu}> | ||
<Button variant="tertiary" icon="Menu" /> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
}; |
13 changes: 13 additions & 0 deletions
13
apps/pxweb2/src/app/components/NavigationBar/NavigationBar.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
@use '$ui/style-dictionary/dist/scss/fixed-variables.scss' as fixed; | ||
|
||
.navigationBar { | ||
height: 80px; | ||
margin: 0; | ||
padding: 16px; | ||
padding-bottom: 32px; | ||
width: 100vw; | ||
display: flex; | ||
align-items: center; | ||
justify-content: space-between; | ||
background-color: var(--px-color-background-default); | ||
} |
38 changes: 38 additions & 0 deletions
38
apps/pxweb2/src/app/components/NavigationBar/NavigationBar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import React from 'react'; | ||
import styles from './NavigationBar.module.scss'; | ||
import { useTranslation } from 'react-i18next'; | ||
import { Item } from '../NavigationRail/NavigationRail'; | ||
|
||
export const NavigationBar: React.FC = () => { | ||
const { t } = useTranslation(); | ||
return ( | ||
<div className={styles.navigationBar}> | ||
<Item | ||
label={t('presentation_page.sidemenu.selection.title')} | ||
selected={true} | ||
icon={'Controls'} | ||
/> | ||
<Item | ||
label={t('presentation_page.sidemenu.view.title')} | ||
selected={false} | ||
icon={'BarChart'} | ||
/> | ||
<Item | ||
label={t('presentation_page.sidemenu.edit.title')} | ||
selected={false} | ||
icon={'ArrowsUpDown'} | ||
/> | ||
<Item | ||
label={t('presentation_page.sidemenu.save.title')} | ||
selected={false} | ||
icon={'FloppyDisk'} | ||
/> | ||
<Item | ||
label={t('presentation_page.sidemenu.help.title')} | ||
selected={false} | ||
icon={'QuestionMarkCircle'} | ||
/> | ||
</div> | ||
); | ||
}; | ||
export default NavigationBar; |
42 changes: 42 additions & 0 deletions
42
apps/pxweb2/src/app/components/NavigationRail/NavigationRail.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
@use '$ui/style-dictionary/dist/scss/fixed-variables.scss' as fixed; | ||
|
||
.navigationRail { | ||
padding-top: 8px; | ||
height: 100vh; | ||
margin: 0; | ||
width: 120px; | ||
min-width: 120px; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
} | ||
|
||
.item { | ||
margin-top: fixed.$spacing-6; | ||
width: 80px; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
border: 0; | ||
background: none; | ||
|
||
> .icon { | ||
width: fixed.$spacing-14; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
border-radius: 99px; | ||
padding-top: fixed.$spacing-1; | ||
padding-bottom: fixed.$spacing-1; | ||
} | ||
|
||
&:hover { | ||
> .icon { | ||
background-color: var(--px-color-surface-subtle-hover); | ||
} | ||
} | ||
|
||
> .selected { | ||
background-color: var(--px-color-surface-subtle-active) !important; | ||
} | ||
} |
57 changes: 57 additions & 0 deletions
57
apps/pxweb2/src/app/components/NavigationRail/NavigationRail.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import React from 'react'; | ||
import cl from 'clsx'; | ||
import styles from './NavigationRail.module.scss'; | ||
import { useTranslation } from 'react-i18next'; | ||
import { Icon, IconProps, Label } from '@pxweb2/pxweb2-ui'; | ||
|
||
interface ItemProps { | ||
label: string; | ||
selected: boolean; | ||
icon: IconProps['iconName']; | ||
} | ||
export const Item: React.FC<ItemProps> = ({ label, selected, icon }) => { | ||
return ( | ||
<button className={styles.item}> | ||
<div className={cl(styles.icon, { [styles.selected]: selected })}> | ||
<Icon iconName={icon} /> | ||
</div> | ||
<div> | ||
<Label>{label}</Label> | ||
</div> | ||
</button> | ||
); | ||
}; | ||
|
||
export const NavigationRail: React.FC = () => { | ||
const { t } = useTranslation(); | ||
return ( | ||
<div className={styles.navigationRail}> | ||
<Item | ||
label={t('presentation_page.sidemenu.selection.title')} | ||
selected={true} | ||
icon={'Controls'} | ||
/> | ||
<Item | ||
label={t('presentation_page.sidemenu.view.title')} | ||
selected={false} | ||
icon={'BarChart'} | ||
/> | ||
<Item | ||
label={t('presentation_page.sidemenu.edit.title')} | ||
selected={false} | ||
icon={'ArrowsUpDown'} | ||
/> | ||
<Item | ||
label={t('presentation_page.sidemenu.save.title')} | ||
selected={false} | ||
icon={'FloppyDisk'} | ||
/> | ||
<Item | ||
label={t('presentation_page.sidemenu.help.title')} | ||
selected={false} | ||
icon={'QuestionMarkCircle'} | ||
/> | ||
</div> | ||
); | ||
}; | ||
export default NavigationRail; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,21 @@ | ||
html, | ||
body { | ||
padding: 0; | ||
margin: 0; | ||
* { | ||
box-sizing: border-box; | ||
} | ||
} | ||
|
||
@font-face { | ||
font-family: "PxWeb-font-400"; | ||
src: | ||
url("/fonts/PxWeb-font-400.ttf") format("truetype"); | ||
} | ||
font-family: 'PxWeb-font-400'; | ||
src: url('/fonts/PxWeb-font-400.ttf') format('truetype'); | ||
} | ||
@font-face { | ||
font-family: "PxWeb-font-500"; | ||
src: | ||
url("/fonts/PxWeb-font-500.ttf") format("truetype"); | ||
} | ||
font-family: 'PxWeb-font-500'; | ||
src: url('/fonts/PxWeb-font-500.ttf') format('truetype'); | ||
} | ||
@font-face { | ||
font-family: "PxWeb-font-700"; | ||
src: | ||
url("/fonts/PxWeb-font-700.ttf") format("truetype"); | ||
} | ||
font-family: 'PxWeb-font-700'; | ||
src: url('/fonts/PxWeb-font-700.ttf') format('truetype'); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters