Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(dashboard): improve kitten card responsiveness

Browse source
This commit is contained in:
KostyaDanovsky 2017-09-12 15:18:25 +03:00
parent 83fffafe45
commit 306d6e74b5
2 changed files with 21 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/app/pages/dashboard/kitten/kitten.component.html
View file

@ -1,16 +1,19 @@
<nb-card size="medium"> <nb-card size="medium">
<div class="picture" style.background-image="url('/assets/images/kitten-{{currentTheme}}.png')"></div> <nb-card-body>
<div class="picture" style.background-image="url('/assets/images/kitten-{{currentTheme}}.png')"></div>
<div class="details"> <div class="details">
<div class="title"> <div class="title">
React Native UI Kitten React Native UI Kitten
</div>
<div class="description">
React Native UI Kitten is a framework that contains a set of commonly used UI components styled in a similar way. The most awesome thing: you can change themes on the fly by just passing a different set of variables. 100% native. Give our kitten a try!
</div>
</div> </div>
<div class="description"> </nb-card-body>
React Native UI Kitten is a framework that contains a set of commonly used UI components styled in a similar way. The most awesome thing: you can change themes on the fly by just passing a different set of variables. 100% native. Give our kitten a try!
</div>
</div>
<div class="links">
<nb-card-footer>
<a href="https://akveo.github.io/react-native-ui-kitten" target="_blank"> <a href="https://akveo.github.io/react-native-ui-kitten" target="_blank">
<i class="ion-ios-world"></i> <i class="ion-ios-world"></i>
</a> </a>
@ -23,5 +26,5 @@
<a href="https://github.com/akveo/react-native-ui-kitten" target="_blank"> <a href="https://github.com/akveo/react-native-ui-kitten" target="_blank">
<i class="ion-social-github"></i> <i class="ion-social-github"></i>
</a> </a>
</div> </nb-card-footer>
</nb-card> </nb-card>

11
src/app/pages/dashboard/kitten/kitten.component.scss
View file

@ -2,15 +2,19 @@
@include nb-install-component() { @include nb-install-component() {
nb-card-body {
display: flex;
flex-direction: column;
padding: 0;
}
.picture { .picture {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
position: relative; position: relative;
border-top-left-radius: nb-theme(card-border-radius); border-top-left-radius: nb-theme(card-border-radius);
border-top-right-radius: nb-theme(card-border-radius); border-top-right-radius: nb-theme(card-border-radius);
flex: 1; flex: 1;
max-height: 50%;
} }
.details { .details {
@ -39,10 +43,11 @@
} }
} }
.links { nb-card-footer {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 0.75rem 0; padding: 0.75rem 0;
border: none;
a { a {
text-decoration: none; text-decoration: none;