Start implementing mobile version

package.json

@@ -78,7 +78,8 @@
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "lint": "eslint ./src",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+    "gatsby": "gatsby"
   },
   "repository": {
     "type": "git",

src/components/funnels/funnels/register/steps/summary.tsx

@@ -24,9 +24,17 @@ interface SectionProps {
 
 const SectionContainer = styled.section`
 	display: grid;
-	grid: "title title" auto
-	      "edit  props" auto
-	      / 273px auto;
+	grid: "title" auto
+	      "edit" auto
+			"spacer" 2em
+	      "props" auto
+	      / 1fr;
+
+	@media (min-width: 1260px) {
+		grid: "title title" auto
+		      "edit  props" auto
+		      / 273px auto;
+	}
 
 	padding: 2em 0em;
 
@@ -111,8 +119,8 @@ const Summary = (_: ReadonlyRouteComponentProps) => {
 			{ id: 'spoken-languages', wide: true, value: personalInfo.spokenLanguages.map(langKey => langmap[langKey].nativeName).join(', ') },
 		]}/>
 		<Section id="contact" editLink="/register/contact-info" properties={[
-			{ id: 'email', value: contactInfo.email },
-			{ id: 'phone-number', value: contactInfo.phoneNumber },
+			{ id: 'email', wide: true, value: contactInfo.email },
+			{ id: 'phone-number', wide: true, value: contactInfo.phoneNumber },
 			{ id: 'street', wide: true, value: contactInfo.street },
 			{ id: 'city', value: contactInfo.city },
 			{ id: 'postal-code', value: contactInfo.postalCode },

src/components/funnels/funnels/register/steps/ticket/day.tsx

@@ -16,7 +16,11 @@ import conCatSunday from '~/images/con-cats/days/sunday.png'
 const Grid = styled.div`
 	display: grid;
 	gap: 20px;
-	grid: auto-flow 1fr / repeat(3, 1fr);
+	grid: auto-flow 1fr / 1fr;
+
+	@media (min-width: 1260px) {
+		grid: auto-flow 1fr / repeat(3, 1fr);
+	}
 `
 
 const ConCat = styled.figure`

src/components/funnels/funnels/register/steps/ticket/level.tsx

@@ -19,8 +19,12 @@ const TicketLevelSection = styled.section`
 const TicketLevelGrid = styled.section`
 	display: grid;
 	gap: 20px;
-	grid: auto-flow 1fr / repeat(3, 1fr);
+	grid: auto-flow auto / 1fr;
 	margin-top: 2em;
+
+	@media (min-width: 1260px) {
+		grid: auto-flow 1fr / repeat(3, 1fr);
+	}
 `
 
 const AddonsSection = styled.section`

src/components/funnels/funnels/register/steps/ticket/level/addon.tsx

@@ -5,20 +5,26 @@ import ReactMarkdown from 'react-markdown'
 import Price from '~/components/funnels/price'
 import type { ReadonlyReactNode } from '~/util/readonly-types'
 
-export interface TicketLevelAddonProps extends CheckboxProps {
-	readonly label: string
+export type TicketLevelAddonProps = CheckboxProps & {
 	readonly description: string
 	readonly children?: ReadonlyReactNode
 	readonly price: number
 }
 
-const CheckboxWrapper = styled.section`
-	font-size: 2rem;
-`
-
 const Container = styled.section`
-	display: flex;
-	align-items: start;
+	display: grid;
+	grid: "label       price"       auto
+	      "description description" auto
+			"options     options"     auto
+	      / 1fr auto;
+
+	@media (min-width: 1260px) {
+		grid: "label       price"   auto
+		      "description options" auto
+		      / fit-content(60rem) auto;
+	}
+
+	gap: 1.6rem;
 
 	&:not(:first-child) {
 		margin-top: 6.4rem;
@@ -29,39 +35,39 @@ const Container = styled.section`
 	}
 `
 
-const DescriptionContainer = styled.section`
-	flex: 1;
+const CheckboxContainer = styled.section`
+	grid-area: label;
+	font-size: 2rem;
 `
 
 const Description = styled.section`
-	margin-top: 1.6rem;
-	max-width: 600px;
+	grid-area: description;
 `
 
 const PriceContainer = styled.section`
-	display: flex;
-	flex-direction: column;
-	align-items: end;
+	grid-area: price;
+	justify-self: end;
 `
 
 const OptionsContainer = styled.div`
-	width: 22rem;
+	grid-area: options;
+
+	@media (min-width: 1260px) {
+		justify-self: end;
+		width: 22rem;
+	}
 
 	font-family: Manrope;
 `
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
 const TicketLevelAddon = forwardRef(({ children, price, description, ...rest }: TicketLevelAddonProps, ref: ForwardedRef<HTMLInputElement>) =>
 	<Container>
-		<DescriptionContainer>
-			<CheckboxWrapper><Checkbox ref={ref} {...rest}/></CheckboxWrapper>
-			<Description><ReactMarkdown>{description}</ReactMarkdown></Description>
-		</DescriptionContainer>
-		<PriceContainer>
-			<Price price={price}/>
-			<OptionsContainer>
-				{children}
-			</OptionsContainer>
-		</PriceContainer>
+		<CheckboxContainer><Checkbox ref={ref} {...rest}/></CheckboxContainer>
+		<Description><ReactMarkdown>{description}</ReactMarkdown></Description>
+		<PriceContainer><Price price={price}/></PriceContainer>
+		<OptionsContainer>
+			{children}
+		</OptionsContainer>
 	</Container>,
 )
 

src/components/funnels/funnels/register/steps/ticket/type.tsx

@@ -10,6 +10,7 @@ import conCatFull from '~/images/con-cats/ticket-types/full.png'
 const TicketTypeGrid = styled.div`
 	display: flex;
 	gap: 20px;
+	flex-wrap: wrap;
 
 	> * {
 		flex: 1;

src/components/funnels/invoice/invoice.tsx

@@ -13,6 +13,10 @@ import { Invoice as InvoiceModel } from '~/state/models/invoice'
 const InvoiceCard = styled(Card)`
 	grid-column: 10 / span 3;
 	align-self: start;
+
+	@media not (min-width: 1260px) {
+		display: none;
+	}
 `
 
 export interface InvoiceProps {

src/components/funnels/layout/common.tsx

@@ -21,6 +21,12 @@ const Nav = styled.nav`
 	display: flex;
 	align-items: center;
 	column-gap: 22px;
+
+	@media not (min-width: 1260px) {
+		width: 100%;
+		flex-direction: column;
+		align-items: stretch;
+	}
 `
 
 export interface CommonFunnelLayoutProps {

src/components/funnels/layout/with-invoice.tsx

@@ -19,13 +19,17 @@ export interface WithInvoiceFunnelLayoutProps {
 }
 
 const Grid = styled.div`
-	display: grid;
-	grid-template-columns: repeat(12, 1fr);
-	gap: 24px;
+	@media (min-width: 1260px) {
+		display: grid;
+		grid-template-columns: repeat(12, 1fr);
+		gap: 24px;
+	}
 `
 
 const GridConformer = styled.div`
-	grid-column: span 8;
+	@media (min-width: 1260px) {
+		grid-column: span 8;
+	}
 `
 
 const WithInvoiceFunnelLayout = ({ children, onNext, invoiceTitle, invoice, ...passthroughProps }: WithInvoiceFunnelLayoutProps) =>

src/components/header.tsx

@@ -68,8 +68,16 @@ const Header = ({ deadline }: HeaderProps) => {
 			{config.eventName}
 		</section>
 		<Clock deadline={deadline} />
-		<Dropdown><Localized id="header-dropdown-my-account">My account</Localized></Dropdown>
-		<Dropdown><Localized id="header-dropdown-language">Language</Localized></Dropdown>
+		<menu>
+			<li><Localized id="header-dropdown-my-account">My account</Localized></li>
+			<li>
+				<Localized id="header-dropdown-language">Language</Localized>
+				<menu>
+					<li>English</li>
+					<li>Deutsch</li>
+				</menu>
+			</li>
+		</menu>
 	</NavBar>
 }