Merge branch 'progress-bar-center-5954' into 'develop'

Fixed typo, fixed no progress bar when unlimited, center values fixes #5954

Closes #5954

See merge request ispconfig/ispconfig3!1347

Author: Marius Burkard

interface/web/dashboard/dashlets/templates/mailquota.htm

@@ -18,7 +18,7 @@
 			  <td>{tmpl_var name='quota'}</td>
 			  {tmpl_if name="quota" op="!=" value="unlimited"}<td>
 			  <div class='progress'>
-				  <div class='progress-bar-striped progress-bar progress-bar-{tmpl_if name="used_percentage" op="<" value="50"}success{tmpl_elseif name="used_percentage" op="<" value="75"}warning{tmpl_else}danger{/tmpl_if}' role='progressbar' aria-valuemin='0' aria-valuemax='100' aria-valuenow='{tmpl_var name="used_percentage"}' style='width:{tmpl_var name="used_percentage"}%'>{tmpl_var name="used_percentage"}%
+				  <div class='progress-bar-striped progress-bar progress-bar-{tmpl_if name="used_percentage" op="<" value="50"}success{tmpl_elseif name="used_percentage" op="<" value="75"}warning{tmpl_else}danger{/tmpl_if}' role='progressbar' aria-valuemin='0' aria-valuemax='100' aria-valuenow='{tmpl_var name="used_percentage"}' style='width:{tmpl_var name="used_percentage"}%'><span>{tmpl_var name="used_percentage"}%</span>
 				  <span class='sr-only'>{tmpl_var name='used'} {tmpl_var name='of_txt'} {tmpl_var name='quota'}</span>
 				  </div>
 			  </div>
@@ -27,4 +27,4 @@
 	  </tmpl_loop>
 	  </tbody>
 	</table>
-  </div>
+  </div>

interface/web/dashboard/dashlets/templates/quota.htm

@@ -21,7 +21,7 @@
 							<div class='progress-bar-striped progress-bar progress-bar-{tmpl_if name="used_percentage" op="<" value="50"}success{tmpl_elseif name="used_percentage" op="<" value="75"}warning{tmpl_else}danger{/tmpl_if}'
 								role='progressbar' aria-valuemin='0' aria-valuemax='100'
 								aria-valuenow='{tmpl_var name="used_percentage"}'
-								style='width:{tmpl_var name="used_percentage"}%'>{tmpl_var name="used_percentage"}%
+								style='width:{tmpl_var name="used_percentage"}%'><span>{tmpl_var name="used_percentage"}%</span>
 								<span class='sr-only'>{tmpl_var name='used'} {tmpl_var name='of_txt'} {tmpl_var
 									name='soft'}</span>
 							</div>

interface/web/mail/templates/user_quota_stats_list.htm

@@ -58,11 +58,11 @@ <h1>
                     <td><a href="#" data-load-content="mail/mail_user_edit.php?id={tmpl_var name='id'}">{tmpl_var
                             name="quota"}</a></td>
                     <td colspan="2">
-                        {tmpl_if name="progressbar" op="!=" value="-1"}<div class="progress" style="height: 20px">
+                        {tmpl_if name="quota" op="!=" value="0"}<div class="progress" style="height: 20px">
                             <div class='progress-bar-striped progress-bar-{tmpl_if name="percentage_sort" op="<" value="50"}success{tmpl_elseif name="percentage_sort" op="<" value="75"}warning{tmpl_else}danger{/tmpl_if}'
-                                role="progressbar" style="width: {tmpl_var name=" progressbar"}%;"
+                                role="progressbar" style="width: {tmpl_var name="progressbar"}%;"
                                 aria-valuenow="{tmpl_var name=" percentage"}" aria-valuemin="0" aria-valuemax="100">
-                                {tmpl_var name="percentage"}</div>
+                                <span>{tmpl_var name="percentage"}</span</div>
                         </div>{/tmpl_if}
                     </td>
 

interface/web/sites/templates/database_quota_stats_list.htm

@@ -37,7 +37,7 @@ <h1><tmpl_var name="list_head_txt"></h1>
 							<td><a href="#" data-load-content="sites/database_edit.php?id={tmpl_var name='id'}">{tmpl_var name="used"}</a></td>
 							<td><a href="#" data-load-content="sites/database_edit.php?id={tmpl_var name='id'}">{tmpl_var name="quota"}</a></td>
 							<td colspan="2">{tmpl_if name="progressbar" op="!=" value="-1"}<div class="progress" style="height: 20px">
-								<div class='progress-bar-striped progress-bar-{tmpl_if name="percentage" op="<" value="50"}success{tmpl_elseif name="percentage" op="<" value="75"}warning{tmpl_else}danger{/tmpl_if}' role="progressbar" style="width: {tmpl_var name="progressbar"}%;" aria-valuenow="{tmpl_var name="percentage"}" aria-valuemin="0" aria-valuemax="100">{tmpl_var name="percentage"}</div>
+								<div class='progress-bar-striped progress-bar-{tmpl_if name="percentage" op="<" value="50"}success{tmpl_elseif name="percentage" op="<" value="75"}warning{tmpl_else}danger{/tmpl_if}' role="progressbar" style="width: {tmpl_var name="progressbar"}%;" aria-valuenow="{tmpl_var name="percentage"}" aria-valuemin="0" aria-valuemax="100"><span>{tmpl_var name="percentage"}</span></div>
 						</div>{/tmpl_if}
 </td>
 

interface/web/sites/templates/user_quota_stats_list.htm

@@ -40,7 +40,7 @@ <h1><tmpl_var name="list_head_txt"></h1>
                             <td><a href="#" data-load-content="sites/web_vhost_domain_edit.php?id={tmpl_var name='id'}">{tmpl_var name="hard"}</a></td>
                             <td><a href="#" data-load-content="sites/web_vhost_domain_edit.php?id={tmpl_var name='id'}">{tmpl_var name="files"}</a></td>
                             <td colspan="2">{tmpl_if name="progressbar" op="!=" value="-1"}<div class="progress" style="height: 20px">
-                                <div class='progress-bar-striped progress-bar-{tmpl_if name="percentage" op="<" value="50"}success{tmpl_elseif name="percentage" op="<" value="75"}warning{tmpl_else}danger{/tmpl_if}' role="progressbar" style="width: {tmpl_var name="progressbar"}%;" aria-valuenow="{tmpl_var name="percentage"}" aria-valuemin="0" aria-valuemax="100">{tmpl_var name="percentage"}%</div>
+                                <div class='progress-bar-striped progress-bar-{tmpl_if name="percentage" op="<" value="50"}success{tmpl_elseif name="percentage" op="<" value="75"}warning{tmpl_else}danger{/tmpl_if}' role="progressbar" style="width: {tmpl_var name="progressbar"}%;" aria-valuenow="{tmpl_var name="percentage"}" aria-valuemin="0" aria-valuemax="100"><span>{tmpl_var name="percentage"}%</span></div>
                         </div>{/tmpl_if}</td>
 
                         </tr>

interface/web/themes/default/assets/stylesheets/ispconfig.css

@@ -284,11 +284,22 @@ body {
   height: 20px;
   background-color: #ababab;
   font-weight: bold;
+  position: relative;
 }
 
 .progress-bar-danger, .progress-bar-warning, .progress-bar-success {
     text-align: center;
     color: white;
+    display: list-item;
+}
+
+.progress span {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  z-index: 2;
+  color: white;
 }
 
 p.fieldset-legend {