From 9b09af1491ae83ed72ff156577a94d08517153dd Mon Sep 17 00:00:00 2001
From: cikzh <marlonpeeters@tweedegolf.com>
Date: Fri, 1 Nov 2024 11:59:00 +0100
Subject: [PATCH 1/2] Added category styling

---
 frontend/src/app.css          |   2 +
 frontend/src/lib/Crate.svelte | 318 ++++++++++++++++++----------------
 2 files changed, 170 insertions(+), 150 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 089a3c5..fba62a3 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -20,6 +20,8 @@
   --color-text: #f9f9f9;
   --color-text-secondary: #747bff;
   --color-border: #3a3939;
+
+  --radius: 8px;
 }
 
 @media (prefers-color-scheme: light) {
diff --git a/frontend/src/lib/Crate.svelte b/frontend/src/lib/Crate.svelte
index 1dc0219..85da2fb 100644
--- a/frontend/src/lib/Crate.svelte
+++ b/frontend/src/lib/Crate.svelte
@@ -1,168 +1,186 @@
 <script lang="ts">
-    import type {FullCrate} from "../crate-db";
+import type {FullCrate} from "../crate-db";
 
-    export let crate: FullCrate;
+export let crate: FullCrate;
 
-    let showNotification = false;
-    let showKiCadSymbol = false;
-    let showDevBoards = false;
+let showNotification = false;
+let showKiCadSymbol = false;
+let showDevBoards = false;
 
-    function copyToClipboard() {
-        navigator.clipboard.writeText(`${crate.name} = "${crate.version}"`);
-        showNotification = true;
-        setTimeout(() => {
-            showNotification = false;
-        }, 2000); // Hide notification after 2 seconds
-    }
+function copyToClipboard() {
+  navigator.clipboard.writeText(`${crate.name} = "${crate.version}"`);
+  showNotification = true;
+  setTimeout(() => {
+    showNotification = false;
+  }, 2000); // Hide notification after 2 seconds
+}
 
-    function toggleKiCadSymbol() {
-        showKiCadSymbol = !showKiCadSymbol;
-    }
+function toggleKiCadSymbol() {
+  showKiCadSymbol = !showKiCadSymbol;
+}
 
-    function toggleDevBoards() {
-        showDevBoards = !showDevBoards;
-    }
+function toggleDevBoards() {
+  showDevBoards = !showDevBoards;
+}
 </script>
 
 
 <div class="crate-box">
-    <div class="description-box">
-        <div>
-            {crate.categories || []}
-        </div>
-        <div>
-            <a href="https://crates.io/crates/{crate.name}">{crate.name}</a>
-            <span>{crate.version}</span>
-            <button title="Copy Cargo.toml snippet to clipboard" on:click={copyToClipboard}>📋
-                {#if showNotification}Copied!{/if}
-            </button>
-            {#if crate.documentation}<span><a href="{crate.documentation}">📚 Docs</a></span>{/if}
-            {#if crate.repository}<span><a href="{crate.repository}">🗃️ Repo</a></span>{/if}
-            {#if crate.homepage}<span><a href="{crate.homepage}">🏠 Homepage</a></span>{/if}
-        </div>
-        {#if crate.names.length > 0 || crate.part_numbers }
-            <div>
-                <span>🕷️ Supported chips: {crate.names.join(", ")}</span>
-            </div>
-        {/if}
-        <div>
-            {crate.description}
-        </div>
-        <ul>
-            {#each crate.categories || [] as category}
-                <li>{category}</li>
-            {/each}
-        </ul>
+  <div class="description-box">
+    <ul class="categories">
+      {#each crate.categories || ["Test::Category", "Test::Category"] as category}
+        <li>{category}</li>
+      {/each}
+    </ul>
+    <div>
+      <a href="https://crates.io/crates/{crate.name}">{crate.name}</a>
+      <span>{crate.version}</span>
+      <button title="Copy Cargo.toml snippet to clipboard" on:click={copyToClipboard}>📋
+        {#if showNotification}Copied!{/if}
+      </button>
+      {#if crate.documentation}<span><a href="{crate.documentation}">📚 Docs</a></span>{/if}
+      {#if crate.repository}<span><a href="{crate.repository}">🗃️ Repo</a></span>{/if}
+      {#if crate.homepage}<span><a href="{crate.homepage}">🏠 Homepage</a></span>{/if}
     </div>
-    <div class="tags-box">
-        {#if crate.manufacturer !== "Unknown" }
-            <div>🛠️ Manufacturer: {crate.manufacturer}</div>
-        {/if}
-        {#if crate.interfaces && (crate.interfaces.i2c || crate.interfaces.spi) }
-            <div>🚌 Interfaces:
-                {#if crate.interfaces.i2c}I2C{/if}
-                {#if crate.interfaces.spi}SPI{/if}
-            </div>
-        {/if}
-        {#if crate.rust_version }
-            <div>🛠️ MSRV: {crate.rust_version}</div>
-        {/if}
-        {#if crate.datasheets }
-            <div>📋 <a href="{crate.datasheets[0]}">Datasheet</a></div> <!-- TODO: Handle multiple datasheets -->
-        {/if}
-        {#if crate.dev_boards }
-            <div>
-                <button on:click={toggleDevBoards} aria-expanded="{showDevBoards}">✅ Dev Board</button>
-                {#if showDevBoards}
-                    <ul>
-                        {#each crate.dev_boards || [] as board}
-                            <li><a href="{board.link}" target="_blank">{board.name}</a></li>
-                        {/each}
-                    </ul>
-                {/if}
-            </div>
-        {/if}
-        {#if crate.kicad_symbol}
-            <div>
-                <button on:click={toggleKiCadSymbol} aria-expanded="{showKiCadSymbol}">
-                    ✅ KiCad {crate.kicad_symbol.length > 1 ? "Symbols" : "Symbol"}
-                </button>
-                {#if showKiCadSymbol}
-                    <ul>
-                        {#each crate.kicad_symbol as sym}
-                            <li>{sym}</li>
-                        {/each}
-                    </ul>
-                {/if}
-            </div>
-        {/if}
-        {#if crate.packages}
-            <div>👣 Footprints: {crate.packages.join(", ")}</div>
-        {/if}
-        {#if crate.resources}
-            <div>
-                🗞️ Resources:
-                <ul>
-                    {#each crate.resources as resource}
-                        <li><a href="{resource.link}">{resource.title}</a></li>
-                    {/each}
-                </ul>
-            </div>
-        {/if}
+    {#if crate.names.length > 0 || crate.part_numbers }
+      <div>
+        <span>🕷️ Supported chips: {crate.names.join(", ")}</span>
+      </div>
+    {/if}
+    <div>
+      {crate.description}
     </div>
-    <div class="stats-box">
-        <div>👮 License: {crate.license}</div>
-        <div> ⬇️ All-Time: {crate.downloads} </div>
-        <div> ⬇️ This version: {crate.this_version_downloads} </div>
-        <div>
-            <span>🔄 Last updated: </span>
-            <time datetime="{crate.updated_at}" class="ember-tooltip-target">
-                {crate.updated_at.substring(0, 10)} <!-- TODO: Make this nicer -->
-            </time>
-        </div>
-        {#if crate.crate_size}
-            <div>🏋️ Size: {(crate.crate_size / 1024).toFixed(1)} kB</div>
+  </div>
+  <div class="tags-box">
+    {#if crate.manufacturer !== "Unknown" }
+      <div>🛠️ Manufacturer: {crate.manufacturer}</div>
+    {/if}
+    {#if crate.interfaces && (crate.interfaces.i2c || crate.interfaces.spi) }
+      <div>🚌 Interfaces:
+        {#if crate.interfaces.i2c}I2C{/if}
+        {#if crate.interfaces.spi}SPI{/if}
+      </div>
+    {/if}
+    {#if crate.rust_version }
+      <div>🛠️ MSRV: {crate.rust_version}</div>
+    {/if}
+    {#if crate.datasheets }
+      <div>📋 <a href="{crate.datasheets[0]}">Datasheet</a></div> <!-- TODO: Handle multiple datasheets -->
+    {/if}
+    {#if crate.dev_boards }
+      <div>
+        <button on:click={toggleDevBoards} aria-expanded="{showDevBoards}">✅ Dev Board</button>
+        {#if showDevBoards}
+          <ul>
+            {#each crate.dev_boards || [] as board}
+              <li><a href="{board.link}" target="_blank">{board.name}</a></li>
+            {/each}
+          </ul>
         {/if}
+      </div>
+    {/if}
+    {#if crate.kicad_symbol}
+      <div>
+        <button on:click={toggleKiCadSymbol} aria-expanded="{showKiCadSymbol}">
+          ✅ KiCad {crate.kicad_symbol.length > 1 ? "Symbols" : "Symbol"}
+        </button>
+        {#if showKiCadSymbol}
+          <ul>
+            {#each crate.kicad_symbol as sym}
+              <li>{sym}</li>
+            {/each}
+          </ul>
+        {/if}
+      </div>
+    {/if}
+    {#if crate.packages}
+      <div>👣 Footprints: {crate.packages.join(", ")}</div>
+    {/if}
+    {#if crate.resources}
+      <div>
+        🗞️ Resources:
+        <ul>
+          {#each crate.resources as resource}
+            <li><a href="{resource.link}">{resource.title}</a></li>
+          {/each}
+        </ul>
+      </div>
+    {/if}
+  </div>
+  <div class="stats-box">
+    <div>👮 License: {crate.license}</div>
+    <div> ⬇️ All-Time: {crate.downloads} </div>
+    <div> ⬇️ This version: {crate.this_version_downloads} </div>
+    <div>
+      <span>🔄 Last updated: </span>
+      <time datetime="{crate.updated_at}" class="ember-tooltip-target">
+        {crate.updated_at.substring(0, 10)} <!-- TODO: Make this nicer -->
+      </time>
     </div>
+    {#if crate.crate_size}
+      <div>🏋️ Size: {(crate.crate_size / 1024).toFixed(1)} kB</div>
+    {/if}
+  </div>
 </div>
 
 <style>
-    .crate-box {
-        text-align: left;
-        display: flex;
-        justify-content: space-between;
-        border: 1px solid #ccc;
-        padding: 16px;
-        margin: 8px 0;
-        border-radius: 8px;
-        background-color: var(--color-background);
-        width: 100%;
-        box-sizing: border-box;
-    }
-
-    .description-box, .stats-box, .tags-box {
-        flex: 1;
-        margin: 0 8px;
-    }
-
-    .description-box {
-        flex: 3;
-    }
-
-    .description-box {
-        max-width: 70%;
-    }
-
-    .stats-box {
-        max-width: 30%;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-    }
-
-    .tags-box div, .stats-box div {
-        background: var(--color-tertiary);
-        border-radius: 2px;
-        margin: 4px 0;
-    }
+.categories, ul {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.categories li {
+  background-color: var(--color-tertiary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 4px 12px;
+}
+
+
+.crate-box {
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid #ccc;
+  padding: 16px;
+  margin: 8px 0;
+  border-radius: var(--radius);
+  background-color: var(--color-background);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.description-box, .stats-box, .tags-box {
+  flex: 1;
+  margin: 0 8px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.description-box {
+  flex: 3;
+}
+
+.description-box {
+  max-width: 70%;
+}
+
+.stats-box {
+  max-width: 30%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.tags-box div, .stats-box div {
+  background: var(--color-tertiary);
+  border-radius: 2px;
+  margin: 4px 0;
+}
 </style>

From 80017171aa219fd1f9d143fa8c96857fa03da287 Mon Sep 17 00:00:00 2001
From: cikzh <marlonpeeters@tweedegolf.com>
Date: Fri, 1 Nov 2024 12:36:39 +0100
Subject: [PATCH 2/2] Crate card styling

---
 frontend/src/lib/Crate.svelte | 97 ++++++++++++++++++++---------------
 1 file changed, 56 insertions(+), 41 deletions(-)

diff --git a/frontend/src/lib/Crate.svelte b/frontend/src/lib/Crate.svelte
index 85da2fb..c1466e1 100644
--- a/frontend/src/lib/Crate.svelte
+++ b/frontend/src/lib/Crate.svelte
@@ -24,20 +24,16 @@ function toggleDevBoards() {
 }
 </script>
 
-
-<div class="crate-box">
+<div class="card">
   <div class="description-box">
-    <ul class="categories">
-      {#each crate.categories || ["Test::Category", "Test::Category"] as category}
-        <li>{category}</li>
-      {/each}
-    </ul>
-    <div>
-      <a href="https://crates.io/crates/{crate.name}">{crate.name}</a>
+    <div class="crate-title">
+      <a class="crate-title" href="https://crates.io/crates/{crate.name}">{crate.name}</a>
       <span>{crate.version}</span>
       <button title="Copy Cargo.toml snippet to clipboard" on:click={copyToClipboard}>📋
         {#if showNotification}Copied!{/if}
       </button>
+    </div>
+    <div class="links">
       {#if crate.documentation}<span><a href="{crate.documentation}">📚 Docs</a></span>{/if}
       {#if crate.repository}<span><a href="{crate.repository}">🗃️ Repo</a></span>{/if}
       {#if crate.homepage}<span><a href="{crate.homepage}">🏠 Homepage</a></span>{/if}
@@ -47,28 +43,34 @@ function toggleDevBoards() {
         <span>🕷️ Supported chips: {crate.names.join(", ")}</span>
       </div>
     {/if}
-    <div>
+    <div class="description">
       {crate.description}
     </div>
+    <ul class="categories">
+      {#each crate.categories || [] as category}
+        <li>{category}</li>
+      {/each}
+    </ul>
   </div>
+  
   <div class="tags-box">
     {#if crate.manufacturer !== "Unknown" }
-      <div>🛠️ Manufacturer: {crate.manufacturer}</div>
+      <p>🛠️ Manufacturer: {crate.manufacturer}</p>
     {/if}
     {#if crate.interfaces && (crate.interfaces.i2c || crate.interfaces.spi) }
-      <div>🚌 Interfaces:
+      <p>🚌 Interfaces:
         {#if crate.interfaces.i2c}I2C{/if}
         {#if crate.interfaces.spi}SPI{/if}
-      </div>
+      </p>
     {/if}
     {#if crate.rust_version }
-      <div>🛠️ MSRV: {crate.rust_version}</div>
+      <p>🛠️ MSRV: {crate.rust_version}</p>
     {/if}
     {#if crate.datasheets }
-      <div>📋 <a href="{crate.datasheets[0]}">Datasheet</a></div> <!-- TODO: Handle multiple datasheets -->
+      <p>📋 <a href="{crate.datasheets[0]}">Datasheet</a></p> <!-- TODO: Handle multiple datasheets -->
     {/if}
     {#if crate.dev_boards }
-      <div>
+      <p>
         <button on:click={toggleDevBoards} aria-expanded="{showDevBoards}">✅ Dev Board</button>
         {#if showDevBoards}
           <ul>
@@ -77,10 +79,10 @@ function toggleDevBoards() {
             {/each}
           </ul>
         {/if}
-      </div>
+      </p>
     {/if}
     {#if crate.kicad_symbol}
-      <div>
+      <p>
         <button on:click={toggleKiCadSymbol} aria-expanded="{showKiCadSymbol}">
           ✅ KiCad {crate.kicad_symbol.length > 1 ? "Symbols" : "Symbol"}
         </button>
@@ -91,10 +93,10 @@ function toggleDevBoards() {
             {/each}
           </ul>
         {/if}
-      </div>
+      </p>
     {/if}
     {#if crate.packages}
-      <div>👣 Footprints: {crate.packages.join(", ")}</div>
+      <p>👣 Footprints: {crate.packages.join(", ")}</p>
     {/if}
     {#if crate.resources}
       <div>
@@ -108,23 +110,23 @@ function toggleDevBoards() {
     {/if}
   </div>
   <div class="stats-box">
-    <div>👮 License: {crate.license}</div>
-    <div> ⬇️ All-Time: {crate.downloads} </div>
-    <div> ⬇️ This version: {crate.this_version_downloads} </div>
-    <div>
+    <p>👮 License: {crate.license}</p>
+    <p> ⬇️ All-Time: {crate.downloads} </p>
+    <p> ⬇️ This version: {crate.this_version_downloads} </p>
+    <p>
       <span>🔄 Last updated: </span>
       <time datetime="{crate.updated_at}" class="ember-tooltip-target">
         {crate.updated_at.substring(0, 10)} <!-- TODO: Make this nicer -->
       </time>
-    </div>
+    </p>
     {#if crate.crate_size}
-      <div>🏋️ Size: {(crate.crate_size / 1024).toFixed(1)} kB</div>
+      <p>🏋️ Size: {(crate.crate_size / 1024).toFixed(1)} kB</p>
     {/if}
   </div>
 </div>
 
 <style>
-.categories, ul {
+.categories {
   display: flex;
   flex-direction: row;
   gap: 8px;
@@ -141,10 +143,9 @@ function toggleDevBoards() {
 }
 
 
-.crate-box {
+.card {
   text-align: left;
   display: flex;
-  justify-content: space-between;
   border: 1px solid #ccc;
   padding: 16px;
   margin: 8px 0;
@@ -157,30 +158,44 @@ function toggleDevBoards() {
 .description-box, .stats-box, .tags-box {
   flex: 1;
   margin: 0 8px;
+}
 
+.description-box {
+  flex: 3;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
 }
 
-.description-box {
-  flex: 3;
+.description {
+  flex-grow: 1;
+  max-width: 90%;
 }
 
-.description-box {
-  max-width: 70%;
+.links {
+  display: flex;
+  gap: 16px;
 }
 
-.stats-box {
-  max-width: 30%;
+.crate-title {
+  font-weight: 600;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.crate-title a {
+  font-size: 20px;
+}
+
+.tags-box, .stats-box {
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  gap: 4px;
 }
 
-.tags-box div, .stats-box div {
-  background: var(--color-tertiary);
-  border-radius: 2px;
-  margin: 4px 0;
+.tags-box p, .stats-box p {
+  margin: 0;
+  padding: 4px 0;
 }
 </style>