Added Filter buttons onto Ecosystem

blurryhumanface · blurryhumanface · commit 33b8718d98a5 · 2021-07-19T11:29:29.000+01:00
diff --git a/_includes/ecosystem-buttons.html b/_includes/ecosystem-buttons.html
@@ -0,0 +1,27 @@
+<p><i>Organisation</i></p>
+<p class="card btn btn-primary check-container">
+  <input id="check-news" class="stretched-link" type="checkbox" data-toggle="collapse" href=".NetFPGA-collapse" role="button" aria-controls="newsCollapse" checked>
+  <label class="check-label" for="check-news">NetFPGA</label>
+</p>
+<p class="card btn btn-primary check-container">
+  <input id="check-events" class="stretched-link" type="checkbox" data-toggle="collapse" href=".OSNT-collapse" role="button" aria-controls="eventsCollapse" checked>
+  <label class="check-label" for="check-events">OSNT</label>
+</p>
+<p><i>Organisation Type</i></p>
+<p class="card btn btn-primary check-container">
+  <input id="check-events" class="stretched-link" type="checkbox" data-toggle="collapse" href=".academic-collapse" role="button" aria-controls="eventsCollapse" checked>
+  <label class="check-label" for="check-events">Academic</label>
+</p>
+<p class="card btn btn-primary check-container">
+  <input id="check-news" class="stretched-link" type="checkbox" data-toggle="collapse" href=".non-profit-collapse" role="button" aria-controls="newsCollapse" checked>
+  <label class="check-label" for="check-news">Non-Profit</label>
+</p>
+<p class="card btn btn-primary check-container">
+  <input id="check-events" class="stretched-link" type="checkbox" data-toggle="collapse" href=".vendor-collapse" role="button" aria-controls="eventsCollapse" checked>
+  <label class="check-label" for="check-events">Vendor</label>
+</p>
+<p><i>Product Type</i></p>
+<p class="card btn btn-primary check-container">
+  <input id="check-news" class="stretched-link" type="checkbox" data-toggle="collapse" href=".product-collapse" role="button" aria-controls="newsCollapse" checked>
+  <label class="check-label" for="check-news">Product</label>
+</p>
diff --git a/_layouts/ecosystem-layout.html b/_layouts/ecosystem-layout.html
@@ -0,0 +1,14 @@
+---
+layout: default
+---
+
+<div class="row">
+  <div class="offset-2 col-md-8 col-lg-8 mb-5">
+    {{ content }}
+  </div>
+  <div class="column col-md-2 col-lg-2 mt-5">
+    <div class="mt-5">
+      {% include ecosystem-buttons.html %}
+    </div>
+  </div>
+</div>
diff --git a/_posts/ecosystem/2021-07-15-NetFPGA.md b/_posts/ecosystem/2021-07-15-NetFPGA.md
@@ -7,14 +7,16 @@ category:
 description: A line-rate, flexible, and open platform for research
 organisation: NetFPGA
 organisation-logo: ./assets/images/thumbnail.png
+organisation-type: academic
 product-repo: https://github.com/NetFPGA/NetFPGA-public
 product-site: https://netfpga.org
+product-image: ./assets/images/Boards/NetFPGA-SUME.jpg
 primary-contact-name: Andrew Moore
 primary-contact-email: enquiries@netfpga.org
 secondary-contact-name:
 secondary-contact-email:
 seller: Xilinx
-seller-url:
+seller-url: https://www.xilinx.com/products/boards-and-kits/alveo.html
 seller-email:
 seller-phone:
 ---
diff --git a/_posts/ecosystem/2021-07-16-IIsy.md b/_posts/ecosystem/2021-07-16-IIsy.md
@@ -7,6 +7,7 @@ category:
 description:
 organisation:
 organisation-logo:
+organisation-type:
 product-repo: https://github.com/ox-computing/IIsy
 product-site:
 primary-contact-name:
diff --git a/_posts/ecosystem/2021-07-16-In-Networking-Computing-on-Demand.md b/_posts/ecosystem/2021-07-16-In-Networking-Computing-on-Demand.md
@@ -7,6 +7,7 @@ category:
 description:
 organisation:
 organisation-logo:
+organisation-type:
 product-repo:
 product-site: https://github.com/cucl-srg/INC-ondemand
 primary-contact-name:
diff --git a/_posts/ecosystem/2021-07-16-MTPSA.md b/_posts/ecosystem/2021-07-16-MTPSA.md
@@ -7,6 +7,7 @@ category:
 description:
 organisation:
 organisation-logo:
+organisation-type:
 product-repo: https://github.com/mtpsa/
 product-site:
 primary-contact-name:
