Skip to content

Commit

Permalink
Improve progressbar animations in project view (#698)
Browse files Browse the repository at this point in the history 
Signed-off-by: Cintia Sanchez Garcia <[email protected]>
  • Loading branch information
@cynthia-sg
cynthia-sg authored Nov 2, 2022
1 parent f31c852 commit 8b7672a
Show file tree
Hide file tree
Showing 15 changed files with 96 additions and 83 deletions.
2 changes: 1 addition & 1 deletion web/src/layout/common/CategoryProgressbar.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
}

.line {
transition: width 0.6s ease;
transition: all 0.6s ease;
}

.arrow {
Expand Down
1 change: 1 addition & 0 deletions web/src/layout/common/RoundScore.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
.circle {
fill: none;
stroke-width: 3px;
transition: all 0.6s ease-in-out;
}

.value {
Expand Down
4 changes: 4 additions & 0 deletions web/src/layout/detail/report/Row.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@
background-color: var(--bg-color);
}

.progressbar {
animation: all 0.6s ease;
}

@media only screen and (min-width: 576px) {
.progressbarWrapper {
max-width: 50%;
Expand Down
2 changes: 1 addition & 1 deletion web/src/layout/detail/report/Row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const Row = (props: Props) => {
<div className={`flex-grow-1 ${styles.progressbarWrapper}`}>
<div className={`progress rounded-0 ${styles.progress}`}>
<div
className="progress-bar"
className={`progress-bar ${styles.progressbar}`}
role="progressbar"
style={{ width: `${props.score || 1}%`, backgroundColor: `var(--rm-${color})` }}
/>
Expand Down
2 changes: 1 addition & 1 deletion web/src/layout/detail/report/__snapshots__/Row.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ exports[`Row creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 90%;"
/>
Expand Down
28 changes: 14 additions & 14 deletions web/src/layout/detail/repositories/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1132,7 +1132,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 60%;"
/>
Expand Down Expand Up @@ -2575,7 +2575,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 80%;"
/>
Expand Down Expand Up @@ -2985,7 +2985,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 25%;"
/>
Expand Down Expand Up @@ -3536,7 +3536,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 1%;"
/>
Expand Down Expand Up @@ -4125,7 +4125,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 90%;"
/>
Expand Down Expand Up @@ -4670,7 +4670,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 100%;"
/>
Expand Down Expand Up @@ -5331,7 +5331,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 90%;"
/>
Expand Down Expand Up @@ -5876,7 +5876,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 100%;"
/>
Expand Down Expand Up @@ -6537,7 +6537,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 70%;"
/>
Expand Down Expand Up @@ -7082,7 +7082,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 100%;"
/>
Expand Down Expand Up @@ -7743,7 +7743,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 70%;"
/>
Expand Down Expand Up @@ -8288,7 +8288,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 100%;"
/>
Expand Down Expand Up @@ -8949,7 +8949,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 70%;"
/>
Expand Down Expand Up @@ -9494,7 +9494,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 100%;"
/>
Expand Down
4 changes: 4 additions & 0 deletions web/src/layout/stats/ProgressBar.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
width: 57px;
}

.progressbar {
animation: all 0.6s ease;
}

@media only screen and (max-width: 575.98px) {
.progressTitle {
font-size: 0.75rem;
Expand Down
2 changes: 1 addition & 1 deletion web/src/layout/stats/ProgressBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const ProgressBar = (props: Props) => {
<div className={`flex-grow-1 ${styles.progressbarWrapper}`}>
<div className={`progress rounded-0 ${styles.progress}`}>
<div
className="progress-bar"
className={`progress-bar ${styles.progressbar}`}
role="progressbar"
style={{ width: `${props.value || 1}%`, backgroundColor: `var(--rm-${color})` }}
/>
Expand Down
4 changes: 4 additions & 0 deletions web/src/layout/stats/ProgressBarInLine.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@
width: 55px;
}

.progressbar {
animation: all 0.6s ease;
}

@media only screen and (max-width: 575.98px) {
.icon {
font-size: 0.65rem;
Expand Down
2 changes: 1 addition & 1 deletion web/src/layout/stats/ProgressBarInLine.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const ProgressBarInLine = (props: Props) => {
<div className="flex-grow-1 ms-2">
<div className={`progress rounded-0 ${styles.progress}`}>
<div
className="progress-bar"
className={`progress-bar ${styles.progressbar}`}
role="progressbar"
style={{ width: `${props.value || 1}%`, backgroundColor: `var(--rm-${color})` }}
/>
Expand Down
10 changes: 5 additions & 5 deletions web/src/layout/stats/__snapshots__/Average.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ exports[`Average creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 85%;"
/>
Expand Down Expand Up @@ -104,7 +104,7 @@ exports[`Average creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 79%;"
/>
Expand Down Expand Up @@ -164,7 +164,7 @@ exports[`Average creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 57%;"
/>
Expand Down Expand Up @@ -218,7 +218,7 @@ exports[`Average creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 53%;"
/>
Expand Down Expand Up @@ -273,7 +273,7 @@ exports[`Average creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 40%;"
/>
Expand Down
16 changes: 8 additions & 8 deletions web/src/layout/stats/__snapshots__/Checks.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ exports[`Checks creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 8%;"
/>
Expand Down Expand Up @@ -126,7 +126,7 @@ exports[`Checks creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 9%;"
/>
Expand Down Expand Up @@ -188,7 +188,7 @@ exports[`Checks creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 12%;"
/>
Expand Down Expand Up @@ -253,7 +253,7 @@ exports[`Checks creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 43%;"
/>
Expand Down Expand Up @@ -315,7 +315,7 @@ exports[`Checks creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 83%;"
/>
Expand Down Expand Up @@ -380,7 +380,7 @@ exports[`Checks creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 59%;"
/>
Expand Down Expand Up @@ -445,7 +445,7 @@ exports[`Checks creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 81%;"
/>
Expand Down Expand Up @@ -507,7 +507,7 @@ exports[`Checks creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 33%;"
/>
Expand Down
2 changes: 1 addition & 1 deletion web/src/layout/stats/__snapshots__/ProgressBar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ exports[`ProgressBar creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 75%;"
/>
Expand Down
2 changes: 1 addition & 1 deletion web/src/layout/stats/__snapshots__/ProgressBarInLine.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ exports[`ProgressBarInLine creates snapshot 1`] = `
class="progress rounded-0 progress"
>
<div
class="progress-bar"
class="progress-bar progressbar"
role="progressbar"
style="width: 75%;"
/>
Expand Down
Loading

0 comments on commit 8b7672a

Please sign in to comment.