social media page in english added

templates/layout_english.html

@@ -22,7 +22,7 @@
             <a class="navbarItem {{luokka0}}" href="/eng">Main</a>
             <a class="navbarItem {{luokka1}}" href="/bookus">Book us</a>
             <a class="navbarItem {{luokka2}}" href="/joinsossu">Join SOSSu</a>
-            <a class="navbarItem {{luokka3}}" href="/ajankohtaista">Social Media</a>
+            <a class="navbarItem {{luokka3}}" href="/socialmedia">Social Media</a>
           </div>
           <div id="mobile-button" class="navbarItem"><img src="/static/menu.png"></div>
           <a href="/" class="navbarItem"><img src="/static/suomi.png"></a>

templates/social_media_en.html

@@ -0,0 +1,58 @@
+{% extends "layout_english.html" %}
+
+{% block head %}
+  {{ super() }}
+  <link rel="stylesheet" href="/static/ajankohtaista.css">
+{% endblock %}
+
+{% block content %}
+  {{ super() }}
+  {% for entry in media %}
+    <div class="some-entry">
+      <a href="{{ entry["permalink"] }}"
+         target="_blank"
+         style="position: relative">
+        <img class="some-picture-overlay"
+             src="static/ig-logo.svg">
+        <img class="some-picture"
+             alt="{{ entry["caption"] }}"
+          {% if entry["media_type"] == "IMAGE"
+          or entry["media_type"] == "CAROUSEL_ALBUM" %}
+             src={{ entry["media_url"] }}
+          {% elif entry["media_type"] == "VIDEO" %}
+             src={{ entry["thumbnail_url"] }}
+          {% endif %}>
+      </a>
+      <div class="some-info">
+        <div class="some-timestamp">
+          <small>{{ entry["timestamp"] }} </small>
+        </div>
+        <div class="some-caption" id="short">
+          {{ entry["caption"] }}
+        </div>
+        <div class="some-caption" id="long" onclick="showless(this)">
+          {{ entry["caption"] }}
+        </div>
+        <div class="some-caption" id="dummy">
+          {{ entry["caption"] }}
+          <div></div>
+        </div>
+        <div class="some-showmore" onclick="showmore(this)">
+          <small> näytä lisää </small>
+        </div>
+      </div>
+    </div>
+  {% endfor %}
+  <script>
+    function showmore(elem) {
+      let captionLong = elem.parentNode.querySelector(".some-caption#long");
+      captionLong.style.display = "block";
+      console.log("showmore");
+    }
+
+    function showless(elem) {
+      elem.style.display = "none";
+      console.log("showless");
+    }
+  </script>
+{% endblock %}