Add usage to toolbar

Author: Kristan Kenney

web/css/styles.min.css

@@ -3045,6 +3045,24 @@ form#vstobjects.suspended {
   text-shadow: 0px 1px 2px rgba(0,0,0,0.4);
 }
 
+.pill.usage{
+  margin-top: 8px;
+  font-size: 0.75rem;
+  padding: 3px;
+  padding-left: 8px;
+  padding-right: 8px;
+  margin-right: 10px;
+  box-shadow: 0px 1px 1px rgba(0,0,0,0.25),
+              inset 0px 0px 1px rgba(0,0,0,0.15);
+  background-color: rgba(255,255,255,0.75);
+  font-weight: 500;
+  border: 1px solid rgba(255,255,255,0.9);
+  text-shadow: 0px 1px 1px rgba(255,255,255,0.5);
+  color: #30659d;
+}
+
+.pill.usage b { color: #30659d; }
+
 .badge {
   display: inline-block;
   min-width: 24px;

web/templates/admin/panel.html

@@ -19,6 +19,7 @@
 		</div>
 		<!-- /.l-menu -->
 		<div class="l-profile noselect">
+			<div class="l-menu__item"><span class="pill usage"> <i class="fas fa-hdd"></i> <b><?=humanize_usage_size($panel[$user]['U_DISK'])?></b> <?=humanize_usage_measure($panel[$user]['U_DISK'])?> / <i class="fas fa-exchange-alt"></i> <b><?=humanize_usage_size($panel[$user]['U_BANDWIDTH'])?></b> <?=humanize_usage_measure($panel[$user]['U_BANDWIDTH'])?></span></div>
 			<div class="l-menu__item"><a alt="<?=__('Notifications')?>" class="l-profile__notifications <? if($panel[$user]['NOTIFICATIONS'] == 'yes') echo " updates"; ?>"><i class="fas fa-bell <?if($panel[$user]['NOTIFICATIONS'] == 'yes') echo " status-icon-orange"; ?>"></i></a></div>
 			<div class="l-menu__item"><a href="/edit/user/?user=<?php echo $user; ?>" alt="<?=$user?>"><i class="fas fa-user-circle"></i></a></div>
 			<div class="l-menu__item"><a href="/logout/" alt="<?=__('Log out')?>"> <?=__('Log out')?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-out-alt"></i></a></div>

web/templates/user/panel.html

@@ -17,6 +17,7 @@
 		</div>
 		<!-- /.l-menu -->
 		<div class="l-profile noselect">
+			<div class="l-menu__item"><span class="pill usage"> <i class="fas fa-hdd"></i> <b><?=humanize_usage_size($panel[$user]['U_DISK'])?></b> <?=humanize_usage_measure($panel[$user]['U_DISK'])?> / <i class="fas fa-exchange-alt"></i> <b><?=humanize_usage_size($panel[$user]['U_BANDWIDTH'])?></b> <?=humanize_usage_measure($panel[$user]['U_BANDWIDTH'])?></span></div>
 			<div class="l-menu__item"><a alt="<?=__('Notifications')?>" class="l-profile__notifications <? if($panel[$user]['NOTIFICATIONS'] == 'yes') echo " updates"; ?>"><i class="fas fa-bell <?if($panel[$user]['NOTIFICATIONS'] == 'yes') echo " status-icon-orange"; ?>"></i></a></div>
 			<div class="l-menu__item"><a href="/edit/user/?user=<?php echo $user; ?>" alt="<?=$user?>"><i class="fas fa-user-circle"></i></a></div>
 			<div class="l-menu__item"><a href="/logout/" alt="<?=__('Log out')?>"> <?=__('Log out')?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-out-alt"></i></a></div>