front IE issues - sidebar fixed

Author: andresmontejo

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,58 @@
+/*
+ * 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>
+ */
+
+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() {
+//    var width = parseInt(this.fixedElementWidth);
+
+    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.style = '';
+      this.fixedElement.style = '';
+    }
+  }
+}
+
+const onReady = () => {
+  const rootNode = document.querySelector('.form-sidebar');
+
+  if (null === rootNode) {
+    return;
+  }
+
+  new FormSidebar(rootNode);
+
+};
+
+onDomReady(onReady);

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

@@ -140,11 +140,13 @@ select {
 @media #{$large-up} {
   .form__column--left {
     flex: 1 1 66.666%;
+    max-width: 66.666%;
     padding-right: 15px;
   }
 
   .form__column--right {
     flex: 1 1 33.333%;
+    max-width: 33.333%;
     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 {

src/LIN3S/AdminBundle/Resources/public/css/bundle.min.css

@@ -0,0 +1,7 @@
+{% set form_sidebar_content %}{%- block form_sidebar_content -%}{%- endblock form_sidebar_content -%}{% endset %}
+
+<div class="form-sidebar">
+    <div class="form-sidebar__fixed">
+        {{- form_sidebar_content -}}
+    </div>
+</div>

src/LIN3S/AdminBundle/Resources/public/js/bundle.min.js

@@ -121,6 +121,10 @@
 {%- block form -%}
     {{- form_start(form) -}}
 
+    {% set lin3s_admin_submit %}
+        {{ block('lin3s_admin_submit') }}
+    {% endset %}
+
     {% if form.vars.groups is defined %}
         <div class="form__column form__column--left">
             {% for group in form.vars.groups %}
@@ -130,12 +134,16 @@
             {% endfor %}
         </div>
         <div class="form__column form__column--right">
-            {{- block('lin3s_admin_submit') -}}
-            {% for group in form.vars.groups %}
-                {% if group.position is defined and group.position == 'right' %}
-                    {{- block('lin3s_admin_panel') -}}
-                {% endif %}
-            {% endfor %}
+            {% embed 'Lin3sAdminBundle:components:form_sidebar.html.twig' %}
+                {% block form_sidebar_content %}
+                    {{- lin3s_admin_submit -}}
+                    {% for group in form.vars.groups %}
+                        {% if group.position is defined and group.position == 'right' %}
+                            {{- block('lin3s_admin_panel') -}}
+                        {% endif %}
+                    {% endfor %}
+                {% endblock %}
+            {% endembed %}
         </div>
     {% else %}
         {% embed 'Lin3sAdminBundle:components:panel.html.twig' %}