@internetstiftelsen/styleguide 2.21.12 → 2.21.14-beta.0.3

package/dist/molecules/glider/glider-single.js

@@ -18,6 +18,7 @@ if (gliderElementSingle) {
 	var nextBtns = document.querySelectorAll('.js-glider-next');
 	var prevBtns = document.querySelectorAll('.js-glider-prev');
 	var siteMain = document.querySelector('#siteMain');
+	var zoomImages = document.querySelectorAll('.js-zoom');
 	var slideIndex = GliderSingle.getCurrentSlide();
 	var bounding = 0;
 
@@ -55,5 +56,13 @@ if (gliderElementSingle) {
 		});
 	}
 
+	if (zoomImages) {
+		[].forEach.call(zoomImages, function (zoomImage) {
+			zoomImage.addEventListener('click', function () {
+				zoomImage.classList.toggle('is-zoomed');
+			});
+		});
+	}
+
 	module.exports = GliderSingle;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.21.12",
+	"version": "2.21.14-beta.0.3",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/molecules/glider/_glider.scss

@@ -26,7 +26,7 @@
 	position: relative;
 	margin: 0 auto;
 	overflow: hidden;
-	transform: translateZ(0);
+	//transform: translateZ(0);
 	backface-visibility: hidden;
 	-webkit-overflow-scrolling: touch;
 	-ms-overflow-style: none;
@@ -56,7 +56,7 @@
 	width: 100%;
 	margin: 0;
 	padding: 0;
-	transform: translateZ(0);
+	//transform: translateZ(0);
 }
 
 .glider-slide {
@@ -122,6 +122,69 @@
 
 		@include e(media) {
 
+			&:not([class*='overlay']) {
+				pointer-events: none;
+
+				@include bp-up(lg) {
+					pointer-events: auto;
+					cursor: zoom-in;
+					transition: all 0.15s ease-out;
+					position: relative;
+
+					&::after {
+						content: '';
+						padding: rhythm(1);
+						display: block;
+						position: absolute;
+						bottom: 0;
+						right: 0;
+						border-radius: $border-radius;
+						width: $icon-size-large * 1.4;
+						height: $icon-size-large * 1.4;
+						background-color: rgba($color-cyberspace, 0.8);
+						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-search' viewbox='0 0 32 32' width='32' height='32' fill='%23ffffff'%3E%3Cpath d='M24,21.8l8,8L29.9,32l-8-8c-5.9,4.6-14.3,3.6-19-2.2S-0.7,7.6,5.1,2.9S19.3-0.7,24,5.1C27.9,10,27.9,16.9,24,21.8L24,21.8z M13.4,23.9c5.8,0,10.5-4.7,10.5-10.5S19.2,3,13.4,3S3,7.7,3,13.4S7.7,23.9,13.4,23.9z'/%3E%3C/svg%3E");
+						background-position: center center;
+						background-size: $icon-size-medium $icon-size-medium;
+						background-repeat: no-repeat;
+
+					}
+
+					img {
+						transition: all 0.25s ease-out;
+					}
+
+					// Image zooming
+					&.is-zoomed {
+						cursor: zoom-out !important;
+						position: fixed;
+						left: 0;
+						right: 0;
+						top: 0;
+						bottom: 0;
+						z-index: z_index(foreground);
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						background-color: rgba($color-cyberspace, 0.8);
+						flex-direction: column;
+
+						img {
+							cursor: zoom-out;
+							max-width: 100%;
+							max-height: 100vh;
+							padding: rhythm(1);
+							height: auto;
+						}
+
+						figcaption {
+							color: $color-snow;
+							padding-left: rhythm(1);
+							padding-right: rhythm(1);
+						}
+					}
+				}
+			}
+
 			figcaption {
 				margin-top: rhythm(1);
 			}

package/src/molecules/glider/glider--single.hbs

@@ -22,8 +22,8 @@
 					</div>
 					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-1-ImageContainer">
 						<div class="wp-block-image" data-responsive="xs:slide-1-ImageContainerMobile,lg:slide-1-ImageContainer">
-							<figure class="size-large glider-slide__media">
-								<img src="/assets/images/hero.jpg" alt="kursbild">
+							<figure class="size-large glider-slide__media js-zoom">
+								<img src="/assets/images/hero.jpg" alt="kursbild" class="u-border-radius">
 							</figure>
 						</div>
 					</div>
@@ -48,7 +48,7 @@
 					</div>
 					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-2-ImageContainer">
 						<div class="wp-block-image" data-responsive="xs:slide-2-ImageContainerMobile,lg:slide-2-ImageContainer">
-							<figure class="size-large glider-slide__media">
+							<figure class="size-large glider-slide__media js-zoom">
 								<figcaption class="u-m-b-1">Exempel på bluffmejl</figcaption>
 								<img src="/assets/images/bluffmejl.png" alt="kursbild" class="u-border-radius">
 							</figure>
@@ -109,7 +109,7 @@
 					</div>
 					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-4-ImageContainer">
 						<div class="wp-block-image" data-responsive="xs:slide-4-ImageContainerMobile,lg:slide-4-ImageContainer">
-							<figure class="size-large glider-slide__media">
+							<figure class="size-large glider-slide__media js-zoom">
 								<img src="/assets/images/ALX_0876.jpg" alt="kursbild" class="u-border-radius">
 							</figure>
 						</div>

package/src/molecules/glider/glider-single.js

@@ -12,6 +12,7 @@ if (gliderElementSingle) {
 	const nextBtns = document.querySelectorAll('.js-glider-next');
 	const prevBtns = document.querySelectorAll('.js-glider-prev');
 	const siteMain = document.querySelector('#siteMain');
+	const zoomImages = document.querySelectorAll('.js-zoom');
 	let slideIndex = GliderSingle.getCurrentSlide();
 	let bounding = 0;
 
@@ -49,5 +50,13 @@ if (gliderElementSingle) {
 		});
 	}
 
+	if (zoomImages) {
+		[].forEach.call(zoomImages, (zoomImage) => {
+			zoomImage.addEventListener('click', () => {
+				zoomImage.classList.toggle('is-zoomed');
+			});
+		});
+	}
+
 	module.exports = GliderSingle;
 }

package/src/organisms/footer/_footer.scss

@@ -143,11 +143,9 @@ $footer-font-size: 18px; // To ensure all footers on all sites have the same fon
 
 			@include bp-only(md) {
 				border-bottom: 0;
-				border-right: 1px solid $color-black;
 			}
 
 			@include bp-up(xl) {
-				border-right: 1px solid $color-black;
 				border-bottom: 0;
 				padding: rhythm(4) rhythm(3) rhythm(3) rhythm(6);
 			}
@@ -156,7 +154,12 @@ $footer-font-size: 18px; // To ensure all footers on all sites have the same fon
 		@include e(address2) {
 			padding: rhythm(3);
 
+			@include bp-only(md) {
+				border-left: 1px solid $color-black;
+			}
+
 			@include bp-up(xl) {
+				border-left: 1px solid $color-black;
 				padding-left: rhythm(6);
 				padding-top: rhythm(4);
 			}