Merge pull request #596 from ProgressPlanner/filip/v18/better-badge-align

Better badge alignment inside gauge

Author: aristath

assets/css/web-components/prpl-badge.css

@@ -28,4 +28,8 @@
 prpl-badge {
 	width: 100%;
 	margin-bottom: 1rem;
+
+	& > img {
+		vertical-align: bottom;
+	}
 }

assets/js/web-components/prpl-gauge.js

@@ -44,6 +44,11 @@ customElements.define(
 				content = this.querySelector( 'progress' ).innerHTML;
 			}
 
+			// We need different styles for the content depending on the presence of a prpl-badge.
+			const contentSpecificStyles = content.includes( '<prpl-badge' )
+				? 'bottom: 50%;'
+				: 'top: -1em; padding-top: 50%;';
+
 			props.background =
 				this.getAttribute( 'background' ) || props.background;
 			props.color = this.getAttribute( 'color' ) || props.color;
@@ -58,39 +63,15 @@ customElements.define(
 
 			this.innerHTML = `
 			<div style="padding: ${ props.contentPadding };
-			background: ${
-				props.background
-			}; border-radius:var(--prpl-border-radius-big); aspect-ratio: 2 / 1; overflow: hidden; position: relative; margin-bottom: ${
-				props.marginBottom
-			};">
-				<div style="width: 100%; aspect-ratio: 1 / 1; border-radius: 100%; position: relative; background: radial-gradient(${
-					props.background
-				} 0 ${ props.cutout }, transparent ${
-					props.cutout
-				} 100%), conic-gradient(from ${ props.start }, ${
-					props.color
-				} calc(${ props.maxDeg } * ${
-					props.value
-				}), var(--prpl-color-gray-1) calc(${ props.maxDeg } * ${
-					props.value
-				}) ${ props.maxDeg }, transparent ${
-					props.maxDeg
-				}); text-align: center;">
+			background: ${ props.background }; border-radius:var(--prpl-border-radius-big); aspect-ratio: 2 / 1; overflow: hidden; position: relative; margin-bottom: ${ props.marginBottom };">
+				<div style="width: 100%; aspect-ratio: 1 / 1; border-radius: 100%; position: relative; background: radial-gradient(${ props.background } 0 ${ props.cutout }, transparent ${ props.cutout } 100%), conic-gradient(from ${ props.start }, ${ props.color } calc(${ props.maxDeg } * ${ props.value }), var(--prpl-color-gray-1) calc(${ props.maxDeg } * ${ props.value }) ${ props.maxDeg }, transparent ${ props.maxDeg }); text-align: center;">
 					<span style="font-size: var(--prpl-font-size-small); position: absolute; top: 50%; color: var(--prpl-color-gray-5); width: 10%; text-align: center; left:0;">0</span>
-						<span style="font-size: ${
-							props.contentFontSize
-						}; top: -1em; display: block; padding-top: 50%; font-weight: 600; text-align: center; position: absolute; color: var(--prpl-color-gray-5); width: 100%; line-height: 1.2;">
-							<span style="display:inline-block;width: 50%; ${
-								content.includes( '<prpl-badge' )
-									? 'margin-top: -1em;'
-									: ''
-							}">
+						<span style="font-size: ${ props.contentFontSize }; ${ contentSpecificStyles } display: block; font-weight: 600; text-align: center; position: absolute; color: var(--prpl-color-gray-5); width: 100%; line-height: 1.2;">
+							<span style="display:inline-block;width: 50%;">
 								${ content }
 							</span>
 						</span>
-					<span style="font-size: var(--prpl-font-size-small); position: absolute; top: 50%; color: var(--prpl-color-gray-5); width: 10%; text-align: center; right:0;">${
-						props.max
-					}</span>
+					<span style="font-size: var(--prpl-font-size-small); position: absolute; top: 50%; color: var(--prpl-color-gray-5); width: 10%; text-align: center; right:0;">${ props.max }</span>
 				</div>
 			</div>
 			`;