From deb0322086957d3b6946908152e94f4d36d42749 Mon Sep 17 00:00:00 2001
From: krantheman <akash.akasht.tom@gmail.com>
Date: Fri, 6 Oct 2023 18:29:54 +0530
Subject: [PATCH] feat: use grid view with two cards per row

(cherry picked from commit b361995882af65ca0455bf37d4ed5e5c748fa0d9)
---
 hrms/www/jobs/index.css  |   5 ++
 hrms/www/jobs/index.html | 169 ++++++++++++++++++++++-----------------
 2 files changed, 99 insertions(+), 75 deletions(-)

diff --git a/hrms/www/jobs/index.css b/hrms/www/jobs/index.css
index b15209ca6e..dbc289b623 100644
--- a/hrms/www/jobs/index.css
+++ b/hrms/www/jobs/index.css
@@ -6,6 +6,11 @@ h3.jobs-page {
 	font-size: 1.7rem;
 }
 
+h4.jobs-page {
+	font-size: 1.35rem;
+}
+
+
 .text-18 {
 	font-size: 18px;
 }
diff --git a/hrms/www/jobs/index.html b/hrms/www/jobs/index.html
index 50691d2b78..2985485f92 100644
--- a/hrms/www/jobs/index.html
+++ b/hrms/www/jobs/index.html
@@ -100,89 +100,108 @@ <h3 class="mt-0 mb-10 jobs-page">{{ _("Job Openings") }}</h3>
 			{{ _("Showing " + job_openings|length|string + (" result" if
 			job_openings|length == 1 else " results") ) }}
 		</p>
-		{% for jo in job_openings %}
-		<div name="card" id="{{ jo.route }}" class="mb-8 card border" role="button">
-			<div class="p-6">
-				<div class="flex mb-5">
-					<div>
-						<h4 class="mt-0 mb-1 mr-20">{{ jo.job_title }}</h4>
+		<div class="row">
+			{% for jo in job_openings %}
+			<div name="card" id="{{ jo.route }}" class="mb-8 col-6" role="button">
+				<div class="card border">
+					<div class="p-6">
+						<div class="flex mb-5">
+							<div class="col-9 px-0">
+								<h4 class="mt-0 mb-1 jobs-page text-truncate">
+									{{ jo.job_title }}
+								</h4>
+								<div class="text-14">
+									<span class="font-weight-bold">{{ jo.company }}</span>
+									<span class="text-secondary"
+										>{{ " · " }} {{ jo.posted_on }}</span
+									>
+								</div>
+							</div>
+							<div class="col-3 px-0 flex">
+								<div class="ml-auto font-weight-bold text-nowrap text-12">
+									{%- if jo.employment_type -%} {%- if jo.employment_type ==
+									"Full-time" -%}
+									<div class="py-1 px-2 full-time-badge">
+										• {{ jo.employment_type }}
+									</div>
+									{%- elif jo.employment_type == "Part-time" -%}
+									<div class="py-1 px-2 part-time-badge">
+										• {{ jo.employment_type }}
+									</div>
+									{%- else -%}
+									<div class="py-1 px-2 other-badge">
+										• {{ jo.employment_type }}
+									</div>
+									{% endif %} {% endif %}
+								</div>
+							</div>
+						</div>
 						<div class="text-14">
-							<span class="font-weight-bold">{{ jo.company }}</span>
-							<span class="text-secondary">{{ " · " }} {{ jo.posted_on }}</span>
+							{%- if jo.location -%}
+							<div class="mt-3 flex align-items-center">
+								<svg
+									class="icon ml-0 mr-1"
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 16 16"
+								>
+									<g stroke="var(--gray-700)" stroke-miterlimit="10">
+										<path
+											d="M11.467 3.458c1.958 1.957 1.958 5.088.027 7.02L7.97 14l-3.523-3.523a4.945 4.945 0 010-6.993l.026-.026a4.922 4.922 0 016.993 0zm0 0c-.026-.026-.026-.026 0 0z"
+										></path>
+										<path
+											d="M7.971 8.259a1.305 1.305 0 100-2.61 1.305 1.305 0 000 2.61z"
+										></path>
+									</g>
+								</svg>
+								{{ jo.location }}
+							</div>
+							{% endif %} {%- if jo.department -%}
+							<div class="mt-3 flex align-items-center">
+								<svg
+									class="icon ml-0 mr-1"
+									style="--icon-stroke: var(--gray-700)"
+								>
+									<use href="#icon-branch"></use>
+								</svg>
+								{{ jo.department }}
+							</div>
+							{% endif %} {%- if jo.publish_salary_range -%}
+							<div class="mt-3 flex align-items-center">
+								<svg
+									class="icon ml-0 mr-1"
+									style="--icon-stroke: var(--gray-700)"
+								>
+									<use href="#icon-income"></use>
+								</svg>
+								{{ " " }} {%- if jo.lower_range -%}{{
+								frappe.format_value(frappe.utils.flt(jo.lower_range) ,
+								currency=jo.currency) }}{% endif %} {%- if jo.lower_range and
+								jo.upper_range -%}{{ " - " }}{% endif %} {%- if jo.upper_range
+								-%}{{ frappe.format_value(frappe.utils.flt(jo.upper_range) ,
+								currency=jo.currency) }}{% endif %} / {{ jo.salary_per.lower()
+								}}
+							</div>
+							{% endif %}
 						</div>
 					</div>
