Skip to content

Commit

Permalink
Improvement on #1129 - added top margin for title
Browse files Browse the repository at this point in the history 
 - Also added conditionals for collapse height etc.
 - Option to NOT set the height
 - If setting height, it is in vh
  • Loading branch information
@torinfo
torinfo committed Jun 30, 2022
1 parent 345cfe6 commit 98ef838
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 15 deletions.
50 changes: 41 additions & 9 deletions modules/site/parent_templates/site/common/js/application.js
View file
Expand Up @@ -37,7 +37,8 @@ var urlParams = {};
var categories;
var validPages = [];
var collapseBanner = false;
var collapseHeight = 200;
var collapseHeight = -1;
var fullscreenBannerTitleMargin=10;

function init(){
loadContent();
Expand Down Expand Up @@ -1365,8 +1366,9 @@ function x_CheckBanner(index){
if (collapse != undefined && collapse=="true")
{
collapseBanner = true;
let height=200;
if ($(data).find('page').eq(index).attr('bannerHeight') !== undefined)
let height=-1;
if ($(data).find('page').eq(index).attr('bannerFixedHeight' === 'true' )
&& $(data).find('page').eq(index).attr('bannerHeight') !== undefined)
{
height = $(data).find('page').eq(index).attr('bannerHeight');
}
Expand All @@ -1390,18 +1392,37 @@ function x_CheckBanner(index){
$("<div id='x_clickableWrapper'><div class='x_arrow x_bounce'><i class='fa fa-chevron-down fa-2x' aria-hidden='true'></i></div><div class='x_promptText'>" + label + "</div></div>").appendTo(".jumbotron .container").hide().fadeIn(1000);
}, 800);
}
// Check title top margin
const titlemargin = $(data).find('page').eq(index).attr('headerTopMargin');
if (titlemargin != undefined && titlemargin != "")
{
fullscreenBannerTitleMargin = titlemargin;
$(".jumbotron .titles").css("margin-top", titlemargin + "%");
}
else
{
fullscreenBannerTitleMargin = -1;
$(".jumbotron .titles").css("margin-top", "");
}

}else { //if (banner == "fixedheight") {
let height=200;
if ($(data).find('page').eq(index).attr('bannerHeight') !== undefined)
let height=-1;
if ($(data).find('page').eq(index).attr('bannerFixedHeight' === 'true' )
&& $(data).find('page').eq(index).attr('bannerHeight') !== undefined)
{
height = $(data).find('page').eq(index).attr('bannerHeight');
}
collapseHeight = height;
$(".jumbotron").removeClass("x_scale");
$(".jumbotron").css({
"height":height + "px"
});
if (height != -1) {
$(".jumbotron").css('height', height + "vh");
}
else {
// remove height
$(".jumbotron").css('height', '');
}
fullscreenBannerTitleMargin = -1;
$(".jumbotron .titles").css("margin-top", "");
$("#x_clickableWrapper").remove();
}
}
Expand All @@ -1411,13 +1432,24 @@ $(window).scroll(function () {
if ($(document).scrollTop() > 20) {
if (collapseBanner) {
$(".x_scale").addClass("x_shrink");
$(".x_scale").css("height", collapseHeight + "px");
if (collapseHeight != -1) {
$(".x_scale").css("height", collapseHeight + "vh");
}
else
{
$(".x_scale").css("height", "");
}
$(".jumbotron .titles").css("margin-top", "");
$("#x_clickableWrapper").remove();
}
} else {
if (collapseBanner) {
$(".x_scale").removeClass("x_shrink");
$(".x_scale").css("height", Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
if (fullscreenBannerTitleMargin != -1)
{
$(".jumbotron .titles").css("margin-top", fullscreenBannerTitleMargin + "%");
}
}
}
});
Expand Down
6 changes: 4 additions & 2 deletions modules/site/parent_templates/site/wizards/en-GB/data.xwd
View file
Expand Up @@ -149,8 +149,10 @@
<headerColour type="ColourPicker" optional="true" label="Background Colour"/>
<headerTextColour type="ColourPicker" optional="true" label="Text Colour"/>
<headerBanner type="ComboBox" label="Banner" conditionTrigger="true" data="fullscreen,fixedheight" options="Full screen,Fixed height" optional="true" defaultValue="fixedheight" width="175" tooltip="Choose whether the banner needs to be full screen or fixed height when opening page"/>
<bannerHeight type="NumericStepper" label="Banner height" min="50" max="2000" step="25" width="100" optional="true" defaultValue="200" tooltip="The height of the fixed height banner or the collapsed full height banner"/>
<bannerCollapse type="CheckBox" condition="headerBanner=='fullscreen'" label="Collapse banner" optional="true" defaultValue="true" tooltip="Whether to collapse the full screen banner when scrolling down"/>
<headerTopMargin type="NumericStepper" label="Title top margin [%]" condition="headerBanner=='fullscreen'" min="2" max="60" step="1" defaultValue="20" optional="true" tooltip="The position of the titles as a percentage from the top of the banner when using a fullscreen banner"/>
<bannerCollapse type="CheckBox" conditionTrigger="true" condition="headerBanner=='fullscreen'" label="Collapse banner" optional="true" defaultValue="true" tooltip="Whether to collapse the full screen banner when scrolling down"/>
<bannerFixedHeight type="CheckBox" conditionTrigger="true" condition="headerBanner=='fixedheight' || bannerCollapse=='true'" label="Fixed height" optional="true" defaultValue="false" tooltip="Whether the 'Fixed height' banner is just the height needed for the titles, or actually a given set height."/>
<bannerHeight type="NumericStepper" condition="bannerFixedHeight=='true' &amp;&amp; (headerBanner=='fixedheight' || bannerCollapse=='true')" label="Banner height" min="10" max="100" step="1" width="100" optional="true" defaultValue="20" tooltip="The height (in %) of the fixed height banner or the collapsed full height banner"/>
<bannerFullScrolldownInfo type="CheckBox" condition="headerBanner=='fullscreen'" label="Enable scroll down info" optional="true" defaultValue="true" tooltip="Show an arrow and a help text to scroll down when the banner is full screen"/>
</headerGroup><pageLink label="Page Link" type="TextInput" wysiwyg="true" defaultValue="" optional="true" tooltip="The link text for the page menu (by default this will be the page title)" common="true"/><hideShow type="group" label="Hide/Show Page" optional="true" tooltip="Hide the page completely or hide/show the page between specified dates" info="Hide this page from view at all times or use the 'From' &amp; 'Until' fields to specify when it should be available" common="true">
<hidePage label="Hide Page" type="CheckBox" defaultValue="false" optional="true"/>
Expand Down
6 changes: 4 additions & 2 deletions src/site/wizards/en-GB/basicPages.xwd
View file
Expand Up @@ -10,8 +10,10 @@
<headerColour type="ColourPicker" optional="true" label="Background Colour"/>
<headerTextColour type="ColourPicker" optional="true" label="Text Colour"/>
<headerBanner type="ComboBox" label="Banner" conditionTrigger="true" data="fullscreen,fixedheight" options="Full screen,Fixed height" optional="true" defaultValue="fixedheight" width="175" tooltip="Choose whether the banner needs to be full screen or fixed height when opening page"/>
<bannerHeight type="NumericStepper" label="Banner height" min="50" max="2000" step="25" width="100" optional="true" defaultValue="200" tooltip="The height of the fixed height banner or the collapsed full height banner"/>
<bannerCollapse type="CheckBox" condition="headerBanner=='fullscreen'" label="Collapse banner" optional="true" defaultValue="true" tooltip="Whether to collapse the full screen banner when scrolling down" />
<headerTopMargin type="NumericStepper" label="Title top margin [%]" condition="headerBanner=='fullscreen'" min="2" max="60" step="1" defaultValue="20" optional="true" tooltip="The position of the titles as a percentage from the top of the banner when using a fullscreen banner"/>
<bannerCollapse type="CheckBox" conditionTrigger='true' condition="headerBanner=='fullscreen'" label="Collapse banner" optional="true" defaultValue="true" tooltip="Whether to collapse the full screen banner when scrolling down" />
<bannerFixedHeight type="CheckBox" conditionTrigger='true' condition="headerBanner=='fixedheight' || bannerCollapse=='true'" label="Fixed height" optional="true" defaultValue="false" tooltip="Whether the 'Fixed height' banner is just the height needed for the titles, or actually a given set height." />
<bannerHeight type="NumericStepper" condition="bannerFixedHeight=='true' &amp;&amp; (headerBanner=='fixedheight' || bannerCollapse=='true')" label="Banner height" min="10" max="100" step="1" width="100" optional="true" defaultValue="20" tooltip="The height (in %) of the fixed height banner or the collapsed full height banner"/>
<bannerFullScrolldownInfo type="CheckBox" condition="headerBanner=='fullscreen'" label="Enable scroll down info" optional="true" defaultValue="true" tooltip="Show an arrow and a help text to scroll down when the banner is full screen" />
</headerGroup>

Expand Down
6 changes: 4 additions & 2 deletions src/site/wizards/en-GB/template.xwd
View file
Expand Up @@ -149,8 +149,10 @@
<headerColour type="ColourPicker" optional="true" label="Background Colour"/>
<headerTextColour type="ColourPicker" optional="true" label="Text Colour"/>
<headerBanner type="ComboBox" label="Banner" conditionTrigger="true" data="fullscreen,fixedheight" options="Full screen,Fixed height" optional="true" defaultValue="fixedheight" width="175" tooltip="Choose whether the banner needs to be full screen or fixed height when opening page"/>
<bannerHeight type="NumericStepper" label="Banner height" min="50" max="2000" step="25" width="100" optional="true" defaultValue="200" tooltip="The height of the fixed height banner or the collapsed full height banner"/>
<bannerCollapse type="CheckBox" condition="headerBanner=='fullscreen'" label="Collapse banner" optional="true" defaultValue="true" tooltip="Whether to collapse the full screen banner when scrolling down"/>
<headerTopMargin type="NumericStepper" label="Title top margin [%]" condition="headerBanner=='fullscreen'" min="2" max="60" step="1" defaultValue="20" optional="true" tooltip="The position of the titles as a percentage from the top of the banner when using a fullscreen banner"/>
<bannerCollapse type="CheckBox" conditionTrigger="true" condition="headerBanner=='fullscreen'" label="Collapse banner" optional="true" defaultValue="true" tooltip="Whether to collapse the full screen banner when scrolling down"/>
<bannerFixedHeight type="CheckBox" conditionTrigger="true" condition="headerBanner=='fixedheight' || bannerCollapse=='true'" label="Fixed height" optional="true" defaultValue="false" tooltip="Whether the 'Fixed height' banner is just the height needed for the titles, or actually a given set height."/>
<bannerHeight type="NumericStepper" condition="bannerFixedHeight=='true' &amp;&amp; (headerBanner=='fixedheight' || bannerCollapse=='true')" label="Banner height" min="10" max="100" step="1" width="100" optional="true" defaultValue="20" tooltip="The height (in %) of the fixed height banner or the collapsed full height banner"/>
<bannerFullScrolldownInfo type="CheckBox" condition="headerBanner=='fullscreen'" label="Enable scroll down info" optional="true" defaultValue="true" tooltip="Show an arrow and a help text to scroll down when the banner is full screen"/>
</headerGroup><pageLink label="Page Link" type="TextInput" wysiwyg="true" defaultValue="" optional="true" tooltip="The link text for the page menu (by default this will be the page title)" common="true"/><hideShow type="group" label="Hide/Show Page" optional="true" tooltip="Hide the page completely or hide/show the page between specified dates" info="Hide this page from view at all times or use the 'From' &amp; 'Until' fields to specify when it should be available" common="true">
<hidePage label="Hide Page" type="CheckBox" defaultValue="false" optional="true"/>
Expand Down

0 comments on commit 98ef838

Please sign in to comment.