changes color and style on progressbars

Carpenteri1 · Mar 23, 2024 · c62f09e · c62f09e
1 parent 6878a79
commit c62f09e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git 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;
     }
-}
+}*/
diff --git 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>