Allow multiple position in one company experience (#9)

* Add partials for multiple positions on one company

* Remove unnecessary codes + Fix CSS

Co-authored-by: hossainemruz <emruz@appscode.com>

3 files changed, 55 insertions, 14 deletions

diff --git a/layouts/partials/experiences/experience-info.html b/layouts/partials/experiences/experience-info.html
index b2d1ea8..c4e1a92 100644
--- a/layouts/partials/experiences/experience-info.html
+++ b/layouts/partials/experiences/experience-info.html
@@ -1,14 +1,5 @@
-<div class="col-10 col-lg-8">
-  <div class="experience-entry-heading">
-    <h5><a href="{{ .company.url }}">{{ .company.name }}</a></h5>
-    <h6>{{ .designation }}</h6>
-    <p class="text-muted">{{ .start }} - {{ if .end }} {{ .end }} {{ else }}Present{{ end }}, {{ .company.location }}</p>
-  </div>
-  <p>{{ .company.overview | markdownify }}</p>
-  <h6 class="text-muted">Responsibilities:</h6>
-  <ul class="justify-content-around">
-      {{ range .responsibilities }}
-        <li>{{ . | markdownify }}</li>
-      {{ end }}
-  </ul>
-</div>
+{{ if gt (len .positions) 1 }}
+  {{ partial "experiences/multiple-positions" . }}
+{{ else }}
+  {{ partial "experiences/single-position.html" . }}
+{{ end }}
diff --git a/layouts/partials/experiences/multiple-positions.html b/layouts/partials/experiences/multiple-positions.html
new file mode 100644
index 0000000..aae5f3d
--- /dev/null
+++ b/layouts/partials/experiences/multiple-positions.html
@@ -0,0 +1,29 @@
+<div class="col-10 col-lg-8">
+    <div class="experience-entry-heading">
+        <!-- For multiple positions, give emphasis on the company name-->
+        <h5>{{ if .company.url }}<a href={{.company.url}}>{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h5>
+
+        <!-- Total experience duration on a company is time between the starting date of the oldest position and ending date of most recent position -->
+        {{ $oldestPosition := index (last 1 .positions) 0}}
+        {{ $mostRecentPosition := index (first 1 .positions) 0}}
+        <p class="text-muted">
+            {{ $oldestPosition.start }} - {{ if $mostRecentPosition.end }}{{ $mostRecentPosition.end }}{{ else }}Present{{ end }},
+            {{ .company.location }}
+        </p>
+        <!-- Add company overview -->
+        <p>{{ .company.overview | markdownify }}</p>
+    </div>
+    <!-- Add the positions information -->
+    <div class="positions">
+    {{ range $index,$position:= .positions }}
+        <h6 class="designation">{{ $position.designation }}</h6>
+        <p class="text-muted">{{ $position.start }} - {{if $position.end }} {{ $position.end }} {{else}} Present {{end}}</p>
+        <!-- Add the responsibilities handled at this position -->
+        <ul class="justify-content-around">
+        {{ range $position.responsibilities }}
+            <li>{{ . | markdownify }}</li>
+        {{ end }}
+        </ul>
+    {{ end }}
+    </div>
+</div>
diff --git a/layouts/partials/experiences/single-position.html b/layouts/partials/experiences/single-position.html
new file mode 100644
index 0000000..f78d45e
--- /dev/null
+++ b/layouts/partials/experiences/single-position.html
@@ -0,0 +1,21 @@
+<div class="col-10 col-lg-8">
+    <div class="experience-entry-heading">
+        {{ $position:= index .positions 0 }}
+        <!-- For single position, give emphasis on the designation-->
+        <h5>{{ $position.designation }}</h5>
+        <h6>{{ if .company.url }}<a href={{.company.url}}>{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h6>
+        <!-- Add experience duration info -->
+        <p class="text-muted">{{ $position.start }} - {{ if $position.end }} {{ $position.end }} {{ else }}Present{{ end }},
+            {{ .company.location }}
+        </p>
+    </div>
+    <!-- Add company overview -->
+    <p>{{ .company.overview | markdownify }}</p>
+    <!-- Add the responsibilities handled at this position -->
+    <h6 class="text-muted">Responsibilities:</h6>
+    <ul class="justify-content-around">
+    {{ range $position.responsibilities }}
+        <li>{{ . | markdownify }}</li>
+    {{ end }}
+    </ul>
+</div>