Fix stats mobile view

Author: GusevPM

components/modules/stats/HighlightCard.vue

@@ -1,16 +1,6 @@
 <script setup>
-/** Vendor */
-// import { DateTime } from "luxon"
-
-/** UI */
-// import Button from "@/components/ui/Button.vue"
-// import Tooltip from "@/components/ui/Tooltip.vue"
-
 /** Services */
-import { abbreviate, capitilize, comma, formatBytes, shortHex, tia } from "@/services/utils"
-
-/** API */
-import { fetchNetworks, fetchCommitments, fetchCommitmentsByNetwork } from "@/services/api/blobstream";
+import { abbreviate, comma, formatBytes, tia } from "@/services/utils"
 
 /** Stats Components */
 import DiffChip from "@/components/modules/stats/DiffChip.vue"
@@ -72,28 +62,20 @@ const value = computed(() => {
 
 .card {
 	min-height: 80px;
-	width: 240px;
+	min-width: 240px;
 
 	background: var(--card-background);
 	border-radius: 12px;
 
 	padding: 16px 16px 16px 0px;
 
 	box-shadow: inset 0 0 0 1px var(--op-3);
-
-	/* &:hover {
-		opacity: 0.8;
-	}
-
-	&:active {
-		scale: 0.95;
-	} */
 }
+
 .left_border {
     height: 40px;
     width: 4px;
 	border-radius: 8px;
-    /* background: var(--txt-tertiary); */
 	background: var(--op-10);
 }
 
@@ -128,17 +110,15 @@ const value = computed(() => {
 	padding: 16px 0;
 }
 
-/* @media (max-width: 500px) {
-	.wrapper {
-		padding: 32px 12px;
+@media (max-width: 530px) {
+	.card_wrapper {
+		margin: 8px 0px 8px 0px;
+		min-width: 100%;
 	}
 
-	.header {
-		gap: 16px;
-
-		height: initial;
-
-		padding: 16px;
+	.card {
+		height: 100px;
+		min-width: 100%;
 	}
-} */
+}
 </style>

components/modules/stats/SquareSizeCard.vue

@@ -13,10 +13,6 @@ import { abbreviate, comma, formatBytes } from "@/services/utils"
 import { fetchSquareSize } from "@/services/api/stats"
 
 const props = defineProps({
-	// series: {
-	// 	type: Object,
-	// 	required: true,
-	// },
 	period: {
 		type: Object,
 		required: true,
@@ -52,7 +48,7 @@ const getSquareSizes = async () => {
 		item.color = color(index)
 
 		if (index !== squareSize.value.length - 1) {
-			let share = Math.max(Math.round((item.value / total.value * 100)), 1)
+			let share = Math.min(Math.round((item.value / total.value * 100)), 1)
 			totalShare += share
 			item.share = share
 		} else {
@@ -97,14 +93,6 @@ onMounted(async () => {
 
 	await getSquareSizes()
 })
-
-// watch(
-// 	() => props.period,
-// 	async () => {
-// 		await drawChart()
-// 	},
-// )
-
 </script>
 
 <template>
@@ -173,7 +161,7 @@ onMounted(async () => {
 					<Text size="12" weight="600" color="primary"> {{ `${s.size} x ${s.size}` }} </Text>
 				</Flex>
 
-				<Text size="12" weight="600" color="tertiary" style="text-align: right; flex: 1"> {{ `${s.share}%` }} </Text>
+				<Text size="12" weight="600" color="tertiary" style="text-align: right; flex: 1"> {{ `${s.share === 0 ? '<1' : s.share}%` }} </Text>
 				<Text size="12" weight="600" color="primary" style="text-align: right; flex: 1"> {{ comma(s.value) }} </Text>
 			</Flex>
 		</Flex>

components/modules/stats/tabs/BlocksTab.vue

@@ -36,16 +36,6 @@ const selectedPeriod = ref(periods.value[0])
                 />
             </Flex>
 		</Flex>
-
-		<!-- <Flex align="center" direction="column" gap="12" wide>
-			<Flex align="center" justify="between" wide :class="$style.section">
-				<Text size="16" weight="600" color="primary" justify="start">Square Size Distribution</Text>
-			</Flex>
-
-            <SquareSizeChart />
-		</Flex> -->
-
-        <!-- block time (avg) | bytes in block (cumulative) | square size current day like insights -->
     </Flex>
 </template>
 
@@ -97,4 +87,22 @@ const selectedPeriod = ref(periods.value[0])
 		height: 380px;
 	}
 }
+
+@media (max-width: 420px) {
+	.wrapper {
+		padding: 32px 0px;
+	}
+
+	.chart_card {
+		flex: 1;
+		min-width: 340px;
+		height: 380px;
+	}
+
+	.square_size_chart_card {
+		flex: 1;
+		min-width: 340px;
+		height: 380px;
+	}
+}
 </style>

components/modules/stats/tabs/GeneralTab.vue

@@ -1,9 +1,7 @@
 <script setup>
 /** UI */
-import AmountInCurrency from "@/components/AmountInCurrency.vue"
 import Button from "@/components/ui/Button.vue"
 import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
-import Tooltip from "@/components/ui/Tooltip.vue"
 
 
 /** Stats Components */
@@ -15,9 +13,6 @@ import InsightCard from "@/components/modules/stats/InsightCard.vue"
 /** Constants */
 import { getInsightsByGroup, getSeriesByGroupAndType, STATS_PERIODS } from "@/services/constants/stats.js"
 
-/** Services */
-import { comma, tia } from "@/services/utils"
-
 /** API */
 import { fetch24hDiffs } from "@/services/api/stats.js"
 
@@ -80,7 +75,10 @@ await get24hDiffs()
 	<Flex direction="column" gap="24" wide :class="$style.wrapper">
 		<Flex align="center" direction="column" gap="10">
 			<Flex justify="between" wide :class="$style.highlights_wrapper">
-				<HighlightCard v-for="h in highlights" :highlight="h" />
+				<HighlightCard
+					v-for="h in highlights"
+					:highlight="h"
+				/>
 			</Flex>
 
 			<Flex align="center" justify="start" wide>
@@ -137,18 +135,16 @@ await get24hDiffs()
 <style module>
 .wrapper {
 	max-width: calc(var(--base-width) + 48px);
-
-	/* padding: 40px 24px 60px 24px; */
-}
-
-.highlights_wrapper{
-	flex-wrap: wrap;
 }
 
 .section {
 	margin-top: 20px;
 }
 
+.highlights_wrapper {
+	flex-wrap: wrap;
+}
+
 .charts_wrapper {
 	flex-wrap: wrap;
 }
@@ -178,4 +174,16 @@ await get24hDiffs()
 		padding: 32px 12px;
 	}
 }
+
+@media (max-width: 420px) {
+	.wrapper {
+		padding: 32px 0px;
+	}
+
+	.chart_card {
+		flex: 1;
+		min-width: 340px;
+		height: 280px;
+	}
+}
 </style>