Merge pull request #29 from LIN3S/fix/front-issues

Fix/front issues

Author: benatespina

CHANGELOG.md

@@ -6,6 +6,8 @@ To get the diff for a specific change, go to https://github.com/LIN3S/AdminBundl
 To get the diff between two versions, go to https://github.com/LIN3S/AdminBundle/compare/v0.4.0...v0.5.0
 
 * 0.6.0
+    * Added sticky behaviour to the form right sidebar.
+    * Made JavaScript and CSS code compatible with IE11.
     * Imported `parsleyjs` module in the js entry file.
     * Updated lin3s-front-foundation dependency from v0.6.0 to v0.6.1.
     * Updated lin3s-front-foundation dependency from v0.5.0 to v0.6.0.

src/LIN3S/AdminBundle/Resources/private/js/app.js

@@ -17,6 +17,7 @@ import 'parsleyjs';
 
 import './components/Filter';
 import './components/FormCollection';
+import './components/FormSidebar';
 import './components/MenuToggle';
 import './components/Panel';
 import './polyfills';

src/LIN3S/AdminBundle/Resources/private/js/components/FormSidebar.js

@@ -0,0 +1,56 @@
+/*
+ * This file is part of the Admin Bundle.
+ *
+ * Copyright (c) 2015-present LIN3S <info@lin3s.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *
+ * @author Andrés Montejo <andres@lin3s.com>
+ * @author Beñat Espiña <benatespina@gmail.com>
+ */
+
+import {onDomReady} from 'lin3s-event-bus';
+
+class FormSidebar {
+  constructor(rootNode) {
+    this.rootNode = rootNode;
+    this.fixedElement = this.rootNode.querySelector('.form-sidebar__fixed');
+    this.fixedElementWidth = this.fixedElement.offsetWidth;
+
+    this.onScroll = this.onScroll.bind(this);
+
+    window.addEventListener('scroll', () => requestAnimationFrame(this.onScroll));
+  }
+
+  offsetTop() {
+    const rect = this.rootNode.getBoundingClientRect();
+
+    return rect.top + document.body.scrollTop;
+  }
+
+  onScroll() {
+    if (document.body.scrollTop > this.offsetTop() - 20) {
+      this.rootNode.style.position = 'relative';
+
+      this.fixedElement.style.position = 'fixed';
+      this.fixedElement.style.top = '20px';
+      this.fixedElement.style.width = `${this.fixedElementWidth}px`;
+    } else {
+      this.rootNode.removeAttribute('style');
+      this.fixedElement.removeAttribute('style');
+    }
+  }
+}
+
+const onReady = () => {
+  const formSidebars = document.querySelectorAll('.form-sidebar');
+
+  if (formSidebars.length === 0) {
+    return;
+  }
+
+  Array.from(formSidebars).forEach((rootNode) => new FormSidebar(rootNode));
+};
+
+onDomReady(onReady);

src/LIN3S/AdminBundle/Resources/private/scss/components/_form-collection.scss

@@ -41,7 +41,7 @@ $form-collection-item-toggle-icon-color: $color-mercury !default;
     padding-right: 30px;
 
     .form-collection__toggle {
-      right: 5px;
+      right: 30px;
     }
   }
 }
@@ -81,7 +81,7 @@ $form-collection-item-toggle-icon-color: $color-mercury !default;
   height: 25px;
   padding: 5px;
   position: absolute;
-  right: -10px;
+  right: 15px;
   top: 25px;
   transform: translateY(-50%);
   width: 25px;

src/LIN3S/AdminBundle/Resources/private/scss/components/_form.scss

@@ -138,13 +138,18 @@ select {
 }
 
 @media #{$large-up} {
+  $one-third: 100% / 3;
+  $two-thirds: 100% / 3 * 2;
+
   .form__column--left {
-    flex: 1 1 66.666%;
+    flex: 1 1 $two-thirds;
+    max-width: $two-thirds;
     padding-right: 15px;
   }
 
   .form__column--right {
-    flex: 1 1 33.333%;
+    flex: 1 1 $one-third;
+    max-width: $one-third;
     padding-left: 15px;
   }
 }

src/LIN3S/AdminBundle/Resources/private/scss/components/_layout.scss

@@ -50,7 +50,7 @@ $layout-header-height: 30px !default;
 
   .layout__menu {
     height: auto;
-    position: initial;
+    position: inherit;
     width: 200px;
 
     .menu-toggle {