Skip to content

Commit

Permalink
docs(*): replace png images with svg on cards (reactstrap#1621)
Browse files Browse the repository at this point in the history 
* replace png images with svg on cards

* replace third-party images

* fix image size

* fix image paths
  • Loading branch information
@charisra @TheSharpieOne
charisra authored and TheSharpieOne committed Sep 10, 2019
1 parent bda3d65 commit 38ccfc0
Show file tree
Hide file tree
Showing 10 changed files with 37 additions and 25 deletions.
8 changes: 5 additions & 3 deletions docs/lib/examples/Card.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import React from 'react';
import { Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button } from 'reactstrap';
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button
} from 'reactstrap';

const Example = (props) => {
return (
<div>
<Card>
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
<CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
Expand Down
12 changes: 7 additions & 5 deletions docs/lib/examples/CardColumns.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import React from 'react';
import { Card, Button, CardImg, CardTitle, CardText, CardColumns,
CardSubtitle, CardBody } from 'reactstrap';
import {
Card, Button, CardImg, CardTitle, CardText, CardColumns,
CardSubtitle, CardBody
} from 'reactstrap';

const Example = (props) => {
return (
<CardColumns>
<Card>
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
<CardImg top width="100%" src="/assets/256x186.svg" alt="Card image cap" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
Expand All @@ -15,7 +17,7 @@ const Example = (props) => {
</CardBody>
</Card>
<Card>
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
<CardImg top width="100%" src="/assets/256x186.svg" alt="Card image cap" />
</Card>
<Card>
<CardBody>
Expand All @@ -31,7 +33,7 @@ const Example = (props) => {
<Button>Button</Button>
</Card>
<Card>
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
<CardImg top width="100%" src="/assets/256x186.svg" alt="Card image cap" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
Expand Down
8 changes: 5 additions & 3 deletions docs/lib/examples/CardContentTypes.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react';
import { Card, CardImg, CardText, CardBody, CardLink,
CardTitle, CardSubtitle } from 'reactstrap';
import {
Card, CardImg, CardText, CardBody, CardLink,
CardTitle, CardSubtitle
} from 'reactstrap';

const Example = (props) => {
return (
Expand All @@ -10,7 +12,7 @@ const Example = (props) => {
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
</CardBody>
<img width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
<img width="100%" src="/assets/318x180.svg" alt="Card image cap" />
<CardBody>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<CardLink href="#">Card Link</CardLink>
Expand Down
12 changes: 7 additions & 5 deletions docs/lib/examples/CardDecks.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import React from 'react';
import { Card, Button, CardImg, CardTitle, CardText, CardDeck,
CardSubtitle, CardBody } from 'reactstrap';
import {
Card, Button, CardImg, CardTitle, CardText, CardDeck,
CardSubtitle, CardBody
} from 'reactstrap';

const Example = (props) => {
return (
<CardDeck>
<Card>
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
<CardImg top width="100%" src="/assets/256x186.svg" alt="Card image cap" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
Expand All @@ -15,7 +17,7 @@ const Example = (props) => {
</CardBody>
</Card>
<Card>
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
<CardImg top width="100%" src="/assets/256x186.svg" alt="Card image cap" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
Expand All @@ -24,7 +26,7 @@ const Example = (props) => {
</CardBody>
</Card>
<Card>
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
<CardImg top width="100%" src="/assets/256x186.svg" alt="Card image cap" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
Expand Down
13 changes: 7 additions & 6 deletions docs/lib/examples/CardGroups.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React from 'react';
import { Card, Button, CardImg, CardTitle, CardText, CardGroup,
CardSubtitle, CardBody } from 'reactstrap';

import {
Card, Button, CardImg, CardTitle, CardText, CardGroup,
CardSubtitle, CardBody
} from 'reactstrap';
const Example = (props) => {
return (
<CardGroup>
<Card>
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
<CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
Expand All @@ -15,7 +16,7 @@ const Example = (props) => {
</CardBody>
</Card>
<Card>
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
<CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
Expand All @@ -24,7 +25,7 @@ const Example = (props) => {
</CardBody>
</Card>
<Card>
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
<CardImg top width="100%" src="/assets/static318x180.svg" alt="Card image cap" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
Expand Down
4 changes: 2 additions & 2 deletions docs/lib/examples/CardImageCaps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const Example = (props) => {
return (
<div>
<Card>
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
<CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap" />
<CardBody>
<CardTitle>Card Title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
Expand All @@ -22,7 +22,7 @@ const Example = (props) => {
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
<CardImg bottom width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
<CardImg bottom width="100%" src="/assets/318x180.svg" alt="Card image cap" />
</Card>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/examples/CardImageOverlay.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const Example = (props) => {
return (
<div>
<Card inverse>
<CardImg width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97270&w=318&h=270&bg=333333&txtclr=666666" alt="Card image cap" />
<CardImg width="100%" src="/assets/318x270.svg" alt="Card image cap" />
<CardImgOverlay>
<CardTitle>Card Title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
Expand Down
1 change: 1 addition & 0 deletions docs/static/256x186.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions docs/static/318x180.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions docs/static/318x270.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 38ccfc0

Please sign in to comment.