Add element in main structure

Hello there,

I am trying to create a small, but not so easy feature in our child theme (OJS 3.1). I want to make the width of the sidebar variable with a slider (like https://jsfiddle.net/). I would need to add a div between the sidebar and the main content (which will act as a slider), but I don’t know which tpl (some index.tpl?) I need to change for that. Can anyone give me directions?

Thanks and kind regards
Daniela

Hi there,

so, after a bit trial and error I found a solution that I would like to share with you:

  • first of all copy the header.tpl from /lib/pkp/templates/frontend/components/ to /plugins/themes/YOURTHEME/templates/frontend/components/ and add a div (for examaple: <div id='content_slider'></div>) right before <div id="pkp_content_main" class="pkp_structure_main" role="main">

  • Then create a folder “js” (or another name you like) and create in this folder a javascript file (for example “main.js”)

  • Then add this line to your YOURTHEME.inc.php: $this->addScript('javascript', 'js/main.js');

  • open your main.js and add the following lines:

$( "#content_slider" ).draggable({
          containment: "parent",
          drag: function(){
            var position = $( "#content_slider" ).position();
            var parentWidth = $(".pkp_structure_content").width();
            var percentage = "%";
            var percentagePosition = (position.left / parentWidth) * 100;
            var negativePosition = parentWidth - position.left;
            var negativePercentagePosition = (negativePosition / parentWidth) * 100;
            $(".pkp_structure_sidebar").outerWidth( percentagePosition + percentage );
            $(".pkp_structure_main").outerWidth( (negativePercentagePosition) + percentage );
            }
});
  • Then create a folder styles and in this folder a file layout.less and add the following lines:

#content_slider {
z-index: 200;
width: 8px;
height: 100%;
padding: 5px 0;
margin-left:-4px;
cursor: col-resize;
position: absolute;
top: 0;
left: 220px;
&:after {
content:"";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
border-left: 1px solid #abb9c2;
transform: translate(-50%);
}
}

There are still some minor mistakes which are likely results of paddings and margins, but it works.

Kind regards
Daniela

Would you mind to share the web which implement that as the example?

Unfortunately I am working on a test system which cannot be accessed outside of our network. Furthermore we’ve decided it isn’t such a great feature, because our user might want more space for the maint content, but most likely not for the sidebar. So I’ve changed the feature to toggle the sidebar instead. If you’re interested in this, I could provide the code and a screenshot.

Kind regards
Daniela

1 Like

Thanks @UBWolf
I am interested

Hi @kawahyu,

ok, the first steps are the same like mentioned above: Copy the header.tpl, add a div (in my case “#content_slider”), create the javascript file and link to this file in your THEME.inc.php.
Then open your main.js and add the following lines:

$( “#content_slider” ).click(function(){
var sidebarWidth = $(".pkp_structure_sidebar").outerWidth();
$(".pkp_structure_sidebar").toggle(0, function() {
$(this).is(":visible") ?
(
$(".pkp_structure_main").css({ ‘width’: 'calc(100% - ’ + sidebarWidth + ‘px)’ }),
$("#content_slider").css({ ‘left’ : sidebarWidth + ‘px’ }),
$("#content_slider").removeClass( “content_toggle” )
) :
(
$(".pkp_structure_main").css({ ‘width’: ‘100%’ }),
$("#content_slider").css({ ‘left’ : ‘0px’ }),
$("#content_slider").addClass( “content_toggle” )
);
});
});

Then create a folder styles and in this folder a file layout.less and add the following lines:

#content_slider {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #f3f3f3;
border-left: 20px solid transparent;
z-index: 200;
margin-left:-40px;
position: absolute;
top: 0;
left: 220px;
&.content_toggle {
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #e0eef4;
border-right: 20px solid transparent;
margin-left:0;
}
}

The div you’ve included in the header.tpl is the switch to toggle the sidebar. In my case I’ve formed it as a triangle, but it could be a circle or a picture or some icon.

Here are the (anonymized) screenshots.
Please note: Our child theme is based on the default theme, but I’ve made many, many changes, so it might be necessary to adapt the javascript and the less files in order to make it working with your own theme.

open
closed

Kind regards
Daniela

1 Like