Skip to content

Commit 2bcd3af

Browse files
jacbnjacbn
authored
Merge pull request #1338 from isaacphysics/redesign/page/teacher-features
Redesign Teacher Features page
2 parents 9e5bf0b + 24d0eea commit 2bcd3af

File tree

2 files changed

+100
-100
lines changed

2 files changed

+100
-100
lines changed

‎src/app/components/pages/TeacherFeatures.tsx

Lines changed: 86 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,39 @@
11
import React from "react";
2-
import {Button, Col, Container, Row} from "reactstrap";
2+
import {Button, Card, Col, Container, Row} from "reactstrap";
33
import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
44
import {useAppSelector, selectors} from "../../state";
55
import {isLoggedIn, isTeacherOrAbove, PATHS} from "../../services";
66
import {Link} from "react-router-dom";
7-
import {IsaacCard} from "../content/IsaacCard";
7+
import classNames from "classnames";
88

99
export const TeacherFeatures = () => {
1010

1111
const user = useAppSelector(selectors.user.orNull);
1212

1313
const isDisabled = !isLoggedIn(user) || !isTeacherOrAbove(user);
1414

15-
return<Container>
15+
interface TeacherFeatureCardProps {
16+
url: string;
17+
imgSrc: string;
18+
title: string;
19+
subtitle: string;
20+
disabled?: boolean;
21+
}
22+
23+
const TeacherFeatureCard = (props: TeacherFeatureCardProps) => {
24+
const {url, imgSrc, title, subtitle, disabled} = props;
25+
return <Link to={url} className="h-100 w-100" aria-label={title} aria-disabled={disabled} style={{textDecoration: "none"}}>
26+
<Card className={classNames("p-3 teacher-features h-100", {"disabled": disabled})}>
27+
<div className="d-flex justify-content-between">
28+
<h5 className="mt-3 me-2">{title}</h5>
29+
<img src={imgSrc} alt=""/>
30+
</div>
31+
<p>{subtitle}</p>
32+
</Card>
33+
</Link>;
34+
};
35+
36+
return <Container>
1637
<Row className="mb-4">
1738
<Col>
1839
<TitleAndBreadcrumb currentPageTitle={"Teacher Features"} />
@@ -22,11 +43,11 @@ export const TeacherFeatures = () => {
2243
{isDisabled ?
2344
<Col md={6}>
2445
<p className="subtitle">
25-
Isaac Physics provides you with a huge range of resources to support your teaching of Physics – all for free. </p>
46+
Isaac provides you with a huge range of resources to support your teaching of Science subjects – all for free. </p>
2647
</Col>:
2748
<Col>
2849
<p className="subtitle">
29-
Isaac Physics provides you with a huge range of resources to support your teaching of Physics – all for free. </p>
50+
Isaac provides you with a huge range of resources to support your teaching of Science subjects – all for free. </p>
3051
</Col>}
3152
{isDisabled && <Col md={6} className="text-center text-md-end">
3253
<Button tag={Link} size="lg" color="secondary" to={isLoggedIn(user) ? "/pages/contact_us_teacher" : "/register"}>
@@ -35,115 +56,90 @@ export const TeacherFeatures = () => {
3556
</Col>}
3657
</Row>
3758
<Row className="isaac-cards-body px-3">
38-
<Col sm={6} md={4} className="mb-3 mb-md-0">
39-
<IsaacCard doc={{ clickUrl: "/groups",
40-
image: {src: "/assets/phy/icons/teacher_features_sprite.svg#groups"},
41-
title: "1. Create a Group",
42-
disabled: isDisabled,
43-
verticalContent: true,
44-
subtitle: "Create and manage class groups, and share them with colleagues."}}
45-
imageClassName="teacher-features"
46-
className="w-100"
59+
<Col md={6} lg={4} className="mb-3 mb-lg-0">
60+
<TeacherFeatureCard
61+
url = "/groups"
62+
imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#groups"
63+
title = "1. Create a Group"
64+
subtitle = "Create and manage class groups, and share them with colleagues."
65+
disabled = {isDisabled}
4766
/>
4867
</Col>
49-
<Col sm={6} md={4} className="mb-3 mb-md-0">
50-
<IsaacCard doc={{ clickUrl: PATHS.SET_ASSIGNMENTS,
51-
image: {src: "/assets/phy/icons/teacher_features_sprite.svg#set-assignments"},
52-
title: "2. Set Assignments",
53-
disabled: isDisabled,
54-
verticalContent: true,
55-
subtitle: "Set assignments from our skills books, pre-made boards or create your own."}}
56-
imageClassName="teacher-features"
57-
className="w-100"
68+
<Col md={6} lg={4} className="mb-3 mb-lg-0">
69+
<TeacherFeatureCard
70+
url = {PATHS.SET_ASSIGNMENTS}
71+
imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#set-assignments"
72+
title = "2. Set Assignments"
73+
subtitle = "Set assignments from our skills books, pre-made boards or create your own."
74+
disabled = {isDisabled}
5875
/>
5976
</Col>
60-
<Col xs={0} sm={3} className="d-md-none"/>
61-
<Col sm={6} md={4}>
62-
<IsaacCard doc={{ clickUrl: PATHS.ASSIGNMENT_PROGRESS,
63-
image: {src: "/assets/phy/icons/teacher_features_sprite.svg#track-progress"},
64-
title: "3. Assignment Progress",
65-
disabled: isDisabled,
66-
verticalContent: true,
67-
subtitle: "View your students’ progress through their assignments."}}
68-
imageClassName="teacher-features"
69-
className="w-100"
77+
<Col md={{size: 6, offset: 3}} lg={{size: 4, offset: 0}}>
78+
<TeacherFeatureCard
79+
url = {PATHS.ASSIGNMENT_PROGRESS}
80+
imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#track-progress"
81+
title = "3. Assignment Progress"
82+
subtitle = "View your students’ progress through their assignments."
83+
disabled = {isDisabled}
7084
/>
7185
</Col>
7286
</Row>
7387
<Row className="my-4">
74-
<Col>
75-
<h3 className="h-title text-center">Teacher Support</h3>
76-
</Col>
88+
<h4>Teacher Support</h4>
7789
</Row>
7890
<Row className="isaac-cards-body mt-2 px-3">
79-
<Col sm={6} md={4} className="mb-3 mb-md-0">
80-
<IsaacCard doc={{ clickUrl: "/support/teacher/general",
81-
image: {src: "/assets/phy/icons/teacher_features_sprite.svg#teacher-forum"},
82-
title: "Teacher FAQ",
83-
verticalContent: true,
84-
subtitle: "Answers to your questions and how-to guides."}}
85-
imageClassName="teacher-features"
86-
className="w-100"
91+
<Col md={6} lg={4} className="mb-3 mb-lg-0">
92+
<TeacherFeatureCard
93+
url = "/support/teacher/general"
94+
imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#teacher-forum"
95+
title = "Teacher FAQ"
96+
subtitle = "Answers to your questions and how-to guides."
8797
/>
8898
</Col>
89-
<Col sm={6} md={4} className="mb-3 mb-md-0">
90-
<IsaacCard doc={{ clickUrl: "/events?types=teacher",
91-
image: {src: "/assets/phy/icons/teacher_features_sprite.svg#use-with-class"},
92-
title: "Teacher CPD",
93-
verticalContent: true,
94-
subtitle: "Free short courses to help you use Isaac Physics: by topic or by level of experience with Isaac."}}
95-
imageClassName="teacher-features"
96-
className="w-100"
99+
<Col md={6} lg={4} className="mb-3 mb-lg-0">
100+
<TeacherFeatureCard
101+
url = "/events?types=teacher"
102+
imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#use-with-class"
103+
title = "Teacher CPD"
104+
subtitle = "Free short courses to help you use Isaac: by topic or by level of experience with Isaac."
97105
/>
98106
</Col>
99-
<Col xs={0} sm={3} className="d-md-none"/>
100-
<Col sm={6} md={4}>
101-
<IsaacCard doc={{ clickUrl: "/teacher_emails",
102-
image: {src: "/assets/phy/icons/computer.svg"},
103-
title: "Teacher Emails",
104-
disabled: isDisabled,
105-
verticalContent: true,
106-
subtitle: "Recent start-of-term emails sent to teachers."}}
107-
imageClassName="teacher-features"
108-
className="w-100"
107+
<Col md={{size: 6, offset: 3}} lg={{size: 4, offset: 0}}>
108+
<TeacherFeatureCard
109+
url = "/teacher_emails"
110+
imgSrc = "/assets/phy/icons/computer.svg"
111+
title = "Teacher Emails"
112+
subtitle = "Recent start-of-term emails sent to teachers."
113+
disabled = {isDisabled}
109114
/>
110115
</Col>
111116
</Row>
112117
<Row className="my-4">
113-
<Col>
114-
<h3 className="h-title text-end">Teacher Resources</h3>
115-
</Col>
118+
<h4>Teacher Resources</h4>
116119
</Row>
117120
<Row className="isaac-cards-body mb-5 mt-2 px-3">
118-
<Col sm={6} md={4} className="mb-3 mb-md-0">
119-
<IsaacCard doc={{ clickUrl: "/pages/order_books",
120-
image: {src: "/assets/phy/icons/teacher_features_sprite.svg#skills-book-cover"},
121-
title: "Isaac Physics Books",
122-
verticalContent: true,
123-
subtitle: "Buy one of our Skills Mastery books at cost."}}
124-
imageClassName="teacher-features"
125-
className="w-100"
121+
<Col md={6} lg={4} className="mb-3 mb-lg-0">
122+
<TeacherFeatureCard
123+
url = "/pages/order_books"
124+
imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#skills-book-cover"
125+
title = "Isaac Books"
126+
subtitle = "Buy one of our Skills Mastery books at cost."
126127
/>
127128
</Col>
128-
<Col sm={6} md={4} className="mb-3 mb-md-0">
129-
<IsaacCard doc={{ clickUrl: "/pages/pre_made_gameboards",
130-
image: {src: "/assets/phy/icons/key_stage_sprite.svg#triple"},
131-
title: "Boards by Topic",
132-
verticalContent: true,
133-
subtitle: isLoggedIn(user) ? "A selection of our questions organised by topic." : "A selection of our questions organised by lesson topic."}}
134-
imageClassName="teacher-features"
135-
className="w-100"
129+
<Col md={6} lg={4} className="mb-3 mb-lg-0">
130+
<TeacherFeatureCard
131+
url = "/pages/pre_made_gameboards"
132+
imgSrc = "/assets/phy/icons/key_stage_sprite.svg#triple"
133+
title = "Boards by Topic"
134+
subtitle = {isLoggedIn(user) ? "A selection of our questions organised by topic." : "A selection of our questions organised by lesson topic."}
136135
/>
137136
</Col>
138-
<Col xs={0} sm={3} className="d-md-none"/>
139-
<Col sm={6} md={4}>
140-
<IsaacCard doc={{ clickUrl: "/events?types=student",
141-
image: {src: "/assets/phy/icons/teacher_features_sprite.svg#calendar"},
142-
title: "Events",
143-
verticalContent: true,
144-
subtitle: "Browse free events for your KS4 and KS5 students."}}
145-
imageClassName="teacher-features"
146-
className="w-100"
137+
<Col md={{size: 6, offset: 3}} lg={{size: 4, offset: 0}}>
138+
<TeacherFeatureCard
139+
url = "/events?types=student"
140+
imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#calendar"
141+
title = "Events"
142+
subtitle = "Browse free events for your KS4 and KS5 students."
147143
/>
148144
</Col>
149145
</Row>

‎src/scss/phy/menu-page-phy.scss

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,6 @@
1717
margin-bottom: 15px;
1818
display: flex;
1919
position: relative;
20-
21-
&.teacher-features {
22-
display: block;
23-
width: 62.5%;
24-
margin-left: 18.75%;
25-
}
2620
}
2721

2822
.col-centered{
@@ -87,6 +81,20 @@
8781
border-radius: 0;
8882
outline: none !important;
8983
}
84+
85+
&.teacher-features {
86+
border-radius: 8px;
87+
border: 2px solid $color-neutral-200;
88+
img {
89+
width: 3.5rem;
90+
}
91+
&.disabled {
92+
box-shadow: none !important;
93+
img {
94+
filter: grayscale(1);
95+
}
96+
}
97+
}
9098
}
9199

92100
button.hexagon-btn-link {
@@ -170,10 +178,6 @@
170178
margin-right: auto !important;
171179
margin-left: auto !important;
172180
display: block;
173-
174-
&.teacher-features {
175-
width: 150px;
176-
}
177181
}
178182

179183
&.disabled {

0 commit comments

Comments
 (0)