update ui

eotdl/eotdl/__init__.py

@@ -1 +1 @@
-__version__ = "2024.03.14-4"
+__version__ = "2024.03.15"

eotdl/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "eotdl"
-version = "2024.03.14-4"
+version = "2024.03.15"
 description = "Earth Observation Training Data Lab"
 authors = ["EarthPulse <[email protected]>"]
 license = "MIT"

ui/src/components/Metadata.svelte

@@ -9,22 +9,22 @@
 	<table class="table border-2 rounded-lg table-compact h-[100px] w-full">
 		<tbody>
 			<tr>
-				<th class="w-[20px]">Author(s)</th>
-				<td>{authors.join(", ") || "-"}</td>
+				<th class="w-[20px] text-xs">Author(s)</th>
+				<td class="text-xs">{authors.join(", ") || "-"}</td>
 			</tr>
 			<tr>
-				<th>License</th>
-				<td>{license || "-"}</td>
+				<th class="text-xs">License</th>
+				<td class="text-xs">{license || "-"}</td>
 			</tr>
 			<tr>
-				<th>Source</th>
+				<th class="text-xs">Source</th>
 				<td>
 					{#if source}
 						<a
 							href={source}
 							target="_blank"
 							rel="noopener noreferrer"
-							class="text-green-200 hover:underline"
+							class="text-green-200 hover:underline text-xs"
 							>{source.length > 30
 								? source.slice(0, 30) + "..."
 								: source}</a

ui/src/routes/datasets/[name]/+page.svelte

@@ -98,8 +98,8 @@
 				bind:version
 			/>
 
-			<div class="grid grid-cols-[auto,425px] gap-3 mt-5">
-				<div>
+			<div class="grid grid-cols-[auto,350px] gap-3 mt-5">
+				<div class="w-full overflow-auto">
 					<div class="content">
 						{#if dataset.description}
 							{@html dataset.description}
@@ -116,11 +116,10 @@
 							)}</pre>
 					{/if} -->
 				</div>
-				<div class="flex flex-col gap-3">
+				<div class="flex flex-col gap-3 text-xs">
 					<p>Download the dataset with the CLI:</p>
 					<div class="relative">
-						<pre
-							class="bg-gray-200 p-3 overflow-x-auto text-sm"><button
+						<pre class="bg-gray-200 p-3 overflow-x-auto"><button
 								on:click={() =>
 									copyToClipboard(
 										`eotdl datasets get ${dataset.name} -v ${version?.version_id}`,
@@ -129,7 +128,7 @@
 							></pre>
 						{#if message}
 							<span
-								class="text-sm text-gray-400 absolute bottom-[-20px] right-0"
+								class="text-gray-400 absolute bottom-[-20px] right-0"
 								in:fade
 								out:fade>{message}</span
 							>

ui/src/routes/models/[name]/+page.svelte

@@ -89,8 +89,8 @@
 				bind:version
 			/>
 
-			<div class="grid grid-cols-[auto,425px] gap-3 mt-5">
-				<div>
+			<div class="grid grid-cols-[auto,350px] gap-3 mt-5">
+				<div class="w-full overflow-auto">
 					<div class="content">
 						{#if model.description}
 							{@html model.description}
@@ -107,20 +107,19 @@
 							)}</pre>
 					{/if} -->
 				</div>
-				<div class="flex flex-col gap-3">
+				<div class="flex flex-col gap-3 text-xs">
 					<p>Download the model with the CLI:</p>
 					<div class="relative">
-						<pre
-							class="bg-gray-200 p-3 overflow-x-auto text-sm"><button
+						<pre class="bg-gray-200 p-3 overflow-x-auto"><button
 								on:click={() =>
 									copyToClipboard(
-										`eotdl datasets get ${model.name} -v ${version?.version_id}`
+										`eotdl models get ${model.name} -v ${version?.version_id}`,
 									)}
 								>eotdl models get {model.name} -v {version?.version_id}</button
 							></pre>
 						{#if message}
 							<span
-								class="text-sm text-gray-400 absolute bottom-[-20px] right-0"
+								class=" text-gray-400 absolute bottom-[-20px] right-0"
 								in:fade
 								out:fade>{message}</span
 							>

ui/src/styles/dataset.css

@@ -1,3 +1,8 @@
+.content {
+    @apply flex flex-col max-w-full;
+
+}
+
 .content a {
     @apply text-green-200 underline;
 }
@@ -15,5 +20,5 @@
 }
 
 .content pre {
-    @apply bg-gray-800 text-white p-4 rounded-lg;
+    @apply bg-gray-800 text-white p-4 rounded-lg overflow-auto;
 }

ui/src/styles/docs.css

@@ -16,4 +16,8 @@ h2 {
 
 blockquote {
     @apply border-l-4 border-green-200 pl-4 bg-slate-100;
+}
+
+pre {
+    @apply overflow-x-auto;
 }