Make cards more compact and modern

pickledish · Jul 11, 2021 · e2bdb44 · e2bdb44
1 parent c1160ab
commit e2bdb44
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 30 deletions.
diff --git a/src/components/Checkbox.svelte b/src/components/Checkbox.svelte
@@ -10,6 +10,13 @@
   export let object_id = null;
   export let object_store = null;
   export let label = "";
+  export let tag_style = false;
+
+  $: colors = (tag_style)
+    ? "text-black bg-grey-300 border-grey-300 dark:text-white dark:bg-grey-500 dark:border-grey-500"
+    : "text-sage-700 bg-white border-desk-300 dark:text-sage-300 dark:bg-grey-700 dark:border-grey-500";
+
+  $: opacity = (checked) ? "100" : "0";
 
   function handle_check_change() {
     if (object_store != null) {
@@ -25,10 +32,10 @@
 
 </script>
 
-<label class="flex justify-start items-start text-grey-700">
-  <div class="bg-white border-2 rounded border-desk-300 w-5 h-5 flex flex-shrink-0 justify-center items-center">
+<label class="flex justify-start items-start">
+  <div class="{colors} border-2 rounded w-5 h-5 flex flex-shrink-0 justify-center items-center">
     <input type="checkbox" class="opacity-0 absolute" bind:checked={checked} on:change={handle_check_change}>
-    <div class="{checked ? "block" : "hidden"} pointer-events-none text-sage-700">
+    <div class="pointer-events-none opacity-{opacity}">
       <Icon kind="check" size={16} width={3.0}/>
     </div>
   </div>

diff --git a/src/components/MessageTile.svelte b/src/components/MessageTile.svelte
@@ -29,35 +29,35 @@
 
 </style>
 
-<div class="rounded shadow bg-white dark:bg-desk-700 break-words py-5 pr-5 pl-3 border-l-0.5rem {colors}">
+<div class="rounded shadow bg-white dark:bg-desk-700 break-words border-b-0.5rem {colors}">
   <div class="flex flex-col">
-    <div class="flex justify-between">
-      <div class="text-xs">
-        <Checkbox object_id={created} object_store={tiles_checked} bind:checked={is_checked}/>
-      </div>
-      <div class="text-xs whitespace-nowrap">
-        {created_date}
-      </div>
-    </div>
     {#if image}
-    <img class="object-contain w-full pt-4" src="{image}"/>
+    <img class="rounded-t object-contain w-full" src="{image}"/>
     {/if}
-    <div class="pt-4 text-lg">
-      <span class="cursor-pointer" on:click={() => $shownNote = created}>
-        {#if title !== null}{@html title}{:else}{content}{/if}
-      </span>
-    </div>
-    {#if boards && boards.length !== 0}
-    <div class="pt-3">
-      {#each Array.from(boards.values) as id}
-      <span
-        class="inline-block rounded bg-grey-300 dark:bg-grey-500 px-2 py-1 text-xs mr-2 cursor-pointer"
-        on:click={() => $currBoard = id}
-      >
-        {$boardMap.get(id) && $boardMap.get(id).name}
-      </span>
-      {/each}
+    <div class="px-5 pt-6 pb-3">
+      <div class="text-lg">
+        <span class="cursor-pointer" on:click={() => $shownNote = created}>
+          {#if title !== null}{@html title}{:else}{content}{/if}
+        </span>
+      </div>
+      <div class="flex justify-between pt-4">
+        <div class="self-center text-xs text-grey-500 dark:text-grey-300 whitespace-nowrap">
+          {created_date}
+        </div>
+        <div class="flex self-center text-xs whitespace-nowrap">
+          {#if boards && boards.length !== 0}
+            {#each Array.from(boards.values) as id}
+            <span
+              class="inline-block rounded bg-grey-300 dark:bg-grey-500 px-2 py-0.75 mr-1.5 text-xs cursor-pointer"
+              on:click={() => $currBoard = id}
+            >
+              {$boardMap.get(id) && $boardMap.get(id).name}
+            </span>
+            {/each}
+          {/if}
+          <Checkbox object_id={created} object_store={tiles_checked} tag_style={true} bind:checked={is_checked}/>
+        </div>
+      </div>
     </div>
-    {/if}
   </div>
 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -17,7 +17,7 @@ module.exports = {
       'mono': ['SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace']
     },
     fontSize: {
-      'xs': '.67rem',
+      'xs': '.7rem',
       'sm': '.8rem',
       'base': '.9rem',
       'lg': '1rem',
@@ -49,8 +49,12 @@ module.exports = {
         },
       },
       padding: {
+        '0.75': '0.15rem',
         '1.75': '0.425rem',
       },
+      margin: {
+        '0.75': '0.15rem',
+      },
       height: {
         '1.5': '0.33rem',
       },