feat(web-app): Add feedback button with internationalized tooltip

Close #525

Co-authored-by: Louis Tariot <[email protected]>
Co-authored-by: Erik Martin-Dorel <[email protected]>

Author: Louis Tariot

src/app/learnocaml_index_main.ml

@@ -642,8 +642,9 @@ let set_string_translations () =
   List.iter
     (fun (el, text) ->
        (Tyxml_js.To_dom.of_input el)##.placeholder := Js.string text)
-    placeholder_translations
-
+    placeholder_translations;
+  Manip.SetHTMLElement.title (find_component "learnocaml-main-feedback")
+    [%i"Send feedback to Learn-OCaml developers"]
 
 let () =
   Lwt.async_exception_hook := begin fun e ->

static/css/learnocaml_main.css

@@ -169,6 +169,20 @@ body {
 
 /* Large screen: two columns w/ menu in the left column */
 @media (min-width: 1000px) {
+  #learnocaml-main-toolbar a.btn {
+    margin-left: 17px;
+  }
+
+  #learnocaml-main-toolbar a.btn > img {
+    border: 1px #fff solid;
+    background: linear-gradient(to bottom, #bbb 0%, #888 100%);
+    border-radius: 5px;
+    padding: 5px;
+    width: 18px;
+    box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);
+    text-align: center;
+  }
+
   #learnocaml-main-toolbar {
     position: absolute;
     left: 0; top: 0; height: 60px; width: 360px;
@@ -181,6 +195,7 @@ body {
   #learnocaml-main-toolbar > button {
     display: none;
   }
+
   #learnocaml-main-toolbar::before {
     z-index: 1004;
     position: absolute;
@@ -215,6 +230,21 @@ body {
 }
 /* Medium screen: one column w/ popup menu */
 @media (max-width: 999px) {
+  #learnocaml-main-toolbar a.btn {
+    margin-left: 10px;
+  }
+
+  #learnocaml-main-toolbar a.btn > img {
+    border: 1px #fff solid;
+    background: linear-gradient(to bottom, #bbb 0%, #888 100%);
+    color: #fff;
+    border-radius: 5px;
+    padding: 5px;
+    width: 18px;
+    box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);
+    text-align: center;
+  }
+
   #learnocaml-main-toolbar {
     position: absolute;
     top: 0; left: 0px; right: 0px;
@@ -233,6 +263,7 @@ body {
     position: relative;
     display: block;
   }
+
   #learnocaml-main-toolbar > button > * {
     padding: 5px;
     color: #eee;
@@ -280,6 +311,17 @@ body {
 }
 /* Small screen: no button labels, thinner bars & buttons */
 @media (max-width: 549px) {
+  #learnocaml-main-toolbar a.btn > img {
+    border: 1px #fff solid;
+    background: linear-gradient(to bottom, #bbb 0%, #888 100%);
+    color: #fff;
+    border-radius: 4px;
+    padding: 3px;
+    width: 13px;
+    box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);
+    text-align: center;
+  }
+
   #learnocaml-main-panel,
   #learnocaml-main-content {
     top: 40px;

static/icons/icon_feedback.svg

@@ -25,6 +25,9 @@
       <div class="logo">
         <img src="/icons/logo_ocsf.svg">
         <span>Learn OCaml</span>
+        <a class="btn" href="https://github.com/learn-ocaml-community/teaching-feedback#readme" target = "_blank">
+          <img id="learnocaml-main-feedback" title="Send Feedback" src="/icons/icon_feedback.svg">
+        </a>
       </div>
     </div>
     <div id="learnocaml-main-panel" class="hidden">

static/index.html

@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: learn-ocaml ~dev\n"
-"PO-Revision-Date: 2022-12-29 00:17+0100\n"
+"PO-Revision-Date: 2023-04-18 19:58+0200\n"
 "Last-Translator: Erik Martin-Dorel <[email protected]>\n"
 "Language-Team: OCSF\n"
 "Language: french\n"
@@ -523,6 +523,10 @@ msgstr "Vous avez déjà un token ? Par ici !"
 msgid "Connect"
 msgstr "Se connecter"
 
+#: File "src/app/learnocaml_index_main.ml", line 631, characters 35-50
+msgid "Send feedback to Learn-OCaml developers"
+msgstr "Envoyer un commentaire aux développeurs Learn-OCaml"
+
 #: File "src/app/learnocaml_index_main.ml", line 638, characters 9-19 640,
 #: "src/app/learnocaml_teacher_tab.ml", 558, 22-32
 msgid "Nickname"
@@ -1084,3 +1088,4 @@ msgstr "Erreur inattendue:\n"
 
 #~ msgid "This session has been closed. You can close this tab."
 #~ msgstr "La session a été fermée. Vous pouvez fermer cet onglet."
+