...
 
Commits (3)
......@@ -57,6 +57,7 @@ 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"));
......@@ -66,8 +67,17 @@ Ext.define('ARSnova.view.CustomCarouselIndicator', {
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);
}
};
......@@ -147,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) {
......
......@@ -737,3 +737,52 @@ code {
max-width: $carousel-inner-max-width;
}
}
.forwardListButton, .standardListButton {
border: 1px solid $button-border-color !important;
}
.x-form .x-field {
border: 1px solid $button-border-color !important;
&.x-field-text, &.x-field-textarea {
overflow: hidden;
}
&:first-child {
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
}
&:last-child {
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
}
.x-list {
border-bottom: 1px solid $button-border-color !important;
&.x-list-item:last-child {
border-bottom: 1px solid $button-border-color !important;
border-bottom-left-radius: 3px !important;
border-bottom-right-radius: 3px !important;
}
}
/*
* 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;
max-width: 920px !important;
margin-left: auto !important;
margin-right: auto !important;
}
#ext-element-4 {
box-shadow: 0 0 8px 8px #aaa5a0;
}
}