Skip to content

Commit ddeb5d0

Browse files
lublagglublagg
authored
Merge pull request #504 from concord-consortium/188732109-summary-page-styling-adjustments
Fix Summary Page Styling Issues (PT-188732109)
2 parents 0168845 + c242385 commit ddeb5d0

File tree

6 files changed

+119
-89
lines changed

6 files changed

+119
-89
lines changed

‎cypress/e2e/completion-page.test.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,15 @@ context("Test the overall app", () => {
1717
cy.log("test incomplete activity text");
1818
cy.get(".progress-text").should("contain", `It looks like you haven't quite finished this activity yet.`);
1919
cy.get(".exit-container .show-my-work").should("contain", "Show My Work");
20-
cy.get(".next-step-text").should("contain", activity2Title);
21-
cy.get(".next-step button").should("have.length", 2);
20+
cy.get(".preview-title-container").should("contain", activity2Title);
21+
cy.get(".next-activity-buttons").first().should("contain", "Start Next Activity");
22+
cy.get(".next-activity-buttons").last().should("contain", "Exit");
2223
cy.get("[data-cy=summary-table]").should("have.length", 1);
2324
cy.get("[data-cy=summary-table-row]").should("have.length", 7);
2425
cy.get("[data-cy=summary-table-row]").eq(0).find("svg").should("have.class", "incomplete");
2526

2627
cy.log("test next activity button loads next activity");
27-
cy.get(".next-step button").first().should("contain", "Start Next Activity").click();
28+
cy.get(".next-activity-buttons button").first().click();
2829
cy.get(".activity-title").should("contain", activity2Title);
2930

3031
cy.log("Test completion page of last activity in a sequence");

‎src/components/activity-completion/completion-page-content.scss

Lines changed: 0 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -108,66 +108,6 @@
108108
}
109109
}
110110

111-
.next-step {
112-
background-color: $cc-teal-light6;
113-
display: flex;
114-
flex-basis: 100%;
115-
margin-bottom: 20px;
116-
padding: 10px;
117-
118-
.next-step-thumbnail {
119-
background-color: var(--theme-primary-color);
120-
border: solid 1px var(--theme-primary-color);
121-
border-radius: 8px;
122-
height: 80px;
123-
margin-right: 10px;
124-
max-width: 108px;
125-
overflow: hidden;
126-
127-
img {
128-
height: 100%;
129-
object-fit: cover;
130-
width: 100%;
131-
}
132-
}
133-
.next-step-content {
134-
display: flex;
135-
flex-wrap: wrap;
136-
line-height: 1.2;
137-
138-
.next-step-buttons {
139-
margin-right: 15px;
140-
width: 260px;
141-
142-
button {
143-
width: 100%;
144-
}
145-
span {
146-
display: block;
147-
margin: 10px 0;
148-
text-align: center;
149-
}
150-
}
151-
.next-step-text {
152-
flex-grow: 2;
153-
margin: 0 10px 0 0;
154-
width: 495px;
155-
156-
p {
157-
margin: 0;
158-
}
159-
.next-step-title {
160-
font-size: pxToRem(16);
161-
font-weight: bold;
162-
}
163-
.next {
164-
font-style: italic;
165-
font-weight: normal;
166-
margin-bottom: 5px;
167-
}
168-
}
169-
}
170-
}
171111

