homepage chart

tabler · Nov 3, 2020 · 6a83781 · 6a83781
1 parent 75d8e01
commit 6a83781
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 6 deletions.
diff --git a/src/pages/_includes/layout/homepage.html b/src/pages/_includes/layout/homepage.html
@@ -13,16 +13,54 @@
 	  {% include cards/charts/active-users.html %}
 	</div>
 
-	<div class="col-lg-7">
-		<div class="card">
-			<div class="card-body">
-				<h3 class="card-title">Traffic summary</h3>
-				{% include ui/chart.html chart-id="mentions" size="lg" legend=true %}
+	<div class="col-lg-6">
+		<div class="row row-cards">
+			<div class="col-12">
+				<div class="card">
+					<div class="card-body">
+						<h3 class="card-title">Traffic summary</h3>
+						{% include ui/chart.html chart-id="mentions" size="lg" legend=true %}
+					</div>
+				</div>
+			</div>
+			<div class="col-12">
+				<div class="card">
+					<div class="card-body">
+						<p class="mb">Using Storage <strong class="text-dark">6854.45 MB </strong>of 8 GB</p>
+						<div class="progress progress-separated mb">
+							<div class="progress-bar bg-primary" role="progressbar" style="width: 44%"></div>
+							<div class="progress-bar bg-info" role="progressbar" style="width: 19%"></div>
+							<div class="progress-bar bg-success" role="progressbar" style="width: 9%"></div>
+						</div>
+						<div class="row">
+							<div class="col-auto d-flex align-items-center pr-2">
+								<span class="legend mr-2 bg-primary"></span>
+								<span>Regular</span>
+								<span class="d-none d-md-inline d-lg-none d-xxl-inline ml-2 text-muted">915MB</span>
+							</div>
+							<div class="col-auto d-flex align-items-center px-2">
+								<span class="legend mr-2 bg-info"></span>
+								<span>System</span>
+								<span class="d-none d-md-inline d-lg-none d-xxl-inline ml-2 text-muted">415MB</span>
+							</div>
+							<div class="col-auto d-flex align-items-center px-2">
+								<span class="legend mr-2 bg-success"></span>
+								<span>Shared</span>
+								<span class="d-none d-md-inline d-lg-none d-xxl-inline ml-2 text-muted">201MB</span>
+							</div>
+							<div class="col-auto d-flex align-items-center pl-2">
+								<span class="legend mr-2"></span>
+								<span>Free</span>
+								<span class="d-none d-md-inline d-lg-none d-xxl-inline ml-2 text-muted">612MB</span>
+							</div>
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
 
-	<div class="col-lg-5">
+	<div class="col-lg-6">
 		{% include cards/map.html title="Top countries" %}
 	</div>
 

diff --git a/src/scss/ui/_progress.scss b/src/scss/ui/_progress.scss
@@ -59,3 +59,9 @@
     animation: progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite;
   }
 }
+
+.progress-separated {
+  .progress-bar {
+    border-right: 2px solid $white;
+  }
+}