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/select tutorial style#147

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/select-tutorial-style
Mar 21, 2020
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@@ -3,7 +3,7 @@ import useRouter from './components/Router'
import Workspace from './components/Workspace'
import LoadingPage from './containers/Loading'
import StartPage from './containers/Start'
importNewPage from './containers/New'
importSelectTutorialPage from './containers/SelectTutorial'
import OverviewPage from './containers/Overview'
import CompletedPage from './containers/Tutorial/CompletedPage'
import LevelSummaryPage from './containers/Tutorial/LevelPage'
Expand All@@ -27,7 +27,7 @@ const Routes = () => {
<LoadingPage text="Error" context={context} />
</Route>
<Route path="Setup.SelectTutorial">
<NewPage send={send} context={context} />
<SelectTutorialPage send={send} context={context} />
</Route>
<Route path="Setup.Summary">
<OverviewPage send={send} context={context} />
Expand Down
18 changes: 18 additions & 0 deletionsweb-app/src/components/Tag/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import * as React from 'react'
import { css, jsx } from '@emotion/core'

const styles = {
tag: {
padding: '3px',
backgroundColor: 'rgb(225, 236, 244)',
color: 'rgb(57, 115, 157)',
},
}

type Props = {
children: string
}

const Tag = (props: Props) => <div css={styles.tag}>{props.children}</div>

export default Tag
43 changes: 0 additions & 43 deletionsweb-app/src/containers/New/NewPage.tsx
View file
Open in desktop

This file was deleted.

34 changes: 0 additions & 34 deletionsweb-app/src/containers/New/TutorialList/index.tsx
View file
Open in desktop

This file was deleted.

62 changes: 62 additions & 0 deletionsweb-app/src/containers/SelectTutorial/SelectTutorial.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
import * as React from 'react'
import * as T from 'typings'
import * as G from 'typings/graphql'
import { css, jsx } from '@emotion/core'
import TutorialItem from './TutorialItem'

const styles = {
page: {
position: 'relative' as 'relative',
width: '100%',
},
header: {
height: '2rem',
backgroundColor: '#EBEBEB',
fontSize: '1rem',
lineHeight: '1rem',
padding: '10px 1rem',
},
banner: {
minHeight: '3rem',
fontSize: '1rem',
padding: '1rem',
},
}

interface Props {
send(action: T.Action): void
tutorialList: G.Tutorial[]
}

const SelectTutorial = (props: Props) => {
const onSelect = (tutorial: G.Tutorial) => {
props.send({
type: 'SELECT_TUTORIAL',
payload: {
tutorial,
},
})
}
return (
<div css={styles.page}>
<div css={styles.header}>
<span>CodeRoad</span>
</div>
<div css={styles.banner}>
<span>Select a tutorial to launch in this workspace:</span>
</div>
<div>
{props.tutorialList.map((tutorial: G.Tutorial) => (
<TutorialItem
key={tutorial.id}
onSelect={() => onSelect(tutorial)}
title={tutorial.summary.title || ''}
description={tutorial.summary.description || ''}
/>
))}
</div>
</div>
)
}

export default SelectTutorial
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,36 @@
import * as React from 'react'
import { css, jsx } from '@emotion/core'
import Card from '../../../components/Card'
importMarkdown from '../../../components/Markdown'
import Card from '../../components/Card'
importTag from '../../components/Tag'

const styles = {
card: {
cursor: 'pointer',
display: 'inline-flex' as 'inline-flex',
flexDirection: 'row' as 'row',
minWidth: 500,
},
left: {
width: 80,
display: 'flex' as 'flex',
alignItems: 'center' as 'center',
},
right: {
flex: '1',
display: 'flex' as 'flex',
flexDirection: 'column' as 'column',
},
title: {
margin: 0,
},
author: {
margin: '0 0 2px 0',
color: 'grey',
},
tags: {
display: 'flex' as 'flex',
alignItems: 'center' as 'center',
padding: '2px',
},
languages: {
display: 'flex' as 'flex',
Expand DownExpand Up@@ -38,11 +63,18 @@ const LanguageIcon = () => (
)

const TutorialItem = (props: Props) => (
<Card onClick={props.onSelect} style={styles.card}>
<h3>{props.title || 'Title'}</h3>
<Markdown minimal>{props.description || 'Description'}</Markdown>
<div css={styles.languages}>
<LanguageIcon />
<Card onClick={props.onSelect}>
<div style={styles.card}>
<div css={styles.left}>
<img src="https://via.placeholder.com/75/75" height="75px" width="75px" />
</div>
<div css={styles.right}>
<h2 css={styles.title}>{props.title || 'Title'}</h2>
<h3 css={styles.author}>Author Name</h3>
<div css={styles.tags}>
<Tag>javascript</Tag>
</div>
</div>
</div>
</Card>
)
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@ import * as G from 'typings/graphql'
import ErrorView from '../../components/Error'
import queryTutorials from '../../services/apollo/queries/tutorials'
import LoadingPage from '../Loading'
importNewPage from './NewPage'
importSelectTutorial from './SelectTutorial'

interface ContainerProps {
send(action: T.Action): void
Expand All@@ -16,7 +16,7 @@ interface TutorialsData {
tutorials: G.Tutorial[]
}

constNewPageContainer = (props: ContainerProps) => {
constSelectPageContainer = (props: ContainerProps) => {
const { data, loading, error } = useQuery<TutorialsData>(queryTutorials, {
fetchPolicy: 'no-cache',
})
Expand All@@ -33,7 +33,7 @@ const NewPageContainer = (props: ContainerProps) => {
return null
}

return <NewPage tutorialList={data.tutorials} send={props.send} />
return <SelectTutorial tutorialList={data.tutorials} send={props.send} />
}

export defaultNewPageContainer
export defaultSelectPageContainer
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
import { action } from '@storybook/addon-actions'
import { storiesOf } from '@storybook/react'
import React from 'react'
import NewPage from '../src/containers/New/NewPage'
import TutorialList from '../src/containers/New/TutorialList'
import TutorialItem from '../src/containers/New/TutorialList/TutorialItem'
import SelectTutorial from '../src/containers/SelectTutorial/SelectTutorial'
import TutorialItem from '../src/containers/SelectTutorial/TutorialItem'
import SideBarDecorator from './utils/SideBarDecorator'

const tutorialList = [
Expand All@@ -25,11 +24,8 @@ const tutorialList = [

storiesOf('Select Tutorial', module)
.addDecorator(SideBarDecorator)
.add('New Page', () => {
return <NewPage tutorialList={tutorialList} />
})
.add('Tutorial List', () => {
return <TutorialList tutorialList={tutorialList} />
.add('Select Tutorial Page', () => {
return <SelectTutorial tutorialList={tutorialList} send={action('send')} />
})
.add('Tutorial Item', () => {
const tutorial = tutorialList[0]
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp