diff --git a/src/app/theme/components/baPanel/baPanel.directive.js b/src/app/theme/components/baPanel/baPanel.directive.js
index 2945d13..529f7d3 100644
--- a/src/app/theme/components/baPanel/baPanel.directive.js
+++ b/src/app/theme/components/baPanel/baPanel.directive.js
@@ -12,10 +12,10 @@
.directive('baPanel', baPanel);
/** @ngInject */
- function baPanel(baPanel) {
+ function baPanel(baPanel, $document, $window) {
return angular.extend({}, baPanel, {
template: function(el, attrs) {
- var res = '
';
+ var res = '
';
res += baPanel.template(el, attrs);
res += '
';
return res;
diff --git a/src/app/theme/components/baPanel/baPanelBlur.directive.js b/src/app/theme/components/baPanel/baPanelBlur.directive.js
new file mode 100644
index 0000000..00108e2
--- /dev/null
+++ b/src/app/theme/components/baPanel/baPanelBlur.directive.js
@@ -0,0 +1,53 @@
+/**
+ * @author v.lugovsky
+ * created on 15.01.2016
+ */
+(function () {
+ 'use strict';
+
+ angular.module('BlurAdmin.theme')
+ .directive('baPanelBlur', baPanelBlur);
+
+ /** @ngInject */
+ function baPanelBlur(baPanelBlurHelper, $window, $document) {
+ var bodyBgSize;
+
+ baPanelBlurHelper.bodyBgLoad().then(function() {
+ bodyBgSize = baPanelBlurHelper.getBodyBgImageSizes();
+ });
+
+ $window.addEventListener('resize', function() {
+ bodyBgSize = baPanelBlurHelper.getBodyBgImageSizes();
+ });
+
+ return {
+ restrict: 'A',
+ link: function($scope, elem) {
+ baPanelBlurHelper.bodyBgLoad().then(function() {
+ setTimeout(recalculatePanelStyle);
+ });
+ $document.on('scroll', recalculatePanelStyle);
+ $window.addEventListener('resize', recalculatePanelStyle);
+
+ $scope.$on('$destroy', function() {
+ $window.removeEventListener('resize', recalculatePanelStyle);
+ });
+
+ function recalculatePanelStyle() {
+ console.log(bodyBgSize);
+ if (!bodyBgSize) {
+ return;
+ }
+ var position = elem[0].getBoundingClientRect();
+ console.log(position);
+ elem.css({
+ backgroundSize: Math.round(bodyBgSize.width) + 'px ' + Math.round(bodyBgSize.height) + 'px',
+ backgroundPosition: Math.floor(-position.left + bodyBgSize.positionX) + 'px ' + Math.floor(-position.top + bodyBgSize.positionY) + 'px'
+ });
+ }
+
+ }
+ };
+ }
+
+})();
diff --git a/src/app/theme/components/baPanel/baPanelBlurHelper.service.js b/src/app/theme/components/baPanel/baPanelBlurHelper.service.js
new file mode 100644
index 0000000..c0f7984
--- /dev/null
+++ b/src/app/theme/components/baPanel/baPanelBlurHelper.service.js
@@ -0,0 +1,46 @@
+/**
+ * @author v.lugovsky
+ * created on 15.01.2016
+ */
+(function () {
+ 'use strict';
+
+ angular.module('BlurAdmin.theme')
+ .service('baPanelBlurHelper', baPanelBlurHelper);
+
+ /** @ngInject */
+ function baPanelBlurHelper($q) {
+ var res = $q.defer();
+ var computedStyle = getComputedStyle(document.body);
+ var image = new Image();
+ image.src = computedStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
+ image.onerror = function() {
+ res.reject();
+ };
+ image.onload = function() {
+ res.resolve();
+ };
+
+ this.bodyBgLoad = function() {
+ return res.promise;
+ };
+
+ this.getBodyBgImageSizes = function() {
+ var elemW = document.documentElement.clientWidth;
+ var elemH = document.documentElement.clientHeight;
+ var imgRatio = (image.height / image.width); // original img ratio
+ var containerRatio = (elemH / elemW); // container ratio
+
+ var finalHeight, finalWidth;
+ if (containerRatio > imgRatio) {
+ finalHeight = elemH;
+ finalWidth = (elemH / imgRatio);
+ } else {
+ finalWidth = elemW;
+ finalHeight = (elemW * imgRatio);
+ }
+ return { width: finalWidth, height: finalHeight, positionX: (elemW - finalWidth) / 2, positionY: (elemH - finalHeight) / 2 };
+ };
+ }
+
+})();
diff --git a/src/assets/img/blur-bg-blurred.jpg b/src/assets/img/blur-bg-blurred.jpg
new file mode 100644
index 0000000..2ca7fd6
Binary files /dev/null and b/src/assets/img/blur-bg-blurred.jpg differ
diff --git a/src/assets/img/blur-bg.jpg b/src/assets/img/blur-bg.jpg
new file mode 100644
index 0000000..6664eed
Binary files /dev/null and b/src/assets/img/blur-bg.jpg differ
diff --git a/src/assets/img/green-bg.jpg b/src/assets/img/green-bg.jpg
index 724c9d0..6664eed 100644
Binary files a/src/assets/img/green-bg.jpg and b/src/assets/img/green-bg.jpg differ
diff --git a/src/sass/theme/bootstrap-overrides/_panel.scss b/src/sass/theme/bootstrap-overrides/_panel.scss
index a335b49..5eff669 100644
--- a/src/sass/theme/bootstrap-overrides/_panel.scss
+++ b/src/sass/theme/bootstrap-overrides/_panel.scss
@@ -7,12 +7,12 @@ $panel-heading-font-size: 16px;
background-color: $panel-bg;
color: $default-text;
position: relative;
- transition: all 0.2s ease;
+ //transition: all 0.2s ease;
margin-bottom: 24px;
- &:hover {
+ /*&:hover {
background: $panel-bg-hover;
- }
+ }*/
&.animated {
animation-duration: 0.5s;
}
@@ -60,6 +60,9 @@ $panel-heading-font-size: 16px;
}
.panel-white {
+ $blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
+ background: url($blurredBgUrl);
+ background-size: cover;
> .panel-heading {
background-color: transparent;
border: none;
diff --git a/src/sass/theme/conf/_mixins.scss b/src/sass/theme/conf/_mixins.scss
index ee411a4..74efa98 100644
--- a/src/sass/theme/conf/_mixins.scss
+++ b/src/sass/theme/conf/_mixins.scss
@@ -51,8 +51,8 @@
}
@mixin main-background() {
- $mainBgUrl: $images-root + 'green-bg.jpg';
- background: url($mainBgUrl) no-repeat top center fixed;
+ $mainBgUrl: $images-root + 'blur-bg.jpg';
+ background: url($mainBgUrl) no-repeat center center fixed;
background-size: cover;
}