Commit 6d7eb3f2 authored by Tom Käsler's avatar Tom Käsler Committed by Daniel Gerhardt

fix width/position for carousel indicators

parent 5ad78d65
Pipeline #22640 passed with stages
in 1 minute and 8 seconds
......@@ -57,16 +57,27 @@ Ext.define('ARSnova.view.CustomCarouselIndicator', {
this.show();
var indicator = this.indicators[0].dom;
console.log(indicator);
var itemRect = indicator.getBoundingClientRect();
this.marginLeftRight = parseFloat(window.getComputedStyle(indicator, "").getPropertyValue("margin-left"));
this.marginTopBottom = parseFloat(window.getComputedStyle(indicator, "").getPropertyValue("margin-top"));
this.elementWidth = itemRect.right - itemRect.left + (2 * this.marginLeftRight);
var resizeTask = function () {
if (me.indicators.length && me.hasItems) {
var calcWidth = me.indicators.length * me.elementWidth;
/*
* The 1024 comes from a css @media rule,
* which sets the width to a fix 920px when having a screen with >= 1024px.
* It can be found at the bottom of _general.scss
*/
if (window.innerWidth > 1024) {
me.setWidth(calcWidth < 920 ? 920 : calcWidth);
} else {
me.setWidth(calcWidth < me.screenWidth ? me.screenWidth : calcWidth);
}
me.screenWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
me.setWidth(calcWidth < me.screenWidth ? me.screenWidth : calcWidth);
}
};
......@@ -146,10 +157,15 @@ Ext.define('ARSnova.view.CustomCarouselIndicator', {
if (this.allowIndicatorMovement) {
if (element && activeItem && index !== currentActiveIndex && currentActiveIndex !== -1) {
/*
* The 1024 comes from a css @media rule,
* which sets the width to a fix 920px when having a screen with >= 1024px.
* It can be found at the bottom of _general.scss
*/
var lastElement = indicators[indicators.length - 1],
lastElementRightPos = lastElement.dom.getBoundingClientRect().right,
itemRect = activeItem.dom.getBoundingClientRect(),
maxRight = this.screenWidth,
maxRight = this.screenWidth > 1024 ? 920 : this.screenWidth,
leftPos = this.getLeft();
if (lastElementRightPos + Math.abs(leftPos) > maxRight) {
......
......@@ -770,6 +770,10 @@ code {
}
}
/*
* If either min-width or max-width are changed,
* it also needs to be changed for the carousel indicator (CustomCarouselIndicator.js)
*/
@media only screen and (min-width: 1024px) {
#ext-viewport {
width: auto !important;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment