Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Mar 9, 2021. It is now read-only.

learn V2 #59

Merged
merged 16 commits into from
Nov 1, 2017
Merged

learn V2 #59

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
89bcd17
learn page v2 initial push
Oct 25, 2017
197279e
Merge branch 'master' of github.com:coderplex/coderplex into v2
Oct 25, 2017
84e84f0
latest merge from master
Oct 25, 2017
32a7112
mobile view bug fixed
Oct 25, 2017
30912ac
filter domain added with functionality
Oct 29, 2017
d598dc3
implement parameterized routing for learn pages
vinaypuppal Oct 29, 2017
627a7f3
fix typo
vinaypuppal Oct 29, 2017
7e2ab3d
space under search added
Oct 30, 2017
aac6496
overview section added to learn/
Oct 31, 2017
5f1838c
removed stale packages
Oct 31, 2017
c9fd5f0
guides section completed without style
Oct 31, 2017
86e44fd
table style improved
Oct 31, 2017
5f47064
empty style tag bug fixed in production
Oct 31, 2017
19af29f
in mobile view, font of table header decreased
Oct 31, 2017
9f5b33d
contributors to learn page added
Oct 31, 2017
de9d20f
contritional added for only showing curriculum for laravel
Nov 1, 2017
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
Prev Previous commit
contritional added for only showing curriculum for laravel
  • Loading branch information
M-ZubairAhmed committed Nov 1, 2017
commit de9d20f5ae5790498c23d8b4ab4c2509f37886d6
138 changes: 79 additions & 59 deletions pages/learn/subject.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import MarkedJS from '../../components/marked-js';
import AccordGuide from '../../components/accord-guide';
import { contentsOfLaravel } from '../../utils/mock-data';
import RowContributors from '../../components/row-contributors';
import Icon from '../../components/icon';

export default publicPage(
class Subjects extends React.Component {
Expand Down Expand Up @@ -38,65 +39,75 @@ export default publicPage(
render() {
return (
<div>
<div className="header">
<div className={`logo ${contentsOfLaravel.logo}`} />
<div className="headline">{this.props.url.query.id}</div>
</div>
<main>
<section>
<Tab
menu={{
color: 'pink',
attached: false,
tabular: false,
borderless: true,
}}
panes={[
{
menuItem: 'Overview',
render: () => (
<Tab.Pane attached={false}>
<MarkedJS
loading={this.state.overviewLoading}
markdown={this.state.overview}
/>
</Tab.Pane>
),
},
{
menuItem: 'Guide',
render: () => (
<Tab.Pane attached={false}>
{contentsOfLaravel.guides.map(guide => (
<AccordGuide
key={guide.url}
title={guide.name}
url={guide.url}
/>
))}
</Tab.Pane>
),
},
{
menuItem: 'Contributors',
render: () => (
<Tab.Pane attached={false}>
{contentsOfLaravel.contributors.map(contributor => (
<RowContributors
key={contributor.userPage}
userPage={contributor.userPage}
userName={contributor.userName}
userImage={contributor.userImage}
contributions={contributor.contributions}
/>
))}
</Tab.Pane>
),
},
]}
/>
</section>
</main>
{this.props.url.query.id === 'laravel' ? (
<div>
<div className="header">
<div className={`logo ${contentsOfLaravel.logo}`} />
<div className="headline">{this.props.url.query.id}</div>
</div>
<main>
<section>
<Tab
menu={{
color: 'pink',
attached: false,
tabular: false,
borderless: true,
}}
panes={[
{
menuItem: 'Overview',
render: () => (
<Tab.Pane attached={false}>
<MarkedJS
loading={this.state.overviewLoading}
markdown={this.state.overview}
/>
</Tab.Pane>
),
},
{
menuItem: 'Guide',
render: () => (
<Tab.Pane attached={false}>
{contentsOfLaravel.guides.map(guide => (
<AccordGuide
key={guide.url}
title={guide.name}
url={guide.url}
/>
))}
</Tab.Pane>
),
},
{
menuItem: 'Contributors',
render: () => (
<Tab.Pane attached={false}>
{contentsOfLaravel.contributors.map(contributor => (
<RowContributors
key={contributor.userPage}
userPage={contributor.userPage}
userName={contributor.userName}
userImage={contributor.userImage}
contributions={contributor.contributions}
/>
))}
</Tab.Pane>
),
},
]}
/>
</section>
</main>
</div>
) : (
<div className="comingSoon">
<Icon />
<h2>{`${this.props.url.query
.id} and other guides coming soon...!`}</h2>
</div>
)}
<style jsx>{`
.header {
display: flex;
Expand Down Expand Up @@ -142,6 +153,15 @@ export default publicPage(
divide {
width: 100%;
}
.comingSoon {
min-height: calc(100vh - 70px);
background: #f4f7fb;
color: #314159;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
`}</style>
</div>
);
Expand Down
16 changes: 16 additions & 0 deletions utils/mock-data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,5 +220,21 @@ export const contentsOfLaravel = {
},
],
},
{
userName: 'Vinay Puppal',
userPage: 'https://www.vinaypuppal.com/',
userImage:
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/214440/profile/profile-512.jpg?2',
contributions: [
{
type: 'topic',
count: '4',
},
{
type: 'article',
count: '2',
},
],
},
],
};