Merge pull request #33260 from nextcloud/fix/carl/quota

Fix quota nav item

apps/files/css/files.css

@@ -984,30 +984,26 @@ table.dragshadow td.size {
   margin-right: 4px;
 }
 
-#quota {
+.quota-navigation-item {
   margin: 0 !important;
   border: none;
   border-radius: 0;
   background-color: transparent;
   z-index: 1;
+  height: 44px;
+  display: flex !important;
+  flex-direction: column;
 }
-#quota > a[href="#"], #quota > a[href="#"] * {
+.quota-navigation-item__text {
+  height: 30px;
+}
+.quota-navigation-item[href="#"], .quota-navigation-item[href="#"] * {
   cursor: default !important;
 }
-#quota .quota-container {
+.quota-navigation-item__container {
   height: 5px;
   border-radius: var(--border-radius);
 }
-#quota .quota-container div {
-  height: 100%;
-  background-color: var(--color-primary);
-}
-
-#quotatext {
-  padding: 0;
-  height: 30px;
-  line-height: 30px;
-}
 
 /* GRID */
 #filestable.view-grid:not(.hidden) {

apps/files/css/files.scss

@@ -886,37 +886,33 @@ table.dragshadow td.size {
 	}
 }
 
-#quota {
+.quota-navigation-item {
 	margin: 0 !important;
 	border: none;
 	border-radius: 0;
 	background-color: transparent;
 	z-index:1;
+	height: 44px;
+	display: flex !important;
+	flex-direction: column;
+
+	&__text {
+		height: 30px;
+	}
 
-	> a[href='#'] {
+	&[href='#'] {
 		// if no link is set, no mouse feedback
 		&, * {
 			cursor: default !important;
 		}
 	}
 
-	.quota-container {
+	&__container {
 		height: 5px;
 		border-radius: var(--border-radius);
-
-		div {
-			height: 100%;
-			background-color: var(--color-primary);
-		}
 	}
 }
 
-#quotatext {
-	padding: 0;
-	height: 30px;
-	line-height: 30px;
-}
-
 /* GRID */
 #filestable.view-grid:not(.hidden) {
 	$grid-size: 160px;

apps/files/css/merged.css

@@ -984,30 +984,26 @@ table.dragshadow td.size {
   margin-right: 4px;
 }
 
-#quota {
+.quota-navigation-item {
   margin: 0 !important;
   border: none;
   border-radius: 0;
   background-color: transparent;
   z-index: 1;
+  height: 44px;
+  display: flex !important;
+  flex-direction: column;
+}
+.quota-navigation-item__text {
+  height: 30px;
 }
-#quota > a[href="#"], #quota > a[href="#"] * {
+.quota-navigation-item[href="#"], .quota-navigation-item[href="#"] * {
   cursor: default !important;
 }
-#quota .quota-container {
+.quota-navigation-item__container {
   height: 5px;
   border-radius: var(--border-radius);
 }
-#quota .quota-container div {
-  height: 100%;
-  background-color: var(--color-primary);
-}
-
-#quotatext {
-  padding: 0;
-  height: 30px;
-  line-height: 30px;
-}
 
 /* GRID */
 #filestable.view-grid:not(.hidden) {

apps/files/templates/appnavigation.php

@@ -11,16 +11,16 @@
 
 		<?php if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED): ?>
 			<li id="quota" class="pinned <?php p($pinned === 0 ? 'first-pinned ' : '') ?>">
-				<a href="#" class="icon-quota svg">
-					<p id="quotatext"><?php p($l->t('%s used', [$_['usage']])); ?></p>
+				<a href="#" class="icon-quota svg quota-navigation-item">
+					<p id="quotatext" class="quota-navigation-item__text"><?php p($l->t('%s used', [$_['usage']])); ?></p>
 				</a>
 			</li>
 		<?php else: ?>
 			<li id="quota" class="has-tooltip pinned <?php p($pinned === 0 ? 'first-pinned ' : '') ?>"
 				title="<?php p($l->t('%s%% of %s used', [$_['usage_relative'], $_['total_space']])); ?>">
-				<a href="#" class="icon-quota svg">
-					<p id="quotatext"><?php p($l->t('%1$s of %2$s used', [$_['usage'], $_['total_space']])); ?></p>
-					<div class="quota-container">
+				<a href="#" class="icon-quota svg quota-navigation-item">
+					<p id="quotatext" class="quota-navigation-item__text"><?php p($l->t('%1$s of %2$s used', [$_['usage'], $_['total_space']])); ?></p>
+					<div class="quota-navigation-item__container">
 						<progress value="<?php p($_['usage_relative']); ?>" max="100" class="<?= ($_['usage_relative'] > 80) ? 'warn' : '' ?>"></progress>
 					</div>
 				</a>