Skip to content

Redesign Teacher Features page #1338

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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 10, 2025
Merged

Redesign Teacher Features page #1338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b560e40
Restyle Teacher Features cards
axlewin Mar 4, 2025
4279fc1
Left-align headings
axlewin Mar 4, 2025
9421a6e
Replace hardcoded "Isaac Physics" with "Isaac"
axlewin Mar 4, 2025
fbdc547
Fix image sizing & overflow on small screens
axlewin Mar 4, 2025
3a58614
Increase breakpoints to enable wider card widths
jacbn Mar 10, 2025
24d0eea
Merge branch 'redesign-2024' into redesign/page/teacher-features
jacbn Mar 10, 2025
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
176 changes: 86 additions & 90 deletions src/app/components/pages/TeacherFeatures.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,39 @@
import React from "react";
import {Button, Col, Container, Row} from "reactstrap";
import {Button, Card, Col, Container, Row} from "reactstrap";
import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
import {useAppSelector, selectors} from "../../state";
import {isLoggedIn, isTeacherOrAbove, PATHS} from "../../services";
import {Link} from "react-router-dom";
import {IsaacCard} from "../content/IsaacCard";
import classNames from "classnames";

export const TeacherFeatures = () => {

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

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

return<Container>
interface TeacherFeatureCardProps {
url: string;
imgSrc: string;
title: string;
subtitle: string;
disabled?: boolean;
}

const TeacherFeatureCard = (props: TeacherFeatureCardProps) => {
const {url, imgSrc, title, subtitle, disabled} = props;
return <Link to={url} className="h-100 w-100" aria-label={title} aria-disabled={disabled} style={{textDecoration: "none"}}>
<Card className={classNames("p-3 teacher-features h-100", {"disabled": disabled})}>
<div className="d-flex justify-content-between">
<h5 className="mt-3 me-2">{title}</h5>
<img src={imgSrc} alt=""/>
</div>
<p>{subtitle}</p>
</Card>
</Link>;
};

return <Container>
<Row className="mb-4">
<Col>
<TitleAndBreadcrumb currentPageTitle={"Teacher Features"} />
Expand All @@ -22,11 +43,11 @@ export const TeacherFeatures = () => {
{isDisabled ?
<Col md={6}>
<p className="subtitle">
Isaac Physics provides you with a huge range of resources to support your teaching of Physics – all for free. </p>
Isaac provides you with a huge range of resources to support your teaching of Science subjects – all for free. </p>
</Col>:
<Col>
<p className="subtitle">
Isaac Physics provides you with a huge range of resources to support your teaching of Physics – all for free. </p>
Isaac provides you with a huge range of resources to support your teaching of Science subjects – all for free. </p>
</Col>}
{isDisabled && <Col md={6} className="text-center text-md-end">
<Button tag={Link} size="lg" color="secondary" to={isLoggedIn(user) ? "/pages/contact_us_teacher" : "/register"}>
Expand All @@ -35,115 +56,90 @@ export const TeacherFeatures = () => {
</Col>}
</Row>
<Row className="isaac-cards-body px-3">
<Col sm={6} md={4} className="mb-3 mb-md-0">
<IsaacCard doc={{ clickUrl: "/groups",
image: {src: "/assets/phy/icons/teacher_features_sprite.svg#groups"},
title: "1. Create a Group",
disabled: isDisabled,
verticalContent: true,
subtitle: "Create and manage class groups, and share them with colleagues."}}
imageClassName="teacher-features"
className="w-100"
<Col md={6} lg={4} className="mb-3 mb-lg-0">
<TeacherFeatureCard
url = "/groups"
imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#groups"
title = "1. Create a Group"
subtitle = "Create and manage class groups, and share them with colleagues."
disabled = {isDisabled}
/>
</Col>
<Col sm={6} md={4} className="mb-3 mb-md-0">
<IsaacCard doc={{ clickUrl: PATHS.SET_ASSIGNMENTS,
image: {src: "/assets/phy/icons/teacher_features_sprite.svg#set-assignments"},
title: "2. Set Assignments",
disabled: isDisabled,
verticalContent: true,
subtitle: "Set assignments from our skills books, pre-made boards or create your own."}}
imageClassName="teacher-features"
className="w-100"
<Col md={6} lg={4} className="mb-3 mb-lg-0">
<TeacherFeatureCard
url = {PATHS.SET_ASSIGNMENTS}
imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#set-assignments"
title = "2. Set Assignments"
subtitle = "Set assignments from our skills books, pre-made boards or create your own."
disabled = {isDisabled}
/>
</Col>
<Col xs={0} sm={3} className="d-md-none"/>
<Col sm={6} md={4}>
<IsaacCard doc={{ clickUrl: PATHS.ASSIGNMENT_PROGRESS,
image: {src: "/assets/phy/icons/teacher_features_sprite.svg#track-progress"},
title: "3. Assignment Progress",
disabled: isDisabled,
verticalContent: true,
subtitle: "View your students’ progress through their assignments."}}
imageClassName="teacher-features"
className="w-100"
<Col md={{size: 6, offset: 3}} lg={{size: 4, offset: 0}}>
<TeacherFeatureCard
url = {PATHS.ASSIGNMENT_PROGRESS}
imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#track-progress"
title = "3. Assignment Progress"
subtitle = "View your students’ progress through their assignments."
disabled = {isDisabled}
/>
</Col>
</Row>
<Row className="my-4">
<Col>
<h3 className="h-title text-center">Teacher Support</h3>
</Col>
<h4>Teacher Support</h4>
</Row>
<Row className="isaac-cards-body mt-2 px-3">
<Col sm={6} md={4} className="mb-3 mb-md-0">
<IsaacCard doc={{ clickUrl: "/support/teacher/general",
image: {src: "/assets/phy/icons/teacher_features_sprite.svg#teacher-forum"},
title: "Teacher FAQ",
verticalContent: true,
subtitle: "Answers to your questions and how-to guides."}}
imageClassName="teacher-features"
className="w-100"
<Col md={6} lg={4} className="mb-3 mb-lg-0">
<TeacherFeatureCard
url = "/support/teacher/general"
imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#teacher-forum"
title = "Teacher FAQ"
subtitle = "Answers to your questions and how-to guides."
/>
</Col>
<Col sm={6} md={4} className="mb-3 mb-md-0">
<IsaacCard doc={{ clickUrl: "/events?types=teacher",
image: {src: "/assets/phy/icons/teacher_features_sprite.svg#use-with-class"},
title: "Teacher CPD",
verticalContent: true,
subtitle: "Free short courses to help you use Isaac Physics: by topic or by level of experience with Isaac."}}
imageClassName="teacher-features"
className="w-100"
<Col md={6} lg={4} className="mb-3 mb-lg-0">
<TeacherFeatureCard
url = "/events?types=teacher"
imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#use-with-class"
title = "Teacher CPD"
subtitle = "Free short courses to help you use Isaac: by topic or by level of experience with Isaac."
/>
</Col>
<Col xs={0} sm={3} className="d-md-none"/>
<Col sm={6} md={4}>
<IsaacCard doc={{ clickUrl: "/teacher_emails",
image: {src: "/assets/phy/icons/computer.svg"},
title: "Teacher Emails",
disabled: isDisabled,
verticalContent: true,
subtitle: "Recent start-of-term emails sent to teachers."}}
imageClassName="teacher-features"
className="w-100"
<Col md={{size: 6, offset: 3}} lg={{size: 4, offset: 0}}>
<TeacherFeatureCard
url = "/teacher_emails"
imgSrc = "/assets/phy/icons/computer.svg"
title = "Teacher Emails"
subtitle = "Recent start-of-term emails sent to teachers."
disabled = {isDisabled}
/>
</Col>
</Row>
<Row className="my-4">
<Col>
<h3 className="h-title text-end">Teacher Resources</h3>
</Col>
<h4>Teacher Resources</h4>
</Row>
<Row className="isaac-cards-body mb-5 mt-2 px-3">
<Col sm={6} md={4} className="mb-3 mb-md-0">
<IsaacCard doc={{ clickUrl: "/pages/order_books",
image: {src: "/assets/phy/icons/teacher_features_sprite.svg#skills-book-cover"},
title: "Isaac Physics Books",
verticalContent: true,
subtitle: "Buy one of our Skills Mastery books at cost."}}
imageClassName="teacher-features"
className="w-100"
<Col md={6} lg={4} className="mb-3 mb-lg-0">
<TeacherFeatureCard
url = "/pages/order_books"
imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#skills-book-cover"
title = "Isaac Books"
subtitle = "Buy one of our Skills Mastery books at cost."
/>
</Col>
<Col sm={6} md={4} className="mb-3 mb-md-0">
<IsaacCard doc={{ clickUrl: "/pages/pre_made_gameboards",
image: {src: "/assets/phy/icons/key_stage_sprite.svg#triple"},
title: "Boards by Topic",
verticalContent: true,
subtitle: isLoggedIn(user) ? "A selection of our questions organised by topic." : "A selection of our questions organised by lesson topic."}}
imageClassName="teacher-features"
className="w-100"
<Col md={6} lg={4} className="mb-3 mb-lg-0">
<TeacherFeatureCard
url = "/pages/pre_made_gameboards"
imgSrc = "/assets/phy/icons/key_stage_sprite.svg#triple"
title = "Boards by Topic"
subtitle = {isLoggedIn(user) ? "A selection of our questions organised by topic." : "A selection of our questions organised by lesson topic."}
/>
</Col>
<Col xs={0} sm={3} className="d-md-none"/>
<Col sm={6} md={4}>
<IsaacCard doc={{ clickUrl: "/events?types=student",
image: {src: "/assets/phy/icons/teacher_features_sprite.svg#calendar"},
title: "Events",
verticalContent: true,
subtitle: "Browse free events for your KS4 and KS5 students."}}
imageClassName="teacher-features"
className="w-100"
<Col md={{size: 6, offset: 3}} lg={{size: 4, offset: 0}}>
<TeacherFeatureCard
url = "/events?types=student"
imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#calendar"
title = "Events"
subtitle = "Browse free events for your KS4 and KS5 students."
/>
</Col>
</Row>
Expand Down
24 changes: 14 additions & 10 deletions src/scss/phy/menu-page-phy.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,6 @@
margin-bottom: 15px;
display: flex;
position: relative;

&.teacher-features {
display: block;
width: 62.5%;
margin-left: 18.75%;
}
}

.col-centered{
Expand Down Expand Up @@ -87,6 +81,20 @@
border-radius: 0;
outline: none !important;
}

&.teacher-features {
border-radius: 8px;
border: 2px solid $color-neutral-200;
img {
width: 3.5rem;
}
&.disabled {
box-shadow: none !important;
img {
filter: grayscale(1);
}
}
}
}

button.hexagon-btn-link {
Expand Down Expand Up @@ -170,10 +178,6 @@
margin-right: auto !important;
margin-left: auto !important;
display: block;

&.teacher-features {
width: 150px;
}
}

&.disabled {
Expand Down
Loading