Skip to content
Snippets Groups Projects
Commit f7cafcb1 authored by Sebastian Martin Andresen's avatar Sebastian Martin Andresen
Browse files

change card layout

parent 586f4325
No related branches found
No related tags found
No related merge requests found
Pipeline #24771 passed
......@@ -6,7 +6,9 @@ before_script:
pages:
stage: deploy
script: hexo deploy
script:
- hexo server
- hexo deploy
artifacts:
paths:
- public
......
......@@ -3,10 +3,11 @@
<head>
<meta charset="UTF-8"/>
<title>React example with static pages</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="bootstrap.min.css"/>
</head>
<body>
<div style=" margin-top: 30px;"/>
<div style=" margin-top: 3%;"/>
<div id="root"></div>
</body>
</html>
.cc-size {
min-width: 400px;
max-width: 49%;
float: left;
}
File added
......@@ -31,7 +31,25 @@ class Case {
}
}
let cases = [
new Case('Title 1', 'Hei', 'http://allhdwallpapers.com/wp-content/uploads/2015/07/Storm-3.jpg'),
new Case('Title1', '', 'https://i.imgur.com/vSD5rT8.gif'),
new Case('Title 2', '', 'http://s1.bwallpapers.com/wallpapers/2014/01/29/snow-cat_045842554.jpg'),
new Case(
'Title 2',
'',
'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.gordonrigg.com%2Fthe-hub%2Fwp-content%2Fuploads%2F2015%2F06%2Fcats.jpg&f=1'
),
new Case('Title 2', '', 'http://hdgifs.com/wp-content/uploads/2017/04/pikaaaaa-chuuuuuuuu.gif'),
new Case('Title 2', '', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', '', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', '', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', '', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', '', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', '', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', '', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', '', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', '', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', '', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', '', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', '', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg')
];
......@@ -53,18 +71,16 @@ class Menu extends Component {
class Home extends Component {
render() {
return (
<Card title=" ">
<ListGroup>
<div>
{cases.map(e => (
<Card title={e.overskrift}>
<Card className="cc-size" title={e.overskrift}>
<ListGroup.Item>
<img class="card-img-top" src={e.image} alt={e.image} />
<img className="card-img-top" src={e.image} src={e.image} alt={e.image} />
</ListGroup.Item>
<ListGroup.Item to={'/case/' + e.id}>Comments</ListGroup.Item>
</Card>
))}
</ListGroup>
</Card>
</div>
);
}
}
......@@ -77,10 +93,10 @@ class CaseDetails extends Component<{ match: { params: { id: number } } }> {
return null; // Return empty object (nothing to render)
}
return (
<div>
<ListGroup>
<Card title={e.overskrift}>
<ListGroup.Item>
<img src={e.image} alt="Image Cap" />
<img className="card-img-top" src={e.image} alt="Image Cap" />
</ListGroup.Item>
<ListGroup.Item>{e.content}</ListGroup.Item>
</Card>
......@@ -94,7 +110,7 @@ class CaseDetails extends Component<{ match: { params: { id: number } } }> {
</ListGroup.Item>
</ListGroup>
</Card>
</div>
</ListGroup>
);
}
......
......@@ -59,7 +59,7 @@ export class Alert extends Component {
export class Card extends Component<{ title: React.Node, children?: React.Node }> {
render() {
return (
<div className="card">
<div className="card cc-size">
<div className="card-body">
<h5 className="card-title">{this.props.title}</h5>
<div className="card-text">{this.props.children}</div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment