progressbar changes

Carpenteri1 · Mar 18, 2024 · 09938e4 · 09938e4
1 parent cc77ab5
commit 09938e4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 82 deletions.
diff --git a/src/app/component/carouselcomponent/carousel.component.css b/src/app/component/carouselcomponent/carousel.component.css
@@ -2,78 +2,22 @@
   width: 100vh;
 }
 
-/*.setspace {
-  padding: 0.5em;
+.progress-loaded{
+  background-color: #313d4b;
+  border:0.5px solid black;
+  border-radius: 6px;
+  z-index:2;
+  height:24px;
 }
 
-.container-fluid{
-  display: flex; 
-  flex-direction: column; 
-  justify-content: center; 
-  align-items: center;
+.progress{
+  position:absolute; 
+  width:100%;
 }
 
-.bi-arrow-left{
-  margin-right: 5em;
-}
-
-.bi-arrow-right{
-  margin-left: 1.5em;
-}
-
-.button-container {
-  margin-bottom: 4em;
-}
-
-.overflow-fix{
-  overflow-y: auto;
-}
-
-.big-row-container{
-  width: 70em;
-  height: 30em;
-  overflow-y: auto;
-}
-
-.col-xl-2,
-.col-sm-4, 
-.col-xs-4{
-  text-align: left;
-}
-
-@media only screen and (max-width: 575px)
-{
-
-  .col-xl-2, 
-  .col-sm-4,
-  .col-xs-4 p{
-    z-index: 1;
-    height: 1em;
-    color:black !important;
-    padding-top: 0.2em;
-    }
-    .progress{
-      z-index: 0;
-    }
-}
-
-@media only screen and (max-height: 240px)
-{
-  .col-xl-2, 
-  .col-sm-4,
-  .col-xs-4 p{
-    height: 0.7em;
-    font-size: 0.8em;
-    margin-bottom: 0.5em !important;
-  }
-  .col-xl-9, 
-  .col-sm-8,
-  .col-xs-8{
-    bottom: 1em;
-  }
-  .progress{
-    height: 0.8em !important;
-  }
+.progress-text{
+  z-index: 2;
+  color: black !important;
 }
 
 @media only screen and (max-width: 835px),
@@ -130,6 +74,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,23 +1,18 @@
-<div class="container pt-5" ><!-- TODO rewrite style of the bars and text, more modernt feel -->
+<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"><!-- might use somethinge else then-->
+    <div class="row pt-4 d-flex justify-content-center 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>
-                    <div class="row">
-                        <div class="col-3 pt-2 text-center">
-                            <p>{{item.name}} {{item.level}}%:</p>
-                        </div>
-                        <div class="col-9 pt-2">
-                            <div class="progress">
-                                <div class="progress-bar"
-                                    style="background-color: #b29600; width: {{item.level}}%;"></div>
+                    <div class="row mb-2" style="position: relative;">
+                        <div class="progress-loaded" style="background-color:#b29600;width:{{item.level}}%;"></div>
+                            <div style=""  class="progress d-flex justify-content-center align-items-center">
+                                <p class="pt-3 progress-text">{{item.name}} {{item.level}}%</p>
                             </div>
-                        </div>
                     </div>
                 </div>
             </div>