Make sidebar sticky on account page

Refs #47
gamekeller · Jan 1, 2015 · cf93205 · cf93205
1 parent 1401e08
commit cf93205
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 7 deletions.
diff --git a/assets/css/style.less b/assets/css/style.less
@@ -172,4 +172,8 @@ body {
   &.is-right {
     right: 0;
   }
+}
+
+.sticky-sidebar > .list-group {
+  margin-bottom: 0;
 }
diff --git a/assets/css/ui/panel-list.less b/assets/css/ui/panel-list.less
@@ -1,5 +1,9 @@
 .panel-list {
   &:extend(.list-unstyled all);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .panel-list-item {

diff --git a/assets/js/lib/markdownEditor.js b/assets/js/lib/markdownEditor.js
@@ -1,5 +1,7 @@
 !function($) {
 
+  var $win = $(window)
+
   var MarkdownEditor = function(element) {
     var $el           = this.$element = $(element)
     this.$textarea    = $el.find('.markdown-editor-textarea')
@@ -30,6 +32,8 @@
   }
 
   MarkdownEditor.prototype.initPreview = function() {
+    $win.trigger('resize')
+
     this.$preview.html('Vorschau wird geladen...')
 
     this.jqXHR = $.ajax('/api/markdown', {

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -67,6 +67,34 @@
     .on('mousedown', '.js-copy-field', function(e) { e.preventDefault() })
 }($);
 
+!function($) {
+  var $win  = $(window)
+  var $wrap = $('#content-wrapper')
+
+  $win.on('scroll resize', function() {
+    var scrollTop  = $win.scrollTop()
+    var wrapHeight = $wrap.height()
+
+    $('.js-sticky-sidebar').each(function() {
+      var $this  = $(this)
+      var height = $this.outerHeight()
+
+      if(height >= wrapHeight) return $this.css('position', 'static')
+
+      if(height + scrollTop > wrapHeight)
+        $this.css({
+          position: 'absolute',
+          top: wrapHeight - height
+        })
+      else
+        $this.css({
+          position: 'fixed',
+          top: ''
+        })
+    })
+  }).trigger('scroll')
+}($);
+
 !function($) {
   $('.js-tooltip').tooltip()
   $('.js-autosize').expanding()

diff --git a/views/account/_nav.jade b/views/account/_nav.jade
@@ -1,2 +1,4 @@
-+profileCard(user)
-+nav(accountNav)
+.col-md-3
+  .sticky-sidebar.js-sticky-sidebar
+    +profileCard(user)
+    +nav(accountNav)
diff --git a/views/account/index.jade b/views/account/index.jade
@@ -3,8 +3,7 @@ extends ../layout
 block content
 
   .row
-    .col-md-3
-      include _nav
+    include _nav
 
     .col-md-9
 

diff --git a/views/account/profile.jade b/views/account/profile.jade
@@ -26,7 +26,8 @@ block content
   else
     .profile.row
       .col-md-3
-        +profileCard(profile)
+        .sticky-sidebar.js-sticky-sidebar
+          +profileCard(profile)
 
       .col-md-9
         include ../partials/flash

diff --git a/views/account/security.jade b/views/account/security.jade
@@ -6,8 +6,7 @@ extends ../layout
 block content
 
   .row
-    .col-md-3
-      include _nav
+    include _nav
 
     .col-md-9