SubSpace and Linchpin Theme not working properly

Problem

When using SubSpace and the Linchpin Theme Add-on the SubSpace bar is not integrated properly.

 

 

Solution 1

Add the following Code snippet to the Linchpin Theme:

/* START: Move Subspace into Linchpin menu bar*/
AJS.toInit(function(){
   var $subspace = $("#navigationbarpro").detach();
   $("#navigation-create-buttons").before($subspace);
});
/* END: Move Subspace into Linchpin menu bar*/


Custom
CSS


/* START: Move Subspace into Linchpin menu bar*/
#navigationbarpro {
   float: left;
}
 
#navigationbarpro .aui-navgroup-horizontal {
   border-top: none;
   border-bottom: none;
}
 
#navigationbarpro .aui-navgroup-horizontal .aui-nav > li.folder > a {
   padding: 10px;
}
/* END: Move Subspace into Linchpin menu bar*/

 

Solution 2

Please add the following script to the custom html section in "At the end of HEAD":

<script type="text/javascript">
    jQuery(document).ready(function() {        
        var observerOverlayHeader;
        var observerSidebar;        
    
        var fixTheme = function() {
            jQuery('#navigationbarpro .aui-navgroup.aui-navgroup-horizontal').css('margin', '0px');
            jQuery('#navigationbarpro .aui-navgroup-inner .aui-navgroup-secondary').prependTo('#navigationbarpro .aui-navgroup-inner');
            jQuery('#navigationbarpro .aui-navgroup-inner .aui-navgroup-primary.subspaces-menu').css('clear', 'inherit');
            jQuery('#navigationbarpro .aui-navgroup-inner .aui-navgroup-primary.subspaces-menu').css('float', 'none');
            jQuery('#navigationbarpro .aui-navgroup-inner .aui-navgroup-primary.subspaces-menu .aui-nav').css('float', 'none');
            
            var subspaceNavigationHeight = jQuery('#navigationbarpro').height();
            var headerMessage = jQuery('#header-precursor');
        
            if(AJS.Meta.get('page-id') === undefined) {
                if(AJS.Meta.get('space-key') === undefined) {
                    jQuery('#page .PageContent').css('margin-top', subspaceNavigationHeight + 'px');
                } else {
                    jQuery('#page .ia-splitter').css('margin-top', subspaceNavigationHeight + 'px');
                }            
            } else {
                if(observerOverlayHeader !== undefined || observerSidebar !== undefined) {
                    observerOverlayHeader.disconnect();
                    observerSidebar.disconnect();
                }
                
                jQuery('#page .ia-splitter').css('margin-top', subspaceNavigationHeight + 'px');
                
                Subspace.lastScrollTop = -1;
                observerOverlayHeader = new MutationObserver(function(mutations) {
                  mutations.forEach(function(mutation) {
                    var header = jQuery('#main-header.overlay-header');
                    if(header.length > 0) {                        
                        var newValue = header.css('top');
                        var st = $(document).scrollTop();
                        
                        if (st < Subspace.lastScrollTop || Subspace.lastScrollTop == -1){
                            setTimeout(function() {                                
                                newValue = (180 + subspaceNavigationHeight) + 'px';
                                header.css('top', newValue);
                            }, 20);
                        }
                        
                        if (st > Subspace.lastScrollTop && Subspace.lastScrollTop != -1){
                            setTimeout(function() {                                
                                newValue = (120 + subspaceNavigationHeight) + 'px';
                                header.css('top', newValue);
                            }, 20);
                        }
                        
                        Subspace.lastScrollTop = st;
                    }
                  });    
                });
                
                observerSidebar = new MutationObserver(function(mutations) {
                  mutations.forEach(function(mutation) {
                    setTimeout(function() {
                        var newHeight = 180 + subspaceNavigationHeight;
                        if(headerMessage.length > 0 && (jQuery(window).scrollTop() < headerMessage.height())) {
                            newHeight += headerMessage.height();
                        }
                        
                        jQuery('#page .ia-splitter .ia-fixed-sidebar').css('top', newHeight + 'px');
                    }, 20);
                  });    
                });
                 
                var config = { attributes: true };
                 
                var target = document.querySelector('#main-header');
                observerOverlayHeader.observe(target, config);
                
                target = document.querySelector('#page .ia-splitter .ia-fixed-sidebar');
                observerSidebar.observe(target, config);
                
                target = document.querySelector('#main');
                observerSidebar.observe(target, config);
            }
            
            Subspace.subspaceNavigationHeight = subspaceNavigationHeight;
        };
        
        $('#navigationconfigdialog button.aui-button-primary').click(function() {
            setTimeout(function() {
                var headerMessage = jQuery('#header-precursor');
                var newHeight = jQuery('#navigationbarpro').height() > Subspace.subspaceNavigationHeight ? 142 + jQuery('#navigationbarpro').height() : 180 + jQuery('#navigationbarpro').height();
                if(headerMessage.length > 0 && (jQuery(window).scrollTop() < headerMessage.height())) {
                    newHeight += headerMessage.height();
                }
                
                jQuery('#page .ia-splitter .ia-fixed-sidebar').css('top', newHeight + 'px');
                
                fixTheme();
            }, 20);
        });
        
        fixTheme();
    });
</script>