Skip to content

Commit 8c632ba

Browse files
Aniket-EnggAniket-Engg
authored
Merge pull request #6328 from ethereum/refactor/learneth-plugin
Refactor Learn eth plugin
2 parents ff0fb5b + b2d426e commit 8c632ba

File tree

15 files changed

+1150
-486
lines changed

15 files changed

+1150
-486
lines changed

‎apps/learneth/src/components/BackButton/index.scss‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,114 @@ a:hover {
2626
transform: translateX(0);
2727
}
2828
}
29+
30+
.learneth-top-nav {
31+
background-color: var(--bs-light);
32+
}
33+
34+
.nav-button {
35+
background-color: var(--bs-body-bg);
36+
border: 1px solid var(--bs-border-color);
37+
border-radius: 0.375rem;
38+
font-size: 0.8rem;
39+
font-weight: 500;
40+
padding: 0.3rem 0.75rem;
41+
transition: border-color 0.15s ease-in-out;
42+
43+
span {
44+
transform: none !important;
45+
}
46+
47+
&:hover {
48+
border-color: var(--bs-primary);
49+
}
50+
}
51+
52+
.dropdown-toggle.nav-button {
53+
background-color: var(--bs-body-bg);
54+
border-color: var(--bs-border-color);
55+
color: var(--bs-body-color);
56+
57+
&:hover, &:active, &:focus {
58+
background-color: var(--bs-body-bg) !important;
59+
color: var(--bs-body-color) !important;
60+
border-color: var(--bs-primary) !important;
61+
box-shadow: none !important;
62+
}
63+
64+
&::after {
65+
display: none;
66+
}
67+
}
68+
69+
.nav-button i, .syllabus-item i {
70+
margin-right: 0.5rem;
71+
transform: translateY(1px);
72+
}
73+
74+
.nav-divider {
75+
border-color: var(--bs-border-color);
76+
opacity: 0.5;
77+
}
78+
79+
.chapter-nav {
80+
.chapter-title {
81+
font-size: 0.85rem;
82+
font-weight: 600;
83+
color: var(--bs-body-color);
84+
}
85+
.chapter-pagination {
86+
font-size: 0.7rem;
87+
}
88+
.chapter-arrow {
89+
background-color: var(--bs-body-bg);
90+
border: 1px solid var(--bs-border-color);
91+
border-radius: 0.375rem;
92+
width: 2rem;
93+
height: 2rem;
94+
display: flex;
95+
align-items: center;
96+
justify-content: center;
97+
98+
&.disabled {
99+
pointer-events: none;
100+
opacity: 0.4;
101+
}
102+
}
103+
}
104+
105+
.syllabus-dropdown-menu {
106+
padding: 0.25rem 0;
107+
background-color: var(--bs-body-bg);
108+
border: 1px solid var(--bs-border-color-translucent);
109+
box-shadow: var(--bs-box-shadow);
110+
}
111+
112+
.syllabus-item {
113+
font-size: 0.8rem;
114+
padding: 0.5rem 1rem;
115+
display: flex !important;
116+
align-items: center;
117+
transition: border-color 0.15s ease-in-out;
118+
119+
i {
120+
opacity: 0.6;
121+
}
122+
123+
position: relative;
124+
span {
125+
transform: none !important;
126+
}
127+
&:hover {
128+
&::before {
129+
content: '';
130+
position: absolute;
131+
top: 5px;
132+
bottom: 5px;
133+
left: 5px;
134+
width: 3px;
135+
background-color: var(--bs-primary);
136+
border-radius: 3px;
137+
}
138+
}
139+
}

‎apps/learneth/src/components/BackButton/index.tsx‎

Lines changed: 64 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,79 @@
1-
import React, {useState} from 'react'
2-
import {Link, useLocation, useNavigate} from 'react-router-dom'
3-
import {Button, Modal } from 'react-bootstrap'
4-
import { CustomTooltip } from "@remix-ui/helper"
1+
import React from 'react'
2+
import { Link, useLocation, useNavigate } from 'react-router-dom'
3+
import { Dropdown } from 'react-bootstrap'
54
import './index.scss'
65

