fix: job details redesign

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;
+    }
 }

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="job-detail-header">
-                <div class="avatar avatar-medium align-self-center" title="{{ job.company_name}}">
+                    <span title="{{ job.company_name}}" style="background-image: url( {{ job.company_logo | urlencode }} );"
-                    <div class="avatar-frame company-logo" style="
+                    class="company-logo"></span>
-                    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>
 
-                {% set application_link = job.application_link if frappe.session.user != 'Guest' else '/login?redirect-to=/jobs/' + job.name %}
+                    <div class="job-card-info">
-                <div class="d-flex align-items-start ml-auto">
+                        <div class="job-card-heading">{{ _(job.job_title) }}</div>
-                <a class="button is-primary mr-2"
+                        <div class="job-company course-meta">
-                href="{{ application_link }}">{{ _("Apply") }}</a>
+                            <div class="mr-5">{{ job.company_name }}</div>
-                <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="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>