Style fixes

partio-scout · Dec 2, 2021 · 1671491 · 1671491
1 parent 495cc4b
commit 1671491
Show file tree

Hide file tree

Showing 24 changed files with 478 additions and 105 deletions.
diff --git a/acf-json/group_603cf8c77da65.json b/acf-json/group_603cf8c77da65.json
@@ -2,6 +2,31 @@
     "key": "group_603cf8c77da65",
     "title": "Block \/ Content",
     "fields": [
+        {
+            "key": "field_61a8813f21a93",
+            "label": "Kuvio",
+            "name": "shape",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "path": "Polku",
+                "mountain": "Vuori"
+            },
+            "default_value": "path",
+            "allow_null": 0,
+            "multiple": 0,
+            "ui": 0,
+            "return_format": "value",
+            "ajax": 0,
+            "placeholder": ""
+        },
         {
             "key": "field_603cf8d5b9d04",
             "label": "Piilota kuvio",
@@ -39,5 +64,5 @@
     "hide_on_screen": "",
     "active": true,
     "description": "",
-    "modified": 1614608618
+    "modified": 1638433101
 }
diff --git a/acf-json/group_603f928cc0606.json b/acf-json/group_603f928cc0606.json
@@ -1,7 +1,52 @@
 {
     "key": "group_603f928cc0606",
     "title": "Block \/ Content with sidebar",
-    "fields": [],
+    "fields": [
+        {
+            "key": "field_61a87ef5c492c",
+            "label": "Kuvio",
+            "name": "shape",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "path": "Polku",
+                "mountain": "Vuori"
+            },
+            "default_value": "path",
+            "allow_null": 0,
+            "multiple": 0,
+            "ui": 0,
+            "return_format": "value",
+            "ajax": 0,
+            "placeholder": ""
+        },
+        {
+            "key": "field_61a87ee0c492b",
+            "label": "Piilota kuvio",
+            "name": "hide_figure",
+            "type": "true_false",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "message": "",
+            "default_value": 0,
+            "ui": 0,
+            "ui_on_text": "",
+            "ui_off_text": ""
+        }
+    ],
     "location": [
         [
             {
@@ -19,5 +64,5 @@
     "hide_on_screen": "",
     "active": true,
     "description": "",
-    "modified": 1614779031
+    "modified": 1638432692
 }
diff --git a/components/block-article-content/sass/_block-article-content.scss b/components/block-article-content/sass/_block-article-content.scss
@@ -18,6 +18,7 @@
 		font-weight: bold;
 		line-height: 1.2;
 		@include primary-color-text();
+		@include font-size($font-size-h2);
 	}
 
 	.entry-content {

diff --git a/components/block-content-with-sidebar/block-content-with-sidebar.php b/components/block-content-with-sidebar/block-content-with-sidebar.php
@@ -20,6 +20,11 @@
 );
 
 $hide_figure = get_field('hide_figure');
+$shape = get_field('shape');
+
+if(empty($shape)) {
+	$shape = 'path';
+}
 ?>
 
 <?php 
@@ -51,13 +56,19 @@
 		</div>
 	</div>	
 	<?php if(!$hide_figure): ?>
-		<svg class="figure" xmlns="http://www.w3.org/2000/svg" width="107" height="47.043" viewBox="0 0 107 47.043">
+		<?php if($shape === 'path'): ?>
+		<svg class="figure cross" xmlns="http://www.w3.org/2000/svg" width="107" height="47.043" viewBox="0 0 107 47.043">
 		    <g>
 		        <path d="M29.916 6.541L23.349 0l-8.39 8.417L6.541 0 0 6.541l8.39 8.417L0 23.375l6.541 6.541 8.417-8.39 8.39 8.39 6.568-6.541-8.416-8.417z" transform="rotate(-90 23.522 23.521) translate(17.127)"/>
 		        <path d="M15.253 11.446A24.159 24.159 0 0 1 9.034 0L0 2.064a33.488 33.488 0 0 0 8.632 15.87l.08.08s.617.617 1.474 1.662l7.238-5.79c-1.099-1.341-1.93-2.198-2.171-2.44z" transform="rotate(-90 23.522 23.521) translate(.429 60.519)"/>
 		        <path d="M16.218 6.648L9.758 0A33.429 33.429 0 0 0 0 18.738l9.141 1.474a23.953 23.953 0 0 1 7.077-13.564z" transform="rotate(-90 23.522 23.521) translate(0 30.828)"/>
 		        <path d="M.161 3.163A21.712 21.712 0 0 1 1.5 10.481 19.441 19.441 0 0 1 0 17.907l8.578 3.538a28.792 28.792 0 0 0 2.2-10.964A30.739 30.739 0 0 0 8.873 0z" transform="rotate(-90 23.522 23.521) translate(15.285 85.555)"/>
 		    </g>
 		</svg>
+		<?php elseif($shape === 'mountain'): ?>
+			<svg class="figure mountain" xmlns="http://www.w3.org/2000/svg" width="107" height="45.956" viewBox="0 0 107 45.956">
+				<path d="M168.122 240.378l5.678-5.678-25.585-25.516-16.362 16.362-27.115-27.046L66.8 236.438l5.678 5.655 32.283-32.283 34.67 34.647 5.678-5.655-7.6-7.6 10.73-10.73z" transform="translate(-66.8 -198.5)"/>
+			</svg>
+		<?php endif; ?>
 	<?php endif; ?>
 </div>
diff --git a/components/block-content-with-sidebar/sass/_block-content-with-sidebar.scss b/components/block-content-with-sidebar/sass/_block-content-with-sidebar.scss
@@ -9,25 +9,61 @@
 
 
 	.figure {
-		display: block;
-		margin: 40px -50px 0 auto;
-		width: 150px;
-		height: auto;
-
-		@include media-breakpoint-up(md) {
-			margin: 72px -100px 0 auto;
-			width: 350px;
-		}
-		@include media-breakpoint-up(xxxl) {
-			position: absolute;
-			bottom: 20px;
-			right: 0;
-			width: 350px;
-			margin: 0;
+		z-index: -1;
+
+		&.cross {
+			display: block;
+			margin: 40px -50px 0 auto;
+			width: 150px;
+			height: auto;
+
+			@include media-breakpoint-up(md) {
+				margin: 72px -100px 0 auto;
+				width: 350px;
+			}
+
+			@include media-breakpoint-up(xxxl) {
+				width: 350px;
+			}
+
+			@media (min-width: 1800px) {
+				position: absolute;
+				bottom: 20px;
+				right: 0;
+				margin: 0;
+			}
+
+			path {
+				@include secondary-color-fill();
+			}
 		}
 
-		path {
-			@include secondary-color-fill();
+		&.mountain {
+			display: block;
+			margin: 40px -15px 0 auto;
+			width: 200px;
+			height: auto;
+
+			@include media-breakpoint-up(md) {
+				margin: 72px -40px 0 auto;
+				width: 300px;
+			}
+
+			@include media-breakpoint-up(xxl) {
+				width: 350px;
+			}
+
+			@media (min-width: 1800px) {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				margin: 0;
+				margin-right: -25px
+			}
+
+			path {
+				@include secondary-color-fill();
+			}
 		}
 	}
 

diff --git a/components/block-content/block-content.php b/components/block-content/block-content.php
@@ -23,6 +23,11 @@
 );
 
 $hide_figure = get_field('hide_figure');
+$shape = get_field('shape');
+
+if(empty($shape)) {
+	$shape = 'path';
+}
 ?>
 
 <?php 
@@ -51,6 +56,7 @@
 		</div>
 	</div>	
 	<?php if(!$hide_figure): ?>
+		<?php if($shape === 'path'): ?>
 		<svg class="figure cross" xmlns="http://www.w3.org/2000/svg" width="107" height="47.043" viewBox="0 0 107 47.043">
 		    <g>
 		        <path d="M29.916 6.541L23.349 0l-8.39 8.417L6.541 0 0 6.541l8.39 8.417L0 23.375l6.541 6.541 8.417-8.39 8.39 8.39 6.568-6.541-8.416-8.417z" transform="rotate(-90 23.522 23.521) translate(17.127)"/>
@@ -59,5 +65,10 @@
 		        <path d="M.161 3.163A21.712 21.712 0 0 1 1.5 10.481 19.441 19.441 0 0 1 0 17.907l8.578 3.538a28.792 28.792 0 0 0 2.2-10.964A30.739 30.739 0 0 0 8.873 0z" transform="rotate(-90 23.522 23.521) translate(15.285 85.555)"/>
 		    </g>
 		</svg>
+		<?php elseif($shape === 'mountain'): ?>
+			<svg class="figure mountain" xmlns="http://www.w3.org/2000/svg" width="107" height="45.956" viewBox="0 0 107 45.956">
+				<path d="M168.122 240.378l5.678-5.678-25.585-25.516-16.362 16.362-27.115-27.046L66.8 236.438l5.678 5.655 32.283-32.283 34.67 34.647 5.678-5.655-7.6-7.6 10.73-10.73z" transform="translate(-66.8 -198.5)"/>
+			</svg>
+		<?php endif; ?>
 	<?php endif; ?>
 </div>
diff --git a/components/block-content/sass/_block-content.scss b/components/block-content/sass/_block-content.scss
@@ -9,25 +9,51 @@
 	}
 
 	.figure {
-		display: block;
-		margin: 40px -50px 0 auto;
-		width: 150px;
-		height: auto;
-
-		@include media-breakpoint-up(md) {
-			margin: 72px -100px 0 auto;
-			width: 350px;
-		}
-		@include media-breakpoint-up(xxl) {
-			position: absolute;
-			bottom: 0;
-			right: 0;
-			width: 350px;
-			margin: 0;
+		&.cross {
+			display: block;
+			margin: 40px -50px 0 auto;
+			width: 150px;
+			height: auto;
+
+			@include media-breakpoint-up(md) {
+				margin: 72px -100px 0 auto;
+				width: 350px;
+			}
+			@include media-breakpoint-up(xxl) {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				width: 350px;
+				margin: 0;
+			}
+
+			path {
+				@include secondary-color-fill();
+			}
 		}
 
-		path {
-			@include secondary-color-fill();
+		&.mountain {
+			display: block;
+			margin: 40px -15px 0 auto;
+			width: 200px;
+			height: auto;
+
+			@include media-breakpoint-up(md) {
+				margin: 72px -40px 0 auto;
+				width: 300px;
+			}
+			@include media-breakpoint-up(xxl) {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				width: 350px;
+				margin: 0;
+				margin-right: -25px
+			}
+
+			path {
+				@include secondary-color-fill();
+			}
 		}
 	}
 

diff --git a/components/block-social-feed/sass/_block-social-feed.scss b/components/block-social-feed/sass/_block-social-feed.scss
@@ -18,6 +18,7 @@
 	.juicer-feed {
 		padding: 0 !important;
 		max-height: none !important;
+		overflow: initial !important;
 
 		@include media-breakpoint-down(xs) {
 			&:not(.more) {
@@ -30,6 +31,11 @@
 		}
 
 		@include media-breakpoint-down(md) {
+			.j-stacker-wrapper {
+				margin-left: -10px !important;
+				margin-right: -10px !important;
+			}
+
 			.j-stack {
 				padding-left: 10px !important;
 				padding-right: 10px !important;

diff --git a/dev/js/app.js b/dev/js/app.js
@@ -302,15 +302,21 @@ $(document).ready(function () {
     }
   }); //Float only main menu area
 
+  var helperHeight;
   $(window).on('scroll', function (e) {
+    //console.log($(window).scrollTop())
     if ($(window).width() >= 992) {
-      if ($(window).scrollTop() >= 52) {
+      helperHeight = $('.header-desktop .header-helper').outerHeight(); //console.log(helperHeight)
+
+      if ($(window).scrollTop() >= helperHeight) {
         $('.site-header-main, .header-helper, .site-header').addClass('floating');
       } else {
         $('.site-header-main, .header-helper, .site-header').removeClass('floating');
       }
     } else {
-      if ($(window).scrollTop() >= 44) {
+      helperHeight = $('.header-mobile .header-helper').outerHeight(); //console.log(helperHeight)
+
+      if ($(window).scrollTop() >= helperHeight) {
         $('.site-header-main, .header-helper, .site-header').addClass('floating');
       } else {
         $('.site-header-main, .header-helper, .site-header').removeClass('floating');