Quota bar fix on user list

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

core/js/singleselect.js

@@ -42,7 +42,6 @@
 						input.tipsy({gravity: gravity, trigger: 'manual'});
 						input.tipsy('show');
 					}
-					select.css('background-color', 'white');
 					input.focus();
 				}
 			});

settings/css/settings.scss

@@ -680,18 +680,30 @@ input#recoveryPassword {
 #userlist td.quota {
 	position: relative;
 	width: 10em;
+	progress.quota-user-progress {
+		position: absolute;
+		width: calc(10em + 0px);
+		margin-top: -7px;
+		z-index: 0;
+		margin-left: 1px;
+		height: 3px;
+	}
 }
 
 select {
 	&.quota-user {
-		position: absolute;
-		left: 0;
-		top: 0;
 		width: 10em;
 		height: 34px;
+		z-index: 150;
+		position: relative;
 	}
-	&.quota.active {
-		background: #fff;
+	+ progress.quota-user-progress {
+		position: absolute;
+		width: calc(10em + 0px);
+		margin-top: -7px;
+		z-index: 0;
+		margin-left: 1px;
+		height: 3px;
 	}
 }
 
@@ -699,20 +711,6 @@ input.userFilter {
 	width: 200px;
 }
 
-.quota_progress_container {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 10em;
-	margin: 3px 3px 3px 0;
-	border-radius: 3px;
-}
-
-.quota_progress {
-	background-color: #eee;
-	height: 34px;
-}
-
 #newusergroups + input[type='submit'] {
 	position: relative;
 	top: -1px;

settings/js/users/users.js

@@ -571,7 +571,12 @@ var UserList = {
 			//asymptotic curve approaching 50% at 10GB to visualize used stace with infinite quota
 			usedQuota = 95 * (1 - (1 / (usedInGB + 1)));
 		}
-		$tr.find('.quota_progress').width(usedQuota + '%');
+		$tr.find('.quota-user-progress').val(usedQuota);
+		if (usedQuota > 80) {
+			$tr.find('.quota-user-progress').addClass('warn');
+		} else {
+			$tr.find('.quota-user-progress').removeClass('warn');
+		}
 	},
 
 	/**

settings/templates/users/part.userlist.php

@@ -43,7 +43,6 @@
 			</td>
 		<?php endif;?>
 			<td class="quota">
-				<div class="quota_progress_container"><div class="quota_progress"></div></div>
 				<select class="quota-user" data-inputtitle="<?php p($l->t('Please enter storage quota (ex: "512 MB" or "12 GB")')) ?>">
 					<option	value='default'>
 						<?php p($l->t('Default'));?>
@@ -60,6 +59,7 @@
 						<?php p($l->t('Other'));?> ...
 					</option>
 				</select>
+				<progress class="quota-user-progress" value="" max="100"></progress>
 			</td>
 			<td class="storageLocation"></td>
 			<td class="userBackend"></td>