feed component style fixes

This commit is contained in:
nixa 2016-05-05 17:26:30 +03:00
parent b09280e5e4
commit 07b1aeb835
3 changed files with 61 additions and 53 deletions

View file

@ -5,32 +5,32 @@
</div>
<div class="row">
<ba-card class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12"
<ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-xs-12"
title="Acquisition Channels" baCardClass="traffic-panel medium-card">
<traffic-chart></traffic-chart>
</ba-card>
<ba-card class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12"
<ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-xs-12"
title="Users by Country" baCardClass="medium-card">
<users-map></users-map>
</ba-card>
</div>
<div class="row">
<div class="col-xl-9 col-lg-9 col-md-6 col-sm-12 col-xs-12">
<div class="col-xlg-9 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<ba-card class="col-xl-8 col-lg-8 col-md-12 col-sm-7 col-xs-12"
<ba-card class="col-xlg-8 col-xl-12 col-lg-12 col-md-5 col-sm-12 col-xs-12"
title="Revenue" baCardClass="medium-card">
<line-chart></line-chart>
</ba-card>
<ba-card class="col-xl-4 col-lg-4 col-md-12 col-sm-5 col-xs-12"
<ba-card class="col-xlg-4 col-xl-12 col-lg-12 col-md-7 col-sm-12 col-xs-12"
baCardClass="popular-app medium-card">
<popular-app></popular-app>
</ba-card>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-xs-12">
<div class="col-xlg-3 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
<ba-card title="Feed"
baCardClass="large-panel with-scroll feed-panel">
<feed></feed>

View file

@ -1,5 +1,5 @@
<div class="feed-messages-container" track-width="smallContainerWidth" min-width="360">
<div class="feed-message" *ngFor="#message of feed" (ngClick)="expandMessage(message)">
<div class="feed-messages-container">
<div class="feed-message" *ngFor="#message of feed" (click)="expandMessage(message)">
<div class="message-icon" *ngIf="message.type == 'text-message'">
<img class="photo-icon" src="{{ ( message.author | profilePicture ) }}">
</div>

View file

@ -39,7 +39,6 @@ h5 {
.typography-document-samples {
p {
margin: 0;
}
@ -51,16 +50,16 @@ h5 {
height: 620px;
}
.card-title{
.card-title {
text-align: center;
width: 100%;
}
.card.with-scroll .card-body{
.card.with-scroll .card-body {
height: calc(100% - 45px);
}
.card-content{
.card-content {
padding: 15px 22px 5px 22px;
}
@ -425,49 +424,58 @@ a.learn-more {
padding: 0;
margin-bottom: 90px;
.card-body{
.card-body {
padding: 0;
}
}
@media screen and (min-width: 1620px) {
.col-xlg-1{
width: 8.33333333%;
}
.col-xlg-2{
width: 16.66666667%;
}
.col-xlg-3{
width: 25%;
}
.col-xlg-4{
width: 33.33333333%;
}
.col-xlg-5{
width: 41.66666667%;
}
.col-xlg-6{
width: 50%;
}
.col-xlg-7{
width: 58.33333333%;
}
.col-xlg-8{
width: 66.66666667%;
}
.col-xlg-9{
width: 75%;
}
.col-xlg-10{
width: 83.33333333%;
}
.col-xlg-11{
width: 91.66666667%;
}
.col-xlg-12{
width: 100%;
}
@media screen and (min-width: 1620px) {
.col-xlg-1 {
width: 8.33333333%;
flex: 0 0 8.33333333%;
}
.col-xlg-2 {
width: 16.66666667%;
flex: 0 0 16.66666667%;
}
.col-xlg-3 {
width: 25%;
flex: 0 0 25%;
}
.col-xlg-4 {
width: 33.33333333%;
flex: 0 0 33.33333333%;
}
.col-xlg-5 {
width: 41.66666667%;
flex: 0 0 41.66666667%;
}
.col-xlg-6 {
width: 50%;
flex: 0 0 50%;
}
.col-xlg-7 {
width: 58.33333333%;
flex: 0 0 58.33333333%;
}
.col-xlg-8 {
width: 66.66666667%;
flex: 0 0 66.66666667%;
}
.col-xlg-9 {
width: 75%;
flex: 0 0 75%;
}
.col-xlg-10 {
width: 83.33333333%;
flex: 0 0 83.33333333%;
}
.col-xlg-11 {
width: 91.66666667%;
flex: 0 0 91.66666667%;
}
.col-xlg-12 {
width: 100%;
flex: 0 0 100%;
}
}