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>
<div class="row"> <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"> title="Acquisition Channels" baCardClass="traffic-panel medium-card">
<traffic-chart></traffic-chart> <traffic-chart></traffic-chart>
</ba-card> </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"> title="Users by Country" baCardClass="medium-card">
<users-map></users-map> <users-map></users-map>
</ba-card> </ba-card>
</div> </div>
<div class="row"> <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"> <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"> title="Revenue" baCardClass="medium-card">
<line-chart></line-chart> <line-chart></line-chart>
</ba-card> </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"> baCardClass="popular-app medium-card">
<popular-app></popular-app> <popular-app></popular-app>
</ba-card> </ba-card>
</div> </div>
</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" <ba-card title="Feed"
baCardClass="large-panel with-scroll feed-panel"> baCardClass="large-panel with-scroll feed-panel">
<feed></feed> <feed></feed>

View file

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

View file

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