fix: Hackathon styling and resource update (#884)

- Updated Loading component to default to always display if not passed in loading prop. Making it as dumb as possible - Updated Loading rendering logic and styling in scene components so layouts does not shift/change after loading is finished. - Updated side nav to be thinner to accomodate smaller viewports - Updated resources with new component and dataset tag - Added header to each page for easier navigability - Added hacker faq link to home/agenda page - Added additional text and field styling to resource page for better UX
looker-open-source · Nov 1, 2021 · 7e07abb · 7e07abb
1 parent b08b08e
commit 7e07abb
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 53 deletions.
diff --git a/packages/hackathon/src/Hackathon.tsx b/packages/hackathon/src/Hackathon.tsx
@@ -78,7 +78,7 @@ export const Hackathon: FC<HackathonProps> = () => {
           </MessageBar>
         )}
         <Layout hasAside>
-          <Aside>
+          <Aside width="200px">
             <SideNav authorizedRoutes={authorizedRoutes} />
           </Aside>
           <Section>

diff --git a/packages/hackathon/src/components/Loading/Loading.tsx b/packages/hackathon/src/components/Loading/Loading.tsx
@@ -29,18 +29,18 @@ import React from 'react'
 import { Flex, ProgressCircular, Text } from '@looker/components'
 
 interface LoadingProps {
-  loading: boolean
+  loading?: boolean
   message?: string
 }
 
 export const Loading: FC<LoadingProps> = ({
-  loading,
+  loading = true,
   message = 'Loading ...',
 }) => (
-  <Flex height="40px" alignItems="center">
+  <Flex height="30px" alignItems="center">
     {loading && (
       <>
-        <ProgressCircular />
+        <ProgressCircular size="medium" />
         <Text ml="large">{message}</Text>
       </>
     )}

diff --git a/packages/hackathon/src/scenes/AdminScene/AdminScene.tsx b/packages/hackathon/src/scenes/AdminScene/AdminScene.tsx
@@ -25,7 +25,14 @@
  */
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
-import { TabList, Tab, TabPanels, TabPanel } from '@looker/components'
+import {
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+  Heading,
+  SpaceVertical,
+} from '@looker/components'
 import { useHistory, useRouteMatch } from 'react-router-dom'
 import { Routes } from '../../routes/AppRouter'
 import { getTabInfo } from '../../utils'
@@ -59,22 +66,30 @@ export const AdminScene: FC = () => {
 
   return (
     <>
-      <TabList selectedIndex={tabIndex} onSelectTab={onSelectTab}>
-        <Tab>General</Tab>
-        <Tab>Configuration</Tab>
-        <Tab>Add Users</Tab>
-      </TabList>
-      <TabPanels selectedIndex={tabIndex}>
-        <TabPanel>
-          <div>General admin stuff TBD</div>
-        </TabPanel>
-        <TabPanel>
-          <UserAttributes />
-        </TabPanel>
-        <TabPanel>
-          <AddUsers />
-        </TabPanel>
-      </TabPanels>
+      <Heading as="h2" fontSize="xxxlarge" fontWeight="medium">
+        Admin
+      </Heading>
+      {/* Tab components incorrectly sets content height causing unnecessary
+      scrolling. Wrapping with SpaceVertical fixes this. TODO: Remove this hack
+      once tab components are fixed. */}
+      <SpaceVertical gap="none">
+        <TabList selectedIndex={tabIndex} onSelectTab={onSelectTab}>
+          <Tab>General</Tab>
+          <Tab>Configuration</Tab>
+          <Tab>Add Users</Tab>
+        </TabList>
+        <TabPanels selectedIndex={tabIndex}>
+          <TabPanel>
+            <div>General admin stuff TBD</div>
+          </TabPanel>
+          <TabPanel>
+            <UserAttributes />
+          </TabPanel>
+          <TabPanel>
+            <AddUsers />
+          </TabPanel>
+        </TabPanels>
+      </SpaceVertical>
     </>
   )
 }
diff --git a/packages/hackathon/src/scenes/HomeScene/HomeScene.tsx b/packages/hackathon/src/scenes/HomeScene/HomeScene.tsx
@@ -27,8 +27,9 @@
 import type { FC } from 'react'
 import React from 'react'
 
-import { Heading, SpaceVertical } from '@looker/components'
+import { Heading, SpaceVertical, Paragraph, Span } from '@looker/components'
 import type { IHackerProps } from '../../models'
+import { ExtMarkdown } from '../../components'
 import { Agenda } from './components'
 import { localAgenda } from './agenda'
 
@@ -42,9 +43,18 @@ export const HomeScene: FC<HomeSceneProps> = ({ hacker }) => {
   return (
     <>
       <SpaceVertical gap="u5">
-        <Heading as="h2" fontSize="xxxlarge" fontWeight="medium">
-          Agenda
-        </Heading>
+        <Span>
+          <Heading as="h2" fontSize="xxxlarge" fontWeight="medium">
+            Agenda
+          </Heading>
+          <Paragraph>
+            <ExtMarkdown
+              source={
+                'Please read the [Hackathon FAQ](https://community.looker.com/hackathome-2021-1026/hackathome-2021-attendee-faq-28429)!'
+              }
+            />
+          </Paragraph>
+        </Span>
         <Agenda schedule={schedule} hacker={hacker} />
       </SpaceVertical>
     </>

diff --git a/packages/hackathon/src/scenes/JudgingScene/JudgingScene.tsx b/packages/hackathon/src/scenes/JudgingScene/JudgingScene.tsx
@@ -26,17 +26,24 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useSelector } from 'react-redux'
+import { Space, Heading } from '@looker/components'
 import { isLoadingState } from '../../data/common/selectors'
 import { Loading } from '../../components/Loading'
 import { JudgingList } from './components'
+
 interface JudgingSceneProps {}
 
 export const JudgingScene: FC<JudgingSceneProps> = () => {
   const isLoading = useSelector(isLoadingState)
 
   return (
     <>
-      <Loading loading={isLoading} message={'Processing judgings...'} />
+      <Space>
+        <Heading as="h2" fontSize="xxxlarge" fontWeight="medium">
+          Judgings
+        </Heading>
+        {isLoading && <Loading message={'Processing judgings...'} />}
+      </Space>
       <JudgingList />
     </>
   )

diff --git a/packages/hackathon/src/scenes/ProjectsScene/ProjectsScene.tsx b/packages/hackathon/src/scenes/ProjectsScene/ProjectsScene.tsx
@@ -28,7 +28,7 @@ import type { FC } from 'react'
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router-dom'
-import { Button, Space } from '@looker/components'
+import { Button, Space, Heading } from '@looker/components'
 import { Add } from '@styled-icons/material-outlined/Add'
 import { Create } from '@styled-icons/material-outlined/Create'
 import { Lock } from '@styled-icons/material-outlined/Lock'
@@ -65,7 +65,12 @@ export const ProjectsScene: FC<ProjectSceneProps> = () => {
 
   return (
     <>
-      <Loading loading={isLoading} message={'Processing projects...'} />
+      <Space>
+        <Heading as="h2" fontSize="xxxlarge" fontWeight="medium">
+          Projects
+        </Heading>
+        {isLoading && <Loading message={'Processing projects...'} />}
+      </Space>
       <ProjectList />
       <Space pt="xlarge">
         <Button iconBefore={<Add />} onClick={handleAdd} disabled={isLoading}>

diff --git a/packages/hackathon/src/scenes/ResourceScene/ResourceScene.tsx b/packages/hackathon/src/scenes/ResourceScene/ResourceScene.tsx
@@ -36,6 +36,8 @@ import {
   Heading,
   CardContent,
   ButtonItem,
+  Paragraph,
+  Field,
 } from '@looker/components'
 import { getExtensionSDK } from '@looker/extension-sdk'
 import { Routes } from '../../routes/AppRouter'
@@ -76,25 +78,31 @@ export const ResourceScene: FC<ResourceSceneProps> = () => {
 
   return (
     <>
-      <Heading as="h4" fontWeight="bold" px="medium">
-        Select a technology:
+      <Heading as="h2" fontSize="xxxlarge" fontWeight="medium">
+        Resources
       </Heading>
-      <ButtonGroup
-        px="medium"
-        pt="small"
-        value={filterValues}
-        onChange={updateFilterValue}
+      <Paragraph mb="medium">
+        Here are videos, tutorials, demos, apis, datasets, and dev tools for
+        your hacking needs.
+      </Paragraph>
+      <Field
+        label="Filter by areas of interest:"
+        description="Select 1 or more areas"
       >
-        <ButtonItem value="embed">Embed</ButtonItem>
-        <ButtonItem value="extension">Extensions</ButtonItem>
-        <ButtonItem value="lookml">LookML</ButtonItem>
-        <ButtonItem value="action">Actions</ButtonItem>
-        <ButtonItem value="api">API</ButtonItem>
-        <ButtonItem value="viz">Custom Viz</ButtonItem>
-        <ButtonItem value="devtool">Dev Tools</ButtonItem>
-        <ButtonItem value="other">Other</ButtonItem>
-      </ButtonGroup>
-      <Grid padding="medium" columns={3}>
+        <ButtonGroup value={filterValues} onChange={updateFilterValue}>
+          <ButtonItem value="embed">Embed</ButtonItem>
+          <ButtonItem value="extension">Extensions</ButtonItem>
+          <ButtonItem value="lookml">LookML</ButtonItem>
+          <ButtonItem value="action">Actions</ButtonItem>
+          <ButtonItem value="api">API</ButtonItem>
+          <ButtonItem value="viz">Custom Viz</ButtonItem>
+          <ButtonItem value="devtool">Dev Tools</ButtonItem>
+          <ButtonItem value="component">Components</ButtonItem>
+          <ButtonItem value="dataset">Datasets</ButtonItem>
+          <ButtonItem value="other">Other</ButtonItem>
+        </ButtonGroup>
+      </Field>
+      <Grid pt="medium" columns={3}>
         {selectedResources.map((_k, index) => (
           <Link
             href={selectedResources[index].shortenedLink}

diff --git a/packages/hackathon/src/scenes/ResourceScene/resource_data.ts b/packages/hackathon/src/scenes/ResourceScene/resource_data.ts
@@ -81,15 +81,15 @@ export const resources: Array<Resource> = [
     content:
       'Looker Components are a collection of tools for building Looker data experiences.',
     type: 'Resource',
-    tag: 'other',
+    tag: 'component',
     link: 'https://components.looker.com/',
     shortenedLink: 'https://bit.ly/2Z2Q69C',
     title: 'Looker Components',
   },
   {
     content: 'Looker Components Storybook contains component examples',
     type: 'Resource',
-    tag: 'other',
+    tag: 'component',
     link: 'https://components.looker.com/storybook',
     shortenedLink: 'https://bit.ly/3pbpygP',
     title: 'Components Examples Storybook',
@@ -178,7 +178,7 @@ export const resources: Array<Resource> = [
     content:
       'Thinking of doing a data analysis project for your hack? Browse and explore BigQuery public datasets through the hackathon instance',
     type: 'resources',
-    tag: 'other',
+    tag: 'dataset',
     link: 'https://hack.looker.com/dashboards/16',
     shortenedLink: 'https://bit.ly/3FX72yF',
     title: 'Public Datasets',

diff --git a/packages/hackathon/src/scenes/UsersScene/UsersScene.tsx b/packages/hackathon/src/scenes/UsersScene/UsersScene.tsx
@@ -27,7 +27,15 @@ import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import { useHistory, useRouteMatch } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
-import { Tab, TabList, TabPanels, TabPanel } from '@looker/components'
+import {
+  Tab,
+  TabList,
+  TabPanels,
+  TabPanel,
+  Heading,
+  Space,
+  SpaceVertical,
+} from '@looker/components'
 import { Routes } from '../../routes/AppRouter'
 import { isLoadingState } from '../../data/common/selectors'
 import { Loading } from '../../components/Loading'
@@ -88,9 +96,17 @@ export const UsersScene: FC<UsersSceneProps> = () => {
 
   return (
     <>
-      <Loading loading={isLoading} message={'Processing hackers...'} />
+      <Space>
+        <Heading as="h2" fontSize="xxxlarge" fontWeight="medium">
+          Users
+        </Heading>
+        {isLoading && <Loading message={'Processing users...'} />}
+      </Space>
+      {/* Tab components incorrectly sets content height causing unnecessary
+      scrolling. Wrapping with SpaceVertical fixes this. TODO: Remove this hack
+      once tab components are fixed. */}
       {hackers && (
-        <>
+        <SpaceVertical gap="none">
           <TabList selectedIndex={tabIndex} onSelectTab={onSelectTab}>
             <Tab key="hackers">Hackers</Tab>
             <Tab key="staff">Staff</Tab>
@@ -127,7 +143,7 @@ export const UsersScene: FC<UsersSceneProps> = () => {
               />
             </TabPanel>
           </TabPanels>
-        </>
+        </SpaceVertical>
       )}
     </>
   )