Merge pull request #189 from Wikia/XW-4088-dev

XW-4088 | fix for FV on scroll behaviour when smartbanner is visible
Wikia · Oct 9, 2017 · ec80934 · ec80934
2 parents 2dacc1c + 62dd670
commit ec80934
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/app/styles/_wikia-variables.scss b/app/styles/_wikia-variables.scss
@@ -96,6 +96,7 @@ $vertical-colors: (
 // Smart banner
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 $smart-banner-android-height: rem-calc(66);
+$fandom-app-smart-banner-height: 85px;
 
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Site head

diff --git a/app/styles/component/_article-featured-video.scss b/app/styles/component/_article-featured-video.scss
@@ -258,3 +258,14 @@ $small-thumbnail-height: 56px;
 		}
 	}
 }
+
+.with-fandom-app-smart-banner {
+	.article-featured-video {
+		&.is-fixed {
+			.article-featured-video__container {
+				top: $wds-global-navigation-height + $fandom-app-smart-banner-height;
+				z-index: $z-site-head - 3;
+			}
+		}
+	}
+}
diff --git a/app/styles/component/_fandom-app-smart-banner.scss b/app/styles/component/_fandom-app-smart-banner.scss
@@ -4,7 +4,7 @@
 	background: $wds-fandom-color-light-gray;
 	background-size: auto 100%;
 	display: flex;
-	height: 85px;
+	height: $fandom-app-smart-banner-height;
 	justify-content: flex-start;
 	width: 100%;
 	// one less than drawer as it cannot be visible when drawer opens