Merge pull request 'feature/contact-ui' (#28) from feature/contact-ui into main

Reviewed-on: 0x2620/aab21#28

app/static/css/partials/_ascroll.scss

@@ -78,7 +78,7 @@
   .annotation-icon-wrapper {
     border: 3px solid rgba(#fff, 0.8);
     border-radius: 50%;
-    background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
+    background: var(--gradient-body);
     background-size: 300% 100%;
     width: 52px;
     height: 52px;

app/static/css/partials/_contact.scss

@@ -1,27 +1,53 @@
-main > .contact {
+.contact {
   max-width: var(--container-lg-width);
   margin: 0 auto;
-  padding: var(--spacing-2);
+  padding: var(--spacing) 0;
 
   h1 {
     font-size: 22px;
-    margin: 0 0 var(--spacing) 0;
+    font-weight: 700;
+    margin: 0 0 var(--spacing-2) 0;
+  }
+
+  label {
+    font-size: 18px;
+    display: block;
+    padding: 0 0 calc(var(--spacing) / 2) 0;
   }
 
   input[type=email], textarea {
-    border: 0;
     background: blue;
     color: red;
     font-size: 20px;
-    line-height: 1.3;
+    margin-bottom: var(--spacing-2);
   }
+
+  input[type=email], input[type=email], textarea {
+    border: 0;
+    line-height: 1.3;
+    display: block;
+    width: 100%;
+
+    @media screen and (min-width: 800px) {
+      width: 50%;
+    }
+  }
+
   textarea {
-    width: 500px;
     height: 300px;
   }
+
   input[type=submit] {
     border: 0;
-    background: green;
+    color: #fff;
+    background: var(--gradient-body);
+    font-size: 18px;
+    font-family: "noto_sans", sans-serif;
+    font-weight: 700;
+    padding: var(--spacing) var(--spacing-2);
+    display: block;
+    background-size: 400% 100%;
+    animation: background_animation 60s ease-in-out infinite, text_animation 60s ease-in-out infinite;
   }
 
 }

app/static/css/partials/_layout.scss

@@ -4,6 +4,8 @@
 	--bg-color-3: #ffff00;
 	--bg-color-4: #ff3399;
 
+    --gradient-body: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
+
     --color-link: #ee0;
 
     --spacing: 8px;
@@ -34,7 +36,7 @@
 }
 
 body.animated {
-    background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
+    background: var(--gradient-body);
     animation: background_animation 60s ease-in-out infinite;
     background-size: 400% 100%;
     color: #ddd;

app/templates/about.html

@@ -127,6 +127,31 @@
                     </div>
                 </div>
             </li>
+            <li>
+                <label for="bio-contact" class="accordion-title">
+                   <h3>Contact 聯絡</h3>
+                   <span class="accordion-caret animated-title"><span class="text">&#xe901;</span></span>
+                </label>
+                <input type="checkbox" id="bio-contact" class="accordion-checkbox">
+                <div class="accordion-content">
+                  <div class="contact">
+                    {% if submitted %}
+                        Thanks for your message
+                    {% else %}
+                    <form method="post">
+                        <label for="input-email">Your Email</label>
+                        <input name="email" type="email" id="input-email" required>
+                        
+                        <label for="input-msg">Message 訊息</label>
+                        <textarea name="message" id="input-msg" required></textarea>
+                        
+                        <input type="submit" value="Send Message 傳送訊息">
+                        {% csrf_token %}
+                    </form>
+                    {% endif %}
+                  </div>
+                </div>
+            </li>
         </ul>
     </div>
     <br>
@@ -135,7 +160,6 @@
   <p>Project "<a href="/polis">Phantas.ma/polis</a>" is organized by National Taiwan Museum of Fine Arts, supervised by the Ministry of Culture, and is co-organized by the Cultural Taiwan Foundation and in partnership with SEA Plateau.</p>
 
   <p>本計畫由國立臺灣美術館策劃，文化部指導、財團法人文化臺灣基金會支持、SEA plateaus協力。</p>
-
 </div>
 {% endblock %}
 

app/templates/contact.html

@@ -8,15 +8,12 @@
 	{% else %}
 	<h1>Contact 聯絡</h1>
 	<form method="post">
-		<label>
+		<label for="input-email">Your Email</label>
-			Your Email:
+		<input name="email" type="email" id="input-email" required>
-			<input name="email" type="email" required>
+		
-		</label>
+		<label for="input-msg">Message 訊息</label>
-		<br>
+		<textarea name="message" id="input-msg" required></textarea>
-		<label>Message 訊息:<br>
+		
-			<textarea name="message" required></textarea>
-		</label>
-		<br>
 		<input type="submit" value="Send Message 傳送訊息">
 		{% csrf_token %}
 	</form>