draft version of feedback template

NatLibFi · Aug 22, 2023 · 77322da · 77322da
1 parent 1243ab3
commit 77322da
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 19 deletions.
diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
@@ -6,6 +6,10 @@
   --secondary-medium-color: #b8c9db;
   --light-color: #f2f5f7;
   --white-color: #ffffff;
+  --feedback-form-bg: var(--white-color);
+  --feedback-form-text: var(--dark-color);
+  --feedback-form-input: var(--light-color);
+  --feedback-form-button-bg: var(--dark-color);
 
   /* Font definitions */
   --font-size: 14px;
@@ -103,7 +107,7 @@ body {
     color: var(--topbar-text-1);
   }
 
-  #topbar.vocabpage, #topbar.termpage, #topbar.infopage, #topbar.feedbackpage {
+  #topbar.vocabpage, #topbar.termpage, #topbar.infopage {
     background-color: var(--topbar-bg-2);
     color: var(--topbar-text-2);
   }
@@ -112,7 +116,7 @@ body {
     color: var(--topbar-text-1) !important;
   }
 
-  #topbar.vocabpage a, #topbar.termpage a, #topbar.infopage a, #topbar.feedbackpage a {
+  #topbar.vocabpage a, #topbar.termpage a, #topbar.infopage a {
     color: var(--topbar-text-2) !important;
   }
 
@@ -465,11 +469,11 @@ body {
     background-image: none;
   }
 
-  .select-wrapper { /* Also used in feedback form */
+  .select-wrapper {
     position: relative;
   }
 
-  .select-wrapper::after { /* Also used in feedback form */
+  .select-wrapper::after {
     color: var(--vocab-text);
     content: '﹀';
     font-size: 20px;
@@ -562,18 +566,17 @@ body {
     font-size: 10px;
   }
 
-  /***** Main container infopage & feedbackpage *****/
-  #main-container.infopage, #main-container.feedbackpage {
+  /***** Main container infopage *****/
+  #main-container.infopage {
     background-color: var(--main-bg-3);
     color: var(--infopage-text);
     padding: 4rem 0;
   }
 
-  #main-container.infopage .container, #main-container.feedbackpage .container {
+  #main-container.infopage .container {
     padding: 0 12rem;
   }
 
-  /*** Main container infopage ***/
   #main-container.infopage {
     background-image: var(--infopage-stripes);
     background-repeat: no-repeat;
@@ -587,26 +590,37 @@ body {
     font-weight: bold;
   }
 
-  /*** Main container feedbackpage ***/
+  /*** Feedback page ***/
+
+/*
   #main-container.feedbackpage {
     background-image: var(--feedbackpage-stripes);
     background-repeat: no-repeat;
     background-size: 650px;
     background-position: var(--feedbackpage-stripes-pos);
   }
+*/
+
 
   #feedback-form {
-    background-color: var(--feedback-form-bg);
-    color: var(--feedback-form-text);
-    padding: 2.5rem 2rem 5rem;
+    max-width: 50rem;
   }
 
-  #feedback-form label {
+  #feedback-form button {
+    background-color: var(--feedback-form-button-bg);
+    border: none;
+    border-radius: 0;
     font-weight: bold;
+    float: right;
+  }
+
+  #feedback-form {
+    background-color: var(--feedback-form-bg);
+    color: var(--feedback-form-text);
   }
 
   #feedback-form input, #feedback-form select, #feedback-form textarea {
-    background-color: var(--feedback-form-input);
+    background-color: var(--feedback-form-bg);
     border: none;
     border-radius: 0;
   }
@@ -619,12 +633,10 @@ body {
     margin-bottom: 4rem;
   }
 
-  #feedback-form button {
-    background-color: var(--feedback-form-button-bg);
-    border: none;
-    border-radius: 0;
+
+
+  #feedback-form label {
     font-weight: bold;
-    float: right;
   }
 
   #feedback-form select {

diff --git a/src/view/feedback.twig b/src/view/feedback.twig
@@ -0,0 +1,48 @@
+{% extends "base-template.twig" %}
+
+{% block title %}: "Feedback"{% endblock %}
+{% block content %}
+
+  <div id="feedback-form" class="mx-auto" style="max-width: 50rem">
+    {% if feedback_sent %}
+    <h2>"Feedback has been sent!"</h2>
+    <p id="feedback-thanks">"Thank you for your feedback"</p>
+
+    {% else %}
+    <h2>"Contact us!"</h2>
+    <p class="py-3">"feedback_enter_name_email"</p>
+    <div id="feedback-content" class="p-3">
+      <form id="feedback-fields" method="post" action="{% if request.vocab %}{{request.vocab.id}}/{% endif %}{{ request.lang }}/feedback">
+        {% if vocabList -%}
+        <div class="mb-4">
+          <label for="select-vocabulary">Vocabulary</label>
+          <select id="select-vocabulary" class="form-select" aria-label="Select a vocabulary">
+            <option>"Not to a specific vocabulary"</option>
+            {% for option in vocabList %}<option value="{{ option.id }}">{{ option.title }}</option>{% endfor %}
+          </select>
+        </div>
+        {% endif -%}
+        <div class="mb-4">
+          <label for="name" class="form-label">"Name:"</label>
+          <input id="name" class="form-control" type="text" size="40" name="name" placeholder="Enter your name">
+        </div>
+        <div class="mb-4">
+          <label for="email" class="form-label">"E-mail:"</label>
+          <input id="email" class="form-control" type="text" size="40" name="email" placeholder="Enter your e-mail address">
+        </div>
+        <div class="mb-4">
+          <label for="msgsubject" class="form-label">"Subject:" *</label>
+          <input id="msgsubject" class="form-control" type="text" size="40" name="msgsubject" placeholder="Write a subject" >
+        </div>
+        <div class="mb-4">
+          <label for="message" class="form-label">"Message:" *</label>
+          <textarea id="message" class="form-control" name="message"></textarea>
+        </div>
+        {{ honeypot.generate('item-description', 'user-captcha')|raw }}
+        <button type="submit" class="btn btn-primary" id="send-feedback">"Send feedback"</button>
+        {% if not feedback_sent %}<p>* "Value is required and can not be empty"</p>{% endif %}
+      </form>
+    {% endif -%}
+    </div>
+  </div>
+{% endblock %}