Merge pull request #555 from wpmudev/new/SUI-587

✨ new(summary): summary image size issue.
wpmudev · Oct 18, 2023 · 2839ac2 · 2839ac2
2 parents ee56d9e + e4dd1aa
commit 2839ac2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 89 deletions.
diff --git a/assets/scss/shared-ui/_summary.scss b/assets/scss/shared-ui/_summary.scss
@@ -3,7 +3,6 @@
 // Summary: Base styles.
 // $wrap: true | $rtl: false | $monochrome: false
 @include body-class(true, false) {
-
 	.sui-summary {
 		padding: math.div($sui-gutter-md, 2) $sui-gutter-md;
 
@@ -21,9 +20,9 @@
 			display: none;
 
 			@include media(min-width, md) {
-				min-width: #{$summary-image--width + $sui-gutter};
-				min-height: $summary-size;
-				flex: 0 0 #{$summary-image--width + $sui-gutter};
+				min-width: $summary-size-width;
+				min-height: $summary-size-height;
+				flex: 0 0 $summary-size-width;
 			}
 		}
 
@@ -32,37 +31,31 @@
 			display: block;
 
 			.sui-list {
-
 				@include media(min-width, md) {
 					padding-right: math.div($sui-gutter, 2);
 					padding-left: math.div($sui-gutter, 2);
 				}
 			}
 
 			.sui-summary-details {
-
 				@include media(min-width, md) {
 					padding-right: $sui-gutter;
 					padding-left: $sui-gutter;
 				}
 			}
 
 			&:first-child {
-
 				.sui-list,
 				.sui-summary-details {
-
 					@include media(min-width, md) {
 						padding-left: 0;
 					}
 				}
 			}
 
 			&:last-child {
-
 				.sui-list,
 				.sui-summary-details {
-
 					@include media(min-width, md) {
 						padding-right: 0;
 					}
@@ -119,7 +112,6 @@
 				line-height: 55px;
 
 				+ .sui-summary-sub {
-
 					@include media(min-width, md) {
 						margin-top: -1px;
 					}
@@ -175,7 +167,6 @@
 
 		// ELEMENT: List of data
 		.sui-list {
-
 			li span {
 				white-space: normal;
 			}
@@ -188,10 +179,8 @@
 
 		// SIZE: Small
 		&.sui-summary-sm {
-
 			// ELEMENT: Image
 			.sui-summary-image-space {
-
 				@include media(min-width, md) {
 					min-width: #{$summary-image-sm--width + $sui-gutter};
 					min-height: $summary-size-sm;
@@ -203,18 +192,13 @@
 		// VARIATION: Branded
 		// When box is using white labelling settings from WPMU DEV Dashboard.
 		&:not(.sui-unbranded) {
-
 			// SIZE: Regular
 			&:not(.sui-summary-sm) {
-
 				// ELEMENT: Image
 				.sui-summary-image-space {
-
 					@include media(min-width, md) {
-
 						@if variable-exists(summary-image) {
-
-							@if $summary-image != '' {
+							@if $summary-image != "" {
 								display: block;
 							}
 						}
@@ -226,16 +210,11 @@
 				// in case summary-image variable doesn't exist or
 				// variable is empty.
 				@if variable-exists(summary-image) {
-
-					@if $summary-image == '' {
-
+					@if $summary-image == "" {
 						.sui-summary-image-space {
-
 							&:first-child + .sui-summary-segment {
-
 								.sui-list,
 								.sui-summary-details {
-
 									@include media(min-width, md) {
 										padding-left: 0;
 									}
@@ -244,14 +223,10 @@
 						}
 					}
 				} @else {
-
 					.sui-summary-image-space {
-
 						&:first-child + .sui-summary-segment {
-
 							.sui-list,
 							.sui-summary-details {
-
 								@include media(min-width, md) {
 									padding-left: 0;
 								}
@@ -261,12 +236,11 @@
 				}
 
 				&:not(.sui-rebranded) {
-
 					@include media(min-width, md) {
-
 						@if variable-exists(summary-image) {
 							background-image: url($summary-image);
-							background-size: $summary-image--width $summary-image--height;
+							background-size: $summary-image--width
+								$summary-image--height;
 							background-position: $summary-image--position;
 							background-repeat: no-repeat;
 						}
@@ -276,15 +250,11 @@
 
 			// SIZE: Small
 			&.sui-summary-sm {
-
 				// ELEMENT: Image
 				.sui-summary-image-space {
-
 					@include media(min-width, md) {
-
 						@if variable-exists(summary-image-sm) {
-
-							@if $summary-image-sm != '' {
+							@if $summary-image-sm != "" {
 								display: block;
 							}
 						}
@@ -296,16 +266,11 @@
 				// in case summary-image-sm variable doesn't exist or
 				// variable is empty.
 				@if variable-exists(summary-image-sm) {
-
-					@if $summary-image-sm == '' {
-
+					@if $summary-image-sm == "" {
 						.sui-summary-image-space {
-
 							&:first-child + .sui-summary-segment {
-
 								.sui-list,
 								.sui-summary-details {
-
 									@include media(min-width, md) {
 										padding-left: 0;
 									}
@@ -314,14 +279,10 @@
 						}
 					}
 				} @else {
-
 					.sui-summary-image-space {
-
 						&:first-child + .sui-summary-segment {
-
 							.sui-list,
 							.sui-summary-details {
-
 								@include media(min-width, md) {
 									padding-left: 0;
 								}
@@ -331,12 +292,11 @@
 				}
 
 				&:not(.sui-rebranded) {
-
 					@include media(min-width, md) {
-
 						@if variable-exists(summary-image-sm) {
 							background-image: url($summary-image-sm);
-							background-size: $summary-image-sm--width $summary-image-sm--height;
+							background-size: $summary-image-sm--width
+								$summary-image-sm--height;
 							background-position: $summary-image-sm--position;
 							background-repeat: no-repeat;
 						}
@@ -349,25 +309,19 @@
 		// When box is using white labelling settings from WPMU DEV Dashboard
 		// but no image has been added.
 		&.sui-unbranded {
-
 			.sui-summary-image-space {
-
 				&:first-child + .sui-summary-segment {
-
 					.sui-list,
 					.sui-summary-details {
-
 						@include media(min-width, md) {
 							padding-left: 0;
 						}
 					}
 				}
 
 				@include media(min-width, md) {
-
 					@if variable-exists(summary-image) {
-
-						@if $summary-image != '' {
+						@if $summary-image != "" {
 							display: none;
 						}
 					}
@@ -379,14 +333,10 @@
 		// When box is using white labelling settings from WPMU DEV Dashboard
 		// and an image has been assigned by user.
 		&.sui-rebranded {
-
 			// SIZE: Regular
 			&:not(.sui-summary-sm) {
-
 				.sui-summary-image-space {
-
 					@include media(min-width, md) {
-
 						@if variable-exists(summary-image) {
 							background-size: contain;
 							background-position: center;
@@ -398,11 +348,8 @@
 
 			// SIZE: Small
 			&.sui-summary-sm {
-
 				.sui-summary-image-space {
-
 					@include media(min-width, md) {
-
 						@if variable-exists(summary-image-sm) {
 							background-size: contain;
 							background-position: center;
@@ -424,17 +371,12 @@
 // Summary: RTL styles.
 // $wrap: true | $rtl: true | $monochrome: false
 @include body-class(true, true) {
-
 	.sui-summary {
-
 		// ELEMENT: Content
 		.sui-summary-segment {
-
 			&:first-child {
-
 				.sui-list,
 				.sui-summary-details {
-
 					@include media(min-width, md) {
 						padding-right: 0;
 						padding-left: math.div($sui-gutter, 2);
@@ -443,10 +385,8 @@
 			}
 
 			&:last-child {
-
 				.sui-list,
 				.sui-summary-details {
-
 					@include media(min-width, md) {
 						padding-right: math.div($sui-gutter, 2);
 						padding-left: 0;
@@ -477,12 +417,9 @@
 		// VARIATION: Branded
 		// When box is using white labelling settings from WPMU DEV Dashboard.
 		&:not(.sui-unbranded) {
-
 			// SIZE: Regular
 			&:not(.sui-summary-sm) {
-
 				@include media(min-width, md) {
-
 					@if variable-exists(summary-image) {
 						background-position: right $summary-image--position;
 					}
@@ -491,9 +428,7 @@
 
 			// SIZE: Small
 			&.sui-summary-sm {
-
 				@include media(min-width, md) {
-
 					@if variable-exists(summary-image-sm) {
 						background-position: right $summary-image-sm--position;
 					}
@@ -506,9 +441,7 @@
 // Summary: Monochrome styles for color accessibility.
 // $wrap: true | $rtl: false | $monochrome: true
 @include body-class(true, false, true) {
-
 	.sui-summary {
-
 		.sui-summary-details {
 			color: $accessible-dark;
 
@@ -517,4 +450,4 @@
 			}
 		}
 	}
-}
+}
diff --git a/assets/scss/shared-ui/_variables.scss b/assets/scss/shared-ui/_variables.scss
@@ -47,23 +47,24 @@ $sui-breakpoints: (
 // Summary
 
 // SIZE: Regular
-$summary-size: 212px !default;
+$summary-size-width: 222px !default;
+$summary-size-height: 212px !default;
 
-$summary-image--width: 192px !default;
-$summary-image--height: 182px !default;
+$summary-image--width: 96px !default;
+$summary-image--height: 96px !default;
 
-$summary-image--position-x: 30px !default;
-$summary-image--position-y: bottom !default;
+$summary-image--position-x: 80px !default;
+$summary-image--position-y: center !default;
 $summary-image--position: $summary-image--position-x $summary-image--position-y !default;
 
 // SIZE: Small
 $summary-size-sm: 151px !default;
 
-$summary-image-sm--width: 192px !default;
-$summary-image-sm--height: 121px !default;
+$summary-image-sm--width: 96px !default;
+$summary-image-sm--height: 96px !default;
 
 $summary-image-sm--position-x: 30px !default;
-$summary-image-sm--position-y: bottom !default;
+$summary-image-sm--position-y: center !default;
 $summary-image-sm--position: $summary-image-sm--position-x
 	$summary-image-sm--position-y !default;
 
@@ -216,7 +217,8 @@ $box-selector-vertical--icon-spacing: 7px !default;
 $box-selector-vertical--padding-bottom: #{$box-selector-vertical--height -
 	(
 		$box-selector--line-height + $box-selector--icon-size +
-			$box-selector-vertical--icon-spacing + $box-selector-vertical--padding-top
+			$box-selector-vertical--icon-spacing +
+			$box-selector-vertical--padding-top
 	)} !default;
 
 // ============================================================

diff --git a/package.json b/package.json
@@ -13,6 +13,11 @@
     {
       "name": "Danae Millan",
       "email": "[email protected]"
+    },
+    {
+      "name": "Pawan Kumar",
+      "email": "[email protected]",
+      "url": "https://creador.dev/"
     }
   ],
   "homepage": "https://wpmudev.github.io/shared-ui/",