Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Feature/level summary#45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
ShMcK merged 3 commits intomasterfromfeature/level-summary
Oct 26, 2019
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletionsweb-app/src/Routes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,7 @@ import Router from './components/Router'
import LoadingPage from './containers/LoadingPage'
import ContinuePage from './containers/Continue'
import NewPage from './containers/New'
importSummaryPage from './containers/Tutorial/SummaryPage'
importOverviewPage from './containers/Overview'
import LevelSummaryPage from './containers/Tutorial/LevelPage'
import CompletedPage from './containers/Tutorial/CompletedPage'

Expand DownExpand Up@@ -34,7 +34,7 @@ const Routes = () => {
<LoadingPage text="Loading..." />
</Route>
<Route path="Tutorial.Summary">
<SummaryPage send={tempSend} context={{} as CR.MachineContext} />
<OverviewPage send={tempSend} context={{} as CR.MachineContext} />
</Route>
<Route path="Tutorial.Level">
<LevelSummaryPage send={tempSend} context={{} as CR.MachineContext} />
Expand Down
85 changes: 85 additions & 0 deletionsweb-app/src/containers/Overview/OverviewPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
import * as React from 'react'
import { Button } from '@alifd/next'
import * as G from 'typings/graphql'

const styles = {
summary: {
padding: '0rem 1rem 1rem 1rem',
},
title: {
fontWeight: 'bold' as 'bold',
},
description: {
fontSize: '1rem',
},
header: {
height: '36px',
backgroundColor: '#EBEBEB',
fontSize: '16px',
lineHeight: '16px',
padding: '10px 1rem',
},
levelList: {
padding: '0rem 1rem',
},
options: {
display: 'flex' as 'flex',
flexDirection: 'row' as 'row',
alignItems: 'center' as 'center',
justifyContent: 'flex-end' as 'flex-end',
position: 'absolute' as 'absolute',
bottom: 0,
height: '50px',
padding: '1rem',
paddingRight: '2rem',
backgroundColor: 'black',
width: '100%',
},
startButton: {
backgroundColor: 'gold',
fontWeight: 'bold' as 'bold',
},
}

interface Props {
title: string
description: string
levels: G.Level[]
onNext(): void
}

const Summary = ({ title, description, levels, onNext }: Props) => (
<div>
<div style={styles.header}>
<span>CodeRoad</span>
</div>
<div style={styles.summary}>
<h2 style={styles.title}>{title}</h2>
<p style={styles.description}>{description}</p>
</div>
<div>
<div style={styles.header}>
<span>Levels</span>
</div>
<div style={styles.levelList}>
{levels.map((level: G.Level, index: number) => (
<div key={index}>
<h4>
{index + 1}. {level.title}
</h4>
<div>{level.description}</div>
</div>
))}
</div>
</div>

<div style={styles.options}>
{/* TODO: Add back button */}
<Button style={styles.startButton} onClick={() => onNext()}>
Start
</Button>
</div>
</div>
)

export default Summary
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,9 +3,9 @@ import * as G from 'typings/graphql'
import * as CR from 'typings'
import { useQuery } from '@apollo/react-hooks'

import queryTutorial from '../../../services/apollo/queries/tutorial'
importSummary from './Summary'
import ErrorView from '../../../components/Error'
import queryTutorial from '../../services/apollo/queries/tutorial'
importOverviewPage from './OverviewPage'
import ErrorView from '../../components/Error'

interface PageProps {
context: CR.MachineContext
Expand All@@ -21,14 +21,14 @@ interface TutorialDataVariables {
version: string
}

constSummaryPage = (props: PageProps) => {
constOverview = (props: PageProps) => {
const { tutorial } = props.context

if (!tutorial) {
throw new Error('Tutorial not found in summary page')
}
const { loading, error, data } = useQuery<TutorialData, TutorialDataVariables>(queryTutorial, {
fetchPolicy: 'network-only', //for debugging purposes
fetchPolicy: 'network-only', //to ensure latest
variables: {
tutorialId: tutorial.id,
version: tutorial.version.version,
Expand DownExpand Up@@ -56,8 +56,9 @@ const SummaryPage = (props: PageProps) => {
})

const { title, description } = data.tutorial.version.summary
const { levels } = data.tutorial.version.data

return <Summary title={title} description={description} onNext={onNext} />
return <OverviewPage title={title} description={description} levels={levels} onNext={onNext} />
}

export defaultSummaryPage
export defaultOverview
35 changes: 0 additions & 35 deletionsweb-app/src/containers/Tutorial/SummaryPage/Summary/index.tsx
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletionweb-app/stories/Level.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ import { storiesOf } from '@storybook/react'
import SideBarDecorator from './utils/SideBarDecorator'
import Level from '../src/containers/Tutorial/LevelPage/Level/index'

storiesOf('Tutorial SideBar', module)
storiesOf('Level', module)
.addDecorator(SideBarDecorator)
.addDecorator(withKnobs)
.add('Level', () => {
Expand Down
2 changes: 1 addition & 1 deletionweb-app/stories/New.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -28,7 +28,7 @@ const tutorialList = [
},
]

storiesOf('New', module)
storiesOf('Start', module)
.addDecorator(SideBarDecorator)
.add('New Page', () => {
return <NewPage tutorialList={tutorialList} />
Expand Down
37 changes: 37 additions & 0 deletionsweb-app/stories/Overview.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
import React from 'react'

import { linkTo } from '@storybook/addon-links'
import { storiesOf } from '@storybook/react'

import SideBarDecorator from './utils/SideBarDecorator'
import OverViewPage from '../src/containers/Overview/OverviewPage'

storiesOf('Overview', module)
.addDecorator(SideBarDecorator)
.add('OverView Page', () => {
const levels = [
{
id: 'L1',
title: 'The First Level',
description: 'A Summary of the first level',
},
{
id: 'L2',
title: 'The Second Level',
description: 'A Summary of the second level',
},
{
id: 'L3',
title: 'The Third Level',
description: 'A Summary of the third level',
},
]
return (
<OverViewPage
title="Some Title"
description="Some description"
levels={levels}
onNext={linkTo('Tutorial SideBar', 'Level')}
/>
)
})
2 changes: 1 addition & 1 deletionweb-app/stories/Step.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,7 +30,7 @@ const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
Emojis: :) :| :(
`

storiesOf('Tutorial SideBar', module)
storiesOf('Level', module)
.addDecorator(SideBarDecorator)
.addDecorator(withKnobs)
.add('Step Description', () => (
Expand Down
13 changes: 0 additions & 13 deletionsweb-app/stories/Summary.stories.tsx
View file
Open in desktop

This file was deleted.

13 changes: 9 additions & 4 deletionsweb-app/stories/utils/SideBarDecorator.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
import * as React from 'react'

const styles = {
width: '20rem',
borderRight: '2px solid black',
height: window.innerHeight,
container: {
position: 'relative' as 'relative',
boxSizing: 'border-box' as 'border-box',
maxWidth: '20rem',
borderRight: '2px solid black',
width: '20rem',
height: window.innerHeight,
},
}

const SideBarDecorator = storyFn => <div style={styles}>{storyFn()}</div>
const SideBarDecorator = storyFn => <div style={styles.container}>{storyFn()}</div>

export default SideBarDecorator
[8]ページ先頭
©2009-2025 Movatter.jp