Changed progress bar layout

This commit is contained in:
Martin Filser 2022-01-15 16:33:46 +01:00
parent ac1f540763
commit 1670ba31e8
2 changed files with 21 additions and 11 deletions

View file

@ -43,8 +43,11 @@ template(name="checklistDetail")
h2.title
+viewer
= checklist.title
.checklist-progress-bar
.checklist-progress(style="width:{{finishedPercent}}%") {{finishedPercent}}%
.checklist-progress-bar-container
.checklist-progress-text {{finishedPercent}}%
.checklist-progress-bar
.checklist-progress(style="width:{{finishedPercent}}%;{{#if $eq finishedPercent 0}}display:none{{/if}}")
+checklistItems(checklist = checklist)
template(name="checklistDeletePopup")

View file

@ -20,16 +20,23 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
display: flex
justify-content: space-between
.checklist-progress-bar
width: 90%
height: 20px
.checklist-progress-bar-container
display: flex
flex-direction: row
.checklist-progress
color: #fff !important
background-color: #2196F3 !important
padding: 0.01em 16px
border-radius: 16px
height: 100%
.checklist-progress-text
margin-right: 10px
.checklist-progress-bar
width: 80%
height: 20px
.checklist-progress
color: #fff !important
background-color: #2196F3 !important
padding: 0.01em 16px
border-radius: 16px
height: 100%
.checklist-title
.checkbox