ui: Avoid inline styling for setting progress bar width

- attr() CSS function can't used practically on anything but the content
property.

- Introduce a hack for setting any arbitrary percentage width on an element
similar to w-25, w-50, w-75 and w-100 bootstrap utilities. This hack should not
be used widely.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>

plinth/modules/diagnostics/templates/diagnostics.html

@@ -19,10 +19,10 @@
   {% else %}
     <p>{% trans "Diagnostics test is currently running" %}</p>
     <div class="progress">
-      <div class="progress-bar progress-bar-striped active"
+      <div class="progress-bar progress-bar-striped active
+                  w-{{ results.progress_percentage }}"
            role="progressbar" aria-valuemin="0" aria-valuemax="100"
-           aria-valuenow="{{ results.progress_percentage }}"
-           style="width: {{ results.progress_percentage }}%">
+           aria-valuenow="{{ results.progress_percentage }}">
         {{ results.progress_percentage }}%
       </div>
     </div>

plinth/modules/samba/templates/samba.html

@@ -41,10 +41,10 @@
                   bg-warning
                 {% else %}
                   bg-danger
-                {% endif %}"
+                {% endif %}
+                 w-{{ disk.percent_used }}"
                 role="progressbar" aria-valuenow="{{ disk.percent_used }}"
-                aria-valuemin="0" aria-valuemax="100"
-                style="width: {{ disk.percent_used }}%;">
+                aria-valuemin="0" aria-valuemax="100">
                 {{ disk.percent_used }}%
               </div>
             </div>

plinth/modules/storage/templates/storage.html

@@ -45,10 +45,10 @@
                                 bg-warning
                               {% else %}
                                 bg-danger
-                              {% endif %}"
+                              {% endif %}
+                              w-{{ disk.percent_used }}"
                        role="progressbar" aria-valuenow="disk.percent_used"
-                       aria-valuemin="0" aria-valuemax="100"
-                       style="width: {{ disk.percent_used }}%;">
+                       aria-valuemin="0" aria-valuemax="100">
                     {{ disk.percent_used }}%
                   </div>
                 </div>

plinth/templates/setup.html

@@ -82,10 +82,10 @@
           {% endblocktrans %}
         </div>
         <div class="progress">
-          <div class="progress-bar progress-bar-striped active"
+          <div class="progress-bar progress-bar-striped active
+                      w-{{ transaction.percentage }}"
                role="progressbar" aria-valuemin="0" aria-valuemax="100"
-               aria-valuenow="{{ transaction.percentage }}"
-               style="width: {{ transaction.percentage }}%">
+               aria-valuenow="{{ transaction.percentage }}">
             <span class="sr-only">
               {% blocktrans trimmed with percentage=transaction.percentage %}
                 {{ percentage }}% complete

static/themes/default/css/main.css

@@ -348,6 +348,34 @@ footer {
     margin-left: 0;
 }
 
+/* Hack to avoid inline styling on bootstrap progress bars */
+.w-0 {width: 0%;} .w-1 {width: 1%;} .w-2 {width: 2%;} .w-3 {width: 3%;}
+.w-4 {width: 4%;} .w-5 {width: 5%;} .w-6 {width: 6%;} .w-7 {width: 7%;}
+.w-8 {width: 8%;} .w-9 {width: 9%;} .w-10 {width: 10%;} .w-11 {width: 11%;}
+.w-12 {width: 12%;} .w-13 {width: 13%;} .w-14 {width: 14%;} .w-15 {width: 15%;}
+.w-16 {width: 16%;} .w-17 {width: 17%;} .w-18 {width: 18%;} .w-19 {width: 19%;}
+.w-20 {width: 20%;} .w-21 {width: 21%;} .w-22 {width: 22%;} .w-23 {width: 23%;}
+.w-24 {width: 24%;} .w-25 {width: 25%;} .w-26 {width: 26%;} .w-27 {width: 27%;}
+.w-28 {width: 28%;} .w-29 {width: 29%;} .w-30 {width: 30%;} .w-31 {width: 31%;}
+.w-32 {width: 32%;} .w-33 {width: 33%;} .w-34 {width: 34%;} .w-35 {width: 35%;}
+.w-36 {width: 36%;} .w-37 {width: 37%;} .w-38 {width: 38%;} .w-39 {width: 39%;}
+.w-40 {width: 40%;} .w-41 {width: 41%;} .w-42 {width: 42%;} .w-43 {width: 43%;}
+.w-44 {width: 44%;} .w-45 {width: 45%;} .w-46 {width: 46%;} .w-47 {width: 47%;}
+.w-48 {width: 48%;} .w-49 {width: 49%;} .w-50 {width: 50%;} .w-51 {width: 51%;}
+.w-52 {width: 52%;} .w-53 {width: 53%;} .w-54 {width: 54%;} .w-55 {width: 55%;}
+.w-56 {width: 56%;} .w-57 {width: 57%;} .w-58 {width: 58%;} .w-59 {width: 59%;}
+.w-60 {width: 60%;} .w-61 {width: 61%;} .w-62 {width: 62%;} .w-63 {width: 63%;}
+.w-64 {width: 64%;} .w-65 {width: 65%;} .w-66 {width: 66%;} .w-67 {width: 67%;}
+.w-68 {width: 68%;} .w-69 {width: 69%;} .w-70 {width: 70%;} .w-71 {width: 71%;}
+.w-72 {width: 72%;} .w-73 {width: 73%;} .w-74 {width: 74%;} .w-75 {width: 75%;}
+.w-76 {width: 76%;} .w-77 {width: 77%;} .w-78 {width: 78%;} .w-79 {width: 79%;}
+.w-80 {width: 80%;} .w-81 {width: 81%;} .w-82 {width: 82%;} .w-83 {width: 83%;}
+.w-84 {width: 84%;} .w-85 {width: 85%;} .w-86 {width: 86%;} .w-87 {width: 87%;}
+.w-88 {width: 88%;} .w-89 {width: 89%;} .w-90 {width: 90%;} .w-91 {width: 91%;}
+.w-92 {width: 92%;} .w-93 {width: 93%;} .w-94 {width: 94%;} .w-95 {width: 95%;}
+.w-96 {width: 96%;} .w-97 {width: 97%;} .w-98 {width: 98%;} .w-99 {width: 99%;}
+.w-100 {width: 100%;}
+
 /*
  * Clients information
  */