fixes for small screen viewability

ddxv · Oct 31, 2024 · d1630aa · d1630aa
1 parent b6d8450
commit d1630aa
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 73 deletions.
diff --git a/frontend/src/lib/CompaniesLayout.svelte b/frontend/src/lib/CompaniesLayout.svelte
@@ -11,7 +11,7 @@
 	let { card1, card2, card3, card4 } = $props();
 </script>
 
-<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+<div class="flex flex-col md:flex-row gap-4 md:gap-6">
 	{@render card1?.()}
 	{@render card2?.()}
 	{#if card3}

diff --git a/frontend/src/lib/CompaniesOverviewTable.svelte b/frontend/src/lib/CompaniesOverviewTable.svelte
@@ -25,28 +25,35 @@
 
 <div class="table-container space-y-4">
 	<div class="overflow-x-auto pl-0">
-		<table class="table table-hover table-compact table-auto w-full">
+		<table class="md:table table-hover md:table-compact table-auto w-full">
 			<thead>
 				<tr>
-					<th class="table-cell-fit"></th>
-					<ThSort {handler} orderBy="company_name">Company</ThSort>
-					<ThSort {handler} orderBy="google_sdk">Android SDK</ThSort>
-					<ThSort {handler} orderBy="apple_sdk">iOS SDK</ThSort>
+					<th class="table-cell-fit w-0"></th>
+					<ThSort {handler} orderBy="company_name"><p class="text-xs md:text-lg">Company</p></ThSort
+					>
+					<ThSort {handler} orderBy="google_sdk"
+						><p class="text-xs md:text-lg">Android SDK</p></ThSort
+					>
+					<ThSort {handler} orderBy="apple_sdk"><p class="text-xs md:text-lg">iOS SDK</p></ThSort>
 					{#if !$page.params.type || $page.params.type == 'ad-networks'}
-						<ThSort {handler} orderBy="google_app_ads_direct">Android AdsTxt</ThSort>
-						<ThSort {handler} orderBy="apple_app_ads_direct">iOS AdsTxt</ThSort>
+						<ThSort {handler} orderBy="google_app_ads_direct"
+							><p class="text-xs md:text-lg">Android AdsTxt</p></ThSort
+						>
+						<ThSort {handler} orderBy="apple_app_ads_direct"
+							><p class="text-xs md:text-lg">iOS AdsTxt</p></ThSort
+						>
 					{/if}
 				</tr>
 			</thead>
 			<tbody>
 				{#each $rows as row, index}
 					<tr style="cursor: pointer;" class="px-0">
 						<td class="table-cell-fit">
-							{index + 1}
+							<p class="text-xs md:text-lg">{index + 1}</p>
 						</td>
-						<td class="table-cell-fit">
+						<td class="w-0">
 							<!-- TODO: This is supposed to be just inside TR for whole row -->
-							<a href="/companies/{row.company_domain}" class="table-row-link">
+							<a href="/companies/{row.company_domain}" class="table-row-link text-xs md:text-lg">
 								{#if row.company_name}
 									{row.company_name}
 									({row.company_domain})
@@ -56,20 +63,28 @@
 							</a>
 						</td>
 						<td class="table-cell-fit">
-							{(row.google_sdk * 100).toFixed(2)}%
+							<p class="text-xs md:text-lg">
+								{(row.google_sdk * 100).toFixed(2)}%
+							</p>
 						</td>
 
 						<td class="table-cell-fit">
-							{(row.apple_sdk * 100).toFixed(2)}%
+							<p class="text-xs md:text-lg">
+								{(row.apple_sdk * 100).toFixed(2)}%
+							</p>
 						</td>
 
 						{#if !$page.params.type || $page.params.type == 'ad-networks'}
 							<td class="table-cell-fit">
-								{(row.google_app_ads_direct * 100).toFixed(2)}%
+								<p class="text-xs md:text-lg">
+									{(row.google_app_ads_direct * 100).toFixed(2)}%
+								</p>
 							</td>
 
 							<td class="table-cell-fit">
-								{(row.apple_app_ads_direct * 100).toFixed(2)}%
+								<p class="text-xs md:text-lg">
+									{(row.apple_app_ads_direct * 100).toFixed(2)}%
+								</p>
 							</td>
 						{/if}
 					</tr>
@@ -91,5 +106,4 @@
 		text-decoration: none;
 		color: inherit;
 	}
-	
 </style>
diff --git a/frontend/src/lib/CompaniesTableGrid.svelte b/frontend/src/lib/CompaniesTableGrid.svelte
@@ -5,9 +5,9 @@
 
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-6">
 	<!-- SDK Section -->
-	<div class="bg-white p-6 rounded-lg shadow-md">
+	<div class="bg-white p-2 md:p-6 rounded-lg shadow-md">
 		<h2 class="text-xl font-bold text-gray-800 mb-4">SDK</h2>
-		<p class="text-lg text-gray-700 mb-2">
+		<p class="text-sm md:text-lg text-gray-700 mb-2">
 			SDK data is derived by downloading the app's Android APK or iOS IPA file and unzipped. We then
 			check the app's data for SDK signatures in paths, AndroidManifest.xml and the Info.plist. Many
 			apps are unable to be zipped. Downloading and opening the APK or IPA takes time and resources
@@ -17,7 +17,7 @@
 			<!-- Android SDK -->
 			<div class="card variant-glass-surface">
 				<div class="card-header">
-					<p class="text-lg text-gray-700">
+					<p class="text-sm md:text-lg text-gray-700">
 						<slot name="sdk-android-total-apps">Android Apps:</slot>
 					</p>
 				</div>
@@ -26,7 +26,7 @@
 			<!-- iOS SDK -->
 			<div class="card variant-glass-surface">
 				<div class="card-header">
-					<p class="text-lg text-gray-700">
+					<p class="text-sm md:text-lg text-gray-700">
 						<slot name="sdk-ios-total-apps">iOS Apps:</slot>
 					</p>
 				</div>
@@ -37,10 +37,10 @@
 
 	{#if !$page.params.type || $page.params.type == 'ad-networks'}
 		<!-- App Ads.txt Section -->
-		<div class="bg-white p-6 rounded-lg shadow-md">
+		<div class="bg-white p-2 md:p-6 rounded-lg shadow-md">
 			<h2 class="text-xl font-bold text-gray-800">App Ads.txt</h2>
-			<p class="text-small font-bold text-gray-800 mb-4">('DIRECT')</p>
-			<p class="text-lg text-gray-700 mb-2">
+			<p class="text-sm md:text-lg font-bold text-gray-800 mb-4">('DIRECT')</p>
+			<p class="text-sm md:text-lg text-gray-700 mb-2">
 				App-ads.txt files are an open standard by the IAB to help combat ad fraud. This data was
 				crawled from the URLs on the app's developer pages. Not all apps have app-ads.txt, many do
 				not.
@@ -49,7 +49,7 @@
 				<!-- Android App Ads.txt -->
 				<div class="card variant-glass-surface">
 					<div class="card-header">
-						<p class="text-lg text-gray-700">
+						<p class="text-sm md:text-lg text-gray-700">
 							<slot name="adstxt-android-total-apps">Android Apps:</slot>
 						</p>
 					</div>
@@ -58,7 +58,7 @@
 				<!-- iOS App Ads.txt -->
 				<div class="card variant-glass-surface">
 					<div class="card-header">
-						<p class="text-lg text-gray-700">
+						<p class="text-sm md:text-lg text-gray-700">
 							<slot name="adstxt-ios-total-apps">iOS Apps:</slot>
 						</p>
 					</div>

diff --git a/frontend/src/lib/CompanyOverviewTable.svelte b/frontend/src/lib/CompanyOverviewTable.svelte
@@ -39,7 +39,7 @@
 
 <div class="table-container space-y-4">
 	<div class="overflow-x-auto pl-0">
-		<table class="table table-hover table-compact table-auto w-full">
+		<table class="md:table table-hover md:table-compact table-auto w-full text-xs">
 			<thead>
 				<tr>
 					<th class="table-cell-fit"></th>
@@ -92,5 +92,4 @@
 		text-decoration: none;
 		color: inherit;
 	}
-	
 </style>
diff --git a/frontend/src/lib/CompanyTableGrid.svelte b/frontend/src/lib/CompanyTableGrid.svelte
@@ -1,9 +1,9 @@
 <!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-6">
 	<!-- SDK Section -->
-	<div class="bg-white p-6 rounded-lg shadow-md">
+	<div class="bg-white p-2 md:p-6 rounded-lg shadow-md">
 		<h2 class="text-xl font-bold text-gray-800 mb-4">SDK</h2>
-		<p class="text-lg text-gray-700 mb-2">
+		<p class="text-sm md:text-lg text-gray-700 mb-2">
 			SDK data is derived by downloading the app's Android APK or iOS IPA file and unzipped. We then
 			check the app's data for SDK signatures in paths, AndroidManifest.xml and the Info.plist. Many
 			apps are unable to be zipped. Downloading and opening the APK or IPA takes time and resources
@@ -36,10 +36,10 @@
 	</div>
 
 	<!-- App Ads.txt Section -->
-	<div class="bg-white p-6 rounded-lg shadow-md">
+	<div class="bg-white p-2 md:p-6 rounded-lg shadow-md">
 		<h2 class="text-xl font-bold text-gray-800">App Ads.txt</h2>
-		<p class="text-small font-bold text-gray-800 mb-4">('DIRECT')</p>
-		<p class="text-lg text-gray-700 mb-2">
+		<p class="text-sm md:text-lg font-bold text-gray-800 mb-4">('DIRECT')</p>
+		<p class="text-sm md:text-lg text-gray-700 mb-2">
 			App-ads.txt files are an open standard by the IAB to help combat ad fraud. This data was
 			crawled from the URLs on the app's developer pages. Not all apps have app-ads.txt, many do
 			not.
@@ -48,7 +48,7 @@
 			<!-- Android App Ads.txt -->
 			<div class="card variant-glass-surface">
 				<div class="card-header">
-					<p class="text-lg text-gray-700">
+					<p class="text-sm md:text-lg text-gray-700">
 						<slot name="adstxt-android-total-apps">Android Apps:</slot>
 					</p>
 				</div>
@@ -59,7 +59,7 @@
 			<!-- iOS App Ads.txt -->
 			<div class="card variant-glass-surface">
 				<div class="card-header">
-					<p class="text-lg text-gray-700">
+					<p class="text-sm md:text-lg text-gray-700">
 						<slot name="adstxt-ios-total-apps">iOS Apps:</slot>
 					</p>
 				</div>

diff --git a/frontend/src/lib/NavTabs.svelte b/frontend/src/lib/NavTabs.svelte
@@ -13,9 +13,6 @@
 	class="w-full p-0"
 	padding="px-1 py-2 md:px-4"
 >
-	<TabAnchor class="p-0 px-0" href="/" selected={$page.url.pathname == '/'}>
-		<h3 class={topBarFont}>HOME</h3>
-	</TabAnchor>
 	<TabAnchor
 		href="/collections/new_monthly"
 		selected={$page.url.pathname.startsWith('/collections')}

diff --git a/frontend/src/routes/(newcategorical)/companies/+layout.svelte b/frontend/src/routes/(newcategorical)/companies/+layout.svelte
@@ -44,6 +44,6 @@
 	{/if}
 {/await}
 
-<div class="card-content p-6 bg-white shadow-md rounded-lg mt-2">
+<div class="card-content p-1 md:p-6 bg-white shadow-md rounded-lg mt-2">
 	{@render children?.()}
 </div>
diff --git a/frontend/src/routes/(newcategorical)/companies/[name]/+page.svelte b/frontend/src/routes/(newcategorical)/companies/[name]/+page.svelte
@@ -63,7 +63,7 @@
 				{#if typeof myData == 'string'}
 					<p class="text-red-500 text-center">Failed to load company details.</p>
 				{:else if myData.categories.all}
-					<div class="bg-white p-6 rounded-lg shadow-md">
+					<div class="bg-white p-2 rounded-lg shadow-md">
 						<h2 class="text-xl font-bold text-gray-800 mb-4">Total Apps</h2>
 						<p class="text-lg text-gray-700">
 							<span class="font-semibold text-gray-900"

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -60,11 +60,11 @@
 					<a class="flex" href="/">
 						<!-- <img class="h-8 m w-8 md:h-12 md:w-12" src="/cute_eyes_250.png" alt="Goblin Icon" /> -->
 						<img
-							class="ml-2 h-8 m w-8 md:h-12 md:w-12"
+							class="ml-1 md:ml-2 h-8 m w-8 md:h-12 md:w-12"
 							src="/goblin_purple_hat_250.png"
 							alt="Goblin Icon"
 						/>
-						<strong class="text-xl ml-2 md:text-3xl uppercase">AppGoblin</strong>
+						<strong class="text-xl ml-1 md:ml-2 md:text-3xl uppercase">AppGoblin</strong>
 					</a>
 				</div>
 			{/snippet}
@@ -74,38 +74,42 @@
 			</div>
 
 			{#snippet trail()}
-				<div class="input-group grid-cols-2 sm:grid-cols-[50px_auto]">
-					<div class="input-group-shim p-1 md:p-3">
-						<IconSearch />
-					</div>
-					<input
-						type="search"
-						bind:value={searchTerm}
-						onkeydown={navigateToSearch}
-						placeholder="Search"
-						class="p-1 md:p-3"
-					/>
-				</div>
-				<a
-					class="btn btn-sm variant-ghost-surface"
-					href="https://github.com/ddxv/app-store-dash"
-					target="_blank"
-					rel="noreferrer"
-				>
-					<div class="inline-flex items-center">
-						{@html githubIcon} GitHub
+				<div>
+					<div class="input-group grid-cols-2 sm:grid-cols-[50px_auto]">
+						<div class="input-group-shim p-0 md:p-3">
+							<IconSearch />
+						</div>
+						<input
+							type="search"
+							bind:value={searchTerm}
+							onkeydown={navigateToSearch}
+							placeholder="Search"
+							class="p-0 md:p-3"
+						/>
 					</div>
-				</a>
-				<a
-					class="btn btn-sm variant-ghost-surface"
-					href="https://discord.gg/7jpWEhkXRW"
-					target="_blank"
-					rel="noreferrer"
-				>
-					<div class="inline-flex items-center">
-						{@html discordIcon} Discord
+					<div class="flex items-center p-1">
+						<a
+							class="btn btn-sm variant-ghost-surface"
+							href="https://github.com/ddxv/app-store-dash"
+							target="_blank"
+							rel="noreferrer"
+						>
+							<div class="inline-flex items-center text-xs md:text-lg">
+								{@html githubIcon} GitHub
+							</div>
+						</a>
+						<a
+							class="btn btn-sm variant-ghost-surface"
+							href="https://discord.gg/7jpWEhkXRW"
+							target="_blank"
+							rel="noreferrer"
+						>
+							<div class="inline-flex items-center text-xs md:text-lg">
+								{@html discordIcon} Discord
+							</div>
+						</a>
 					</div>
-				</a>
+				</div>
 			{/snippet}
 		</AppBar>
 	{/snippet}

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -154,7 +154,7 @@
 				party services which likely collect app data. You can also help expand these lists.
 			</p>
 		</a>
-		<div class="flex flex-col-2 gap-4">
+		<div class="flex flex-col md:flex-col-2 gap-4">
 			<a href="/companies/types/ad-networks">
 				<div class="card variant-ghost-surface md:p-4">
 					<div class="card-header">
@@ -212,7 +212,7 @@
 			</p>
 		</a>
 		<div
-			class="snap-x scroll-px-4 snap-mandatory scroll-smooth flex gap-4 overflow-x-auto px-4 py-10"
+			class="snap-x scroll-px-4 snap-mandatory scroll-smooth flex gap-4 md:flex-row flex-col px-4 py-10"
 		>
 			<a href="/collections/new_weekly">
 				<div class="snap-center shrink-0 card variant-ghost-surface w-48 md:w-56 md:p-4">