Cleanup and fix css (it can nest now!)

thesoftwarephilosopher · Aug 17, 2024 · 63007c1 · 63007c1
1 parent ddea2c9
commit 63007c1
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 157 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,4 +3,5 @@
   "task.allowAutomaticTasks": "on",
   "typescript.tsdk": "node_modules\\typescript\\lib",
   "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
+  "css.format.spaceAroundSelectorSeparator": true,
 }
diff --git a/site/index.html.tsx b/site/index.html.tsx
@@ -56,7 +56,7 @@ function Sample(attrs: { which: string }) {
   return (
     <div class='sample' data-sample={attrs.which}>
       <div class='sample-code'>
-        <p><a target='_blank' href={src}>View source</a></p>
+        <p><a class='view-src' target='_blank' href={src}>View source</a></p>
         <pre>
           <code>
             {file.module!.source.replace(/</g, '&lt;')}

diff --git a/site/samples/sample3.tsx b/site/samples/sample3.tsx
@@ -1,5 +1,5 @@
 function TodoInput(attrs: { add: (v: string) => void }) {
-  const input = <input /> as HTMLInputElement;
+  const input = <input type='text' /> as HTMLInputElement;
   input.placeholder = 'Add todo item...';
   input.onkeydown = (e) => {
     if (e.key === 'Enter') {

diff --git a/site/samples/sample4.tsx b/site/samples/sample4.tsx
@@ -2,9 +2,10 @@ import { data } from "../fetch-dataset.js";
 // Names of US citizens born in 1882 from ssa.gov
 
 export default function FindNames() {
-  const status = <p style='margin:1em 0' /> as HTMLParagraphElement;
+  const status = <p class='status' /> as HTMLParagraphElement;
   const results = <ul /> as HTMLUListElement;
   const input = <input
+    type='text'
     value='.?mary?'
     autocomplete='new-password'
     oninput={updateMatches}
@@ -19,17 +20,13 @@ export default function FindNames() {
 
     const matches = (Iterator.from(matched)
       .map(match => <Item regex={regex} match={match} />)
-      .take(30));
+      .take(25));
 
     results.replaceChildren(...matches);
     status.textContent = `${matched.length} / ${data.size}`;
   }
 
-  return <div class='sample4'>
-    {input}
-    {status}
-    {results}
-  </div>;
+  return <div>{input}{status}{results}</div>;
 }
 
 function Item(attrs: { match: [string, number], regex: RegExp }) {

diff --git a/site/samples/sample5.tsx b/site/samples/sample5.tsx
@@ -9,7 +9,7 @@ function TodoList() {
   list.add('bar').toggle();
   list.add('qux');
 
-  const input = <input class='next' /> as HTMLInputElement;
+  const input = <input type='text' /> as HTMLInputElement;
   input.onkeydown = (e) => {
     if (e.key === 'Enter' && input.value.trim().length > 0) {
       list.add(input.value);
@@ -21,8 +21,8 @@ function TodoList() {
     <div>{input}</div>
     <div class='actions'>
       <Counter list={list} />
-      <Button onclick={() => list.clearDone()}>Clear</Button>
-      <Button onclick={() => list.invertAll()}><i>Invert</i></Button>
+      <button onclick={() => list.clearDone()}>Clear</button>
+      <button onclick={() => list.invertAll()}><i>Invert</i></button>
     </div>
     {list.ul}
   </div>;
@@ -112,17 +112,6 @@ function Counter({ list }: { list: List }) {
   return span;
 }
 
-function Button(attrs: { onclick: () => void }, children: any) {
-  return <a
-    href='#'
-    class='action-button'
-    onclick={(e: Event) => {
-      e.preventDefault();
-      attrs.onclick();
-    }}
-  >{children}</a>;
-}
-
 function listen(target: EventTarget, event: string, fn: () => void) {
   target.addEventListener(event, fn);
   return () => target.removeEventListener(event, fn);