mirror of https://github.com/akveo/blur-admin
fix basic layout, slice popular app panel, fix to-do
KostyaDanovsky
parent
7a26ed407f
commit
1ab60bd192
|
|
@ -4,14 +4,24 @@
|
|||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
background: $panel-bg-hover;
|
||||
}
|
||||
|
||||
&.animated {
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
&.small-panel {
|
||||
height: $small-panel-height;
|
||||
}
|
||||
&.medium-panel {
|
||||
height: $medium-panel-height;
|
||||
}
|
||||
&.large-panel {
|
||||
height: $large-panel-height;
|
||||
}
|
||||
&.with-scroll {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-heading, .panel-default > .panel-heading {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="panel panel-default invisible" zoom-in>
|
||||
<div class="panel panel-default invisible" ng-class="classContainer" zoom-in>
|
||||
<div class="panel-heading clearfix" ng-if="title">
|
||||
<h3 class="panel-title">{{ title }}</h3>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ blurAdminApp.directive('blurPanel', function () {
|
|||
restrict: 'E',
|
||||
transclude: true,
|
||||
scope: {
|
||||
title: '@'
|
||||
title: '@',
|
||||
classContainer: '@'
|
||||
},
|
||||
controller: ['$scope', function ($scope) {
|
||||
}],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.page-top {
|
||||
@include bg-translucent-dark(0.5);
|
||||
@include bg-translucent-dark(0.85);
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
z-index: 904;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="widgets">
|
||||
<div ng-repeat="widgetBlock in ngModel" ng-class="{'row': widgetBlock.widgets.length > 1}">
|
||||
<div ng-repeat="widgetCol in widgetBlock.widgets" ng-class="{'col-md-6': widgetBlock.widgets.length === 2}" ng-model="widgetCol" class="widgets-block">
|
||||
<blur-panel title="widget.title" ng-repeat="widget in widgetCol" >
|
||||
<blur-panel title="{{::widget.title}}" ng-repeat="widget in widgetCol" >
|
||||
<div ng-include="widget.url"></div>
|
||||
</blur-panel>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.row.shift-up {
|
||||
> div {
|
||||
margin-top: -423px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,11 +3,11 @@
|
|||
<div>
|
||||
<blur-panel>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="col-md-6">
|
||||
<h3>Acquisition Channels</h3>
|
||||
<traffic-chart></traffic-chart>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="col-md-6">
|
||||
<h3>Users by country</h3>
|
||||
<am-chart-map></am-chart-map>
|
||||
</div>
|
||||
|
|
@ -16,35 +16,36 @@
|
|||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
<div class="col-lg-8 col-md-7 col-sm-12 col-xs-12">
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<blur-panel title="Revenue">
|
||||
<div class="col-lg-7 col-md-12 col-sm-7 col-xs-12">
|
||||
<blur-panel title="Revenue" class-container="medium-panel">
|
||||
<am-chart></am-chart>
|
||||
</blur-panel>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<blur-panel>
|
||||
<div class="col-lg-5 col-md-12 col-sm-5 col-xs-12">
|
||||
<blur-panel class-container="popular-app medium-panel">
|
||||
<popular-app></popular-app>
|
||||
</blur-panel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<blur-panel title="ToDo List">
|
||||
<blur-todo></blur-todo>
|
||||
</blur-panel>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<blur-panel title="Calenar">
|
||||
<blur-calendar></blur-calendar>
|
||||
</blur-panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<blur-panel title="Feed">
|
||||
<div class="col-lg-4 col-md-5 col-sm-12 col-xs-12">
|
||||
<blur-panel title="Feed" class-container="large-panel with-scroll">
|
||||
<blur-feed></blur-feed>
|
||||
</blur-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row shift-up">
|
||||
<div class="col-lg-3 col-sm-6 col-xs-12">
|
||||
<blur-panel title="ToDo List" class-container="medium-panel with-scroll">
|
||||
<blur-todo></blur-todo>
|
||||
</blur-panel>
|
||||
</div>
|
||||
<div class="col-lg-5 col-sm-6 col-xs-12">
|
||||
<blur-panel title="Calendar" class-container="medium-panel with-scroll">
|
||||
<blur-calendar></blur-calendar>
|
||||
</blur-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
#amchart {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
height: 350px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
#amChartMap {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
height: 315px;
|
||||
}
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
.blur-feed {
|
||||
height: 983px;
|
||||
}
|
||||
|
||||
.feed-message {
|
||||
$text-message-color: $default;
|
||||
$video-message-color: $danger;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,19 @@
|
|||
<div class="blur-feed">
|
||||
<div class="feed-message" ng-repeat="message in feed" ng-class="{'left': $index%2==0, 'right': $index%2==1}">
|
||||
<img ng-src="img/{{ ::message.author }}.png">
|
||||
<div class="text-block" ng-class="message.type">
|
||||
<div class="message-header">
|
||||
<span class="author">{{ ::message.author }}</span>{{ ::message.header }}
|
||||
</div>
|
||||
<div class="message-content">
|
||||
{{::message.text}}
|
||||
</div>
|
||||
<div class="feed-message" ng-repeat="message in feed" ng-class="{'left': $index%2==0, 'right': $index%2==1}">
|
||||
<img ng-src="img/{{ ::message.author }}.png">
|
||||
<div class="text-block" ng-class="message.type">
|
||||
<div class="message-header">
|
||||
<span class="author">{{ ::message.author }}</span>{{ ::message.header }}
|
||||
</div>
|
||||
<div class="message-time">
|
||||
<div class="post-time">
|
||||
{{::message.time}}
|
||||
</div>
|
||||
<div class="ago-time">
|
||||
{{::message.ago}}
|
||||
</div>
|
||||
<div class="message-content">
|
||||
{{::message.text}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-time">
|
||||
<div class="post-time">
|
||||
{{::message.time}}
|
||||
</div>
|
||||
<div class="ago-time">
|
||||
{{::message.ago}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ blurAdminApp.directive('blurFeed', function () {
|
|||
ago: 'a day ago',
|
||||
}, {
|
||||
type: 'geo-message',
|
||||
author: 'Kolya',
|
||||
author: 'Nick',
|
||||
header: 'posted location',
|
||||
text: 'New York, NY, USA',
|
||||
time: 'Yesterday 11:37 am',
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@
|
|||
padding: 0 15px;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
.panel {
|
||||
height: $small-panel-height;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1325px) {
|
||||
.pie-chart-item-container {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,39 @@
|
|||
.popular-app {
|
||||
height: 444px;
|
||||
.panel-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.popular-app-img {
|
||||
position: relative;
|
||||
background: #e9e9e9;
|
||||
padding: 30px 0;
|
||||
height: 260px;
|
||||
|
||||
img {
|
||||
width: 70%;
|
||||
position: absolute;
|
||||
transform: translateY(-50%) translate(-50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
.popular-app-cost {
|
||||
font-size: 20px;
|
||||
padding: 20px 22px;
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
.popular-app-info {
|
||||
padding: 20px 22px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.row {
|
||||
margin: 0;
|
||||
> div {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +1,25 @@
|
|||
<div class="popular-app">
|
||||
<div class="popular-app-img">
|
||||
<!--<img src="img/tinder-logo.jpg"/>-->
|
||||
<div class="popular-app-img">
|
||||
<img src="img/chernika.png"/>
|
||||
</div>
|
||||
<div class="popular-app-cost row">
|
||||
<div class="col-xs-9">
|
||||
Most Popular App
|
||||
</div>
|
||||
<div class="popular-app-main">
|
||||
<div class="popular-app-top">
|
||||
<h4>Most Popular App</h4>
|
||||
<p>17$</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h6>Total Visits</h6>
|
||||
<p>47,512</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h6>New Visits</h6>
|
||||
<p>9,217</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h6>Sales</h6>
|
||||
<p>2,928</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-3 text-right">
|
||||
175$
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popular-app-info row">
|
||||
<div class="col-xs-4 text-left">
|
||||
<div class="info-label">Total Visits</div>
|
||||
<div>47,512</div>
|
||||
</div>
|
||||
<div class="col-xs-4 text-center">
|
||||
<div class="info-label">New Visits</div>
|
||||
<div>9,217</div>
|
||||
</div>
|
||||
<div class="col-xs-4 text-right">
|
||||
<div class="info-label">Sales</div>
|
||||
<div>2,928</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@ input.task-todo {
|
|||
ul.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 435px;
|
||||
overflow: auto;
|
||||
.placeholder, .ui-sortable-placeholder {
|
||||
background: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,11 +59,6 @@ blurAdminApp.directive('blurTodo', function () {
|
|||
edit: false,
|
||||
markId: 4
|
||||
},
|
||||
{
|
||||
text: 'Lorem ipsum dolor sit amet, possit denique oportere at his, etiam corpora deseruisse te pro. Eirmod prompta usu ex, meliore oporteat est ad.',
|
||||
edit: false,
|
||||
markId: 3
|
||||
}
|
||||
];
|
||||
|
||||
$scope.getMarkColor = function (id) {
|
||||
|
|
|
|||
|
|
@ -51,4 +51,8 @@ $resXS: 500px;
|
|||
$resXXS: 430px;
|
||||
$resMin: 320px;
|
||||
|
||||
$top-height: 66px;
|
||||
$top-height: 66px;
|
||||
|
||||
$small-panel-height: 120px;
|
||||
$medium-panel-height: 400px;
|
||||
$large-panel-height: 824px;
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
"../../app/components/backTop/backTop.scss",
|
||||
"../../app/components/msgCenter/msgCenter.scss",
|
||||
"../../app/components/blurPanel/blurPanel.scss",
|
||||
"../../app/pages/dashboard/dashboard.scss",
|
||||
"../../app/pages/dashboard/widgets/calendar/calendar.scss",
|
||||
"../../app/pages/dashboard/widgets/pieCharts/pieCharts.scss",
|
||||
"../../app/pages/dashboard/widgets/amChart/amChart.scss",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
Loading…
Reference in New Issue