tabular nums

davelevine · Jul 28, 2023 · 0dbd52b · 0dbd52b
1 parent 0d6b502
commit 0dbd52b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/src/lib/components/Metrics.svelte b/src/lib/components/Metrics.svelte
@@ -26,7 +26,9 @@
  };
 </script>
 
-<div class="flex flex-wrap items-center gap-4 text-sm">
+<div
+ class="ml-4 hidden h-full flex-wrap items-center gap-4 text-sm tabular-nums sm:flex"
+>
  <div>
  {content.length} char
  </div>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -49,6 +49,8 @@
 
  let currentSlide: number;
 
+ let placeholder = "";
+
  let file: File;
  let fileHandle: FileSystemFileHandle;
 
@@ -173,11 +175,6 @@
  },
  ];
 
- let placeholder = gettingStarted;
- contentElements.forEach((el) => {
- if (el.key) placeholder += `\n- ${el.name}: \`CTRL\`+\`${el.key}\``;
- });
-
  const options: FilePickerOptions = {
  types: [
  {
@@ -281,6 +278,15 @@
  }
  };
 
+ const setPlaceholder = () => {
+ placeholder = gettingStarted;
+ contentElements.forEach((el) => {
+ if (el.key) placeholder += `\n- ${el.name}: \`CTRL\`+\`${el.key}\``;
+ });
+ };
+
+ setPlaceholder();
+
  onMount(() => {
  const saved = localStorage.getItem("preferences");
  if (saved) {
@@ -430,7 +436,7 @@
  </button>
  {/each}
  <div
- class="ml-4 hidden items-center transition group-hover:opacity-100 sm:flex"
+ class="transition group-hover:opacity-100"
  class:opacity-0={viewMode}
  >
  <Metrics {content} />