-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(web): Organization page - "standalone" theme (#16976)
* Render standalone screen if theme is 'standalone' * Standalone layout first draft * Mobile menu refactor * Set up frontpage styles * Banner title shown * Minor spacing and search tweaks * og:url set * Add fallback * More fallbacks * fix header component styles * Reorder imports * Add top level Box * Minor header style fix --------- Co-authored-by: Ármann Pétur Ævarsson <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
- Loading branch information
3 people
authored
Nov 22, 2024
1 parent
20768c5
commit fb6f69a
Showing
17 changed files
with
914 additions
and
32 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
85 changes: 85 additions & 0 deletions
85
apps/web/layouts/organization/standalone/components/Header.css.ts
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,85 @@ | ||
| import { style } from '@vanilla-extract/css' | ||
|
|
||
| import { themeUtils } from '@island.is/island-ui/theme' | ||
|
|
||
| export const gridContainer = style({ | ||
| display: 'grid', | ||
| maxWidth: '1342px', | ||
| margin: '0 auto', | ||
| ...themeUtils.responsiveStyle({ | ||
| lg: { | ||
| gridTemplateRows: '315px', | ||
| gridTemplateColumns: '65fr 35fr', | ||
| }, | ||
| }), | ||
| }) | ||
|
|
||
| export const gridContainerSubpage = style({ | ||
| ...themeUtils.responsiveStyle({ | ||
| lg: { | ||
| gridTemplateRows: 'auto', | ||
| gridTemplateColumns: '100fr', | ||
| }, | ||
| }), | ||
| }) | ||
|
|
||
| export const gridContainerWidth = style({ | ||
| maxWidth: '1342px', | ||
| margin: '0 auto', | ||
| }) | ||
|
|
||
| export const textContainer = style({ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| justifyContent: 'center', | ||
| textAlign: 'center', | ||
| ...themeUtils.responsiveStyle({ | ||
| xs: { | ||
| order: 1, | ||
| paddingTop: '32px', | ||
| paddingBottom: '20px', | ||
| }, | ||
| lg: { | ||
| order: 0, | ||
| }, | ||
| }), | ||
| }) | ||
|
|
||
| export const textContainerNoTitle = style({ | ||
| order: 0, | ||
| }) | ||
|
|
||
| export const textContainerSubpage = style({ | ||
| minHeight: '20px', | ||
| }) | ||
|
|
||
| export const textInnerContainer = style({ | ||
| paddingLeft: '16px', | ||
| paddingRight: '16px', | ||
| ...themeUtils.responsiveStyle({ | ||
| lg: { | ||
| height: '100%', | ||
| maxWidth: '100%', | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }, | ||
| }), | ||
| }) | ||
|
|
||
| export const headerImage = style({ | ||
| width: '100%', | ||
| order: 1, | ||
| ...themeUtils.responsiveStyle({ | ||
| xs: { | ||
| maxHeight: '200px', | ||
| }, | ||
| lg: { | ||
| maxHeight: '100%', | ||
| }, | ||
| }), | ||
| }) | ||
|
|
||
| export const title = style({ | ||
| zIndex: 0, | ||
| }) |
95 changes: 95 additions & 0 deletions
95
apps/web/layouts/organization/standalone/components/Header.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,95 @@ | ||
| import { useEffect, useState } from 'react' | ||
| import { useWindowSize } from 'react-use' | ||
| import cn from 'classnames' | ||
|
|
||
| import { ResponsiveSpace, Text, TextProps } from '@island.is/island-ui/core' | ||
| import { theme } from '@island.is/island-ui/theme' | ||
|
|
||
| import * as styles from './Header.css' | ||
|
|
||
| export interface HeaderProps { | ||
| fullWidth?: boolean | ||
| image?: string | ||
| background?: string | ||
| mobileBackground?: string | null | ||
| underTitle?: string | ||
| titleSectionPaddingLeft?: ResponsiveSpace | ||
| titleColor?: TextProps['color'] | ||
| imagePadding?: string | ||
| imageIsFullHeight?: boolean | ||
| imageObjectFit?: 'contain' | 'cover' | ||
| imageObjectPosition?: 'left' | 'center' | 'right' | ||
| className?: string | ||
| isFrontpage?: boolean | ||
| } | ||
|
|
||
| export const Header: React.FC<React.PropsWithChildren<HeaderProps>> = ({ | ||
| fullWidth, | ||
| image, | ||
| background, | ||
| mobileBackground, | ||
| underTitle, | ||
| titleColor = 'dark400', | ||
| imagePadding = '20px', | ||
| imageIsFullHeight = true, | ||
| imageObjectFit = 'contain', | ||
| imageObjectPosition = 'center', | ||
| className, | ||
| isFrontpage = false, | ||
| }) => { | ||
| const { width } = useWindowSize() | ||
| const imageProvided = !!image | ||
|
|
||
| const [isMobile, setIsMobile] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| setIsMobile(width < theme.breakpoints.lg) | ||
| }, [width]) | ||
| return ( | ||
| <div | ||
| className={cn({ [styles.gridContainerWidth]: !fullWidth })} | ||
| style={{ | ||
| background: isMobile ? mobileBackground || background : background, | ||
| }} | ||
| > | ||
| <div | ||
| className={cn( | ||
| { | ||
| [styles.gridContainer]: !className, | ||
| [styles.gridContainerSubpage]: !isFrontpage, | ||
| }, | ||
| className, | ||
| )} | ||
| > | ||
| <div | ||
| className={cn({ | ||
| [styles.textContainerNoTitle]: isFrontpage && !underTitle, | ||
| [styles.textContainer]: isFrontpage && underTitle, | ||
| [styles.textContainerSubpage]: !isFrontpage, | ||
| })} | ||
| > | ||
| {underTitle && isFrontpage && ( | ||
| <div className={cn(styles.textInnerContainer)}> | ||
| <Text variant="h1" as="h1" color={titleColor}> | ||
| {underTitle} | ||
| </Text> | ||
| </div> | ||
| )} | ||
| </div> | ||
| {imageProvided && isFrontpage && ( | ||
| <img | ||
| style={{ | ||
| padding: imagePadding, | ||
| objectFit: imageObjectFit, | ||
| objectPosition: imageObjectPosition, | ||
| height: imageIsFullHeight ? '100%' : undefined, | ||
| }} | ||
| className={styles.headerImage} | ||
| src={image} | ||
| alt="" | ||
| /> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
28 changes: 28 additions & 0 deletions
28
apps/web/layouts/organization/standalone/components/MobileMenu.css.ts
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,28 @@ | ||
| import { style } from '@vanilla-extract/css' | ||
|
|
||
| import { theme } from '@island.is/island-ui/theme' | ||
|
|
||
| export const container = style({ | ||
| overflowY: 'auto', | ||
| overflowX: 'hidden', | ||
| width: '80%', | ||
| height: '100%', | ||
| maxWidth: '305px', | ||
| marginLeft: 'auto', | ||
| background: theme.color.white, | ||
| padding: '37px 24px', | ||
| boxShadow: '-5px 4px 10px 4px rgba(0, 0, 0, 0.2)', | ||
| }) | ||
|
|
||
| export const icon = style({ | ||
| marginRight: '20px', | ||
| }) | ||
|
|
||
| export const mobileContent = style({ | ||
| marginTop: '40px', | ||
| }) | ||
|
|
||
| export const links = style({ | ||
| paddingLeft: '10px', | ||
| paddingRight: '10px', | ||
| }) |
Oops, something went wrong.