feat(backlog): usability improvements, navigation fixes, and github edit buttons

.gitignore

@@ -31,4 +31,5 @@ yarn.lock
 
 # Local Netlify folder
 .netlify
-.env
+.env
+.atl/

common-theme/assets/scripts/solo-view.js

@@ -141,6 +141,9 @@ class SoloView extends HTMLElement {
   }
 
   handleKeydown = (event) => {
+    if (event.target.closest('input, textarea, select, [contenteditable]')) {
+      return;
+    }
     if (event.key === "ArrowLeft") {
       this.navigateBack(event);
     }

common-theme/assets/styles/04-components/block.scss

@@ -89,4 +89,50 @@ ul.c-block, ol.c-block, li.c-block {
     width: 100%;
     height: 90vh;
   }
+
+  &__actions {
+    position: relative;
+    display: inline-block;
+
+    summary {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+
+    ul {
+      position: absolute;
+      right: 0;
+      top: 100%;
+      background: var(--theme-color--paper);
+      border: var(--theme-border);
+      border-radius: 4px;
+      padding: var(--theme-spacing--1) var(--theme-spacing--2);
+      list-style: none;
+      margin: var(--theme-spacing--1) 0 0 0;
+      z-index: 10;
+      min-width: 130px;
+      box-shadow: var(--theme-box-shadow--slim);
+
+      li {
+        margin: var(--theme-spacing--1) 0;
+      }
+
+      a {
+        font-size: var(--theme-type-size--6);
+        text-decoration: none;
+        display: block;
+        color: var(--theme-color--ink);
+        white-space: nowrap;
+
+        &:hover {
+          color: var(--theme-color--pop);
+        }
+      }
+    }
+  }
 }

common-theme/assets/styles/04-components/issue.scss

@@ -11,6 +11,11 @@
     h3 {
       font-size: var(--theme-type-size--4);
     }
+
+    hr {
+      margin: var(--theme-spacing--6) 0;
+      max-width: 100%;
+    }
   }
 
   &__labels {

common-theme/layouts/partials/block/actions.html

@@ -0,0 +1,58 @@
+{{ $block := .block }}
+{{ $blockData := .blockData }}
+{{ $filePath := "" }}
+
+{{ if $block }}
+  {{ if $block.File }}
+    {{ $filename := $block.File.Filename }}
+    {{ if strings.Contains $filename "common-content" }}
+      {{ $filePath = index (findRE "common-content/.*" $filename 1) 0 }}
+    {{ else if strings.Contains $filename "org-cyf-guides" }}
+      {{ $filePath = index (findRE "org-cyf-guides/.*" $filename 1) 0 }}
+    {{ else if strings.Contains $filename "common-theme" }}
+      {{ $filePath = index (findRE "common-theme/.*" $filename 1) 0 }}
+    {{ else if strings.Contains $filename "org-cyf" }}
+      {{ $filePath = index (findRE "org-cyf/.*" $filename 1) 0 }}
+    {{ else if strings.Contains $filename "common-docs" }}
+      {{ $filePath = index (findRE "common-docs/.*" $filename 1) 0 }}
+    {{ else }}
+      {{ $filePath = $block.File.Path }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+
+{{ $editUrl := "" }}
+{{ $issueUrl := "" }}
+
+{{ if $filePath }}
+  {{ $repoUrl := .Site.Params.repo | default "https://github.com/CodeYourFuture/curriculum/" }}
+  {{ $editUrl = printf "%sedit/main/%s" $repoUrl $filePath }}
+  {{ $issueUrl = printf "%sissues/new?title=Feedback+on:+%s&body=Block+source:+%s" $repoUrl (urlquery $block.Title) (urlquery $filePath) }}
+{{ else if eq $blockData.type "readme" }}
+  {{ $editUrl = .html_url }}
+  {{ if $editUrl }}
+    {{ $editUrl = replace $editUrl "blob/main" "edit/main" }}
+    {{ $repoUrl := .Site.Params.repo | default "https://github.com/CodeYourFuture/curriculum/" }}
+    {{ $issueUrl = printf "%sissues/new?title=Feedback+on:+%s&body=Readme+source:+%s" $repoUrl (urlquery $blockData.name) (urlquery .html_url) }}
+  {{ end }}
+{{ end }}
+
+{{ if or $editUrl $issueUrl }}
+<details class="c-block__actions">
+  <summary class="e-button e-button--icon" title="Block Options">
+    ⚙️
+  </summary>
+  <ul>
+    {{ if $editUrl }}
+    <li>
+      <a href="{{ $editUrl }}" target="_blank" rel="noopener noreferrer">✏️ Edit on GitHub</a>
+    </li>
+    {{ end }}
+    {{ if $issueUrl }}
+    <li>
+      <a href="{{ $issueUrl }}" target="_blank" rel="noopener noreferrer">💬 Report Issue</a>
+    </li>
+    {{ end }}
+  </ul>
+</details>
+{{ end }}

common-theme/layouts/partials/block/local.html

@@ -16,7 +16,10 @@
         id="{{ $blockData.name |urlize }}">
         {{ $block.Title }}
       </h2>
-      {{ partial "time.html" . }}
+      <div style="display: flex; align-items: center; gap: var(--theme-spacing--1);">
+        {{ partial "time.html" . }}
+        {{ partial "block/actions.html" (dict "block" $block "blockData" $blockData "Site" site) }}
+      </div>
     </header>
     {{ if or $block.Params.Objectives $block.Params.Tasks }}
       <details open>

common-theme/layouts/partials/block/readme.html

@@ -26,7 +26,10 @@
         id="{{ $blockData.name |urlize }}">
         <a href="{{ $response.html_url }}">🔗 {{ $blockData.name }}</a>
       </h2>
-      {{ partial "time.html" $pageContext }}
+      <div style="display: flex; align-items: center; gap: var(--theme-spacing--1);">
+        {{ partial "time.html" $pageContext }}
+        {{ partial "block/actions.html" (dict "block" nil "blockData" $blockData "html_url" $response.html_url "Site" site) }}
+      </div>
     </header>
     {{ $extractedObjectives := partial "strings/extract-github-objectives.html" (dict "URL" $blockData.api "body" $decodedContent) }}
     {{ if gt (len $extractedObjectives) 0 }}