From 4ef34a8f63d9afa3a4dab180f1b850518ab43ce3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E7=BA=A2=E8=B1=86?=
 <55517494+ormissia@users.noreply.github.com>
Date: Sat, 13 Mar 2021 23:37:47 +0800
Subject: [PATCH] Display project card technology tags (#243)

* Display project card technology tags

* Fix tag CSS

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
---
 exampleSite/data/bn/sections/projects.yaml |  2 +-
 exampleSite/data/cn/sections/projects.yaml |  2 +-
 exampleSite/data/en/sections/projects.yaml |  2 +-
 exampleSite/data/id/sections/projects.yaml |  2 +-
 layouts/partials/cards/project.html        | 50 ++++++++++++++--------
 static/css/sections/projects.css           | 20 +++++++++
 6 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/exampleSite/data/bn/sections/projects.yaml b/exampleSite/data/bn/sections/projects.yaml
index 7e2b808..bb6d8a4 100644
--- a/exampleSite/data/bn/sections/projects.yaml
+++ b/exampleSite/data/bn/sections/projects.yaml
@@ -38,7 +38,7 @@ projects:
   repo: https://github.com/tensorflow/tensorflow
   #url: ""
   summary: An Open Source Machine Learning Framework for Everyone.
-  tags: ["professional", "machine-learning","academic"]
+  tags: ["professional", "machine-learning"]
 
 - name: A sample academic paper
   role: Team Lead
diff --git a/exampleSite/data/cn/sections/projects.yaml b/exampleSite/data/cn/sections/projects.yaml
index e72169c..849ffe8 100644
--- a/exampleSite/data/cn/sections/projects.yaml
+++ b/exampleSite/data/cn/sections/projects.yaml
@@ -37,7 +37,7 @@ projects:
   repo: https://github.com/tensorflow/tensorflow
   #url: ""
   summary: An Open Source Machine Learning Framework for Everyone.
-  tags: ["professional", "machine-learning","academic"]
+  tags: ["professional", "machine-learning"]
 
 - name: A sample academic paper
   role: Team Lead
diff --git a/exampleSite/data/en/sections/projects.yaml b/exampleSite/data/en/sections/projects.yaml
index 544efd8..fc3e4a8 100644
--- a/exampleSite/data/en/sections/projects.yaml
+++ b/exampleSite/data/en/sections/projects.yaml
@@ -37,7 +37,7 @@ projects:
   repo: https://github.com/tensorflow/tensorflow
   #url: ""
   summary: An Open Source Machine Learning Framework for Everyone.
-  tags: ["professional", "machine-learning","academic"]
+  tags: ["professional", "machine-learning"]
 
 - name: A sample academic paper
   role: Team Lead
diff --git a/exampleSite/data/id/sections/projects.yaml b/exampleSite/data/id/sections/projects.yaml
index 861eced..813f9e4 100644
--- a/exampleSite/data/id/sections/projects.yaml
+++ b/exampleSite/data/id/sections/projects.yaml
@@ -37,7 +37,7 @@ projects:
   repo: https://github.com/tensorflow/tensorflow
   #url: ""
   summary: An Open Source Machine Learning Framework for Everyone.
-  tags: ["professional", "machine-learning","academic"]
+  tags: ["professional", "machine-learning"]
 
 - name: A sample academic paper
   role: Team Lead
diff --git a/layouts/partials/cards/project.html b/layouts/partials/cards/project.html
index 6b4f959..81d3fcd 100644
--- a/layouts/partials/cards/project.html
+++ b/layouts/partials/cards/project.html
@@ -26,25 +26,39 @@
       </a>
       <div class="card-body text-justify pt-1 pb-1">
         <p>{{ .summary | markdownify }}</p>
-        <span class="float-right">
-          {{ if .repo }}
-          <a
-            class="github-button-inactive"
-            href="{{ .repo }}"
-            data-icon="octicon-standard"
-            data-show-count="true"
-            aria-label="Star {{ .name }}"
-            >Star</a
-          >
-          {{ else if .url }}
-          <a
-            class="btn btn-outline-info btn-sm mb-2"
-            href="{{ .url }}"
-            target="#"
-            >Details</a
-          >
+        <!-- Display project card technology tags -->
+        <div class="project-card-footer">
+          {{ if .tags }}
+            <div class="project-tags-holder">
+              {{ range $index,$tag:= .tags }}
+                  <span class="badge btn-info">
+                    {{ $tag }}
+                  </span>
+              {{ end }}
+            </div>
           {{ end }}
-        </span>
+          <div class="project-btn-holder">
+            {{ if .repo }}
+            <a
+              class="github-button-inactive project-btn"
+              href="{{ .repo }}"
+              data-icon="octicon-standard"
+              data-show-count="true"
+              aria-label="Star {{ .name }}"
+              >Star</a
+            >
+            {{ else if .url }}
+            <span>
+              <a
+                class="btn btn-outline-info btn-sm"
+                href="{{ .url }}"
+                target="#"
+                >Details</a
+              >
+            </span>
+            {{ end }}
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/static/css/sections/projects.css b/static/css/sections/projects.css
index 48acc48..1855b27 100644
--- a/static/css/sections/projects.css
+++ b/static/css/sections/projects.css
@@ -29,6 +29,26 @@
   padding: 1rem !important;
 }
 
+.project-card-footer {
+  display: flex;
+}
+
+.project-tags-holder {
+  width: 70%;
+}
+
+.project-btn-holder {
+  width: 30%;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+}
+
+.project-btn-holder span {
+  justify-content: flex-end;
+  display: flex;
+}
+
 /* ============= Device specific fixes ======= */
 
 /* Large screens such as TV */