fixes fixes fixes

app/static/css/partials/_film.scss

@@ -71,6 +71,7 @@ main > .film {
   max-width: var(--container-width);
   margin: auto;
   .info {
+    position: relative;
     margin-bottom: 32px;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -165,14 +166,19 @@ main > .film {
 
 .info-meta {
   display: inline-block;
-  margin: 0 auto;
+  margin: 40px auto;
-  position: absolute;
+  position: relative;
   max-width: 600px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%); 
   animation: fade_in 1s linear 0.4s forwards;
   opacity: 0;
+  line-height: 1.4;
+}
+@media screen and (max-width: 799px) {
+  .info-meta {
+    margin-top: 20px;
+    width: 70%;
+    transform: unset;
+  }
 }
 
 main > .film {
@@ -259,10 +265,12 @@ main > .film {
   font-size: 18px;
 }
 
-.film-play-padma {
+.film-play-pandora{
   font-family: "wrong font";
   a {
-    color: #ddd;
+    color: var(--color-link);
+    font-size: 24px;
+    font-weight: bold;
     text-decoration: none;
   }
 }

app/static/css/partials/_menu.scss

@@ -9,6 +9,7 @@
 
   @media screen and (max-width: 799px) {
     padding-top: calc(var(--spacing) * 1.6);
+    height: 98px;
   }
 
   @media screen and (min-width: 800px) {

app/static/js/about.js

@@ -1,58 +1,3 @@
-document.querySelectorAll('.accordion-checkbox').forEach(cbox => {
+pandoraAPI('getPage', {'name': 'about'}).then(response => {
-    cbox.addEventListener('change', function() {
+    document.querySelector('main .about').innerHTML = response.data.text
-        const label = this.previousElementSibling
-        const caret = label.querySelector('.text-about')
-        if (cbox.checked) {
-            caret.innerHTML = ''
-        } else {
-            caret.innerHTML = ''
-        }
-    })
-})
-
-// FIXME: maybe move to utils
-function getCookie(name) {
-    var cookieValue = null;
-    if (document.cookie && document.cookie !== '') {
-        var cookies = document.cookie.split(';');
-        for (var i = 0; i < cookies.length; i++) {
-            var cookie = cookies[i].trim()
-            // Does this cookie string begin with the name we want?
-            if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                break;
-            }
-        }
-    }
-    if (!cookieValue && name === 'csrftoken') {
-        var input = document.querySelector('input[name="csrfmiddlewaretoken"]')
-        if (input) {
-            cookieValue = input.value
-        }
-    }
-    return cookieValue;
-}
-
-document.getElementById('contact-form').addEventListener('submit', async function(event) {
-    // console.log('foobar')
-    event.preventDefault()
-    let data = new FormData()
-    data.append('email', document.getElementById('input-email').value)
-    data.append('message', document.getElementById('input-msg').value)
-    data.append('csrfmiddlewaretoken', getCookie('csrftoken'))
-    document.getElementById('contact-container').innerHTML = '...'
-    let success;
-    try {
-        const response = await fetch('/polis+contact/', {
-            method: 'POST',
-            body: data
-        })
-        let resData = await response.json()
-        success = resData.success
-    } catch (e) {
-        console.log('error', e)
-        success = false
-    }
-    const thanksMsg = success ? 'Thanks for your message 謝謝您的訊息' : 'Failed to send message. Try again later.'
-    document.getElementById('contact-container').innerHTML = `<div class="alert">${thanksMsg}</div>`
 })

app/static/js/api.js

@@ -0,0 +1,21 @@
+var cache = cache || {}
+
+async function pandoraAPI(action, data) {
+    var url = pandoraURL + '/api/'
+    //var url = '/pandoraAPI/'
+    var key = JSON.stringify([action, data])
+    if (!cache[key]) {
+        var response = await fetch(url, {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                action: action,
+                data: data
+            })
+        })
+        cache[key] = await response.json()
+    }
+    return cache[key]
+}
+
+

app/static/js/ascroll.js

@@ -1,26 +1,7 @@
-var cache = cache || {}
 var layer = 'keywords'
 var imageResolution = 480
 var videoExtension
 
-async function pandoraAPI(action, data) {
-    var url = pandoraURL + '/api/'
-    //var url = '/pandoraAPI/'
-    var key = JSON.stringify([action, data])
-    if (!cache[key]) {
-        var response = await fetch(url, {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-                action: action,
-                data: data
-            })
-        })
-        cache[key] = await response.json()
-    }
-    return cache[key]
-}
-
 function setVideoSrc(video, src) {
     var ext
     if (!videoExtension) {

app/static/js/play.js

@@ -1,26 +1,7 @@
-var cache = cache || {}
 var layer = 'keywords'
 var imageResolution = 480
 var videoExtension
 
-async function pandoraAPI(action, data) {
-    var url = pandoraURL + '/api/'
-    //var url = '/pandoraAPI/'
-    var key = JSON.stringify([action, data])
-    if (!cache[key]) {
-        var response = await fetch(url, {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-                action: action,
-                data: data
-            })
-        })
-        cache[key] = await response.json()
-    }
-    return cache[key]
-}
-
 function setVideoSrc(video, src) {
     var ext
     if (!videoExtension) {

app/templates/about.html

@@ -7,5 +7,9 @@
 {% endblock %}
 
 {% block end %}
+	<script>
+	var pandoraURL =  "{{ pandora_url }}";
+	</script>
+    <script src="{% static 'js/api.js' %}"></script>
     <script src="{% static 'js/about.js' %}"></script>
 {% endblock %}

app/templates/film.html

@@ -93,7 +93,7 @@ body {
 			{% endfor %}
 		</div>
 		<div class="play">
-			<div class="film-play-padma"><a href="{{ film.pandora_url }}" target="_blank">Open in Archive</a></div>
+			<div class="film-play-pandora"><a href="{{ film.pandora_url }}" target="_blank">Open in Archive</a></div>
 		</div>
 		{% if film.related_texts.exists %}
 		<div class="texts">

app/templates/film_play.html

@@ -7,5 +7,6 @@
 	var config = {{ config | safe }};
 	var pandoraURL = "{{ pandora_url }}";
 </script>
-<script src="/static/js/play.js?1"></script>
+<script src="{% static 'js/api.js' %}"></script>
+<script src="{% static 'js/play.js' %}"></script>
 {% endblock %}

app/templates/text.html

@@ -39,6 +39,7 @@
 	var config = {{ text.json | safe }};
 	var pandoraURL = "{{ pandora_url }}";
 </script>
+<script src="/static/js/api.js?2021112223"></script>
 {% if text.data.view == 'player' %}
 <script src="/static/js/player.js?2021112223"></script>
 {% else %}

app/text/views.py

@@ -43,6 +43,7 @@ def page(request, slug=''):
 
 def about(request):
     context = {}
+    context['pandora_url'] = settings.DEFAULT_PANDORA_API.replace('/api/', '')
     return render(request, 'about.html', context)
 
 def texts(request):