Improve playground action buttons on mobile

Author: alex-snezhko

src/components/BlogEntry.astro

@@ -1,7 +1,7 @@
 ---
 import type { CollectionEntry } from "astro:content"
 import TypographyContainer from "./TypographyContainer.astro";
-import ArrowLeft from "./icons/ArrowLeft.astro";
+import ArrowLeftIcon from "./icons/ArrowLeftIcon.astro";
 import GithubIcon from "./icons/GithubIcon.astro";
 import type { BlogAuthor } from "../types";
 import { Image } from "astro:assets";
@@ -17,7 +17,7 @@ const { entry } = Astro.props;
 
 <div class="max-w-[48rem] mx-auto px-4 py-6 md:p-8">
   <a href="/blog" class="flex gap-6 font-semibold">
-    <ArrowLeft class="w-6" />
+    <ArrowLeftIcon class="w-6" />
     Back to Blog
   </a>
   <h1 class="text-3xl font-bold pt-8 md:pt-14">{entry.data.title}</h1>

src/components/IconLinks.astro

@@ -14,7 +14,7 @@ import GithubIcon from "./icons/GithubIcon.astro";
     <DiscordIcon class="fill-gray-30 hover:fill-gray-40 h-6 lg:h-4 dark:fill-gray-50 dark:hover:fill-gray-40" />
   </a>
   <a
-    class="my-auto"
+    class="my-auto pb-[1px]"
     href="https://x.com/grain_lang"
     aria-label="X link" 
     target="_blank"

src/components/Playground.svelte

@@ -6,6 +6,8 @@
   import * as store from "../store";
   import { codeExamples } from "../examples";
   import ButtonLink from "./ButtonLink.svelte";
+  import ShareIcon from "./icons/ShareIcon.svelte";
+  import ListBulletsIcon from "./icons/ListBulletsIcon.svelte";
   import LoadingSpinner from "./LoadingSpinner.svelte";
   import Tooltip from "./Tooltip.svelte";
   import * as monaco from "monaco-editor";
@@ -69,13 +71,18 @@
     editor.layout();
   }
 
