Skip to content

Commit 377433e

Browse files
nygrenhnygrenh
committed
Update the ui
1 parent 6c05b72 commit 377433e

9 files changed

Lines changed: 345 additions & 155 deletions

File tree

‎data/osa-1/1-johdanto.md‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,6 @@ path: '/osa-1/1-johdanto'
33
title: 'Johdanto'
44
---
55

6-
<text-box variant='hint' name='Ensimmäisen osan tavoitteet'>
7-
8-
Osaat kirjoittaa ohjelmia, jotka lukevat käyttäjältä syötettä ja tekevät laskentaa syötteen perusteella. Tunnet käsitteet muuttuja, ehtolause ja toistolause, ja osaat käyttää näitä ohjelmissasi.
9-
10-
</text-box>
11-
126
<text-box variant='learningObjectives' name='Oppimistavoitteet'>
137

148
- Tiedät muutamia esimerkkejä siitä, miten ohjelmistot vaikuttavat yhteiskuntamme toimintaan.

‎data/osa-1/2-tulostaminen-ja-lukeminen.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ title: 'Tulostaminen ja lukeminen'
1818

1919
</text-box>
2020

21-
# Ohjelmarunko
21+
## Ohjelmarunko
2222

2323
Java-ohjelmat vaativat toimiakseen ohjelmarungon. Ohjelmarunko on seuraavanlainen.
2424

‎src/components/CoursePageFooter.js‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import React, { Fragment } from 'react'
2+
import styled from 'styled-components'
3+
import PagesInThisSection from '../partials/PagesInThisSection'
4+
import PagesContext from '../contexes/PagesContext'
5+
import { nthIndex } from '../util/strings'
6+
import { Link } from 'gatsby'
7+
8+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
9+
import { faArrowRight as icon } from '@fortawesome/free-solid-svg-icons'
10+
11+
const CoursePageFooterWrapper = styled.footer`
12+
background-color: black;
13+
color: white;
14+
padding: 3rem;
15+
`
16+
17+
const CoursePageFooterContent = styled.div`
18+
display: flex;
19+
justify-content: space-between;
20+
max-width: 960px;
21+
margin: 0 auto;
22+
`
23+
24+
const StyledLink = styled(Link)`
25+
background-color: white;
26+
color: black;
27+
text-decoration: none;
28+
padding: 1rem;
29+
border-radius: 0.25rem;
30+
margin: 1rem 0;
31+
display: inline-block;
32+
width: 100%;
33+
34+
&:hover {
35+
text-decoration: none;
36+
font-weight: bold;
37+
color: black;
38+
}
39+
`
40+
41+
const StyledIcon = styled(FontAwesomeIcon)`
42+
vertical-align: middle;
43+
margin-right: 1rem;
44+
margin-left: 0.5rem;
45+
color: var(--color);
46+
font-size: 1.5em;
47+
`
48+
49+
const ButtonWrapper = styled.div`
50+
display: flex;
51+
align-items: center;
52+
`
53+
54+
export default class CoursePageFooter extends React.Component {
55+
render() {
56+
return (
57+
<PagesContext.Consumer>
58+
{value => {
59+
const currentPath = value.current.path
60+
let sectionPath = currentPath
61+
const sectionSeparator = nthIndex(currentPath, '/', 2)
62+
if (sectionSeparator !== -1) {
63+
sectionPath = currentPath.substr(0, sectionSeparator)
64+
}
65+
const sectionPages = value.all
66+
.filter(o => o.path.startsWith(`${sectionPath}/`))
67+
.sort((a, b) => {
68+
a = a.path.toLowerCase()
69+
b = b.path.toLowerCase()
70+
71+
return a > b ? 1 : b > a ? -1 : 0
72+
})
73+
74+
let currentPageIndex = null
75+
76+
sectionPages.forEach((page, i) => {
77+
if (page.path !== currentPath) {
78+
return
79+
}
80+
currentPageIndex = i
81+
})
82+
83+
let nextPart = null
84+
85+
if (
86+
currentPageIndex !== null &&
87+
currentPageIndex !== sectionPages.length - 1
88+
) {
89+
nextPart = sectionPages[currentPageIndex + 1]
90+
}
91+
return (
92+
<CoursePageFooterWrapper>
93+
<CoursePageFooterContent>
94+
<div>
95+
Pääsit aliluvun loppuun!{' '}
96+
{nextPart && (
97+
<Fragment>
98+
Jatka tästä seuraavaan osaan:{' '}
99+
<ButtonWrapper>
100+
<StyledLink to={nextPart.path}>
101+
<StyledIcon icon={icon} />
102+
{currentPageIndex + 2}. {nextPart.title}
103+
</StyledLink>
104+
</ButtonWrapper>
105+
</Fragment>
106+
)}
107+
</div>
108+
<PagesInThisSection
109+
style={{ width: '400px', fontSize: '0.8rem', margin: 0 }}
110+
/>
111+
</CoursePageFooterContent>
112+
</CoursePageFooterWrapper>
113+
)
114+
}}
115+
</PagesContext.Consumer>
116+
)
117+
}
118+
}

