Merge pull request #57 from posecode-dev/codex/refine-mobile-toolbar-hierarchy

Refine mobile toolbar hierarchy

Author: a-baran-orhan

playground/play.html

@@ -84,12 +84,14 @@
         </button>
         <a
           id="feedback"
-          href="mailto:hello@posecode.org?subject=Posecode%20Feedback"
+          href="https://github.com/posecode-dev/posecode/issues/new"
           class="btn ghost"
-          aria-label="Feedback"
-          title="Send feedback or report an issue"
+          target="_blank"
+          rel="noreferrer"
+          aria-label="Report an issue on GitHub"
+          title="Report an issue on GitHub"
         >
-          <span class="ico-feedback" aria-hidden="true"></span><span class="lbl">Feedback</span>
+          <span class="ico-github" aria-hidden="true"></span><span class="lbl">GitHub</span>
         </a>
         <button
           id="share"

playground/src/style.css

@@ -156,7 +156,7 @@ body {
 .btn .ico-link,
 .btn .ico-help,
 .btn .ico-plus,
-.btn .ico-feedback {
+.btn .ico-github {
   width: 14px;
   height: 14px;
   background: currentColor;
@@ -167,7 +167,7 @@ body {
 .btn:hover .ico-link,
 .btn:hover .ico-help,
 .btn:hover .ico-plus,
-.btn:hover .ico-feedback {
+.btn:hover .ico-github {
   opacity: 1;
 }
 .btn .ico-plus {
@@ -179,8 +179,8 @@ body {
 .btn .ico-help {
   --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
 }
-.btn .ico-feedback {
-  --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
+.btn .ico-github {
+  --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.57.1.78-.25.78-.55v-2.13c-3.2.7-3.88-1.36-3.88-1.36-.52-1.34-1.28-1.7-1.28-1.7-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.23-1.28-5.23-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.1 11.1 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.8 1.19 1.83 1.19 3.09 0 4.42-2.69 5.39-5.25 5.68.42.36.78 1.06.78 2.15v3.18c0 .3.21.65.79.54A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5Z'/%3E%3C/svg%3E");
 }
 
 .btn.primary {
@@ -1288,15 +1288,18 @@ select:hover {
   }
   /* Compact "How to use" + "Share" to icon-only so the controls fit one row. */
   #how-to,
+  #feedback,
   #share {
     flex: 0 0 auto;
     padding: 9px 13px;
   }
   #how-to .lbl,
+  #feedback .lbl,
   #share .lbl {
     display: none;
   }
   #how-to .ico-help,
+  #feedback .ico-github,
   #share .ico-link {
     width: 17px;
     height: 17px;
@@ -1435,7 +1438,12 @@ select:hover {
     justify-content: center;
   }
   #share {
-    grid-column: 2 / -1;
+    grid-column: 1 / 3;
+    grid-row: 2;
+  }
+  #feedback {
+    grid-column: 3;
+    grid-row: 2;
   }
   #share .lbl {
     display: inline;