+  let examplesToggled = false;
+  function toggleExamples(): void {
+    examplesToggled = !examplesToggled;
+  }
+
   let showCopiedMessage = false;
   let existingCopyMessageTimeout: NodeJS.Timeout;
   function copyCode(): void {
     navigator.clipboard.writeText(window.location.href);
     showCopiedMessage = true;
     clearTimeout(existingCopyMessageTimeout);
-    existingCopyMessageTimeout = setTimeout(() => showCopiedMessage = false, 750);
+    existingCopyMessageTimeout = setTimeout(() => showCopiedMessage = false, 1000);
   }
 
   const switchCodeExample = (compressedCode: string) => () => {
@@ -137,13 +144,22 @@
 
 </script>
 
-<div>
-  <div class="flex text-lg justify-between items-center px-4 lg:px-16 py-4">
-    <ButtonLink onClick={compile} disabled={loadingState} className="w-full justify-center md:w-fit dark:disabled:bg-gray-variant-50 disabled:bg-[#9B9B9B]">Run</ButtonLink>
-    <div class="hidden md:flex gap-6">
-      <div class="relative">
-        <div class="peer cursor-pointer hover:text-color-accent px-6 py-2">Examples</div>
-        <div class="absolute z-10 left-1/2 -translate-x-1/2 hidden hover:grid peer-hover:grid grid-cols-2 px-2 py-2 rounded border border-gray-20 dark:border-purple-70 bg-white dark:bg-purple-90 w-96">
+<div class="overflow-x-hidden">
+  <div class="flex text-lg justify-between items-center px-4 lg:px-16 py-4 relative md:static">
+    <ButtonLink
+      onClick={compile}
+      disabled={loadingState}
+      className="w-full justify-center md:w-fit dark:disabled:bg-gray-variant-50 disabled:bg-[#9B9B9B] mr-4"
+    >
+      Run
+    </ButtonLink>
+    <div class="flex gap-6">
+      <div class="md:relative">
+        <button on:click={toggleExamples} class="peer cursor-pointer hover:text-color-accent md:px-6 py-2">
+          <span class="hidden md:inline-block">Examples</span>
+          <ListBulletsIcon class="text-color-dim md:hidden" />
+        </button>
+        <div class={`absolute z-10 left-0 md:left-1/2 md:-translate-x-1/2 ${examplesToggled ? "grid" : "hidden"} hover:grid peer-hover:grid grid-cols-2 px-2 py-2 rounded border border-gray-20 dark:border-purple-70 bg-white dark:bg-purple-90 w-screen md:w-96`}>
           {#each codeExamples as example}
             <button
               on:click={switchCodeExample(lzString.compressToEncodedURIComponent(example.code))}
@@ -155,8 +171,15 @@
         </div>
       </div>
       <div class="relative">
-        <button on:click={copyCode} class="peer cursor-pointer hover:text-color-accent pl-6 pr-5 py-2">Share</button>
-        <Tooltip>{showCopiedMessage ? "Copied!" : "Copy URL"}</Tooltip>
+        <button on:click={copyCode} class="peer cursor-pointer hover:text-color-accent md:pl-6 md:pr-5 py-2">
+          <span class="hidden md:inline-block">
+            Share
+          </span>
+          <ShareIcon class="text-color-dim md:hidden" />
+        </button>
+        <div class={`${showCopiedMessage ? "opacity-100" : "hidden md:opacity-0 md:block"} md:peer-hover:opacity-100 transition`}>
+          <Tooltip>{showCopiedMessage ? "URL copied!" : "Copy URL"}</Tooltip>
+        </div>
       </div>
     </div>
   </div>

src/components/Tooltip.svelte

@@ -1,4 +1,6 @@
-<div class="hidden peer-hover:block absolute z-10 top-full left-1/2 -translate-x-1/2 w-5 h-5 rotate-45 bg-gray-90"></div>
-<div class="hidden peer-hover:block absolute z-10 top-full left-1/2 -translate-x-1/2 text-white bg-gray-90 px-2 py-1 text-xs rounded whitespace-nowrap">
-  <slot />
+<div>
+  <div class="absolute z-10 top-full left-1/2 -translate-x-1/2 w-5 h-5 rotate-45 bg-gray-90"></div>
+  <div class="absolute z-10 top-full left-1/2 -translate-x-1/2 text-white bg-gray-90 px-2 py-1 text-xs rounded whitespace-nowrap">
+    <slot />
+  </div>
 </div>

src/components/icons/ArrowLeft.astro src/components/icons/ArrowLeftIcon.astrosrc/components/icons/ArrowLeft.astro renamed to src/components/icons/ArrowLeftIcon.astro

@@ -0,0 +1,43 @@
+<!--
+MIT License
+
+Copyright (c) 2020 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+-->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  fill="currentColor"
+  viewBox="0 0 256 256"
+  {...$$props}
+>
+  <path d="M80,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H88A8,8,0,0,1,80,64Zm136,56H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm0,64H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM44,52A12,12,0,1,0,56,64,12,12,0,0,0,44,52Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,116Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,180Z"></path>
+</svg>
+<!-- <svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  fill="#000000"
+  viewBox="0 0 256 256"
+  {...$$props}
+>
+  <path d="M76,64A12,12,0,0,1,88,52H216a12,12,0,0,1,0,24H88A12,12,0,0,1,76,64Zm140,52H88a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Zm0,64H88a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24ZM44,112a16,16,0,1,0,16,16A16,16,0,0,0,44,112Zm0-64A16,16,0,1,0,60,64,16,16,0,0,0,44,48Zm0,128a16,16,0,1,0,16,16A16,16,0,0,0,44,176Z"></path>
+</svg> -->