Skip to content

Commit

Permalink
Create facebook & card-deck components
Browse files Browse the repository at this point in the history
Also updated jumbotron component to extend all his height

Based on: 
twbs/bootstrap#20321 (comment)
  • Loading branch information
dtrevino-grupopv committed Jun 11, 2019
1 parent 8bcebfa commit 111dc53
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 1 deletion.
16 changes: 16 additions & 0 deletions _includes/components/info-cards/card-deck.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<div class="card-deck">
{% for info-card in page.info-cards %}
<div class="card pt-0 pt-sm-5 pt-lg-0" data-appear-animation="{{ info-card.animation }}">
<a href="{{ info-card.href }}">
<img src="{{ site.amazon-s3 }}/components/info-cards/card-deck/img/{{ info-card.img }}.png" class="card-img-top" alt="{{ info-card.title }}">
</a>
<div class="card-body">
<h5 class="card-title">{{ info-card.title }}</h5>
<p class="card-text">{{ info-card.desc }}</p>
</div>
<div class="card-footer text-right bg-white border-top-0">
<a class="btn btn-primary" href="{{ info-card.href }}">{{ info-card.button }}</a>
</div>
</div>
{% endfor %}
</div>
2 changes: 1 addition & 1 deletion _includes/components/jumbotron/bootstrap.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="jumbotron bg-cover" data-component="jumbotron/bootstrap" style="background-image: url('https://s3-us-west-2.amazonaws.com/grupopv-public/assets/img/components/jumbotron/bootstrap/{{ include.img }}.jpg');">
<div class="jumbotron bg-cover h-100" data-component="jumbotron/bootstrap" style="background-image: url('https://s3-us-west-2.amazonaws.com/grupopv-public/assets/img/components/jumbotron/bootstrap/{{ include.img }}.jpg');">
<h2 class="display-4 text-white" data-appear-animation="fadeInDown">{{ include.title }}</h2>
<p class="lead text-white" data-appear-animation="fadeInUp">{{ include.desc }}</p>
<a class="btn btn-primary" href="{{ include.href }}" role="button" data-appear-animation="fadeInUp">{{ include.button }}</a>
Expand Down
12 changes: 12 additions & 0 deletions _includes/components/social-media/facebook.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<div class="text-center">
<iframe
src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fgrupopvmx%2F&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=false&hide_cover=false&show_facepile=true&appId"
width="340"
height="500"
style="border:none;overflow:hidden"
scrolling="no"
frameborder="0"
allowTransparency="true"
allow="encrypted-media">
</iframe>
</div>
12 changes: 12 additions & 0 deletions _sass/components/info-cards/_card-deck.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@mixin card-deck-column-count($count: 1) {
flex: 0 0 calc(100% / #{$count} - #{$card-deck-margin} * 2);
border: none;
}

.card-deck {
.card {
@include media-breakpoint-between(sm, md) {
@include card-deck-column-count(2);
}
}
}
1 change: 1 addition & 0 deletions assets/css/main.min.scss
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ $flag-icon-css-path: '../node_modules/flag-icon-css/flags';
@import "components/forms/formspree";
@import "components/forms/google-forms";
@import "components/icons/bootstrap";
@import "components/info-cards/card-deck";
@import "components/info-cards/search-results";
@import "components/jumbotron/bootstrap";
@import "components/lang-switchers/toogle-lang";
Expand Down

0 comments on commit 111dc53

Please sign in to comment.