fix basic layout, slice popular app panel, fix to-do
parent
7a26ed407f
commit
1ab60bd192
|
@ -4,14 +4,24 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $panel-bg-hover;
|
background: $panel-bg-hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.animated {
|
&.animated {
|
||||||
animation-duration: 0.5s;
|
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 {
|
.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">
|
<div class="panel-heading clearfix" ng-if="title">
|
||||||
<h3 class="panel-title">{{ title }}</h3>
|
<h3 class="panel-title">{{ title }}</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,7 +5,8 @@ blurAdminApp.directive('blurPanel', function () {
|
||||||
restrict: 'E',
|
restrict: 'E',
|
||||||
transclude: true,
|
transclude: true,
|
||||||
scope: {
|
scope: {
|
||||||
title: '@'
|
title: '@',
|
||||||
|
classContainer: '@'
|
||||||
},
|
},
|
||||||
controller: ['$scope', function ($scope) {
|
controller: ['$scope', function ($scope) {
|
||||||
}],
|
}],
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.page-top {
|
.page-top {
|
||||||
@include bg-translucent-dark(0.5);
|
@include bg-translucent-dark(0.85);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 904;
|
z-index: 904;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="widgets">
|
<div class="widgets">
|
||||||
<div ng-repeat="widgetBlock in ngModel" ng-class="{'row': widgetBlock.widgets.length > 1}">
|
<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">
|
<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>
|
<div ng-include="widget.url"></div>
|
||||||
</blur-panel>
|
</blur-panel>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
|
||||||
|
@media screen and (min-width: 1200px) {
|
||||||
|
.row.shift-up {
|
||||||
|
> div {
|
||||||
|
margin-top: -423px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -3,11 +3,11 @@
|
||||||
<div>
|
<div>
|
||||||
<blur-panel>
|
<blur-panel>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-6">
|
<div class="col-md-6">
|
||||||
<h3>Acquisition Channels</h3>
|
<h3>Acquisition Channels</h3>
|
||||||
<traffic-chart></traffic-chart>
|
<traffic-chart></traffic-chart>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6">
|
<div class="col-md-6">
|
||||||
<h3>Users by country</h3>
|
<h3>Users by country</h3>
|
||||||
<am-chart-map></am-chart-map>
|
<am-chart-map></am-chart-map>
|
||||||
</div>
|
</div>
|
||||||
|
@ -16,35 +16,36 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<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="row">
|
||||||
<div class="col-sm-8">
|
<div class="col-lg-7 col-md-12 col-sm-7 col-xs-12">
|
||||||
<blur-panel title="Revenue">
|
<blur-panel title="Revenue" class-container="medium-panel">
|
||||||
<am-chart></am-chart>
|
<am-chart></am-chart>
|
||||||
</blur-panel>
|
</blur-panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-4">
|
<div class="col-lg-5 col-md-12 col-sm-5 col-xs-12">
|
||||||
<blur-panel>
|
<blur-panel class-container="popular-app medium-panel">
|
||||||
<popular-app></popular-app>
|
<popular-app></popular-app>
|
||||||
</blur-panel>
|
</blur-panel>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
<div class="col-sm-3">
|
<div class="col-lg-4 col-md-5 col-sm-12 col-xs-12">
|
||||||
<blur-panel title="Feed">
|
<blur-panel title="Feed" class-container="large-panel with-scroll">
|
||||||
<blur-feed></blur-feed>
|
<blur-feed></blur-feed>
|
||||||
</blur-panel>
|
</blur-panel>
|
||||||
</div>
|
</div>
|
||||||
</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 {
|
#amchart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 400px;
|
height: 350px;
|
||||||
|
margin-top: -20px;
|
||||||
}
|
}
|
|
@ -1,4 +1,4 @@
|
||||||
#amChartMap {
|
#amChartMap {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 400px;
|
height: 315px;
|
||||||
}
|
}
|
|
@ -1,7 +1,3 @@
|
||||||
.blur-feed {
|
|
||||||
height: 983px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-message {
|
.feed-message {
|
||||||
$text-message-color: $default;
|
$text-message-color: $default;
|
||||||
$video-message-color: $danger;
|
$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}">
|
||||||
<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">
|
||||||
<img ng-src="img/{{ ::message.author }}.png">
|
<div class="text-block" ng-class="message.type">
|
||||||
<div class="text-block" ng-class="message.type">
|
<div class="message-header">
|
||||||
<div class="message-header">
|
<span class="author">{{ ::message.author }}</span>{{ ::message.header }}
|
||||||
<span class="author">{{ ::message.author }}</span>{{ ::message.header }}
|
|
||||||
</div>
|
|
||||||
<div class="message-content">
|
|
||||||
{{::message.text}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="message-time">
|
<div class="message-content">
|
||||||
<div class="post-time">
|
{{::message.text}}
|
||||||
{{::message.time}}
|
|
||||||
</div>
|
|
||||||
<div class="ago-time">
|
|
||||||
{{::message.ago}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</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',
|
ago: 'a day ago',
|
||||||
}, {
|
}, {
|
||||||
type: 'geo-message',
|
type: 'geo-message',
|
||||||
author: 'Kolya',
|
author: 'Nick',
|
||||||
header: 'posted location',
|
header: 'posted location',
|
||||||
text: 'New York, NY, USA',
|
text: 'New York, NY, USA',
|
||||||
time: 'Yesterday 11:37 am',
|
time: 'Yesterday 11:37 am',
|
||||||
|
|
|
@ -6,6 +6,10 @@
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
float: left;
|
float: left;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
height: $small-panel-height;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 1325px) {
|
@media screen and (min-width: 1325px) {
|
||||||
.pie-chart-item-container {
|
.pie-chart-item-container {
|
||||||
|
|
|
@ -1,3 +1,39 @@
|
||||||
.popular-app {
|
.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">
|
||||||
<div class="popular-app-img">
|
<img src="img/chernika.png"/>
|
||||||
<!--<img src="img/tinder-logo.jpg"/>-->
|
</div>
|
||||||
|
<div class="popular-app-cost row">
|
||||||
|
<div class="col-xs-9">
|
||||||
|
Most Popular App
|
||||||
</div>
|
</div>
|
||||||
<div class="popular-app-main">
|
<div class="col-xs-3 text-right">
|
||||||
<div class="popular-app-top">
|
175$
|
||||||
<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>
|
</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 {
|
ul.todo-list {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 435px;
|
|
||||||
overflow: auto;
|
|
||||||
.placeholder, .ui-sortable-placeholder {
|
.placeholder, .ui-sortable-placeholder {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
|
@ -59,11 +59,6 @@ blurAdminApp.directive('blurTodo', function () {
|
||||||
edit: false,
|
edit: false,
|
||||||
markId: 4
|
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) {
|
$scope.getMarkColor = function (id) {
|
||||||
|
|
|
@ -51,4 +51,8 @@ $resXS: 500px;
|
||||||
$resXXS: 430px;
|
$resXXS: 430px;
|
||||||
$resMin: 320px;
|
$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/backTop/backTop.scss",
|
||||||
"../../app/components/msgCenter/msgCenter.scss",
|
"../../app/components/msgCenter/msgCenter.scss",
|
||||||
"../../app/components/blurPanel/blurPanel.scss",
|
"../../app/components/blurPanel/blurPanel.scss",
|
||||||
|
"../../app/pages/dashboard/dashboard.scss",
|
||||||
"../../app/pages/dashboard/widgets/calendar/calendar.scss",
|
"../../app/pages/dashboard/widgets/calendar/calendar.scss",
|
||||||
"../../app/pages/dashboard/widgets/pieCharts/pieCharts.scss",
|
"../../app/pages/dashboard/widgets/pieCharts/pieCharts.scss",
|
||||||
"../../app/pages/dashboard/widgets/amChart/amChart.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