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
Next Next commit
learn page v2 initial push
  • Loading branch information
M-ZubairAhmed committed Oct 25, 2017
commit 89bcd1750835ffdb7d5a5e00cf5218b566f3702a
4 changes: 4 additions & 0 deletions components/head.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ export default ({ title }) => (
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css"
/>
<title>{title}</title>
<meta name="description" content="coderplex" />
<meta property="og:type" content="website" />
Expand Down
230 changes: 88 additions & 142 deletions pages/learn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,147 +1,93 @@
import React from 'react';
import { Accordion, Icon, List } from 'semantic-ui-react';
import { Card, Icon, Label, Popup } from 'semantic-ui-react';

import publicPage from '../hocs/public-page';
import TopBanner from '../components/top-banner';

export default publicPage(() => {
return (
<div className="root">
<TopBanner
pageTitle="Learn"
pageSubTitle="Open Source Learning Guides to master your favorite technology"
/>
<main>
<section>
<Accordion fluid styled>
<Accordion.Title>
<Icon name="dropdown" />
Web Development
</Accordion.Title>
<Accordion.Content>
<Accordion>
<Accordion.Title>
<Icon name="dropdown" />
Frontend
</Accordion.Title>
<Accordion.Content>
<List selection verticalAlign="middle">
<List.Item
target="_blank"
href="https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-Angular.md"
>
<List.Content>
<List.Header>Angular</List.Header>
<List.Description>
Front-end web application framework by Google
</List.Description>
</List.Content>
</List.Item>
<List.Item
target="_blank"
href="https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-React.md"
>
<List.Content>
<List.Header>React</List.Header>
<List.Description>
JavaScript library for building user interfaces from
Facebook
</List.Description>
</List.Content>
</List.Item>
<List.Item
target="_blank"
href="https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-VueJS.md"
>
<List.Content>
<List.Header>Vue</List.Header>
<List.Description>
Progressive JavaScript framework for building user
interfaces by community
</List.Description>
</List.Content>
</List.Item>
</List>
</Accordion.Content>
<Accordion.Title>
<Icon name="dropdown" />
Backend
</Accordion.Title>
<Accordion.Content>
<List selection verticalAlign="middle">
<List.Item
target="_blank"
href="https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Laravel.md"
>
<List.Content>
<List.Header>Laravel</List.Header>
<List.Description>PHP web framework</List.Description>
</List.Content>
</List.Item>
</List>
</Accordion.Content>
</Accordion>
</Accordion.Content>
<Accordion.Title>
<Icon name="dropdown" />
Data Science
</Accordion.Title>
<Accordion.Content>
<List selection verticalAlign="middle">
<List.Item
target="_blank"
href="https://github.com/coderplex/learn/blob/master/data-science/learn-ds.md"
>
<List.Content>
<List.Header>Core Data Science</List.Header>
<List.Description>
A field which provides meaningful information from large
amounts of data.
</List.Description>
</List.Content>
</List.Item>
</List>
</Accordion.Content>
<Accordion.Title>
<Icon name="dropdown" />
Decentralized Systems
</Accordion.Title>
<Accordion.Content>
<List selection verticalAlign="middle">
<List.Item
target="_blank"
href="https://github.com/coderplex/learn/blob/master/Blockchain/learn-blockchain.md"
>
<List.Content>
<List.Header>Blockchain</List.Header>
<List.Description>
A distributed database technology
</List.Description>
</List.Content>
</List.Item>
</List>
</Accordion.Content>
</Accordion>
</section>
</main>
<style jsx>{`
.root {
background-color: #ffffff;
}
main {
background-color: #ffffff;
max-width: 800px;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
min-height: calc(100vh - 70px);
margin: 0 auto;
}
section {
margin: 50px 0;
}
`}</style>
</div>
);
});
import { dataInRootLearn } from '../utils/mock-data';

class Learn extends React.Component {
state = {
filter: '',
};

render() {
return (
<div className="root">
<TopBanner
pageTitle="Learn"
pageSubTitle="Open Source Learning Guides to master your favorite technology"
/>
<main>
<section>
<filterset>{/* <Button /> */}</filterset>
<grid>
<Card.Group itemsPerRow={3}>
{dataInRootLearn.map(subject => (
<Card
raised
key={subject.id}
label={{ as: 'a', corner: 'left', icon: 'heart' }}
>
<Label attached="bottom right">
<Popup
trigger={
<Icon
style={{ marginRight: '0px' }}
name={
subject.learnGuideStatus ? 'checkmark' : 'info'
}
/>
}
position="top center"
>
{subject.learnGuideStatus
? 'Complete guide'
: 'Guide underconstruction'}
</Popup>
</Label>
<logo className={subject.icon} />
<Card.Content>
<Card.Header>{subject.title}</Card.Header>
<Card.Meta>{subject.domain}</Card.Meta>
</Card.Content>
<Card.Content extra>
<Icon name="student" />
{`${subject.learningCount} learning`}
</Card.Content>
</Card>
))}
</Card.Group>
</grid>
</section>
</main>
<style jsx>{`
.root {
background-color: #ffffff;
}
main {
background-color: #ffffff;
max-width: 800px;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
min-height: calc(100vh - 70px);
margin: 0 auto;
}
section {
margin: 50px 0;
}
logo {
font-size: 140px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
`}</style>
</div>
);
}
}

export default publicPage(Learn);