2 column layout

paritytech · Mar 3, 2024 · 5fb00d7 · 5fb00d7
1 parent 0d9a507
commit 5fb00d7
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 85 deletions.
diff --git a/config-demo/application.json b/config-demo/application.json
@@ -5,19 +5,11 @@
  },
  "layout": {
  "mobile": {
- "fixed": [
- ["users", "NewjoinerDetector"],
- ["users", "UserStatus"]
- ],
+ "fixed": [["users", "NewjoinerDetector"]],
  "office": [
  ["office-visits", "Actions", { "offices": ["berlin"] }],
  ["announcements", "Announcement"],
- ["checklists", "Checklist"],
- ["working-hours", "WorkingHoursWidget"],
- ["events", "UncompletedActions"],
  ["events", "MyEvents"],
- ["office-visits", "MyOfficeVisits", { "offices": ["berlin"] }],
- ["visits", "WhoIsInOffice", { "offices": ["berlin"] }],
  ["quick-navigation", "QuickNav"],
  ["users", "UsersMapWidget"],
  ["events", "GlobalEvents", { "offices": ["global"] }]
@@ -32,21 +24,18 @@
  ["quick-navigation", "QuickNav"]
  ],
  [
- ["users", "UserStatus"],
- ["office-visits", "Actions", { "offices": ["berlin"] }],
+ [
+ "office-visits",
+ "Actions",
+ { "offices": ["berlin", "lisbon", "london"] }
+ ],
  ["announcements", "Announcement"],
- ["checklists", "Checklist"],
- ["events", "UncompletedActions"],
- ["office-visits", "MyOfficeVisits", { "offices": ["berlin"] }],
- ["visits", "WhoIsInOffice", { "offices": ["berlin"] }],
- ["users", "UsersMapWidget"],
- ["events", "GlobalEvents", { "offices": ["global"] }]
- ],
- [
- ["working-hours", "WorkingHoursWidget"],
- ["events", "MyEvents"],
- ["events", "UpcomingEvents"],
- ["news", "LatestNews"]
+ ["users", "UsersMapWidget", { "offices": ["global"] }],
+ ["events", "GlobalEvents", { "offices": ["global"] }],
+ [
+ ["events", "UpcomingEvents"],
+ ["news", "LatestNews"]
+ ]
  ]
  ]
  }

diff --git a/src/client/App.tsx b/src/client/App.tsx
@@ -15,7 +15,6 @@ import { api } from '#client/utils/api'
 import { getComponentInstance } from '#client/utils/portal'
 import { PermissionsSet } from '#shared/utils'
 import { PolkadotProvider } from '#client/components/auth/PolkadotProvider'
-import { Welcome } from '#modules/users/client/components'
 
 const routeGroups: Record<
  'admin' | 'public' | 'extra' | 'extraLayout',