172112
.num-complete-text {
173113
margin: 15px 0;

‎src/components/activity-completion/completion-page-content.tsx

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import { watchAllAnswers, WrappedDBAnswer } from "../../firebase-db";
1111
import { isQuestion } from "../../utilities/activity-utils";
1212
import { answerHasResponse, refIdToAnswersQuestionId } from "../../utilities/embeddable-utils";
1313
import { SummaryTable, IQuestionStatus } from "./summary-table";
14-
import ccPlaceholderLogo from "../../assets/cc-placeholder.png";
1514
import { ReadAloudToggle } from "../read-aloud-toggle";
15+
import { NextSteps } from "./next-steps";
1616

1717
import "./completion-page-content.scss";
1818

@@ -106,10 +106,7 @@ export const CompletionPageContent: React.FC<IProps> = (props) => {
106106
const incompleteActivityProgressText =
107107
`It looks like you haven't quite finished this activity yet.`;
108108
const isLastActivityInSequence = activityIndex ? sequence?.activities.length === activityIndex + 1 : false;
109-
const nextActivityTitle = !isLastActivityInSequence && sequence?.activities[activityNum + 1].name;
110-
const nextActivityThumbnailURL = !isLastActivityInSequence && sequence?.activities[activityNum + 1].thumbnail_url;
111-
const nextActivityDescription = !isLastActivityInSequence &&
112-
renderHTML(sequence?.activities[activityNum + 1].description || "");
109+
113110
let progressText = "";
114111

115112
if (sequence) {
@@ -147,25 +144,13 @@ export const CompletionPageContent: React.FC<IProps> = (props) => {
147144
</div>
148145
</div>
149146
{sequence && !isLastActivityInSequence &&
150-
<div className="next-step" data-cy="next-step">
151-
<div className="next-step-thumbnail">
152-
<img src={nextActivityThumbnailURL ? nextActivityThumbnailURL : ccPlaceholderLogo} alt="Next Activity" />
153-
</div>
154-
<div className="next-step-content">
155-
<div className="next-step-text">
156-
<div className="next-step-title">
157-
<div className="next"><DynamicText>Next Up ...</DynamicText></div>
158-
<DynamicText>{nextActivityTitle}</DynamicText>
159-
</div>
160-
<DynamicText>{nextActivityDescription}</DynamicText>
161-
</div>
162-
<div className="next-step-buttons">
163-
<button className="button" onClick={handleNextActivity}>Start Next Activity</button>
164-
<span>or</span>
165-
<button className="textButton" onClick={handleExit}>Exit</button>
166-
</div>
167-
</div>
168-
</div>
147+
<NextSteps
148+
nextActivityThumbnailURL={sequence?.activities[activityNum + 1].thumbnail_url}
149+
nextActivityTitle={sequence?.activities[activityNum + 1].name}
150+
nextActivityDescription={renderHTML(sequence?.activities[activityNum + 1].description || "")}
151+
handleNextActivity={handleNextActivity}
152+
handleExit={handleExit}
153+
/>
169154
}
170155
<div className="exit-container" data-cy="exit-container">
171156
<div className="summary-of-work">

‎src/components/activity-completion/next-steps.scss

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
@import "../vars.scss";
2+
3+
.next-up-container {
4+
background-color: $cc-teal-light6;
5+
display: flex;
6+
flex-basis: 100%;
7+
margin-bottom: 20px;
8+
padding: 20px;
9+
box-sizing: border-box;
10+
font-size: pxToRem(18);
11+
12+
.next-activity-preview {
13+
width: 75%;
14+
.preview-header {
15+
display: flex;
16+
.preview-thumbnail {
17+
background-color: var(--theme-primary-color);
18+
border: solid 1px var(--theme-primary-color);
19+
border-radius: 8px;
20+
height: 80px;
21+
margin-right: 10px;
22+
max-width: 108px;
23+
overflow: hidden;
24+
img {
25+
height: 100%;
26+
object-fit: cover;
27+
width: 100%;
28+
}
29+
}
30+
.preview-title-container {
31+
align-self:last baseline;
32+
.next {
33+
font-style: italic;
34+
}
35+
.activity-title {
36+
font-weight: bold;
37+
}
38+
}
39+
}
40+
.preview-description {
41+
padding-right: 20px;
42+
}
43+
}
44+
45+
.next-activity-options {
46+
font-weight: bold;
47+
.next-activity-buttons {
48+
width: 260px;
49+
display: flex;
50+
flex-direction: column;
51+
justify-content: center;
52+
align-items: center;
53+
gap: 10px;
54+
button {
55+
width: 100%;
56+
font-family: 'Lato', sans-serif;
57+
}
58+
}
59+
}
60+
}

‎src/components/activity-completion/next-steps.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from "react";
2+
import { DynamicText } from "@concord-consortium/dynamic-text";
3+
import ccPlaceholderLogo from "../../assets/cc-placeholder.png";
4+
5+
import "./next-steps.scss";
6+
7+
interface IProps {
8+
nextActivityThumbnailURL?: string|null;
9+
nextActivityTitle: string;
10+
nextActivityDescription: string|JSX.Element|JSX.Element[];
11+
handleNextActivity: () => void;
12+
handleExit: () => void;
13+
}
14+
15+
export const NextSteps: React.FC<IProps> = (props) => {
16+
const { nextActivityThumbnailURL, nextActivityTitle, nextActivityDescription, handleNextActivity, handleExit } = props;
17+
return (
18+
<div className="next-up-container" data-cy="next-step">
19+
<div className="next-activity-preview">
20+
<div className="preview-header">
21+
<div className="preview-thumbnail">
22+
<img src={nextActivityThumbnailURL ? nextActivityThumbnailURL : ccPlaceholderLogo} alt="Next Activity" />
23+
</div>
24+
<div className="preview-title-container">
25+
<div className="next">
26+
<DynamicText>Next Up ...</DynamicText>
27+
</div>
28+
<div className="activity-title">
29+
<DynamicText>{nextActivityTitle}</DynamicText>
30+
</div>
31+
</div>
32+
</div>
33+
<div className="preview-description">
34+
<DynamicText>{nextActivityDescription}</DynamicText>
35+
</div>
36+
</div>
37+
<div className="next-activity-options">
38+
<div className="next-activity-buttons">
39+
<button className="button" onClick={handleNextActivity}>Start Next Activity</button>
40+
<div>or</div>
41+
<button className="textButton" onClick={handleExit}>Exit</button>
42+
</div>
43+
</div>
44+
</div>
45+
);
46+
};

‎src/components/activity-completion/summary-table.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@
1616
text-align: left;
1717
text-overflow: ellipsis;
1818
vertical-align: middle;
19-
white-space: nowrap;
20-
2119
&:nth-child(1) {
2220
width: 90%;
2321
}

0 commit comments

Comments
 (0)