‎src/components/TreeView/TreeViewItem.js‎

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,17 @@ const ListItem = styled.li`
2020
list-style-type: none;
2121
margin-bottom: 0;
2222
padding: 0.75rem;
23-
2423
`
2524

2625
const NavigationLink = styled(GatsbyLink)`
2726
border-left: 0.5rem solid white;
2827
width: 100%;
29-
${props => props.active === "t" && `
28+
${props =>
29+
props.active === 't' &&
30+
`
3031
border-color: #f75b4b;
3132
background-color: #ffeeed;
3233
`}
33-
3434
`
3535

3636
const ItemTitleWrapper = styled.div`
@@ -83,51 +83,55 @@ export default class TreeViewItem extends React.Component {
8383
return (
8484
<React.Fragment>
8585
<Location>
86-
{({ navigate, location }) => (
87-
<Motion
88-
style={{
89-
openRatio: spring(this.state.childrenVisible ? 1 : 0),
90-
}}
91-
>
92-
{({ openRatio }) => (
93-
<React.Fragment>
94-
<ItemTitleWrapper
95-
className={`nav-item-${this.props.item.title
96-
.toLowerCase()
97-
.replace(/ /g, '-')}`}
98-
>
86+
{({ navigate, location }) => {
87+
let active = location.pathname.startsWith(this.props.item.path)
88+
if (this.props.item.path === '/') {
89+
active = location.pathname === this.props.item.path
90+
}
91+
return (
92+
<Motion
93+
style={{
94+
openRatio: spring(this.state.childrenVisible ? 1 : 0),
95+
}}
96+
>
97+
{({ openRatio }) => (
98+
<React.Fragment>
99+
<ItemTitleWrapper
100+
className={`nav-item-${this.props.item.title
101+
.toLowerCase()
102+
.replace(/ /g, '-')}`}
103+
>
104+
{this.props.item.children && (
105+
<StyledIcon
106+
style={{ '--open-ratio': `${openRatio}` }}
107+
icon={faCaretRight}
108+
size="1x"
109+
/>
110+
)}
111+
<NavigationLink
112+
to={this.props.item.path}
113+
active={active ? 't' : 'f'}
114+
>
115+
<ListItem onClick={this.onClick}>
116+
{this.props.item.title}
117+
</ListItem>
118+
</NavigationLink>
119+
</ItemTitleWrapper>
99120
{this.props.item.children && (
100-
<StyledIcon
121+
<ChildrenList
122+
innerRef={this.childrenListRef}
101123
style={{ '--open-ratio': `${openRatio}` }}
102-
icon={faCaretRight}
103-
size="1x"
104-
/>
124+
>
125+
{this.props.item.children.map(i => (
126+
<TreeViewItem key={i.title} item={i} />
127+
))}
128+
</ChildrenList>
105129
)}
106-
<NavigationLink
107-
to={this.props.item.path}
108-
active={
109-
(this.props.item.path === location.pathname || this.props.item.path === location.pathname.slice(0, -1)) ? 't' : 'f'
110-
}
111-
>
112-
<ListItem onClick={this.onClick}>
113-
{this.props.item.title}
114-
</ListItem>
115-
</NavigationLink>
116-
</ItemTitleWrapper>
117-
{this.props.item.children && (
118-
<ChildrenList
119-
innerRef={this.childrenListRef}
120-
style={{ '--open-ratio': `${openRatio}` }}
121-
>
122-
{this.props.item.children.map(i => (
123-
<TreeViewItem key={i.title} item={i} />
124-
))}
125-
</ChildrenList>
126-
)}
127-
</React.Fragment>
128-
)}
129-
</Motion>
130-
)}
130+
</React.Fragment>
131+
)}
132+
</Motion>
133+
)
134+
}}
131135
</Location>
132136
</React.Fragment>
133137
)

0 commit comments

Comments
 (0)