Add #guid anchor link icon and refactor icon on the results page.

Author: knadh

site/lang.json

@@ -22,7 +22,7 @@
     "public.suggestContent": "Content",
     "public.suggestDefLang": "Definition language",
     "public.suggestDefsTitle": "Definitions",
-    "public.suggestEdit": "Suggest edit for \"{word}\"",
+    "public.suggestEdit": "Suggest an edit",
     "public.suggestEntryLang": "Entry language",
     "public.suggestPhones": "Phonetic notations (pronunciation)",
     "public.suggestPhonesPlaceholder": "eg: pɛts, pɛt (commma separated)",

site/results.html

@@ -6,16 +6,10 @@
     <div class="eight columns">
         <ol class="entries">
             {% for r in results.entries | slice(end=num_results) %}
-            <li class="entry" data-guid="{{ r.guid }}" data-head="{{ r.content | join(sep=", ") }}">
+            <li class="entry" id="{{ r.guid }}" data-guid="{{ r.guid }}" data-head="{{ r.content | join(sep=", ") }}">
                 <header class="head">
                     <div>
-                        <h3 class="title">{{ r.content | join(sep=", ") }}
-                            {% if consts.enable_submissions %}
-                                <a href="#" data-from="{{ r.guid }}" class="edit" title="{{ i18n.public_suggestEdit }}">
-                                    <img src="/static/edit.svg?v={{ asset_ver }}" alt="{{ i18n.public_suggestEdit }}">
-                                </a>
-                            {% endif %}
-                        </h3>
+                        <h3 class="title">{{ r.content | join(sep=", ") }}</h3>
 
                         {% if r.phones and r.phones | length > 0 %}
                             <span class="pronun">&#9834; {{ r.phones | join(sep=",") }}</span>
@@ -30,7 +24,14 @@ <h3 class="title">{{ r.content | join(sep=", ") }}
                                 {% endfor %}
                             </span>
                         {% endif %}
-                        <a href="#" title="Share screenshot" class="export" data-guid="{{ r.guid }}"><img src="/static/export.svg?v={{ asset_ver }}" alt="Share screenshot"></a>
+
+                        <div class="toolbar">
+                            {% if consts.enable_submissions %}
+                            <a href="#" data-from="{{ r.guid }}" class="edit" title="{{ i18n.public_suggestEdit }}"><img src="/static/edit.svg?v={{ asset_ver }}" alt="{{ i18n.public_suggestEdit }}"></a>
+                            {% endif %}
+                            <a href="#{{ r.guid }}" title="Share link" class="link"><img src="/static/link.svg?v={{ asset_ver }}" alt="Share link"></a>
+                            <a href="#" title="Share screenshot" class="export" data-guid="{{ r.guid }}"><img src="/static/export.svg?v={{ asset_ver }}" alt="Share screenshot"></a>
+                        </div>
                     </div>
                 </header>
 

site/static/edit.svg

@@ -1,4 +1,5 @@
 :root {
+  --bg: #fbfbfb;
   --primary: #111;
   --secondary: #333;
   --light: #666;
@@ -14,7 +15,7 @@
 }
 
 body {
-  background: #fbfbfb;
+  background: var(--bg);
   font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
   margin: 0;
   color: var(--primary);
@@ -277,6 +278,10 @@ button:hover,
   list-style-type: none;
 }
 
+.entries .entry:target {
+  outline: 3px solid var(--blue);
+}
+
 .entries .head {
   position: relative;
   margin-bottom: 10px;
@@ -370,16 +375,12 @@ button:hover,
   margin-right: 10px;
 }
 
-.entry .edit {
+.entry .defs .edit {
   padding: 3px 10px;
   margin-left: 15px;
   display: none;
   position: absolute;
   text-decoration: none;
-  z-index: 1000;
-  line-height: 1;
-  text-shadow: 0px 3px 3px #fff;
-  font-size: 0.8rem;
 }
 .entry .edit img {
   max-height: 12px;
@@ -409,6 +410,15 @@ button:hover,
   align-items: center;
   gap: 10px;
 }
+  .entries .meta a {
+    text-decoration: none;
+    display: inline-block;
+    margin-left: 5px;
+  }
+  .entries .meta .toolbar img {
+    max-height: 12px;
+    width: auto;
+  }
 
 .related .word {
   margin: 0 5px 8px 0;
@@ -448,10 +458,15 @@ button:hover,
 }
 
 .form-comments {
+  background: var(--bg);
   margin: 10px 0 45px 0;
   display: none;
   padding: 15px;
   clear: both;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 10;
 }
 
 .form-comments textarea {