Skip to content

Commit 41ae109

Browse files
nygrenhnygrenh
committed
New look for exercise partials
1 parent fe95f1c commit 41ae109

4 files changed

Lines changed: 176 additions & 105 deletions

File tree

‎src/components/StyledDivider.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import styled from "styled-components"
2+
import { Divider } from "@material-ui/core"
3+
4+
const StyledDivider = styled(Divider)`
5+
margin: 1rem 16px !important;
6+
`
7+
8+
export default StyledDivider

‎src/partials/ProgrammingExercise/Coins.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,14 @@ class Coins extends Component {
7171
<Fragment>
7272
<TokenContainer>
7373
<p>
74-
Joka kerta kun olet saanut <i>{tokenThreshHold}</i> tehtävää
75-
tehtyä, saat kolikon. Kolikoilla voi ostaa tehtävien vastauksia
76-
ja lunastaa itsesi mahdollisesta jumista.{" "}
74+
Mallivastauksen voi katsoa joko ennen tehtävän ratkaisemista tai
75+
tehtävän ratkaisemisen jälkeen. Jos haluat katsoa vastauksen
76+
ennen ratkaisemista, joudut käyttämään mallivastauskolikoita.
77+
</p>
78+
<p>
79+
Saat aina uuden mallivastauskolikon, kun olet saanut{" "}
80+
<i>{tokenThreshHold}</i> tehtävää tehtyä. Kolikoilla voi ostaa
81+
tehtävien vastauksia ja lunastaa itsesi mahdollisesta jumista.{" "}
7782
{availableTokens === 1 ? (
7883
<span> Käytössäsi on tällä hetkellä 1 kolikko.</span>
7984
) : availableTokens > 0 ? (
@@ -99,6 +104,7 @@ class Coins extends Component {
99104
onClick={this.onShowModelSolution}
100105
variant="outlined"
101106
color="secondary"
107+
style={{ marginRight: "0.5rem" }}
102108
>
103109
Katso mallivastaus (
104110
{modelSolutionTokenUsedOnThisExercise

‎src/partials/ProgrammingExercise/ExtraDetails.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from "react"
2+
import Loading from "../../components/Loading"
3+
import { OutboundLink } from "gatsby-plugin-google-analytics"
4+
import {
5+
ExpansionPanel,
6+
ExpansionPanelSummary,
7+
ExpansionPanelDetails,
8+
Typography,
9+
} from "@material-ui/core"
10+
import Coins from "./Coins"
11+
12+
import ExpandMoreIcon from "@material-ui/icons/ExpandMore"
13+
import styled from "styled-components"
14+
15+
const StyledTypography = styled(Typography)`
16+
margin-bottom: 0.5rem !important;
17+
`
18+
19+
const ExtraDetails = ({ exerciseDetails, onUpdate, noCoins }) => {
20+
if (!exerciseDetails) {
21+
return <Loading heightHint="305px" />
22+
}
23+
return (
24+
<div>
25+
<ExpansionPanel>
26+
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
27+
<Typography>Ohjeet tehtävän palauttamiseen</Typography>
28+
</ExpansionPanelSummary>
29+
<ExpansionPanelDetails>
30+
<div>
31+
<StyledTypography>
32+
Palauta tehtävä palvelimelle tarkistettavaksi NetBeans
33+
ohjelmointiympäristössä:{" "}
34+
<OutboundLink
35+
href="https://materiaalit.github.io/tmc-asennus/netbeans/"
36+
rel="noopener noreferrer"
37+
target="_blank"
38+
>
39+
ohjeet tehtävien palauttamiseen
40+
</OutboundLink>
41+
.
42+
</StyledTypography>
43+
<StyledTypography>
44+
Voit myöhemmin katsoa palautuksiasi Test My Code
45+
palautusympäristössä{" "}
46+
<OutboundLink
47+
href={`https://tmc.mooc.fi/exercises/${
48+
exerciseDetails.id
49+
}?use_clients=1`}
50+
rel="noopener noreferrer"
51+
target="_blank"
52+
>
53+
täältä
54+
</OutboundLink>
55+
.
56+
</StyledTypography>
57+
</div>
58+
</ExpansionPanelDetails>
59+
</ExpansionPanel>
60+
<ExpansionPanel>
61+
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
62+
<Typography>Miten katsoa mallivastaus</Typography>
63+
</ExpansionPanelSummary>
64+
<ExpansionPanelDetails>
65+
<Coins
66+
exerciseDetails={exerciseDetails}
67+
onUpdate={onUpdate}
68+
noCoins={noCoins}
69+
/>
70+
</ExpansionPanelDetails>
71+
</ExpansionPanel>
72+
</div>
73+
)
74+
}
75+
76+
export default ExtraDetails

‎src/partials/ProgrammingExercise/index.js‎

Lines changed: 83 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,70 @@
1-
import React, { Fragment } from "react"
1+
import React from "react"
22
import styled from "styled-components"
33

44
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
55
import { faPencilAlt as icon } from "@fortawesome/free-solid-svg-icons"
66
import { OutboundLink } from "gatsby-plugin-google-analytics"
77
import { get } from "lodash"
8+
import { Card, CardContent } from "@material-ui/core"
89

910
import {
1011
fetchProgrammingExerciseDetails,
1112
fetchProgrammingExerciseModelSolution,
1213
} from "../../services/moocfi"
13-
import { Divider } from "@material-ui/core"
1414
import LoginStateContext from "../../contexes/LoginStateContext"
1515
import LoginControls from "../../components/LoginControls"
1616
import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
1717
import { normalizeExerciseId } from "../../util/strings"
18-
import Loading from "../../components/Loading"
19-
import Coins from "./Coins"
2018
import ExerciseDescription from "./ExerciseDescription"
19+
import ExtraDetails from "./ExtraDetails"
20+
import StyledDivider from "../../components/StyledDivider"
2121

2222
const accentColor = "#FAAA38"
2323

24-
const ProgrammingExerciseWrapper = styled.section`
25-
padding 1rem;
26-
margin-bottom: 2rem;
27-
border-left: 0.2rem solid ${accentColor};
28-
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
29-
border-radius: 4px;
24+
const ProgrammingExerciseWrapper = styled(Card)`
25+
margin: 3.5rem 0;
26+
// border-left: 0.2rem solid ${accentColor};
27+
border-radius: 1rem !important;
28+
box-shadow: 0 8px 40px -12px rgba(0,0,0,0.3) !important;
29+
padding: 0 !important;
3030
`
3131

3232
const StyledIcon = styled(FontAwesomeIcon)`
3333
vertical-align: middle;
34-
margin-right: 1rem;
34+
margin-right: 1.5rem;
3535
margin-left: 0.5rem;
36-
color: ${accentColor};
36+
color: white;
37+
position: relative;
38+
bottom: -13px;
3739
`
3840

39-
const Header = styled.h3`
41+
const Header = styled.div`
4042
font-size: 1.3rem;
4143
font-weight: normal;
42-
padding-bottom: 1rem;
44+
padding 1rem 0;
4345
border-bottom: 1px solid #f7f7f9;
46+
background-color: #D23D48;
47+
display: flex;
48+
flex-direction: row;
49+
align-items: 0;
50+
color: white;
51+
padding: 1rem;
52+
padding-bottom: 1.5rem;
53+
h3 {
54+
margin-bottom: 0;
55+
}
56+
`
57+
58+
const HeaderTitleContainer = styled.div`
59+
flex: 1;
4460
`
4561

4662
const HeaderMuted = styled.span`
47-
color: #818a91 !important;
48-
font-size: 80%;
63+
font-size: 18px;
4964
font-weight: 400;
5065
margin-right: 0.2rem;
66+
position: relative;
67+
bottom: -3px;
5168
`
5269

5370
const Body = styled.div`
@@ -66,13 +83,8 @@ const LoginNagWrapper = styled.div`
6683
justify-content: center;
6784
`
6885

69-
const StyledDivider = styled(Divider)`
70-
margin: 1rem 16px !important;
71-
`
72-
7386
const PointsWrapper = styled.span`
74-
float: right;
75-
color: #45484b;
87+
color: white;
7688
`
7789

7890
const Small = styled.div`
@@ -177,97 +189,66 @@ class ProgrammingExercise extends React.Component {
177189
id={normalizeExerciseId(`programming-exercise-${name}`)}
178190
>
179191
<Header>
180-
<StyledIcon icon={icon} size="1x" />
181-
<HeaderMuted>Tehtävä: </HeaderMuted>
182-
{name}
192+
<StyledIcon icon={icon} size="2x" />
193+
<HeaderTitleContainer>
194+
<HeaderMuted>Ohjelmointitehtävä: </HeaderMuted>
195+
<h3>{name}</h3>
196+
</HeaderTitleContainer>
183197
{points && points > 1 && (
184198
<PointsWrapper>{points} pisteen tehtävä</PointsWrapper>
185199
)}
186200
</Header>
187-
<Body>
188-
<div>
189-
{this.context.loggedIn ? (
190-
<div>
191-
{points && points > 1 && (
192-
<Small>
193-
<p>
194-
Huom! Voit saada yksittäisen osan ratkaisusta osan
195-
tehtävän pisteistä käyttämällä NetBeansin "submit"-nappia.
196-
Lisätietoa ohjelmointitehtävien palautusohjeissa:{" "}
197-
<OutboundLink
198-
href="https://materiaalit.github.io/tmc-asennus/netbeans/"
199-
rel="noopener noreferrer"
200-
target="_blank"
201-
>
202-
ohjeet tehtävien palauttamiseen
203-
</OutboundLink>
204-
.
205-
</p>
206-
<StyledDivider />
207-
</Small>
208-
)}
209-
<ExerciseDescription>{children}</ExerciseDescription>
210-
{this.state.exerciseDetails === null && (
211-
<div>Error loading exercise details</div>
212-
)}
213-
</div>
214-
) : (
215-
<div>
216-
<LoginNag>Kirjaudu sisään nähdäksesi tehtävanannon.</LoginNag>
217-
<LoginNagWrapper>
218-
<LoginControls />
219-
</LoginNagWrapper>
220-
</div>
221-
)}
222-
</div>
201+
<CardContent>
202+
<Body>
203+
<div>
204+
{this.context.loggedIn ? (
205+
<div>
206+
{points && points > 1 && (
207+
<Small>
208+
<p>
209+
Huom! Voit saada yksittäisen osan ratkaisusta osan
210+
tehtävän pisteistä käyttämällä NetBeansin
211+
"submit"-nappia. Lisätietoa ohjelmointitehtävien
212+
palautusohjeissa:{" "}
213+
<OutboundLink
214+
href="https://materiaalit.github.io/tmc-asennus/netbeans/"
215+
rel="noopener noreferrer"
216+
target="_blank"
217+
>
218+
ohjeet tehtävien palauttamiseen
219+
</OutboundLink>
220+
.
221+
</p>
222+
<StyledDivider />
223+
</Small>
224+
)}
225+
<ExerciseDescription>{children}</ExerciseDescription>
226+
{this.state.exerciseDetails === null && (
227+
<div>Error loading exercise details</div>
228+
)}
229+
</div>
230+
) : (
231+
<div>
232+
<LoginNag>Kirjaudu sisään nähdäksesi tehtävanannon.</LoginNag>
233+
<LoginNagWrapper>
234+
<LoginControls />
235+
</LoginNagWrapper>
236+
</div>
237+
)}
238+
</div>
223239

224-
{this.context.loggedIn && (
225-
<Loading
226-
loading={this.state.exerciseDetails === undefined}
227-
heightHint="305px"
228-
>
240+
{this.context.loggedIn && (
229241
<div>
230242
<StyledDivider />
231-
<Coins
243+
<ExtraDetails
232244
exerciseDetails={this.state.exerciseDetails}
233245
onUpdate={this.onUpdate}
234-
noCoins={this.props.nocoins}
246+
noCoins={this.props.noCoins}
235247
/>
236-
237-
{this.state.exerciseDetails && (
238-
<Fragment>
239-
<p>
240-
Palauta tehtävä palvelimelle tarkistettavaksi NetBeans
241-
ohjelmointiympäristössä:{" "}
242-
<OutboundLink
243-
href="https://materiaalit.github.io/tmc-asennus/netbeans/"
244-
rel="noopener noreferrer"
245-
target="_blank"
246-
>
247-
ohjeet tehtävien palauttamiseen
248-
</OutboundLink>
249-
.
250-
</p>
251-
<p>
252-
Voit myöhemmin katsoa palautuksiasi Test My Code
253-
palautusympäristössä{" "}
254-
<OutboundLink
255-
href={`https://tmc.mooc.fi/exercises/${
256-
this.state.exerciseDetails.id
257-
}?use_clients=1`}
258-
rel="noopener noreferrer"
259-
target="_blank"
260-
>
261-
täältä
262-
</OutboundLink>
263-
.
264-
</p>
265-
</Fragment>
266-
)}
267248
</div>
268-
</Loading>
269-
)}
270-
</Body>
249+
)}
250+
</Body>
251+
</CardContent>
271252
</ProgrammingExerciseWrapper>
272253
)
273254
}

0 commit comments

Comments
 (0)