Skip to content
GitLab

Added ProjectList folder and Card feature

Merged Administrator requested to merge github/fork/sergaben/add-sergio-gayon into master
Compare
and
6 files
+ 159
- 1
app‎/src‎
compo‎nents‎
Proje‎ctList‎
CardsCont‎ainer.css‎ +6 -0
CardsCont‎ainer.jsx‎ +40 -0
Projects‎Cards.css‎ +76 -0
Projects‎Cards.jsx‎ +20 -0
Sea‎rch‎
Searc‎h.jsx‎ +15 -0
App‎.js‎ +2 -1
app/src/components/ProjectList/CardsContainer.css 0 → 100644
+ 6
- 0
.Container-layout{
background: white;
display: -ms-flexbox;
padding: 1.2em;
overflow: hidden;
}
\ No newline at end of file
app/src/components/ProjectList/CardsContainer.jsx 0 → 100644
+ 40
- 0
import React from 'react';
import Card from '../ProjectList/ProjectsCards';
import './CardsContainer.css';
export default class CardsContainer extends React.Component{
render(){
const projectList = [{
"name":"React",
"logo":"https://camo.githubusercontent.com/22045498095171997ccf6a9554672519b9f67898/68747470733a2f2f63646e2e776f726c64766563746f726c6f676f2e636f6d2f6c6f676f732f72656163742e737667",
"imageSrc":"https://github.com/facebook/react/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+bug%22",
"description":"This is just an example."
},
{
"name":"Exercism",
"logo":"https://avatars2.githubusercontent.com/u/5624255?v=3&s=100",
"imageSrc":"https://github.com/exercism/exercism.io/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+patch%22",
"description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue felis id lacinia aliquam. Sed condimentum, erat sed pulvinar pretium, dolor leo efficitur nisi, eget faucibus turpis nisi nec justo. Sed sagittis mattis nibh et scelerisque. Vestibulum congue eleifend justo. Fusce efficitur sem eu sagittis bibendum. Pellentesque dictum turpis id nisi commodo, quis dapibus leo iaculis. Aliquam vel felis ipsum. In vel tellus et ligula hendrerit consequat nec id libero. Phasellus tempor felis vitae tincidunt facilisis. Praesent non massa finibus urna porta condimentum. Maecenas blandit mi et elementum venenatis. Pellentesque non tellus ex."
}
]
return(
<div className="Container-layout">
<Card name={projectList[1].name} logo={projectList[1].logo} link={projectList[1].imageSrc} description={projectList[1].description}/>
<Card name={projectList[1].name} logo={projectList[1].logo} link={projectList[1].imageSrc} description={projectList[1].description}/>
<Card name={projectList[1].name} logo={projectList[1].logo} link={projectList[1].imageSrc} description={projectList[1].description}/>
<Card name={projectList[1].name} logo={projectList[1].logo} link={projectList[1].imageSrc} description={projectList[1].description}/>
<Card name={projectList[1].name} logo={projectList[1].logo} link={projectList[1].imageSrc} description={projectList[1].description}/>
<Card name={projectList[0].name} logo={projectList[0].logo} link={projectList[0].imageSrc} description={projectList[0].description}/>
<Card name={projectList[0].name} logo={projectList[0].logo} link={projectList[0].imageSrc} description={projectList[0].description}/>
<Card name={projectList[0].name} logo={projectList[0].logo} link={projectList[0].imageSrc} description={projectList[0].description}/>
<Card name={projectList[0].name} logo={projectList[0].logo} link={projectList[0].imageSrc} description={projectList[0].description}/>
<Card name={projectList[0].name} logo={projectList[0].logo} link={projectList[0].imageSrc} description={projectList[0].description}/>
<Card name={projectList[0].name} logo={projectList[0].logo} link={projectList[0].imageSrc} description={projectList[0].description}/>
</div>
)
}
}
\ No newline at end of file
app/src/components/ProjectList/ProjectsCards.css 0 → 100644
+ 76
- 0
*{
/* border: 1px solid red; */
}
.Card-Header{
position: relative;
display: flex;
font-weight: bold;
border-bottom: 2px solid black;
background: #E3E9E6;
padding: 2%;
line-height: 16px;
}
.Project-Logo{
float:right;
width: 20%;
height: 40%;
margin-left: 35%;
}
.Card-Body{
position: relative;
height: 50%;
word-break: break-all;
background: #F8F8F8;
}
.Card-Container{
overflow: hidden;
float: left;
width: 20%;
word-break: break-all;
display: block;
margin-left: 4%;
margin-bottom: 1.15em;
margin-top: 1.15em;
box-shadow: 0 0.13em 0px 0.04em rgba(0,0,0,.12);
-webkit-transition: box-shadow .1s ease-in-out;
transition: box-shadow .1s ease-in-out;
}
.Card-Container:hover{
box-shadow: 0 0.16em 0px 0.18em rgba(0,0,0,.12);
text-decoration: none;
color:black;
}
.Card-Container:visited{
text-decoration: none;
color:black;
}
.Card-Container:link{
text-decoration: none;
color:black;
}
.Card-Container:active {
text-decoration: none;
color:black;
}
.Card-Description{
position: relative;
text-align: justify;
padding:5%;
}
.Card-Link{
position: relative;
background: lightskyblue;
text-align: left;
padding:10px;
color:#0F3CEF;
}
.Card-Title{
float:left;
margin-top: 6%;
height: 10%;
margin-left: 10%;
}
.Card-Link-Style{
margin-left: 10%;
}
\ No newline at end of file
app/src/components/ProjectList/ProjectsCards.jsx 0 → 100644
+ 20
- 0
import React from 'react';
import './ProjectsCards.css';
export default class Card extends React.Component {
render() {
return (
<a className="Card-Container" href={this.props.link}>
<div className="Card-Header">
<h3 className="Card-Title">{this.props.name}</h3>
<img className="Project-Logo" alt="the framework or language that the project is build upon" src={this.props.logo}/>
</div><div className="Card-Body">
<div className="Card-Description">
<p> {this.props.description}</p>
</div>
</div><div className="Card-Link">
Link to Project
</div>
</a>
)
}
}
\ No newline at end of file
app/src/components/Search/Search.jsx 0 → 100644
+ 15
- 0
import React from 'react';
import Card from '../ProjectList/ProjectsCards';
export default class Search extends React.Component{
render(){
return(
console.log("search component goes here")
)
}
}
\ No newline at end of file