Move quota bar to info section and make it a bit simpler

Signed-off-by: Julius Härtl <jus@bitgrid.net>

2 files changed, 48 insertions, 32 deletions

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 6108a777327..3e7e5576640 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -160,6 +160,16 @@ input {
 	.section {
 		padding: 10px 10px;
 	}
+
+	.personal-info {
+		margin-right: 10%;
+		margin-bottom: 20px;
+	}
+	.personal-info[class^='icon-'], .personal-info[class*=' icon-'] {
+		background-position: 0px 2px;
+		padding-left: 30px;
+		opacity: 0.7;
+	}
 }
 
 
@@ -270,6 +280,26 @@ input {
 	}
 }
 
+
+#body-settings #quota {
+	cursor: default;
+	position: relative;
+	progress {
+		height: 6px;
+		&::-moz-progress-bar {
+			border-radius: 3px 0 0 3px;
+		}
+		&::-webkit-progress-value {
+			border-radius: 3px 0 0 3px;
+		}
+	}
+	div {
+		font-weight: normal;
+		white-space: nowrap;
+	}
+}
+
+
 /* verify accounts */
 /* only show pointer cursor when popup will be there */
 .verification-dialog {
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index 24f89076275..0f9c38ba8de 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/settings/templates/settings/personal/personal.info.php
@@ -37,34 +37,6 @@ vendor_style('jcrop/css/jquery.Jcrop');
 
 ?>
 
-<div id="quota" class="section">
-	<progress value="<?php p($_['usage_relative']); ?>" max="100"
-	<?php if($_['usage_relative'] > 80): ?> class="warn" <?php endif; ?>></progress>
-
-	<div style="width:<?php p($_['usage_relative']);?>%" class="quotatext-fg">
-		<p class="quotatext">
-			<?php if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED): ?>
-				<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong>',
-					[$_['usage'], $_['total_space']]));?>
-			<?php else: ?>
-				<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong> (<strong>%s %%</strong>)',
-					[$_['usage'], $_['total_space'],  $_['usage_relative']]));?>
-			<?php endif ?>
-		</p>
-	</div>
-	<div class="quotatext-bg">
-		<p class="quotatext">
-			<?php if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED): ?>
-				<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong>',
-					[$_['usage'], $_['total_space']]));?>
-			<?php else: ?>
-				<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong> (<strong>%s %%</strong>)',
-					[$_['usage'], $_['total_space'],  $_['usage_relative']]));?>
-			<?php endif ?>
-		</p>
-	</div>
-</div>
-
 <div id="personal-settings">
 	<div id="personal-settings-avatar-container" class="personal-settings-container">
 		<div>
@@ -100,14 +72,28 @@ vendor_style('jcrop/css/jquery.Jcrop');
 				<?php } ?>
 			</form>
 		</div>
-		<div class="personal-settings-setting-box personal-settings-group-box">
-			<div id="groups" class="section">
-				<h2><?php p($l->t('Groups')); ?></h2>
-				<p><?php p($l->t('You are member of the following groups:')); ?></p>
+		<div class="personal-settings-setting-box personal-settings-group-box section">
+			<h2>Details</h2>
+			<div id="groups" class="personal-info icon-user">
+				<p class="icon-groups"><?php p($l->t('You are member of the following groups:')); ?></p>
 				<p id="groups-groups">
 					<strong><?php p(implode(', ', $_['groups'])); ?></strong>
 				</p>
 			</div>
+			<div id="quota" class="personal-info icon-quota">
+				<div class="quotatext-bg">
+					<p class="quotatext">
+						<?php if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED): ?>
+							<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong>',
+								[$_['usage'], $_['total_space']]));?>
+						<?php else: ?>
+							<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong> (<strong>%s %%</strong>)',
+								[$_['usage'], $_['total_space'],  $_['usage_relative']]));?>
+						<?php endif ?>
+					</p>
+				</div>
+				<progress value="<?php p($_['usage_relative']); ?>" max="100"<?php if($_['usage_relative'] > 80): ?> class="warn" <?php endif; ?>></progress>
+			</div>
 		</div>
 	</div>