more svelte 5 and tailwindcss

kjk · Jun 26, 2024 · f26aede · f26aede
1 parent 0671db1
commit f26aede
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 121 deletions.
diff --git a/frontend/src/gisteditor/EditorCodeMirror.svelte b/frontend/src/gisteditor/EditorCodeMirror.svelte
@@ -303,7 +303,7 @@
         tabSize,
         lineWrapping,
         placeholder,
-        editable
+        editable,
       ),
       lineNumbers(),
       ...getTheme(theme, styles),
@@ -452,7 +452,7 @@
   function addFile(
     initialName = "main.txt",
     content = "",
-    isTemporary = false
+    isTemporary = false,
   ) {
     const name = makeNameUnique(initialName, null);
     currFileID++;
@@ -926,46 +926,27 @@
           style={"display: flex; font-size: 9.5pt"}
         >
           {#if !gist.isLocalGist}
-            <div>
-              <a
-                href="https://gist.github.com/{gist.id}"
-                target="_blank"
-                rel="noreferrer"
-              >
-                See on gist.github.com
-              </a>
-            </div>
-          {/if}
-          {#each fileSpecificMenus as menuItem}
-            <div>
-              {#if menuItem[1].startsWith("javascript:")}
-                <a href={menuItem[1]}>{menuItem[0]}</a>
-              {:else}
-                <a href={menuItem[1]} target="_blank" rel="noreferrer">
-                  {menuItem[0]}
-                </a>
-              {/if}
-            </div>
-          {/each}
-          <!-- <div>
             <a
-              href="https://tools.arslexis.io/docs/gist-editor"
+              href="https://gist.github.com/{gist.id}"
               target="_blank"
               rel="noreferrer"
             >
-              CodeEval docs
+              See on gist.github.com
             </a>
-          </div> -->
-          {#if isDeletable}
-            <div>
-              <a
-                href="/dummy"
-                style="color: red"
-                on:click|preventDefault={deleteGist}
-              >
-                Delete
+          {/if}
+          {#each fileSpecificMenus as menuItem}
+            {#if menuItem[1].startsWith("javascript:")}
+              <a href={menuItem[1]}>{menuItem[0]}</a>
+            {:else}
+              <a href={menuItem[1]} target="_blank" rel="noreferrer">
+                {menuItem[0]}
               </a>
-            </div>
+            {/if}
+          {/each}
+          {#if isDeletable}
+            <button class="text-red-500" on:click|preventDefault={deleteGist}>
+              Delete
+            </button>
           {/if}
         </div>
       </Overlay>

diff --git a/frontend/src/gisteditor/GistLine.svelte b/frontend/src/gisteditor/GistLine.svelte
@@ -103,11 +103,7 @@
         style={"display: flex; font-size: 9.5pt"}
       >
         {#if isDeletable}
-          <div>
-            <a href="/dummy" style="color: red" onclick={deleteGist}>
-              Delete
-            </a>
-          </div>
+          <button class="!text-red-600" onclick={deleteGist}>Delete</button>
         {/if}
       </div>
     </Overlay>

diff --git a/frontend/src/gisteditor/HelpButton.svelte b/frontend/src/gisteditor/HelpButton.svelte
@@ -19,36 +19,30 @@
   {#if showingMenu}
     <div class="help nohover">?</div>
     <Overlay bind:open={showingMenu}>
-      <div class="dropdown-content shadow-md adjust">
-        <div>
-          <a
-            onclick={hideMenu}
-            href="https://tools.arslexis.io/docs/gist-editor"
-            target="_blank"
-            rel="noreferrer"
-          >
-            About
-          </a>
-        </div>
-        <div>
-          <a
-            onclick={hideMenu}
-            href="https://tools.arslexis.io/docs/gist-editor"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
+      <div class="dropdown-content adjust">
+        <a
+          onclick={hideMenu}
+          href="https://tools.arslexis.io/docs/gist-editor"
+          target="_blank"
+          rel="noreferrer"
+        >
+          About
+        </a>
+        <a
+          onclick={hideMenu}
+          href="https://tools.arslexis.io/docs/gist-editor"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Documentation
+        </a>
         <!--
-      <div>
         <a
           onclick={hideMenu}
           href="https://reddit.com/r/CodeEvalApp/"
           target="_blank">
           Support
         </a>
-      </div>
       -->
       </div>
     </Overlay>

diff --git a/frontend/src/gisteditor/Login.svelte b/frontend/src/gisteditor/Login.svelte
@@ -1,3 +1,5 @@
+<svelte:options runes={true} />
+
 <script>
   import SvgTwitter from "../svg/SvgTwitter.svelte";
   import SvgArrowDown from "../svg/SvgArrowDown.svelte";
@@ -7,10 +9,18 @@
   import { githubUserInfo, openLoginWindow, logout } from "../github_login.js";
   import { goGistEditorHome } from "./router.js";
 
-  export let gistid = "";
-  export let onGoHome = null; // function
-  export let onNewGist = null; // function
-  export let showTwitter = false;
+  /** @type {{
+   gistid: string,
+   onGoHome: () => void,
+   onNewGist: () => void,
+   showTwitter: boolean,
+  }}*/
+  let {
+    gistid = "",
+    onGoHome = null,
+    onNewGist = null,
+    showTwitter = false,
+  } = $props();
 
   const loc = window.location.pathname;
   let isHome = loc === "/gisteditor/";
@@ -66,40 +76,30 @@
         <SvgArrowDown style="width: 8px; height: 8px" />
       </div>
 
-      <div class="dropdown-content shadow" style="top: 100%; right: 0px;">
+      <div
+        class="dropdown-content flex flex-col items-start shadow top-full right-0"
+      >
         {#if !isHome}
-          <div>
-            <a href="./" on:click|preventDefault={goHome}>Home</a>
-          </div>
+          <button onclick={goHome}>Home</button>
         {/if}
 
         {#if onNewGist}
-          <div>
-            <a href="/dummy/" on:click|preventDefault={onNewGist}>New gist</a>
-          </div>
+          <button onclick={onNewGist}>New gist</button>
         {/if}
         {#if gistid === ""}
-          <div>
-            <a href="/dummy" on:click|preventDefault={refreshGists}>
-              Sync with GitHub gists
-            </a>
-          </div>
+          <button onclick={refreshGists}>Sync with GitHub gists</button>
         {/if}
-        <div>
-          <a href="/dummy" on:click|preventDefault={doLogout}>Log out</a>
-        </div>
+        <button onclick={doLogout}>Log out</button>
       </div>
     </div>
   {:else}
     <div class="flex flex-row justify-end items-center">
-      <a
-        class="px-3 py-1 text-gray-500 hover:bg-gray-100 whitespace-nowrap"
-        href="/"
-        on:click|preventDefault={openLoginWindow}
+      <button
+        onclick={openLoginWindow}
         use:tooltip={"Log in to manage your gists"}
       >
         Log in with GitHub
-      </a>
+      </button>
     </div>
   {/if}
 </div>
diff --git a/frontend/src/gisteditor/gisteditor.css b/frontend/src/gisteditor/gisteditor.css
@@ -7,12 +7,14 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
 
-    /* font size as in stack overflow */
-    font-size: 12pt;
+  /* font size as in stack overflow */
+  font-size: 12pt;
 
-    color: #333;
+  color: #333;
 
   /* TODO: do I need this ? 
     https://stackoverflow.com/questions/21209223/remove-bounce-on-scroll-in-browser-issue-with-positionfixed-div
@@ -46,35 +48,14 @@ body {
 }
 
 .dropdown-content {
-  display: none;
-  flex-direction: column;
-
-  padding: 8px 0;
-  white-space: nowrap;
-  position: absolute;
-  line-height: 1.2em;
-  min-width: 180px;
-  /* border: 1px solid lightgray; */
-  z-index: 50;
-
-  background-color: white;
-  border: 1px solid lightgray;
-  border-radius: 4px;
-}
-
-.dropdown-content div {
-  display: flex;
+  @apply hidden;
+  @apply absolute flex-col py-2 px-0 whitespace-nowrap min-w-44 z-50 bg-white text-sm text-gray-500;
+  @apply border border-gray-300 rounded-md;
 }
 
-.dropdown-content div a {
-  color: grey;
-  /* background-color: yellow; */
-  padding: 4px 16px;
-  flex-grow: 1;
-}
-
-.dropdown-content div a:hover {
-  background-color: #ededed;
+.dropdown-content button,
+.dropdown-content a {
+  @apply px-3 py-1.5  hover:bg-gray-100 whitespace-nowrap w-full text-left;
 }
 
 svg {
@@ -83,5 +64,3 @@ svg {
   flex-shrink: 0;
   backface-visibility: hidden;
 }
-
-