From c62f09e27e632631e46cd63f765962801b4453a2 Mon Sep 17 00:00:00 2001
From: Carpenteri1 <niclastimle@icloud.com>
Date: Sat, 23 Mar 2024 22:48:37 +0100
Subject: [PATCH] changes color and style on progressbars

---
 .../carouselcomponent/carousel.component.css    | 17 ++++++++---------
 .../carouselcomponent/carousel.component.html   | 11 +++++++----
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/app/component/carouselcomponent/carousel.component.css b/src/app/component/carouselcomponent/carousel.component.css
index 6fddfa3..9df9608 100644
--- a/src/app/component/carouselcomponent/carousel.component.css
+++ b/src/app/component/carouselcomponent/carousel.component.css
@@ -5,21 +5,20 @@
 .progress-loaded{
   background-color: #313d4b;
   border:0.5px solid black;
-  border-radius: 6px;
-  z-index:2;
-  height:24px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+  height:18px;
 }
 
 .progress{
-  position:absolute; 
-  width:100%;
+  padding: 0%;
 }
 
-.progress-text{
-  z-index: 2;
+.progress-text{ 
+  padding-left: 1em;
   color: black !important;
 }
-
+/*  
 @media only screen and (max-width: 835px),
 screen and (max-height: 520px) {
     .setspace{
@@ -74,4 +73,4 @@ screen and (max-height: 450px) {
     .progress{
       height: 0.8em;
     }
-}
\ No newline at end of file
+}*/
\ No newline at end of file
diff --git a/src/app/component/carouselcomponent/carousel.component.html b/src/app/component/carouselcomponent/carousel.component.html
index 2c7f741..6698d03 100644
--- a/src/app/component/carouselcomponent/carousel.component.html
+++ b/src/app/component/carouselcomponent/carousel.component.html
@@ -1,18 +1,21 @@
+
 <div class="container pt-5">
     <div class="row text-center">
         <h2>{{title}}</h2>
     </div>
-    <div class="row pt-4 d-flex justify-content-center align-items-center">
+    <div class="row pt-4 d-flex align-items-center">
         <div class="col-1">
             <button class="no-outline" (click)="toggleGroup('left')"><i class="bi bi-arrow-left"></i></button>
         </div>
             <div class="col-10">
                 <div *ngFor="let item of currentListOfSKills" @fade [@fadeOut]="fadeIn ? null : true" (@fadeOut.done)="fadeOutDone($event)" [@fadeIn]="fadeIn">
-                    <div class="row mb-2" style="position: relative;">
-                        <div class="progress-loaded" style="background-color:#b29600;width:{{item.level}}%;"></div>
-                            <div class="progress d-flex justify-content-center align-items-center">
+                    <div class="row" style="margin-top: 1em;" >
+                        <div class="progress">
+                            <div class="col-2 d-flex align-items-center" style="background-color: #2E3445;border:2px solid black;">
                                 <p class="pt-3 progress-text">{{item.name}} {{item.level}}%</p>
                             </div>
+                            <div class="progress-loaded col-10" style="background-color:#b29600;width:{{item.level-12}}%;"></div>
+                        </div>
                     </div>
                 </div>
             </div>