Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(info-card): clean up info card example #190

Merged
merged 8 commits into from
Nov 16, 2017
Binary file removed .DS_Store
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -1,57 +1,47 @@
<div class="padding-15">
<div class="row">
<div class="col-xs-12">
<h4>Info Card Component Example</h4>
<hr/>
</div>
<div class="row">
<div class="col-xs-12">
<h4>Info Card Component Example</h4>
<hr/>
</div>
<div class="cards-pf">
<div class="row row-cards-pf">
<div class="col-sm-4">
</div>
<div class="padding-15">
<div class="row row-cards-pf well">
<div style="max-width:409px;">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is conflicting with the column width that you have set below. In the "medium" viewport, you are making the card smaller than the column wants it to be.

I would delete this line, and change the column styles on the next. (see below)

<div class="col-md-10">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change this to <div class="col-sm-8 col-md-7">

<label>With top border, Icon Class, Href</label>
<pfng-info-status-card
[config]="card1Config">
</pfng-info-status-card>
</div>
</div>
</div>
<div class="cards-pf">
<div class="row row-cards-pf">
<div class="col-sm-4">
<br>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of using <br>, you can make each card it's own row. That will give proper spacing and allow for responsiveness on resizing of the viewport.

<label>No Top Border, Icon Image, No Title, No Html Content</label>
<pfng-info-status-card
[config]="card2Config">
</pfng-info-status-card>
</div>
</div>
</div>
<div class="cards-pf">
<div class="row row-cards-pf">
<div class="col-sm-4">
<br>
<label>With HTML</label>
<pfng-info-status-card
[config]="card3Config">
</pfng-info-status-card>
</div>
</div>
</div>
<div class="row padding-bottom-15 padding-top-15">
<div class="col-xs-12">
<h4>Code</h4>
<hr/>
</div>
</div>
<div>
<tabset>
<tab heading="api">
<iframe class="demoframe" src="docs/classes/cardcomponent.html"></iframe>
</tab>
<tab heading="html">
<include-content src="src/app/card/info-status-card/examples/info-status-card-example.component.html"></include-content>
</tab>
<tab heading="typescript">
<include-content src="src/app/card/info-status-card/examples/info-status-card-example.component.ts"></include-content>
</tab>
</tabset>
</div>
<div class="row padding-bottom-15 padding-top-15">
<div class="col-xs-12">
<h4>Code</h4>
<hr/>
</div>
</div>
<div>
<tabset>
<tab heading="api">
<iframe class="demoframe" src="docs/classes/cardcomponent.html"></iframe>
</tab>
<tab heading="html">
<include-content src="src/app/card/info-status-card/examples/info-status-card-example.component.html"></include-content>
</tab>
<tab heading="typescript">
<include-content src="src/app/card/info-status-card/examples/info-status-card-example.component.ts"></include-content>
</tab>
</tabset>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@ export class InfoStatusCardExampleComponent implements OnInit {
card2Config: InfoStatusCardConfig = {
showTopBorder: false,
htmlContent: false,
iconImageSrc: '//www.patternfly.org/assets/img/redhat.svg',
iconImageSrc: '//www.patternfly.org/assets/img/patternfly-orb.svg',
info: [
'Infastructure: VMware',
'Vmware: 1 CPU (1 socket x 1 core), 1024 MB',
'12 Snapshots',
'Drift History: 1',
'<strong>No htmlContent</strong>'
'<b>No htmlContent</b>'
]

};
Expand Down