diff --git a/src/client/components/Home.tsx b/src/client/components/Home.tsx
@@ -52,31 +52,34 @@ export const Home: React.FC = () => {
  className={cn(
  'grid',
  layoutView === 'mobile' && 'grid-cols-[minmax(0,_1fr)]',
- layoutView === 'tablet' &&
- 'grid-cols-[minmax(0,_1fr)_minmax(0,_1fr)]',
+ layoutView === 'tablet' && 'grid-cols-[minmax(0,_1fr)]',
  layoutView === 'desktop' &&
- 'grid-cols-[minmax(0,_25fr)_minmax(0,_44fr)_minmax(0,_31fr)]',
+ 'grid-cols-[minmax(0,_25fr)_minmax(0,_75fr)]',
  'gap-x-4'
  )}
  >
  {/* mobile columns */}
  {layoutView === 'mobile' && (
  <div>{config.layout.mobile[tab].map(renderWidget)}</div>
  )}
-
  {/* desktop first column */}
  {layoutView === 'desktop' && (
- <div>{config.layout.desktop[0].map(renderWidget)}</div>
+ <div>{config.layout.desktop.sidebar.map(renderWidget)}</div>
  )}
-
  {/* desktop second column === tablet first column */}
  {(layoutView === 'desktop' || layoutView === 'tablet') && (
- <div>{config.layout.desktop[1].map(renderWidget)}</div>
- )}
-
- {/* desktop third column === tablet second column */}
- {(layoutView === 'desktop' || layoutView === 'tablet') && (
- <div>{config.layout.desktop[2].map(renderWidget)}</div>
+ <div>
+ {config.layout.desktop.main.map((row) => (
+ <div
+ className={cn(
+ 'grid items-stretch',
+ row.length == 2 ? 'grid grid-cols-2 gap-2' : 'grid-cols-1'
+ )}
+ >
+ {row.map(renderWidget)}
+ </div>
+ ))}
+ </div>
  )}
  </div>
  </>

diff --git a/src/client/components/auth/PolkadotProvider.tsx b/src/client/components/auth/PolkadotProvider.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import {
+ BackButton,
  FButton,
  Icons,
  Input,
@@ -204,47 +205,52 @@ export const PolkadotProvider: React.FC = () => {
  )
  case AuthSteps.ChooseAccount:
  return (
- <StepWrapper
- title="Choose your account"
- subtitle={`Works with Polkadot Js and Talisman`}
- >
+ <div className="grid grid-cols-[1fr_2fr_1fr]">
  <div>
- <Select
- placeholder="select account"
- containerClassName="w-full mt-8 mb-4"
- value={selectedAddress}
- onChange={(v) => {
- setSelectedAddress(v)
- setError('')
- }}
- options={[{ label: 'select account', value: '' }].concat(
- accounts.map((account) => ({
- label: `${account.meta.name} (${account.meta.source})`,
- value: account.address,
- }))
- )}
- ></Select>
- <div className="flex align-middle justify-center gap-2 mb-14">
- <Icons.WarningIcon />
- <P
- textType="additional"
- className="text-text-secondary mt-0 max-w-[400px] text-left"
- >
- We strongly recommend to use a separate empty account as
- identity instead of your wallet with real funds.
- </P>
- </div>
+ <BackButton className="self-start" />
  </div>
- <FButton
- className="w-full"
- kind="primary"
- size="small"
- onClick={() => handleLogin()}
+ <StepWrapper
+ title="Choose your account"
+ subtitle={`Works with Polkadot Js and Talisman`}
  >
- Continue
- </FButton>
- {error && <div className="text-accents-red">{error}</div>}
- </StepWrapper>
+ <div>
+ <Select
+ placeholder="select account"
+ containerClassName="w-full mt-4 mb-2"
+ value={selectedAddress}
+ onChange={(v) => {
+ setSelectedAddress(v)
+ setError('')
+ }}
+ options={[{ label: 'select account', value: '' }].concat(
+ accounts.map((account) => ({
+ label: `${account.meta.name} (${account.meta.source})`,
+ value: account.address,
+ }))
+ )}
+ ></Select>
+ <div className="flex align-middle justify-center gap-2 mb-14">
+ <Icons.WarningIcon />
+ <P
+ textType="additional"
+ className="text-text-secondary mt-0 max-w-[400px] text-left"
+ >
+ We strongly recommend to use a separate empty account as
+ identity instead of your wallet with real funds.
+ </P>
+ </div>
+ </div>
+ <FButton
+ className="w-full"
+ kind="primary"
+ size="small"
+ onClick={() => handleLogin()}
+ >
+ Continue
+ </FButton>
+ {error && <div className="text-accents-red">{error}</div>}
+ </StepWrapper>
+ </div>
  )
  case AuthSteps.Warning:
  return (

diff --git a/src/server/app-config/schemas.ts b/src/server/app-config/schemas.ts
@@ -1,14 +1,16 @@
-import { z } from 'zod'
+import { any, z } from 'zod'
 
-export const componentRef = z
- .tuple([z.string(), z.string()])
- .or(
+const componentRef: z.ZodTypeAny = z.lazy(() =>
+ z.union([
+  z.tuple([z.string(), z.string()]),
  z.tuple([
  z.string(),
  z.string(),
  z.object({ offices: z.array(z.string()).optional() }),
- ])
- )
+ ]),
+ z.array(componentRef),
+ ])
+)
 
 export const layout = z.object({
  mobile: z.object({
@@ -17,11 +19,10 @@ export const layout = z.object({
  events: z.array(componentRef),
  news: z.array(componentRef),
  }),
- desktop: z.tuple([
- z.array(componentRef),
- z.array(componentRef),
- z.array(componentRef),
- ]),
+ desktop: z.object({
+ sidebar: z.array(componentRef),
+ main: z.array(z.array(componentRef)),
+ }),
 })
 
 export const applicationConfig = z.object({