diff --git a/_posts/ecosystem/2021-07-16-OSNT.md b/_posts/ecosystem/2021-07-16-OSNT.md
@@ -7,6 +7,7 @@ category:
 description:
 organisation: OSNT
 organisation-logo:
+organisation-type: academic
 product-repo: https://github.com/NetFPGA/OSNT-SUME-live
 product-site: https://www.osnt.org/
 primary-contact-name:
diff --git a/_posts/ecosystem/2021-07-16-P4DNS.md b/_posts/ecosystem/2021-07-16-P4DNS.md
@@ -7,6 +7,7 @@ category:
 description:
 organisation:
 organisation-logo:
+organisation-type:
 product-repo: https://github.com/cucl-srg/P4DNS
 product-site:
 primary-contact-name:
diff --git a/_posts/ecosystem/2021-07-16-PTA.md b/_posts/ecosystem/2021-07-16-PTA.md
@@ -7,6 +7,7 @@ category:
 description:
 organisation:
 organisation-logo:
+organisation-type:
 product-repo: https://github.com/pta-project-repo/pta-artifacts
 product-site:
 primary-contact-name:
diff --git a/_posts/ecosystem/example-ecosystem.md b/_posts/ecosystem/example-ecosystem.md
@@ -7,8 +7,10 @@ category: software
 description: this is an example
 organisation: NetFPGA
 organisation-logo: ./assets/images/thumbnail.png
+organisation-type: academic
 product-repo: https://github.com/NetFPGA/NetFPGA-public
 product-site: https://netfpga.org
+product-image: ./assets/images/Boards/NetFPGA-SUME.jpg
 primary-contact-name: Andrew Moore
 primary-contact-email: enquiries@netfpga.org
 secondary-contact-name:
@@ -27,7 +29,10 @@ category: what kind of product/project/service it is
 description: A description of the product/project/service
 organisation: The name of the organisation
 organisation-logo: the url to the organisation's logo
-product-repo: the link to the product/project/service's public repo/website
+organisation-type: The type of organisation it is (Academic, Non-profit or Vendor)
+product-repo: the link to the product/project/service's public repo
+product-site: the link to the product/project/service's website
+product-image: if provided an image of the product
 primary-contact-name: The name provided from the submission form
 primary-contact-email: The email provided from the submission form
 secondary-contact-name: If provided from the submission form
diff --git a/assets/css/_sass/custom.scss b/assets/css/_sass/custom.scss
@@ -198,3 +198,8 @@ a {
   height: 50px;
   width: auto;
 }
+
+.product-img {
+  height: 200px;
+  width: auto;
+}
diff --git a/ecosystem.html b/ecosystem.html
@@ -1,5 +1,5 @@
 ---
-layout: page
+layout: ecosystem-layout
 ---
 
 <h1>The NetFPGA Ecosystem</h1>
@@ -9,7 +9,7 @@ <h1>The NetFPGA Ecosystem</h1>
   {% if post.posttype == "ecosystem" %}
     <div class="row">
       <div class="col-12 col-md-12 col-lg-12 mb-5">
-        <div class="card border-1 h-100">
+        <div class="card border-1 h-100 collapse show {{ post.organisation }}-collapse {{ post.type }}-collapse {{ post.organisation-type }}-collapse">
           <div class="card-body">
             <div class="row">
               <h2 class="card-title col-6">{{post.title}}</h2>
@@ -21,9 +21,18 @@ <h2 class="card-title col-6">{{post.title}}</h2>
             </div>
             <br>
             <h3><i>{{post.organisation}}</i></h3>
-            {% if condition %}
+            {% if post.category %}
             <p><b>Category:</b> {{post.category}}</p>
             {% endif %}
+            <div class="col-3">
+
+            </div>
+            {% if post.product-image %}
+              <img src="{{ post.product-image }}" alt="An image of the product" class="product-img col-6">
+            {% endif %}
+            <div class="col-3">
+
+            </div>
             <p>{{post.description}}</p>
             <br>
             <p>Contact {{post.organisation}} here: <a href="mailto:{{post.primary-contact-email}}">{{post.primary-contact-email}}</a></p>
@@ -53,11 +62,11 @@ <h3><i>{{post.organisation}}</i></h3>
           <div class="card-footer">
             <p class="mb-0">
               {% if post.product-repo %}
-                <a href="{{post.product-repo}}">Repository</a>
+                <a target="_blank" href="{{post.product-repo}}">Repository</a>
                 &nbsp
               {% endif %}
               {% if post.product-site %}
-                <a href="{{post.product-site}}">Website</a>
+                <a target="_blank" href="{{post.product-site}}">Website</a>
               {% endif %}
             </p>
           </div>
