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
Stage: deploy
Show whitespace changes
Inline Side-by-side
.gitlab-ci.yml
+ 3
− 1
View file @ f7cafcb1
...@@ -6,7 +6,9 @@ before_script: ...@@ -6,7 +6,9 @@ before_script:
pages: pages:
stage: deploy stage: deploy
script: hexo deploy script:
- hexo server
- hexo deploy
artifacts: artifacts:
paths: paths:
- public - public
......
_config.yml 0 → 100644
+ 0
− 0
View file @ f7cafcb1
public/index.html
+ 2
− 1
View file @ f7cafcb1
...@@ -3,10 +3,11 @@ ...@@ -3,10 +3,11 @@
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>React example with static pages</title> <title>React example with static pages</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="bootstrap.min.css"/> <link rel="stylesheet" href="bootstrap.min.css"/>
</head> </head>
<body> <body>
<div style=" margin-top: 30px;"/> <div style=" margin-top: 3%;"/>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>
public/style.css 0 → 100644
+ 5
− 0
View file @ f7cafcb1
.cc-size {
min-width: 400px;
max-width: 49%;
float: left;
}
src/ZhRaD3r.mp4 0 → 100644
+ 0
− 0
View file @ f7cafcb1
File added
src/index.js
+ 32
− 16
View file @ f7cafcb1
...@@ -31,7 +31,25 @@ class Case { ...@@ -31,7 +31,25 @@ class Case {
} }
} }
let cases = [ let cases = [
new Case('Title 1', 'Hei', 'http://allhdwallpapers.com/wp-content/uploads/2015/07/Storm-3.jpg'), new Case('Title1', 'hå', 'https://i.imgur.com/vSD5rT8.gif'),
new Case('Title 2', 'Hå', 'http://s1.bwallpapers.com/wallpapers/2014/01/29/snow-cat_045842554.jpg'),
new Case(
'Title 2',
'Hå',
'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', 'Hå', 'http://hdgifs.com/wp-content/uploads/2017/04/pikaaaaa-chuuuuuuuu.gif'),
new Case('Title 2', 'Hå', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', 'Hå', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', 'Hå', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', 'Hå', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', 'Hå', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', 'Hå', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', 'Hå', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', 'Hå', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', 'Hå', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', 'Hå', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', 'Hå', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg'),
new Case('Title 2', 'Hå', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg') new Case('Title 2', 'Hå', 'http://apod.nasa.gov/apod/image/1704/ManDogSun_Hackmann_1600.jpg')
]; ];
...@@ -53,18 +71,16 @@ class Menu extends Component { ...@@ -53,18 +71,16 @@ class Menu extends Component {
class Home extends Component { class Home extends Component {
render() { render() {
return ( return (
<Card title=" "> <div>
<ListGroup>
{cases.map(e => ( {cases.map(e => (
<Card title={e.overskrift}> <Card className="cc-size" title={e.overskrift}>
<ListGroup.Item> <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>
<ListGroup.Item to={'/case/' + e.id}>Comments</ListGroup.Item> <ListGroup.Item to={'/case/' + e.id}>Comments</ListGroup.Item>
</Card> </Card>
))} ))}
</ListGroup> </div>
</Card>
); );
} }
} }
...@@ -77,10 +93,10 @@ class CaseDetails extends Component<{ match: { params: { id: number } } }> { ...@@ -77,10 +93,10 @@ class CaseDetails extends Component<{ match: { params: { id: number } } }> {
return null; // Return empty object (nothing to render) return null; // Return empty object (nothing to render)
} }
return ( return (
<div> <ListGroup>
<Card title={e.overskrift}> <Card title={e.overskrift}>
<ListGroup.Item> <ListGroup.Item>
<img src={e.image} alt="Image Cap" /> <img className="card-img-top" src={e.image} alt="Image Cap" />
</ListGroup.Item> </ListGroup.Item>
<ListGroup.Item>{e.content}</ListGroup.Item> <ListGroup.Item>{e.content}</ListGroup.Item>
</Card> </Card>
...@@ -94,7 +110,7 @@ class CaseDetails extends Component<{ match: { params: { id: number } } }> { ...@@ -94,7 +110,7 @@ class CaseDetails extends Component<{ match: { params: { id: number } } }> {
</ListGroup.Item> </ListGroup.Item>
</ListGroup> </ListGroup>
</Card> </Card>
</div> </ListGroup>
); );
} }
......
src/widgets.js
+ 1
− 1
View file @ f7cafcb1
...@@ -59,7 +59,7 @@ export class Alert extends Component { ...@@ -59,7 +59,7 @@ export class Alert extends Component {
export class Card extends Component<{ title: React.Node, children?: React.Node }> { export class Card extends Component<{ title: React.Node, children?: React.Node }> {
render() { render() {
return ( return (
<div className="card"> <div className="card cc-size">
<div className="card-body"> <div className="card-body">
<h5 className="card-title">{this.props.title}</h5> <h5 className="card-title">{this.props.title}</h5>
<div className="card-text">{this.props.children}</div> <div className="card-text">{this.props.children}</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment