yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-08-21 07:38:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

updates feature-card to use non-fixed heights by leveraging an aspect ratio mixin

Browse Source
This commit is contained in:
Seyi Adebajo 2017-04-27 23:13:42 -07:00 committed by Mars Lan
parent 55d38d3bbf
commit 0673b723dc
3 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
wherehows-web/app/styles/abstracts/_mixins.scss
View File

@ -98,3 +98,26 @@
#{$property}: $value;
}
/// Maintains the aspect ratio for a wrapped element
/// @param {Number} $width number value for the container's width ratio
/// @param {Number} $height number value for the container's with ratio
@mixin aspect-ratio($width, $height) {
position: relative;
&::before {
content: "";
display: block;
width: 100%;
padding-top: ($height / $width) * 100%;
}
> * {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
}

6
wherehows-web/app/styles/components/feature-card/_feature-card.scss
View File

@ -1,5 +1,4 @@
.feature-card {
height: 160px;
border-radius: 2px;
margin: 30px 0;
padding: 10px;
@ -16,3 +15,8 @@
color: set-color(black, dune);
}
}
/// Wrap cards in containers with 1:1 ar
.feature-container {
@include aspect-ratio(1, 1);
}

28
wherehows-web/app/templates/index.hbs
View File

@ -1,15 +1,21 @@
<div class="row">
{{#each model as |featureCard|}}
<div class="col-sm-3">
<article class="feature-card">
{{#link-to featureCard.route}}
<span class="feature-card-icon" title={{featureCard.title}}></span>
<h3 class="feature-card__title">{{featureCard.title}}</h3>
<div class="feature-card__description">
{{featureCard.description}}
<div class="container">
<div class="row">
{{#each model as |featureCard|}}
<div class="col-md-3">
<div class="feature-container">
<article class="feature-card">
{{#link-to featureCard.route}}
<span class="feature-card-icon" title={{featureCard.title}}></span>
<h3 class="feature-card__title">{{featureCard.title}}</h3>
<div class="feature-card__description">
{{featureCard.description}}
</div>
{{/link-to}}
</article>
</div>
{{/link-to}}
</article>
</div>
{{/each}}
</div>
{{/each}}
</div>
</div>