Move PaRI to past activities

_activities/pari.md

@@ -4,7 +4,8 @@ include: activity
 name: PaRI 
 type: Project
 leader: abdulrahman-azab
-phase: In Progress
+phase: Finished
+finished: true
 start: 2020-11-01
 end: 2021-10-31
 results: 

_includes/about.html

@@ -143,10 +143,13 @@ <h2>ORGANISATION</h2>
         user-community representatives, NeIC engages IT experts to participate in
         projects and operational activities. Projects are developed in accordance with
         the directions set out in the Nordic eScience Action Plan 2.0 (2015).
+
+      <a class="btn green-hover-btn" href="{% include baseurl %}/about/organisation">Organisational chart</a>
       </p>
     </div>
     <div class="right-org">
-      <div class="image-block"><img src="{% include baseurl %}/assets/images/organisation.png" alt="organisation" /></div>
+      <div class="image-block"><img src="{% include baseurl %}/assets/images/organisation.png" alt="organisation" />
+    </div>
     </div>
     <div class="clearfix"></div>
   </div>

_includes/organisation.html

@@ -0,0 +1,90 @@
+<section class="single-pagebanner" style="background-image: url({% include baseurl %}/assets/images/sin-act-banner.png);">
+</section>
+
+<section class="organisational-chart">
+    <div class="container">
+    <div class="row" style="position: relative"></div>
+
+        <h2>Organisational Chart</h2>
+        <script src="https://balkan.app/js/OrgChart.js"></script>
+
+            <div id="tree"/>
+
+        <script>
+        OrgChart.templates.ula = Object.assign({}, OrgChart.templates.ana);
+        OrgChart.templates.ula.padding = [5, 5, 5, 5];
+        OrgChart.templates.ula.field_0 = 
+        '<text data-width="145" data-text-overflow="multiline" style="font-size: 18px;" fill="#008c88" x="100" y="40">{val}</text>';
+        OrgChart.templates.ula.field_1 = 
+        '<text data-width="145" data-text-overflow="multiline" style="font-size: 14px;" fill="#4D4D4D" x="100" y="83">{val}</text>';
+        OrgChart.templates.ula.node = 
+        '<rect x="0" y="0" height="{h}" width="{w}" fill="#ffffff" stroke-width="1" stroke="#aeaeae"></rect>'
+        + '<line x1="0" y1="0" x2="250" y2="0" stroke-width="2" stroke="#008c88"></line>';
+        OrgChart.templates.ula.img_0 = 
+        '<clipPath id="{randId}"><circle cx="50" cy="60" r="40"></circle></clipPath>'
+        + '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="20" width="80" height="80"></image>';
+        OrgChart.templates.ula.nodeMenuButton = 
+        '<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,105)" data-ctrl-n-menu-id="{id}">'
+        + '<rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>'
+        + '<circle cx="0" cy="0" r="2" fill="#AEAEAE"></circle>'
+        + '<circle cx="7" cy="0" r="2" fill="#AEAEAE"></circle>'
+        + '<circle cx="14" cy="0" r="2" fill="#AEAEAE"></circle>'
+        + '</g>';
+        OrgChart.SEARCH_PLACEHOLDER = "Search for person by name..."
+
+    window.onload = function () {
+
+        var timeout = null;
+        var chart = new OrgChart(document.getElementById("tree"), {
+            showXScroll: OrgChart.scroll.visible,
+            mouseScrool: OrgChart.action.xScroll,
+            nodeMouseClick: OrgChart.action.none,
+            scaleInitial: OrgChart.match.boundary,
+            template: "ula",            
+            enableSearch: false,
+            collapse: {
+                level: 2
+            },
+            nodeBinding: {
+                field_0: 'name',
+                field_1: 'title',
+                img_0: 'img',
+            }, 
+        });
+
+        chart.on('field_0', function(sender, args){
+  	        var name = args.data["name"];
+					var link = args.data["link"];
+		args.value = '<a target="_blank" href="' + link + '">' + name +  '</a>';
+        });
+
+        chart.load([
+                { id: 1, name: "Gudmund Høst", title: "Director", img: "{% include baseurl %}/assets/images/people/gudmund-host.jpg", link: "{% include baseurl %}/people/gudmund-host" },
+                { id: 2, pid: 1, name: "Abdulrahman Azab", title: "Special Advisor", img: "{% include baseurl %}/assets/images/people/Abdulrahman_Azab2.jpg", link: "{% include baseurl %}/people/abdulrahman-azab" },
+                { id: 3, pid: 1, name: "Anja Wiesbrock", title: "Administrative Coordinator", img: "{% include baseurl %}/assets/images/people/anja-wiesbrock.png", link: "{% include baseurl %}/people/anja-wiesbrock" },
+                { id: 4, pid: 1, name: "Johanna Törnroos", title: "Senior Advisor", img: "{% include baseurl %}/assets/images/people/johanna tornroos.png", link: "{% include baseurl %}/people/johanna-tornroos" },
+                { id: 5, pid: 1, name: "Rob Pennington", title: "Special Advisor, Project Owner", img: "{% include baseurl %}/assets/images/people/Rob_Pennington.jpg", link: "{% include baseurl %}/people/rob-pennington" },
+                { id: 6, pid: 1, name: "Tomasz Malkiewicz", title: "Executive Manager, Project Owner", img: "{% include baseurl %}/assets/images/people/tomasz-malkiewicz.jpg", link: "{% include baseurl %}/people/tomasz-malkiewicz" },
+                { id: 7, pid: 1, name: "Vilma Häkkinen", title: "Communications Advisor", img: "{% include baseurl %}/assets/images/people/vilma-hakkinen.jpeg", link: "{% include baseurl %}/people/vilma-hakkinen" },
+
+                { id: 8, pid: 5, name: "Anne Claire Fouilloux", title: "Project Manager, NICEST2", img: "https://cdn.balkan.app/shared/empty-img-white.svg" },
+                { id: 9, pid: 5, name: "Anna Hagwall", title: "Project Manager, Heilsa Tryggvedottir", img: "{% include baseurl %}/assets/images/people/anna-hagwall.JPG"},
+                { id: 10, pid: 5, name: "Lene Krøl Andersen", title: "Project Manager, EOSC-Nordic", img: "{% include baseurl %}/assets/images/people/lene-krol-andersen.jpg" },
+                { id: 11, pid: 6, name: "Jarno Laitinen", title: "Project Manager, Puhuri", img: "{% include baseurl %}/assets/images/people/jarno-laitinen.jpg" },
+                { id: 12, pid: 6, name: "Mattias Wadenstein", title: "Activity Manager, Nordic Tier-1", img: "{% include baseurl %}/assets/images/people/mattias-wadenstein.jpg" },
+                { id: 13, pid: 6, name: "Radovan Bast", title: "Project Manager, CodeRefinery", img: "{% include baseurl %}/assets/images/people/radovan-bast.jpg" },
+            ])
+            window.addEventListener('resize', function () {
+            if (timeout) {
+                clearTimeout(timeout)
+            }
+                timeout = setTimeout(function () {
+                chart.fit();
+                }, 500);
+            })
+
+    };
+        </script>
+    </div>
+    </div>
+</section>