-					<div class="ml-auto font-weight-bold text-nowrap text-12">
-						{%- if jo.employment_type -%} {%- if jo.employment_type ==
-						"Full-time" -%}
-						<div class="py-1 px-2 full-time-badge">
-							• {{ jo.employment_type }}
+					<div class="px-4 py-2 job-card-footer">
+						<div class="row text-12 text-secondary">
+							<p class="col-6 text-center border-right mb-0">
+								{{ _("Applications received: ") }}
+								<b>{{ jo.no_of_applications }}</b>
+							</p>
+							<p class="col-6 text-center mb-0">
+								{%- if jo.closes_on -%}{{ _("Closes on: ") }}<b
+									>{{ frappe.format_date(jo.closes_on, "d MMM, YYYY") }}</b
+								>
+								{% endif %}
+							</p>
 						</div>
-						{%- elif jo.employment_type == "Part-time" -%}
-						<div class="py-1 px-2 part-time-badge">
-							• {{ jo.employment_type }}
-						</div>
-						{%- else -%}
-						<div class="py-1 px-2 other-badge">• {{ jo.employment_type }}</div>
-						{% endif %} {% endif %}
 					</div>
 				</div>
-				<div class="text-14">
-					{%- if jo.location -%}
-					<div class="mt-3 flex align-items-center">
-						<svg
-							class="icon ml-0 mr-1"
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-						>
-							<g stroke="var(--gray-700)" stroke-miterlimit="10">
-								<path
-									d="M11.467 3.458c1.958 1.957 1.958 5.088.027 7.02L7.97 14l-3.523-3.523a4.945 4.945 0 010-6.993l.026-.026a4.922 4.922 0 016.993 0zm0 0c-.026-.026-.026-.026 0 0z"
-								></path>
-								<path
-									d="M7.971 8.259a1.305 1.305 0 100-2.61 1.305 1.305 0 000 2.61z"
-								></path>
-							</g>
-						</svg>
-						{{ jo.location }}
-					</div>
-					{% endif %} {%- if jo.department -%}
-					<div class="mt-3 flex align-items-center">
-						<svg class="icon ml-0 mr-1" style="--icon-stroke: var(--gray-700)">
-							<use href="#icon-branch"></use>
-						</svg>
-						{{ jo.department }}
-					</div>
-					{% endif %} {%- if jo.publish_salary_range -%}
-					<div class="mt-3 flex align-items-center">
-						<svg class="icon ml-0 mr-1" style="--icon-stroke: var(--gray-700)">
-							<use href="#icon-income"></use>
-						</svg>
-						{{ " " }} {%- if jo.lower_range -%}{{
-						frappe.format_value(frappe.utils.flt(jo.lower_range) ,
-						currency=jo.currency) }}{% endif %} {%- if jo.lower_range and
-						jo.upper_range -%}{{ " - " }}{% endif %} {%- if jo.upper_range -%}{{
-						frappe.format_value(frappe.utils.flt(jo.upper_range) ,
-						currency=jo.currency) }}{% endif %} / {{ jo.salary_per.lower() }}
-					</div>
-					{% endif %}
-				</div>
-			</div>
-			<div class="px-4 py-2 job-card-footer">
-				<div class="row text-12 text-secondary">
-					<p class="col-6 text-center border-right mb-0">
-						{{ _("Applications received: ") }}
-						<b>{{ jo.no_of_applications }}</b>
-					</p>
-					<p class="col-6 text-center mb-0">
-						{%- if jo.closes_on -%}{{ _("Closes on: ") }}<b
-							>{{ frappe.format_date(jo.closes_on, "d MMM, YYYY") }}</b
-						>
-						{% endif %}
-					</p>
-				</div>
 			</div>
+			{% endfor %}
 		</div>
-		{% endfor %}
 	</div>
 </div>
 {% endblock page_content %}