From de0200f352aacb116d8e7f482a8766b68c56efff Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Thu, 30 Jun 2022 17:45:48 +0530
Subject: [PATCH 1/2] fix: job list ui

---
 lms/public/css/style.css | 60 +++++++++++++++++++-------
 lms/www/jobs/index.html  | 93 +++++++++++++++++++---------------------
 2 files changed, 90 insertions(+), 63 deletions(-)

diff --git a/lms/public/css/style.css b/lms/public/css/style.css
index 63bfd1f5..62f1fa4b 100644
--- a/lms/public/css/style.css
+++ b/lms/public/css/style.css
@@ -1105,14 +1105,19 @@ pre {
 }
 
 .job-card {
-  display: flex;
-  align-items: center;
-  position: relative;
+    position: relative;
+    padding: 1rem;
 }
 
 .company-logo {
-  background-position: center;
-  background-size: 42px;
+    background-position: center;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: var(--border-radius-sm);
+    width: 50px;
+    height: 50px;
+    margin-right: 0.5rem;
 }
 
 .job-card-parent {
@@ -1121,11 +1126,9 @@ pre {
 }
 
 .job-card-logo-section {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: space-between;
-  margin-left: auto;
+    display: flex;
+    align-items: center;
+    margin-top: 1rem;
 }
 
 .job-detail-card {
@@ -1138,11 +1141,6 @@ pre {
   margin-bottom: 1.875rem;
 }
 
-.job-list-card {
-  padding: 1.25rem 1.56rem;
-  flex-direction: column;
-}
-
 .job-card-heading {
   font-weight: 600;
   color: var(--gray-900);
@@ -1451,3 +1449,35 @@ li {
 .discussions-parent .empty-state {
     background-color: var(--gray-200);
 }
+
+.job-cards-parent {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+    -moz-column-gap: 40px;
+    grid-gap: 1rem;
+    align-items: center;
+}
+
+.job-company {
+    display: flex;
+    align-items: center;
+}
+
+@media (max-width: 600px) {
+    .job-company {
+        flex-direction: column;
+        align-items: inherit;
+    }
+}
+
+@media (max-width: 1200px) {
+    .job-cards-parent {
+        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    }
+}
+
+@media (max-width: 500px) {
+    .job-cards-parent {
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    }
+}
diff --git a/lms/www/jobs/index.html b/lms/www/jobs/index.html
index 49b19138..fea346ff 100644
--- a/lms/www/jobs/index.html
+++ b/lms/www/jobs/index.html
@@ -8,63 +8,60 @@
 {% block content %}
 <div class="common-page-style">
 
-  <div class="container">
-    {% if allow_posting and jobs | length %}
-    <a class="button is-primary pull-right mt-5" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
-    {% endif %}
+    <div class="container">
+        {% if allow_posting and jobs | length %}
+        <a class="button is-primary pull-right" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
+        {% endif %}
 
-    <div class="course-home-headings mb-2">{{ _("{0}").format(title) }}</div>
-    <div class="job-subtitle">{{ _("{0}").format(subtitle) }}</div>
+        <div class="course-home-headings mb-2">{{ _("{0}").format(title) }}</div>
+        <div class="job-subtitle">{{ _("{0}").format(subtitle) }}</div>
 
-    {% if jobs | length %}
-    <div class="common-card-style job-list-card">
-    {% for job in jobs %}
-      <div class="job-card">
-        <div class="avatar avatar-medium mr-3" title="{{ job.company_name}}">
-          <span class="avatar-frame company-logo" style="background-image: url( {{ job.company_logo | urlencode }} );"></span>
-        </div>
-        <div class="job-card-info">
-          <div class="job-card-heading">{{ _(job.job_title) }}</div>
-          <div class="vertically-center course-meta">
-            <div class="mr-5">{{ job.company_name }}</div>
-            <div class="vertically-center">
-              <svg class="icon icon-sm">
-                <use class="" href="#icon-location">
-              </svg>
-              {{ job.location }}
+        {% if jobs | length %}
+        <div class="job-cards-parent">
+        {% for job in jobs %}
+            <div class="common-card-style job-card">
+                <span title="{{ job.company_name}}" style="background-image: url( {{ job.company_logo | urlencode }} );"
+                class="company-logo"></span>
+                <div class="job-card-info">
+                    <div class="job-card-heading">{{ _(job.job_title) }}</div>
+
+                    <div class="job-company course-meta">
+                        <div class="mr-5">{{ job.company_name }}</div>
+                        <div class="vertically-center">
+                            <svg class="icon icon-sm">
+                                <use class="" href="#icon-location">
+                            </svg>
+                            {{ job.location }}
+                        </div>
+                    </div>
+
+                    <div class="job-card-logo-section course-meta">
+                        <div class="indicator-pill green mr-5"> {{ job.type }} </div>
+                        <div class="text-muted">{{ frappe.utils.format_date(job.creation, "medium") }}</div>
+                    </div>
+                </div>
+                <a class="stretched-link" href="/jobs/{{ job.name }}"></a>
             </div>
-         </div>
+        {% endfor %}
         </div>
-
-        <div class="job-card-logo-section course-meta">
-          <div class="indicator-pill green ml-3"> {{ job.type }} </div>
-          <div class="mt-2 text-muted">{{ frappe.utils.format_date(job.creation, "medium") }}</div>
-        </div>
-        <a class="stretched-link" href="/jobs/{{ job.name }}"></a>
-      </div>
-      {% if loop.index != jobs | length %}
-      <div class="card-divider mt-5"></div>
-      {% endif %}
-    {% endfor %}
     </div>
-      </div>
     {% else %}
 
     <div class="empty-state">
-      <div>
-        <img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
-      </div>
-      <div class="empty-state-text">
-        <div class="empty-state-heading">{{ _("No open jobs") }}</div>
-        <div class="course-meta">{{ _("There are no job openings at present.") }}</div>
-      </div>
-      <div>
-        {% if allow_posting %}
-        <a class="button is-secondary dark-links m-auto" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
-        {% endif %}
-      </div>
+        <div>
+            <img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
+        </div>
+        <div class="empty-state-text">
+            <div class="empty-state-heading">{{ _("No open jobs") }}</div>
+            <div class="course-meta">{{ _("There are no job openings at present.") }}</div>
+        </div>
+        <div>
+            {% if allow_posting %}
+            <a class="button is-secondary dark-links m-auto" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
+            {% endif %}
+        </div>
     </div>
     {% endif %}
-  </div>
+    </div>
 </div>
 {% endblock %}

From 56c51b73b0720aee6d51f9105a42fd329dcdb3d9 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 1 Jul 2022 17:57:52 +0530
Subject: [PATCH 2/2] fix: job details redesign

---
 lms/public/css/style.css | 27 ++++++++++++++---
 lms/www/jobs/job.html    | 63 ++++++++++++++++++++--------------------
 2 files changed, 55 insertions(+), 35 deletions(-)

diff --git a/lms/public/css/style.css b/lms/public/css/style.css
index 62f1fa4b..25691d06 100644
--- a/lms/public/css/style.css
+++ b/lms/public/css/style.css
@@ -1117,7 +1117,7 @@ pre {
     border-radius: var(--border-radius-sm);
     width: 50px;
     height: 50px;
-    margin-right: 0.5rem;
+    margin-right: 1rem;
 }
 
 .job-card-parent {
@@ -1128,11 +1128,11 @@ pre {
 .job-card-logo-section {
     display: flex;
     align-items: center;
-    margin-top: 1rem;
+    margin-top: 0.5rem;
 }
 
 .job-detail-card {
-  padding: 1.5rem;
+  padding: 1rem;
   flex-direction: column;
 }
 
@@ -1144,7 +1144,7 @@ pre {
 .job-card-heading {
   font-weight: 600;
   color: var(--gray-900);
-  margin-bottom: 0.4rem;
+  margin-bottom: 0.5rem;
 }
 
 .course-head-container {
@@ -1463,6 +1463,17 @@ li {
     align-items: center;
 }
 
+.job-actions {
+    display: flex;
+    align-items: flex-start;
+    margin-left: auto;
+    margin-bottom: 1rem;
+}
+
+.job-detail-header {
+    display: flex;
+}
+
 @media (max-width: 600px) {
     .job-company {
         flex-direction: column;
@@ -1480,4 +1491,12 @@ li {
     .job-cards-parent {
         grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     }
+
+    .job-detail-header {
+        flex-wrap: wrap;
+    }
+
+    .job-actions {
+        margin-top: 1rem;
+    }
 }
diff --git a/lms/www/jobs/job.html b/lms/www/jobs/job.html
index 5efe6acb..8669c9ef 100644
--- a/lms/www/jobs/job.html
+++ b/lms/www/jobs/job.html
@@ -10,41 +10,42 @@
 <div class="common-page-style">
     <div class="container">
         {{ BreadCrumb(job) }}
+
         <div class="common-card-style job-detail-card">
 
-            <div class="d-flex">
-                <div class="avatar avatar-medium align-self-center" title="{{ job.company_name}}">
-                    <div class="avatar-frame company-logo" style="
-                    background-image: url( {{ job.company_logo | urlencode }} );"></div>
-                </div>
-                <div class="ml-5">
-                    <div class="vertically-center">
-                    <div class="course-home-headings mb-0">{{ _(job.job_title) }}</div>
-                    <div class="indicator-pill green ml-5"> {{ job.type }} </div>
-                    </div>
-                    <div class="d-flex align-items-center mt-2">
-                    <a class="dark-links course-meta mr-5" href="{{ job.company_website }}">{{ job.company_name }}</a>
-                    <div class="vertically-center course-meta mr-5">
-                        <svg class="icon icon-sm">
-                        <use class="" href="#icon-location">
-                        </svg>
-                        <div>{{ job.location }}</div>
-                    </div>
-                    <div class="course-meta"> {{ frappe.utils.format_date(job.creation, "medium") }} </div>
-                    </div>
-                </div>
+                <div class="job-detail-header">
+                    <span title="{{ job.company_name}}" style="background-image: url( {{ job.company_logo | urlencode }} );"
+                    class="company-logo"></span>
 
-                {% set application_link = job.application_link if frappe.session.user != 'Guest' else '/login?redirect-to=/jobs/' + job.name %}
-                <div class="d-flex align-items-start ml-auto">
-                <a class="button is-primary mr-2"
-                href="{{ application_link }}">{{ _("Apply") }}</a>
-                <div class="button is-default mr-2" id="report" data-job="{{ job.name }}">{{ _("Report") }}</div>
-                {% if job.owner == frappe.session.user %}
-                <a class="button is-default button-links" href="/job-opportunity?name={{ job.name }}">Edit</a>
-                {% endif %}
-                </div>
-            </div>
+                    <div class="job-card-info">
+                        <div class="job-card-heading">{{ _(job.job_title) }}</div>
+                        <div class="job-company course-meta">
+                            <div class="mr-5">{{ job.company_name }}</div>
 
+                            <div class="vertically-center">
+                                <svg class="icon icon-sm">
+                                    <use class="" href="#icon-location">
+                                </svg>
+                                {{ job.location }}
+                            </div>
+                        </div>
+
+                        <div class="job-card-logo-section course-meta">
+                            <div class="indicator-pill green mr-5"> {{ job.type }} </div>
+                            <div class="text-muted">{{ frappe.utils.format_date(job.creation, "medium") }}</div>
+                        </div>
+                    </div>
+
+                    {% set application_link = job.application_link if frappe.session.user != 'Guest' else '/login?redirect-to=/jobs/' + job.name %}
+                    <div class="job-actions">
+                        <a class="button is-primary mr-2" href="{{ application_link }}"> {{ _("Apply") }} </a>
+                        <div class="button is-default mr-2" id="report" data-job="{{ job.name }}"> {{ _("Report") }} </div>
+                        {% if job.owner == frappe.session.user %}
+                        <a class="button is-default button-links" href="/job-opportunity?name={{ job.name }}"> {{ _("Edit") }} </a>
+                        {% endif %}
+                    </div>
+
+                </div>
             <div class="course-meta mt-10">{{ _(job.description) }}</div>
 
         </div>