expanding member view to add meta tags

fet2020/members/views.py

@@ -110,7 +110,7 @@ def profile_view(request, member_id=None):
         "jobs": jobs,
     }
 
-    return render(request, 'members/index.html', context)
+    return render(request, 'members/member.html', context)
 
 
 class MemberViewSet(viewsets.ModelViewSet):

fet2020/templates/members/member.html

@@ -0,0 +1,14 @@
+{% extends 'members/member_layout.html' %}
+{% block extraheader %}
+<meta content="{{member.image.url}}" property="og:image">
+<meta content="{{ member.firstname }}" property="og:profile:first_name">
+<meta content="{{ member.surname }}" property="og:profile:last_name">
+<meta content="profile" property="og:type">
+
+{% endblock %}
+
+{% block members_content %}
+        <div class="padding-top-1 padding-left-1 padding-bottom-1 padding-right-1" style="background-color: white;">
+        {% include 'members/partials/_member_details.html' %}
+        </div>
+{% endblock %}

fet2020/templates/members/member_layout.html

@@ -0,0 +1,87 @@
+{% extends 'layout.html' %}
+
+
+{% block content %}
+
+{% load softhyphen_tags %}
+
+<style>
+.button {
+    background-color: gray;
+
+}
+.button:hover {
+    background-color: black;
+}
+.memb {
+    background-color: darkgray;
+}
+.active {
+    background-color: black;
+}
+</style>
+
+<div class="grid-container">
+
+    <div class="grid-x grid-padding-x padding-top-1">
+
+        {% for job in pinned_job_groups %}
+            <div class="cell large-2 medium-4 small-6">
+                <a class="button expanded {% if job.slug in request.path %} active {% endif %}" href="{% url 'jobs' job.slug %}">
+                    {{job.name}}
+                </a>
+                </div>
+        {% endfor %}
+
+        {% for job in unpinned_job_groups %}
+            <div class="cell large-2 medium-4 small-6">
+                <a class="button expanded {% if job.slug in request.path %} active {% endif %}" href="{% url 'jobs' job.slug %}">
+                    {{ job.name|softhyphen|safe }}
+                </a>
+            </div>
+        {% endfor %}
+
+        <div class="cell large-2 medium-4 small-6"><a class="button memb expanded {% if '/members/P' == request.path %} active {% endif %}" href="/members/P">Pension</a></div>
+        <div class="cell large-2 medium-4 small-6"><a class="button memb expanded {% if '/members/' == request.path %} active {% endif %}" href="/members">Alle Mitglieder</a></div>
+
+    </div>
+
+    {% if description %}
+        <div class="grid-x">
+            <div class="cell padding-top-1 padding-left-1 padding-right-1" style="background-color: white; text-align: justify;">
+            {{ description|safe }}
+            </div>
+        </div>
+    {% endif %}
+
+    {% block members_content %}
+
+    {% endblock %}
+</div>
+
+{% endblock %}
+
+<script>
+// Get the container element
+var btnContainer = document.getElementById("grid-container");
+
+// Get all buttons with class="btn" inside the container
+var grid = btnContainer.getElementsByClassName("grid-x");
+var cell = grid.getElementsByClassName("cell");
+var btns = cell.getElementsByClassName("button");
+
+// Loop through the buttons and add the active class to the current/clicked button
+for (var i = 0; i < btns.length; i++) {
+  btns[i].addEventListener("click", function() {
+    var current = document.getElementsByClassName("active");
+
+    // If there's no active class
+    if (current.length > 0) {
+      current[0].className = current[0].className.replace(" active", "");
+    }
+
+    // Add the active class to the current/clicked button
+    this.className += " active";
+  });
+}
+</script>