[BUGFIX] Add cross browser compatibility for progress bar

TYPO3incubator · Jun 14, 2024 · 1ee2187 · 1ee2187
1 parent 5186fc9
commit 1ee2187
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 28 deletions.
diff --git a/local_packages/portfolio/Resources/Private/Build/Stylesheet/base/_base.scss b/local_packages/portfolio/Resources/Private/Build/Stylesheet/base/_base.scss
@@ -77,3 +77,58 @@ section,
   padding-top: var(--spacer-lg);
   padding-bottom: var(--spacer-lg);
 }
+
+
+/* IE and EDGE */
+progress {
+  /* RESETS */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: none;
+  border-radius: 1rem;
+  background-color: var(--color-base-border);
+  color: var(--color-primary);
+}
+
+/* WEBKIT BROWSERS - CHROME, OPERA AND SAFARI */
+progress::-webkit-progress-bar {
+  background-color: var(--color-base-border);
+  border-radius: 1rem;
+}
+
+progress::-webkit-progress-value {
+  animation: swizzle 15s ease infinite;
+  background: var(--color-primary);
+  background-image: linear-gradient(
+      45deg,
+      var(--color-primary),
+      var(--color-secondary)
+  );
+  background-size: 150% 150%;
+  border-radius: 1rem;
+}
+
+/* MOZILLA FIREFOX */
+progress::-moz-progress-bar {
+  animation: swizzle 15s ease infinite;
+  background: var(--color-primary);
+  background-image: linear-gradient(
+      45deg,
+      var(--color-primary),
+      var(--color-secondary)
+  );
+  background-size: 150% 150%;
+}
+
+@keyframes swizzle {
+  0% {
+    background-position: 0 100%;
+  }
+  50% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 100%;
+  }
+}
diff --git a/...packages/portfolio/Resources/Private/Build/Stylesheet/components/atoms/_progress-bar.scss b/...packages/portfolio/Resources/Private/Build/Stylesheet/components/atoms/_progress-bar.scss
@@ -8,34 +8,8 @@
   }
 
   .progress-bar__indicator {
-    border-radius: 1rem;
     border: 1px solid rgba(var(--color-primary), 0.8);
     float: right;
     width: 75%;
-
-    &::-moz-progress-bar,
-    &::-webkit-progress-value,
-    &::-webkit-progress-bar {
-      background: var(--color-primary);
-      background-image: linear-gradient(
-          45deg,
-          var(--color-primary),
-          var(--color-secondary)
-      );
-      background-size: 150% 150%;
-      animation: swizzle 15s ease infinite;
-    }
-
-    @keyframes swizzle {
-      0% {
-        background-position: 0% 100%;
-      }
-      50% {
-        background-position: 100% 0%;
-      }
-      100% {
-        background-position: 0% 100%;
-      }
-    }
   }
 }
diff --git a/...ges/portfolio/Resources/Private/Build/Stylesheet/components/molecules/_skill-display.scss b/...ges/portfolio/Resources/Private/Build/Stylesheet/components/molecules/_skill-display.scss
@@ -1,5 +1,12 @@
 .ce-skill-display {
-  &__list {
+  &__list-progress {
+    display: grid;
+    flex-wrap: wrap;
+    gap: $col-padding;
+    margin-bottom: -$col-padding;
+  }
+
+  &__list-pills {
     display: flex;
     flex-wrap: wrap;
     gap: $col-padding;

diff --git a/local_packages/portfolio/Resources/Private/Templates/Content/SkillDisplay.html b/local_packages/portfolio/Resources/Private/Templates/Content/SkillDisplay.html
@@ -5,6 +5,7 @@
 		<div class="row">
 			<div class="col sm-12 md-10 md-offset-1 lg-7 lg-offset-2 xl-6 xl-offset-3">
 				<div class="ce-skill-display__list justify-content-{contentAlignment}">
+					<div class="{f:if(condition: data.show_progress_level, then: 'ce-skill-display__list-progress', else: 'ce-skill-display__list-pills')}">
 					<f:for each="{skills}" as="skill">
 						<f:if condition="{data.show_progress_level}">
 							<f:then>
@@ -20,9 +21,10 @@
 							</f:else>
 						</f:if>
 					</f:for>
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
 
-</f:section>
+</f:section>