Univention Bugzilla – Attachment 7446 Details for
Bug 39794
App Center - screenshot gallery
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
appcenter_carousel.patch
carousel.patch (text/plain), 21.87 KB, created by
Johannes Keiser
on 2016-02-01 19:10 CET
(
hide
)
Description:
appcenter_carousel.patch
Filename:
MIME Type:
Creator:
Johannes Keiser
Created:
2016-02-01 19:10 CET
Size:
21.87 KB
patch
obsolete
>Index: umc/js/appcenter/Carousel.js >=================================================================== >--- umc/js/appcenter/Carousel.js (Revision 67064) >+++ umc/js/appcenter/Carousel.js (Arbeitskopie) >@@ -57,6 +57,9 @@ > > itemHeight: null, > heighestImg: null, >+ heighestImgRatio: null, >+ _youtubeIframeRatio: null, >+ onlyYoutubeVideos: null, > > // items: Array > // array of objects({src: <src-string>}) >@@ -66,7 +69,7 @@ > > allItemsLoaded: null, > >- bigThumbnails: null, >+ isBigThumbnails: null, > > _resizeDeferred: null, > >@@ -76,30 +79,19 @@ > this.contentSliderOffset = 0; > this.shownItemIndex = 0; > this.allItemsLoaded = false; >- this.bigThumbnails = false; >+ this.isBigThumbnails = false; >+ this._youtubeIframeRatio = 16 / 9; >+ this.heighestImgRatio = this._youtubeIframeRatio; >+ this.heighestImg = this.heighestImg || {w: 1600, h: 900}; >+ this.onlyYoutubeVideos = true; >+ this.defaultSliderWidth = 0; > }, > >- buildRendering: function() { >- this.inherited(arguments); >+ postCreate: function() { >+ this._setDefaultThumbsHeight(); > >- this.outerContainer = new ContainerWidget({ >- 'class': 'carouselOuterContainer' >- }); >- >- this.addChild(this.outerContainer); >- this.own(this.outerContainer); >- >- this.renderContentSlider(); >- this.renderNavButtons(); >- this.renderScaleButton(); >- >- }, >- >- postCreate: function() { > if (window.YT && window.YT.loaded) { >- setTimeout(lang.hitch(this, function() { >- this._renderYoutubeVideos(); >- }), 500); >+ //stub > } else { > //load youtube api > var tag = document.createElement('script'); >@@ -115,25 +107,78 @@ > }); > } > onPlayerReady = lang.hitch(this, function() { >- this.imagesLoaded(); >+ this.thumbLoaded(); > }); >+ onPlayerError = lang.hitch(this, function() { >+ this.thumbLoaded(); >+ }); > }, > >- renderContentSlider: function() { >+ buildRendering: function() { >+ this.inherited(arguments); >+ >+ this.outerContainer = new ContainerWidget({ >+ 'class': 'carouselOuterContainer', >+ style: { >+ 'height': this.itemHeight + 'px' >+ } >+ }); > this.contentSliderWrapper = new ContainerWidget({ > 'class': 'contentSliderWrapper' > }); >+ >+ this.outerContainer.addChild(this.contentSliderWrapper); >+ this.addChild(this.outerContainer); >+ this.own(this.outerContainer); >+ >+ this.renderNavButtons(); >+ this.renderScaleButton(); >+ this.renderContentSlider(); >+ >+ }, >+ >+ renderNavButtons: function() { >+ this.leftButton = domConstruct.create('div', { >+ 'class': 'carouselButton leftCarouselButton', >+ onclick: lang.hitch(this, function() { >+ this.showItem(this.shownItemIndex - 1); >+ }) >+ }, this.contentSliderWrapper.domNode, 'before'); >+ domConstruct.create('div', { >+ 'class': 'carouselButtonImage' >+ }, this.leftButton); >+ >+ this.rightButton = domConstruct.create('div', { >+ 'class': 'carouselButton rightCarouselButton', >+ onclick: lang.hitch(this, function() { >+ this.showItem(this.shownItemIndex + 1); >+ }) >+ }, this.contentSliderWrapper.domNode, 'after'); >+ domConstruct.create('div', { >+ 'class': 'carouselButtonImage' >+ }, this.rightButton); >+ }, >+ >+ renderScaleButton: function() { >+ this.scaleButton = domConstruct.create('div', { >+ 'class': 'scaleButton dijitHidden', >+ onclick: lang.hitch(this, function() { >+ this.togglePreviewSize(this.shownItemIndex); >+ }) >+ }, this.domNode); >+ }, >+ >+ renderContentSlider: function() { > this.contentSlider = new ContainerWidget({ > 'class': 'contentSlider' > }); > this.contentSliderWrapper.addChild(this.contentSlider); >- this.outerContainer.addChild(this.contentSliderWrapper); > > this._renderThumbs(); > }, > > _renderThumbs: function() { >- this.loadedImagesCount = 0; >+ this.loadedThumbsCount = 0; > var index = 0; > var uniqueYTVideoIds = []; > >@@ -145,27 +190,51 @@ > } > uniqueYTVideoIds.push(videoId); > >- var videoWrapper = domConstruct.create('div', {'class': 'galleryVideo'}, this.contentSlider.domNode); >- var div = domConstruct.create('div', { >+ var videoWrapper = domConstruct.create('div', { >+ 'class': 'galleryThumbWrapper galleryVideoWrapper' >+ }, this.contentSlider.domNode); >+ >+ var galleryVideo = domConstruct.create('div', { >+ 'class': 'galleryThumb galleryVideo notLoadedBackground', >+ style: { >+ 'width': this.itemHeight * this._youtubeIframeRatio + 'px' >+ }, > id: videoId > }, videoWrapper); > > this.itemNodes.push(videoWrapper); >+ >+ if (window.YT && window.YT.loaded) { >+ setTimeout(lang.hitch(this, function() { >+ this._renderYoutubeVideo(galleryVideo); >+ }), 0); >+ } > } else { >- var imgWrapper = domConstruct.create('div', {}, this.contentSlider.domNode); >+ var imgWrapper = domConstruct.create('div', { >+ 'class': 'galleryThumbWrapper galleryImgWrapper' >+ }, this.contentSlider.domNode); >+ > var img = domConstruct.create('img', { > src: item.src, > index: index, >- 'class': 'carouselScreenshot', >+ 'class': 'galleryThumb galleryImg', > onload: lang.hitch(this, function() { > this._updateHeighestImage(img); >- this.imagesLoaded(); >+ this.resizeCarousel(); >+ this.thumbLoaded(); > }), >+ onerror: lang.hitch(this, function() { >+ domClass.add(img.parentNode, 'brokenImg'); >+ this.resizeCarousel(); >+ this.thumbLoaded(); >+ }), > onclick: lang.hitch(this, function(evt) { > this.togglePreviewSize(parseInt(evt.target.getAttribute('index'))); > }) > }, imgWrapper); > this.itemNodes.push(imgWrapper); >+ >+ this.onlyYoutubeVideos = false; > } > index++; > })); >@@ -172,21 +241,35 @@ > }, > > _renderYoutubeVideos: function() { >- query('.galleryVideo', this.contentSlider.domNode).forEach(lang.hitch(this, function(videoWrapper) { >- var player; >- var videoId = videoWrapper.firstChild.id; >- player = new YT.Player(videoId, { >- height: this.itemHeight.toString(), >- width: 'auto', >- videoId: videoId, >- events: { >- 'onReady': onPlayerReady >- } >- }); >- this.own(player); >+ query('.galleryVideo', this.contentSlider.domNode).forEach(lang.hitch(this, function(galleryVideo) { >+ this._renderYoutubeVideo(galleryVideo); > })); > }, > >+ _renderYoutubeVideo: function(galleryVideo) { >+ //check if video already exists >+ if (galleryVideo.tagName === 'IFRAME') { >+ return; >+ } >+ //needed so the carousel gets resized and is visible >+ if (this.onlyYoutubeVideos) { >+ this.resizeCarousel(); >+ } >+ >+ var player; >+ var videoId = galleryVideo.id; >+ player = new YT.Player(videoId, { >+ height: this.itemHeight.toString(), >+ width: this.itemHeight * this._youtubeIframeRatio + 'px', >+ videoId: videoId, >+ events: { >+ 'onReady': onPlayerReady, >+ 'onError': onPlayerError >+ } >+ }); >+ this.own(player); >+ }, >+ > _srcIsYoutubeVideo: function(src) { > //taken from http://stackoverflow.com/questions/28735459/how-to-validate-youtube-url-in-client-side-in-text-box > var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/; >@@ -203,70 +286,43 @@ > > _setDefaultThumbsHeight: function() { > if (!styles.getStyleSheet('defaultItemHeightImage')) { >- styles.insertCssRule('.contentSlider .carouselScreenshot', lang.replace('max-height: {0}px', [this.itemHeight]), 'defaultItemHeightImage'); >+ styles.insertCssRule('.contentSlider .galleryImg', lang.replace('max-height: {0}px', [this.itemHeight]), 'defaultItemHeightImage'); > } > if (!styles.getStyleSheet('defaultItemHeightWrapper')) { >- styles.insertCssRule('.contentSlider div', lang.replace('height: {0}px', [this.itemHeight]), 'defaultItemHeightWrapper'); >+ styles.insertCssRule('.contentSlider .galleryThumbWrapper', lang.replace('height: {0}px', [this.itemHeight]), 'defaultItemHeightWrapper'); > } > }, > >- renderNavButtons: function() { >- this.leftButton = domConstruct.create('div', { >- 'class': 'carouselButton leftCarouselButton', >- onclick: lang.hitch(this, function() { >- this.showItem(this.shownItemIndex - 1); >- }) >- }, this.contentSliderWrapper.domNode, 'before'); >- domConstruct.create('div', { >- 'class': 'carouselButtonImage' >- }, this.leftButton); >- >- this.rightButton = domConstruct.create('div', { >- 'class': 'carouselButton rightCarouselButton', >- onclick: lang.hitch(this, function() { >- this.showItem(this.shownItemIndex + 1); >- }) >- }, this.contentSliderWrapper.domNode, 'after'); >- domConstruct.create('div', { >- 'class': 'carouselButtonImage' >- }, this.rightButton); >- }, >- >- renderScaleButton: function() { >- this.scaleButton = domConstruct.create('div', { >- 'class': 'scaleButton dijitHidden', >- onclick: lang.hitch(this, function() { >- this.togglePreviewSize(this.shownItemIndex); >- }) >- }, this.domNode); >- }, >- >- imagesLoaded: function() { >- this.loadedImagesCount++; >- if (this.loadedImagesCount === this.itemNodes.length) { >+ //checks if all divs in the contentSlider are ready >+ thumbLoaded: function() { >+ this.loadedThumbsCount++; >+ if (this.loadedThumbsCount === this.itemNodes.length) { > this.allItemsLoaded = true; >- this.heighestImg = this.heighestImg.cloneNode(); >- domConstruct.place(this.heighestImg, this.domNode); >- domClass.add(this.heighestImg, 'dijitHidden'); > domClass.remove(this.scaleButton, 'dijitHidden'); > >- this._setDefaultThumbsHeight(); > this.resizeCarousel(); >- this.calcDefaultSliderWidth(); >- this.calcOffsets(); >+ this._calcDefaultValues(); > } > }, > > _updateHeighestImage: function(img) { >- if (!this.heighestImg) { >- this.heighestImg = img; >+ if (img.naturalHeight > this.heighestImg.h) { >+ this.heighestImg.w = img.naturalWidth; >+ this.heighestImg.h = img.naturalHeight; >+ this.heighestImgRatio = img.naturalWidth / img.naturalHeight; > } >- if ((img.height > img.width) && (img.height > this.heighestImg.height)) { >- this.heighestImg = img; >+ }, >+ >+ _calcDefaultValues: function() { >+ //check if carouselWidget is displayed >+ if (domGeometry.getMarginBox(this.domNode).w === 0) { >+ return; > } >+ this._calcDefaultContentSliderWidth(); >+ this._calcDefaultContentSliderOffsets(); > }, > >- calcDefaultSliderWidth: function() { >+ _calcDefaultContentSliderWidth: function() { > this.defaultSliderWidth = domGeometry.getMarginBox(this.contentSlider.domNode).w; > this.defaultItemWidths = []; > array.forEach(this.itemNodes, lang.hitch(this, function(itemNode) { >@@ -274,9 +330,8 @@ > })); > }, > >- calcOffsets: function() { >- this.offsets = [0]; >- var maxOffset = Math.max(0, this.defaultSliderWidth - domGeometry.getMarginBox(this.contentSliderWrapper.domNode).w); >+ _calcDefaultContentSliderOffsets: function() { >+ this.defaultContentSliderOffsets = [0]; > > for (var i = 1; i < this.itemNodes.length; i++) { > var offset = 0; >@@ -283,18 +338,17 @@ > for (var c = 0; c < i; c++) { > offset += this.defaultItemWidths[c]; > } >- if (offset >= maxOffset) { >- this.offsets.push(maxOffset); >- } else { >- this.offsets.push(offset); >- } >+ this.defaultContentSliderOffsets.push(offset); > } > }, > > resizeCarousel: function() { >- if (this.bigThumbnails) { >+ if (this.isBigThumbnails) { > this._resizeBigThumbnails(); >+ this._toggleNavButtonsVisibility(); >+ return; > } >+ > var totalItemsWidth = 0; > array.forEach(this.itemNodes, function(imgWrapper) { > var imgWrapperWidth = domGeometry.getMarginBox(imgWrapper).w; >@@ -320,7 +374,9 @@ > domStyle.set(this.outerContainer.domNode, 'width', availableWidth + 'px'); > domStyle.set(this.contentSliderWrapper.domNode, 'width', widthForThumbs + 'px'); > } >- this._toggleNavButtonsVisibility(); >+ setTimeout(lang.hitch(this, function() { >+ this._toggleNavButtonsVisibility(); >+ }), 0); > }, > > _resizeBigThumbnails: function(newIndex) { >@@ -332,20 +388,10 @@ > domClass.remove(this.rightButton, 'dijitHidden'); > var maxWidth = domGeometry.getMarginBox(this.domNode).w - (domGeometry.getMarginBox(this.leftButton).w * 2) - marginOfThumbs; > domStyle.set(this.outerContainer.domNode, 'width', ''); >- domStyle.set(this.contentSliderWrapper.domNode, 'width', maxWidth + 'px'); >+ domStyle.set(this.contentSliderWrapper.domNode, 'width', maxWidth + marginOfThumbs + 'px'); > >- styles.disableStyleSheet('defaultItemHeightWrapper'); >- >- domStyle.set(this.heighestImg, 'position', 'absolute'); >- domStyle.set(this.heighestImg, 'right', '1000000px'); >- domClass.toggle(this.heighestImg, 'dijitHidden'); >+ var heighestImgHeight = Math.min(maxWidth / this.heighestImgRatio, maxHeight, this.heighestImg.h); > >- >- domStyle.set(this.heighestImg, 'max-height', maxHeight + 'px'); >- domStyle.set(this.heighestImg, 'max-width', maxWidth + 'px'); >- var heighestImgHeight = domGeometry.getMarginBox(this.heighestImg).h; >- domClass.toggle(this.heighestImg, 'dijitHidden'); >- > array.forEach(this.itemNodes, lang.hitch(this, function(imgWrapper) { > domStyle.set(imgWrapper.firstChild, 'max-width', maxWidth + 'px'); > domStyle.set(imgWrapper.firstChild, 'max-height', maxHeight + 'px'); >@@ -352,14 +398,23 @@ > domStyle.set(imgWrapper, 'height', heighestImgHeight + 'px'); > domStyle.set(imgWrapper, 'width', maxWidth + 'px'); > })); >- query('.galleryVideo', this.contentSlider.domNode).forEach(lang.hitch(this, function(videoWrapper) { >- domStyle.set(videoWrapper.firstChild, 'height', '100%'); >+ query('.galleryVideoWrapper', this.contentSlider.domNode).forEach(lang.hitch(this, function(videoWrapper) { >+ var height = maxWidth / this._youtubeIframeRatio; >+ domStyle.set(videoWrapper.firstChild, 'height', height + 'px'); > domStyle.set(videoWrapper.firstChild, 'width', '100%'); > })); > domStyle.set(this.outerContainer.domNode, 'height', heighestImgHeight + 'px'); > >+ newIndex = (newIndex === undefined) ? this.shownItemIndex : newIndex; > var newOffset = newIndex * (maxWidth + marginOfThumbs); > domStyle.set(this.contentSlider.domNode, 'left', (newOffset * (-1)) + 'px'); >+ this.contentSliderOffset = newOffset; >+ >+ var availableWidth = domGeometry.getMarginBox(this.domNode).w; >+ var widthForThumbs = availableWidth - >+ (domGeometry.getMarginBox(this.leftButton).w + domGeometry.getMarginBox(this.rightButton).w); >+ domStyle.set(this.outerContainer.domNode, 'width', availableWidth + 'px'); >+ domStyle.set(this.contentSliderWrapper.domNode, 'width', widthForThumbs + 'px'); > }, > > _toggleNavButtonsVisibility: function(newOffset) { >@@ -377,27 +432,23 @@ > }, > > togglePreviewSize: function(newIndex) { >- if (this.bigThumbnails) { >- styles.enableStyleSheet('defaultItemHeightWrapper'); >+ if (this.isBigThumbnails) { > var availableWidth = domGeometry.getMarginBox(this.domNode).w; > > if (availableWidth >= this.defaultSliderWidth) { > domClass.add(this.leftButton, 'dijitHidden'); > domClass.add(this.rightButton, 'dijitHidden'); >- domStyle.set(this.outerContainer.domNode, 'transition', 'height 0.5s, width 0.5s'); >- domStyle.set(this.contentSliderWrapper.domNode, 'transition', 'height 0.5s, width 0.5s'); > domStyle.set(this.outerContainer.domNode, 'width', this.defaultSliderWidth + 'px'); > domStyle.set(this.contentSliderWrapper.domNode, 'width', this.defaultSliderWidth + 'px'); > } > >- >- query('.carouselScreenshot', this.contentSlider.domNode).forEach(lang.hitch(this, function(imgNode) { >+ query('.galleryImg', this.contentSlider.domNode).forEach(lang.hitch(this, function(imgNode) { > domStyle.set(imgNode, 'max-height', ''); > domStyle.set(imgNode, 'max-width', ''); > domStyle.set(imgNode.parentNode, 'width', ''); > domStyle.set(imgNode.parentNode, 'height', ''); > })); >- query('.galleryVideo', this.contentSlider.domNode).forEach(lang.hitch(this, function(videoWrapper) { >+ query('.galleryVideoWrapper', this.contentSlider.domNode).forEach(lang.hitch(this, function(videoWrapper) { > domStyle.set(videoWrapper, 'height', ''); > domStyle.set(videoWrapper, 'width', ''); > domStyle.set(videoWrapper.firstChild, 'height', ''); >@@ -404,24 +455,32 @@ > domStyle.set(videoWrapper.firstChild, 'width', ''); > })); > domStyle.set(this.outerContainer.domNode, 'height', this.itemHeight + 'px'); >- domStyle.set(this.contentSlider.domNode, 'left', Math.abs(this.offsets[newIndex]) * (-1) + 'px'); >+ >+ //set offset for small thumbs >+ var maxOffset = Math.max(0, this.defaultSliderWidth - domGeometry.getMarginBox(this.contentSliderWrapper.domNode).w); >+ var newOffset = Math.min(this.defaultContentSliderOffsets[newIndex], maxOffset); >+ domStyle.set(this.contentSlider.domNode, 'left', Math.abs(newOffset) * (-1) + 'px'); >+ this.contentSliderOffset = newOffset; > > } else { >- domStyle.set(this.outerContainer.domNode, 'transition', ''); >- domStyle.set(this.contentSliderWrapper.domNode, 'transition', ''); >+ //scroll to the top of the carouselWidget >+ var scrollTarget = domGeometry.position(this.domNode, true).y - 50; >+ var scrollInterval = setInterval(lang.hitch(this, function() { >+ window.scrollTo(0, scrollTarget); >+ }), 5); >+ //wait for the transition to finish >+ setTimeout(function() { >+ clearInterval(scrollInterval); >+ }, 600); > this._resizeBigThumbnails(newIndex); > } >- this.bigThumbnails = !this.bigThumbnails; >+ this.isBigThumbnails = !this.isBigThumbnails; > domClass.toggle(this.scaleButton, 'minimize'); > this.shownItemIndex = newIndex; > > setTimeout(lang.hitch(this, function() { >- this.resizeCarousel(); >- }), 600); >- >- //scroll to the top of the image >- //var scrollTarget = domGeometry.position(this.domNode, true).y - 50; >- //window.scrollTo(0, scrollTarget); >+ this._toggleNavButtonsVisibility(); >+ }), 550); > }, > > showItem: function(newIndex) { >@@ -452,21 +511,38 @@ > this.showItem(newIndex -1); > return; > } >+ //take a higher or lower index if the offset would only change >+ //by a few pixels >+ if (newOffset < oldOffset && (oldOffset - newOffset) <= 70) { >+ this.showItem(newIndex -1); >+ return; >+ } else if (maxOffset > newOffset && (maxOffset - newOffset) <= 70) { >+ this.showItem(newIndex +1); >+ return; >+ } > > this.shownItemIndex = newIndex; > domStyle.set(this.contentSlider.domNode, 'left', (newOffset * (-1)) + 'px'); >+ this.contentSliderOffset = newOffset; > > this._toggleNavButtonsVisibility(newOffset); > }, > > _handleResize: function() { >+ if (domGeometry.getMarginBox(this.domNode).w === 0) { >+ return; >+ } > if (this._resizeDeferred && !this._resizeDeferred.isFulfilled()) { > this._resizeDeferred.cancel(); > } > this._resizeDeferred = tools.defer(lang.hitch(this, function() { > this.resizeCarousel(); >- this.calcOffsets(); >- this.showItem(this.shownItemIndex); >+ if (!this.isBigThumbnails) { >+ setTimeout(lang.hitch(this, function() { >+ this.showItem(this.shownItemIndex); >+ }), 0); >+ } >+ this._toggleNavButtonsVisibility(); > }), 200); > this._resizeDeferred.otherwise(function() { /* prevent logging of exception */ }); > }, >@@ -474,17 +550,21 @@ > startup: function() { > this.inherited(arguments); > this._registerAtParentOnShowEvents(lang.hitch(this, function() { >- if (this.defaultSliderWidth === 0 && !this.bigThumbnails) { >- this.calcDefaultSliderWidth(); >+ if (this.defaultSliderWidth === 0 && !this.isBigThumbnails) { >+ this._calcDefaultValues(); > } > if (this.allItemsLoaded) { > this.resizeCarousel(); >- this.showItem(this.shownItemIndex); >+ >+ if (!this.isBigThumbnails) { >+ setTimeout(lang.hitch(this, function() { >+ this.showItem(this.shownItemIndex); >+ }), 0); >+ } > } > })); > this.own(on(baseWin.doc, 'resize', lang.hitch(this, '_handleResize'))); > this.own(on(kernel.global, 'resize', lang.hitch(this, '_handleResize'))); >- styles.enableStyleSheet('defaultItemHeightWrapper'); > } > }); > }); >Index: umc/js/appcenter.styl >=================================================================== >--- umc/js/appcenter.styl (Revision 67058) >+++ umc/js/appcenter.styl (Arbeitskopie) >@@ -465,29 +465,49 @@ > left: 0 > transition: left 0.5s > >- div >+ .galleryThumbWrapper > margin: 0 10px > display: inline-block >- /*border: 2px solid darkgrey;*/ >- /*box-sizing: content-box;*/ >+ vertical-align: middle >+ text-align: center >+ transition: height 0.5s, width 0.5s > >+ &:after >+ content: '' >+ height: 100% >+ display: inline-block >+ vertical-align: middle > >- &.noTransition >- transition: none !important >+ .galleryImgWrapper >+ &.brokenImg >+ width: 150px >+ box-shadow: inset 0px 0px 6px #5a5a5a >+ background: url("appcenter/iconmonstr-error-2.svg") no-repeat, #e6e6e6 >+ background-position: center center >+ background-size: 30% 30% > >- .carouselScreenshot >- cursor: pointer >- display: block >- margin: auto >- position: relative >- top: 50% >- transform: translateY(-50%) >- -ms-transform: translateY(-50%) >- -webkit-transform: translateY(-50%) >- transition: max-height 0.5s, max-width 0.5s >+ .galleryImg >+ opacity: 0 >+ height: 100% >+ width: 100% > >+ .galleryImg >+ cursor: pointer >+ transition: max-height 0.5s, max-width 0.5s >+ vertical-align: middle >+ >+ .galleryVideoWrapper >+ .galleryVideo >+ vertical-align: middle >+ >+ &.notLoadedBackground >+ box-shadow: inset 0px 0px 6px #5a5a5a >+ background: url("appcenter/iconmonstr-video-15.svg") no-repeat, #e6e6e6 >+ background-position: center center >+ background-size: 30% 30% >+ > .carouselButton >- float: left >+ //float: left > > cursor: pointer > width: 40px >@@ -513,9 +533,11 @@ > > &.rightCarouselButton > margin-left: 5px >+ float: right > > &.leftCarouselButton > margin-right: 5px >+ float: left > > .carouselButtonImage > transform: rotateY(180deg)
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
Actions:
View
|
Diff
Attachments on
bug 39794
: 7446 |
7523