7-
function BackButton({entity}: any) {
8-
const navigate = useNavigate()
6+
function BackButton({ entity }: any) {
97
const location = useLocation()
10-
const [show, setShow] = useState(false)
118
const isDetailPage = location.pathname === '/detail'
9+
1210
const queryParams = new URLSearchParams(location.search)
1311
const stepId = Number(queryParams.get('stepId'))
14-
const nextStep = entity && entity.steps[stepId + 1]
15-
const previousStep = entity && entity.steps[stepId - 1]
12+
const currentStep = entity?.steps?.[stepId]
13+
14+
const tutorialId = entity?.id || queryParams.get('id')
1615

1716
return (
18-
<nav className="navbar navbar-light bg-light d-flex justify-content-between pt-1 pb-1 ps-1">
19-
<ul className="d-flex nav me-auto">
20-
<li className="nav-item">
21-
<div
22-
className="btn back"
23-
onClick={() => {
24-
setShow(true)
25-
}}
26-
role="button"
27-
>
28-
<CustomTooltip
29-
placement={"right"}
30-
tooltipId="learnethHomeIconTooltip"
31-
tooltipText='Leave tutorial'
32-
>
33-
<i className="fas fa-home ps-1" />
34-
</CustomTooltip>
35-
</div>
36-
</li>
37-
{isDetailPage && (
38-
<li className="nav-item">
39-
<CustomTooltip placement="right" tooltipId="learnethBarsIconTooltip" tooltipText='Tutorial menu'>
40-
<Link className="btn" to={`/list?id=${entity.id}`} onClick={() => (window as any)._paq.push(['trackEvent', 'learneth', 'back_to_menu_step', entity && entity.name])}>
41-
<i className="fas fa-bars" />
42-
</Link>
43-
</CustomTooltip>
44-
</li>
17+
<div className="learneth-top-nav p-2">
18+
<div className="d-flex justify-content-between align-items-center">
19+
<Link to="/home" className="btn nav-button d-flex align-items-center">
20+
<i className="fas fa-chevron-left"></i>
21+
<span>Tutorials list</span>
22+
</Link>
23+
24+
{isDetailPage && entity?.steps && (
25+
<Dropdown>
26+
<Dropdown.Toggle className="btn nav-button d-flex align-items-center" id="syllabus-dropdown">
27+
<i className="fas fa-list-ul me-2"></i>
28+
<span>Syllabus</span>
29+
</Dropdown.Toggle>
30+
31+
<Dropdown.Menu className="syllabus-dropdown-menu">
32+
<div className="px-3 pt-2 pb-1 d-flex justify-content-between">
33+
<h6 className="fw-bold mb-0">Syllabus</h6>
34+
<span className="small text-muted">{entity.steps.length} chapters</span>
35+
</div>
36+
<Dropdown.Divider />
37+
{entity.steps.map((step: any, index: number) => (
38+
<Dropdown.Item as={Link} to={`/detail?id=${entity.id}&stepId=${index}`} key={index} className="syllabus-item">
39+
<i className="far fa-file-alt me-2"></i>
40+
<span>{step.name}</span>
41+
</Dropdown.Item>
42+
))}
43+
</Dropdown.Menu>
44+
</Dropdown>
4545
)}
46-
</ul>
47-
{isDetailPage && (
48-
<form className="form d-flex">
49-
{stepId > 0 && (
50-
<Link to={`/detail?id=${entity.id}&stepId=${stepId - 1}`} onClick={() => (window as any)._paq.push(['trackEvent', 'learneth', 'previous_step', `${entity.name}/${previousStep && previousStep.name}`])}>
51-
<i className="fas fa-chevron-left pe-1" />
46+
</div>
47+
48+
{isDetailPage && currentStep && (
49+
<>
50+
<hr className="nav-divider my-2" />
51+
<div className="chapter-nav d-flex justify-content-between align-items-center">
52+
<Link
53+
to={`/detail?id=${entity.id}&stepId=${stepId - 1}`}
54+
className={`btn chapter-arrow ${stepId === 0 ? 'disabled' : ''}`}
55+
>
56+
<i className="fas fa-chevron-left"></i>
5257
</Link>
53-
)}
54-
{stepId + 1}/{entity && <div className="">{entity.steps.length}</div>}
55-
{stepId < entity.steps.length - 1 && (
56-
<Link to={`/detail?id=${entity.id}&stepId=${stepId + 1}`} onClick={() => (window as any)._paq.push(['trackEvent', 'learneth', 'next_step', `${entity.name}/${nextStep && nextStep.name}`])} >
57-
<i className="fas fa-chevron-right ps-1 pe-1" />
58+
59+
<div className="text-center">
60+
<div className="chapter-title">{currentStep.name}</div>
61+
<div className="chapter-pagination small text-muted">
62+
{stepId + 1} / {entity.steps.length}
63+
</div>
64+
</div>
65+
66+
<Link
67+
to={`/detail?id=${entity.id}&stepId=${stepId + 1}`}
68+
className={`btn chapter-arrow ${stepId >= entity.steps.length - 1 ? 'disabled' : ''}`}
69+
>
70+
<i className="fas fa-chevron-right"></i>
5871
</Link>
59-
)}
60-
</form>
72+
</div>
73+
</>
6174
)}
62-
<Modal
63-
show={show}
64-
onHide={() => {
65-
setShow(false)
66-
}}
67-
>
68-
<Modal.Header closeButton>
69-
<Modal.Title>Leave tutorial</Modal.Title>
70-
</Modal.Header>
71-
<Modal.Body>Are you sure you want to leave the tutorial?</Modal.Body>
72-
<Modal.Footer>
73-
<Button
74-
variant="secondary"
75-
onClick={() => {
76-
setShow(false)
77-
}}
78-
>
79-
No
80-
</Button>
81-
<Button
82-
variant="success"
83-
onClick={() => {
84-
setShow(false)
85-
navigate('/home');
86-
(window as any)._paq.push(['trackEvent', 'learneth', 'leave_tutorial', entity && entity.name])
87-
}}
88-
>
89-
Yes
90-
</Button>
91-
</Modal.Footer>
92-
</Modal>
93-
</nav>
75+
</div>
9476
)
9577
}
9678

97-
export default BackButton
79+
export default BackButton

‎apps/learneth/src/components/RepoImporter/index.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,44 @@
22
width: 3px;
33
display: inline-block;
44
}
5+
.repo-importer-container {
6+
font-size: 0.825rem;
7+
}
8+
9+
.repo-importer-container .btn,
10+
.repo-importer-container .form-control {
11+
font-size: 0.75rem;
12+
}
13+
14+
.repo-importer-container .form-control {
15+
padding: 0.375rem 0.75rem;
16+
}
17+
18+
.panel-title {
19+
font-size: 0.875rem;
20+
font-weight: 600;
21+
}
22+
23+
.repo-label {
24+
font-size: 0.625rem;
25+
font-weight: 700;
26+
text-transform: uppercase;
27+
margin-bottom: 0.3rem;
28+
}
29+
30+
.repo-label .fa-question-circle {
31+
transform: translateY(1px);
32+
}
33+
34+
.repo-importer-container .dropdown-item {
35+
white-space: nowrap;
36+
overflow: hidden;
37+
text-overflow: ellipsis;
38+
display: block;
39+
font-size: 0.75rem;
40+
}
41+
42+
.hr-themed {
43+
border-color: var(--bs-secondary);
44+
opacity: .25;
45+
}

0 commit comments

Comments
 (0)