about/organisation.md

@@ -0,0 +1,4 @@
+---
+layout: master
+include: organisation
+---

assets/css/neic-styles.css

@@ -862,7 +862,7 @@ section.blue-box ul li{
 }
 .with-border {}
 section.organisation {
-    padding: 80px 0px;
+    padding: 80px 0px 20px;
 }
 section.organisation .left-org{
     width: 60%;
@@ -873,7 +873,7 @@ section.organisation .right-org{
     width: 40%;
     float: left;
 }
-section.organisation .right-org .image-block {    padding: 0px 0 0 30px;}
+section.organisation .right-org .image-block {    padding: 80px 0 0 30px;}
 section.organisation h2{
     margin: 0 0 30px;
     color: #008c88;
@@ -890,6 +890,50 @@ section.organisation p{
     letter-spacing: 1px;
     font-size: 13px;
 }
+section.organisation .btn{
+    text-transform: uppercase;
+    font-weight: 700;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+    margin-top: 30px;
+    line-height: 35px;
+    text-decoration: none;
+    color: #008c88;
+    text-align: center;
+    display: block;
+    width: 250px;
+    border: 2px solid #008c88;
+    border-radius: 0;
+}
+
+section.organisational-chart {
+    padding: 50px 0px 20px;
+}
+section.organisational-chart body{
+    width: 100%;
+    height: 100%;
+    padding: 0px;
+    margin: 0px;
+    overflow: hidden;
+    text-align: center;
+    font-family: Helvetica;
+  }
+
+section.organisational-chart h2{
+    margin: 0 0 27;
+    color: #008c88;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-family: 'Roboto', sans-serif;
+    letter-spacing: 4px;
+    font-size: 40px;
+}
+section.organisational-chart #tree{
+    height: 490px;
+    padding: 0px;
+    margin: 0px;
+  }
+
 section.wys-editer {
     padding: 50px 0px;
 }