From 9351edebe0404b52bdd438481472cb814d1181a8 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Thu, 17 Mar 2022 14:23:06 +0530
Subject: [PATCH] fix: jobs, quiz and community page cleanup

---
 school/lms/widgets/Reviews.html     |  2 +-
 school/public/css/style.css         | 50 ++++++-----------------------
 school/public/icons/symbol-defs.svg |  4 +++
 school/templates/quiz.html          |  2 +-
 school/www/batch/learn.html         |  2 +-
 school/www/jobs/index.html          | 29 +++++++++++------
 school/www/jobs/job.html            | 43 ++++++++++++++-----------
 7 files changed, 61 insertions(+), 71 deletions(-)

diff --git a/school/lms/widgets/Reviews.html b/school/lms/widgets/Reviews.html
index 71e1b907..3b566e7f 100644
--- a/school/lms/widgets/Reviews.html
+++ b/school/lms/widgets/Reviews.html
@@ -52,7 +52,7 @@
     <div class="mb-4">
       <div class="d-flex align-items-center">
 
-        <div class="mr-3">
+        <div class="mr-4">
           {{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-medium") }}
         </div>
 
diff --git a/school/public/css/style.css b/school/public/css/style.css
index 8907623a..8e4a5076 100644
--- a/school/public/css/style.css
+++ b/school/public/css/style.css
@@ -111,7 +111,9 @@ input[type=checkbox] {
 .icon {
   margin: 0;
   margin-right: 0.25rem;
-  fill: none;
+}
+
+.lesson-links .icon {
   stroke: none;
 }
 
@@ -499,17 +501,17 @@ input[type=checkbox] {
 .member-parent {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  -moz-column-gap: 1.25rem;
-  column-gap: 1.25rem;
-  row-gap: 1.25rem;
+  -moz-column-gap: 2rem;
+  column-gap: 2rem;
+  row-gap: 2rem;
 }
 
 @media (max-width: 600px) {
   .member-parent {
     grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
-    -moz-column-gap: 1.25rem;
-    column-gap: 1.25rem;
-    row-gap: 1.25rem;
+    -moz-column-gap: 2rem;
+    column-gap: 2rem;
+    row-gap: 2rem;
   }
 }
 
@@ -1136,6 +1138,7 @@ pre {
   flex-direction: column;
   align-items: flex-end;
   justify-content: space-between;
+  margin-left: auto;
 }
 
 .job-detail-card {
@@ -1143,11 +1146,6 @@ pre {
   flex-direction: column;
 }
 
-.job-detail-card span::before {
-  content: "\00B7";
-  margin: 0 8px;
-}
-
 .job-subtitle {
   font-size: var(--text-base);
   margin-bottom: 1.875rem;
@@ -1163,34 +1161,6 @@ pre {
   color: var(--gray-900);
 }
 
-.company-name {
-  font-size: var(--text-base);
-}
-
-.job-meta {
-  display: flex;
-  align-items: center;
-  color: var(--gray-700);
-  font-size: var(--text-base);
-}
-
-.job-type {
-  background-color: var(--dark-green-100);
-  color: var(--dark-green-500);
-  border-radius: var(--border-radius-md);
-  padding: 0.25rem 0.5rem;
-  font-weight: 600;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  margin-bottom: 0.5rem;
-  width: fit-content;
-}
-
-.job-description {
-  margin-top: 3.75rem;
-}
-
 .course-head-container {
   color: var(--gray-900);
 }
diff --git a/school/public/icons/symbol-defs.svg b/school/public/icons/symbol-defs.svg
index 076dc970..0090c5c8 100644
--- a/school/public/icons/symbol-defs.svg
+++ b/school/public/icons/symbol-defs.svg
@@ -24,4 +24,8 @@
     <svg id="icon-lock-blue" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" clip-rule="evenodd" d="M8.077 1.45H8.022C7.13244 1.44174 6.27599 1.78701 5.64088 2.40993C5.00577 3.03285 4.64397 3.88244 4.635 4.772V5.122H3.75C3.21957 5.122 2.71086 5.33271 2.33579 5.70779C1.96071 6.08286 1.75 6.59157 1.75 7.122V12.513C1.75 13.0434 1.96071 13.5521 2.33579 13.9272C2.71086 14.3023 3.21957 14.513 3.75 14.513H12.289C12.8194 14.513 13.3281 14.3023 13.7032 13.9272C14.0783 13.5521 14.289 13.0434 14.289 12.513V7.122C14.289 6.59157 14.0783 6.08286 13.7032 5.70779C13.3281 5.33271 12.8194 5.122 12.289 5.122H11.404V4.837C11.4123 3.94744 11.067 3.09099 10.4441 2.45588C9.82115 1.82077 8.97156 1.45898 8.082 1.45H8.077ZM10.404 5.122V4.83C10.4104 4.20548 10.1686 3.60398 9.73166 3.15769C9.29475 2.71141 8.69851 2.45686 8.074 2.45H8.014C7.38948 2.4436 6.78798 2.68543 6.34169 3.12234C5.89541 3.55925 5.64086 4.15549 5.634 4.78V5.122H10.404ZM3.75 6.122C3.48478 6.122 3.23043 6.22736 3.04289 6.41489C2.85536 6.60243 2.75 6.85678 2.75 7.122V12.513C2.75 12.7782 2.85536 13.0326 3.04289 13.2201C3.23043 13.4076 3.48478 13.513 3.75 13.513H12.289C12.5542 13.513 12.8086 13.4076 12.9961 13.2201C13.1836 13.0326 13.289 12.7782 13.289 12.513V7.122C13.289 6.85678 13.1836 6.60243 12.9961 6.41489C12.8086 6.22736 12.5542 6.122 12.289 6.122H3.75ZM8.02 10.391C8.1721 10.391 8.31797 10.3306 8.42553 10.223C8.53308 10.1155 8.5935 9.9696 8.5935 9.8175C8.5935 9.6654 8.53308 9.51953 8.42553 9.41197C8.31797 9.30442 8.1721 9.244 8.02 9.244C7.8679 9.244 7.72203 9.30442 7.61447 9.41197C7.50692 9.51953 7.4465 9.6654 7.4465 9.8175C7.4465 9.9696 7.50692 10.1155 7.61447 10.223C7.72203 10.3306 7.8679 10.391 8.02 10.391V10.391ZM9.593 9.817C9.593 10.2343 9.42722 10.6345 9.13213 10.9296C8.83704 11.2247 8.43682 11.3905 8.0195 11.3905C7.60218 11.3905 7.20196 11.2247 6.90687 10.9296C6.61178 10.6345 6.446 10.2343 6.446 9.817C6.446 9.39968 6.61178 8.99946 6.90687 8.70437C7.20196 8.40928 7.60218 8.2435 8.0195 8.2435C8.43682 8.2435 8.83704 8.40928 9.13213 8.70437C9.42722 8.99946 9.593 9.39968 9.593 9.817V9.817Z" fill="#2D95F0"/>
     </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" id="icon-location" viewBox="0 0 24 24" fill="none" stroke="#1F272E" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin">
+        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+        <circle cx="12" cy="10" r="3"></circle>
+    </svg>
 </svg>
diff --git a/school/templates/quiz.html b/school/templates/quiz.html
index 5d5bf5bd..1e68d995 100644
--- a/school/templates/quiz.html
+++ b/school/templates/quiz.html
@@ -1,4 +1,4 @@
-<div id="quiz-title" class="course-home-headings">{{ quiz.title }}</div>
+<div id="quiz-title" class="hide">{{ quiz.title }}</div>
 
 <div class="common-card-style question-card">
   <form id="quiz-form">
diff --git a/school/www/batch/learn.html b/school/www/batch/learn.html
index 5687fd72..5e14b9da 100644
--- a/school/www/batch/learn.html
+++ b/school/www/batch/learn.html
@@ -77,7 +77,7 @@
       {% endif %}
       </span>
     </a>
-    <div class="ml-3 course-meta"> {{ frappe.utils.format_date(lesson.creation, "medium") }} </div>
+    <div class="ml-5 course-meta"> {{ frappe.utils.format_date(lesson.creation, "medium") }} </div>
   </div>
 
 
diff --git a/school/www/jobs/index.html b/school/www/jobs/index.html
index 767dbeb6..1c0b3e71 100644
--- a/school/www/jobs/index.html
+++ b/school/www/jobs/index.html
@@ -1,6 +1,10 @@
 {% extends "templates/base.html" %}
 {% block title %}{{ _('Job Openings') }}{% endblock %}
 
+{% block head_include %}
+{% include "public/icons/symbol-defs.svg" %}
+{% endblock %}
+
 {% block content %}
 <div class="common-page-style">
 
@@ -16,20 +20,25 @@
     <div class="common-card-style job-list-card">
     {% for job in jobs %}
       <div class="job-card">
-        <div class="avatar avatar-medium" title="{{ job.company_name}}">
+        <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 col-8">
+        <div class="job-card-info">
           <div class="job-card-heading">{{ _(job.job_title) }}</div>
-          <a class="dark-links company-name mt-1" href="{{ job.company_website }}">{{ job.company_name }}</a>
+          <div class="vertically-center course-meta">
+            <div class="mr-3">{{ job.company_name }}</div>
+            <div class="vertically-center">
+              <svg class="icon icon-sm">
+                <use class="" href="#icon-location">
+              </svg>
+              {{ job.location }}
+            </div>
+         </div>
         </div>
-        <div class="job-meta col">
-          <img class="mr-2" src="/assets/school/icons/location.svg">
-          <div>{{ job.location }}</div>
-        </div>
-        <div class="job-card-logo-section">
-          <div class="job-type"> {{ job.type }} </div>
-          <div class="job-meta">{{ frappe.utils.format_date(job.creation, "medium") }}</div>
+
+        <div class="job-card-logo-section course-meta">
+          <div class="indicator-pill green ml-3"> {{ job.type }} </div>
+          <div class="">{{ frappe.utils.format_date(job.creation, "medium") }}</div>
         </div>
         <a class="stretched-link" href="/jobs/{{ job.name }}"></a>
       </div>
diff --git a/school/www/jobs/job.html b/school/www/jobs/job.html
index bdb277f5..24e9b621 100644
--- a/school/www/jobs/job.html
+++ b/school/www/jobs/job.html
@@ -1,6 +1,10 @@
 {% extends "templates/base.html" %}
 {% block title %}{{ _(job.job_title) }}{% endblock %}
 
+{% block head_include %}
+{% include "public/icons/symbol-defs.svg" %}
+{% endblock %}
+
 {% block content %}
 
 <div class="common-page-style">
@@ -8,27 +12,30 @@
     {{ BreadCrumb(job) }}
     <div class="common-card-style job-detail-card">
 
-      <div class="d-flex justify-content-between">
-        <div>
-          <div class="avatar avatar-medium mb-6" title="{{ job.company_name}}">
-            <div class="avatar-frame company-logo" style="background-image: url( {{ job.company_logo | urlencode }} );"></div>
+      <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="course-home-headings mb-2">{{ _(job.job_title) }}</div>
-          <div class="d-flex align-items-center mb-2">
-            <a class="dark-links company-name" href="{{ job.company_website }}">{{ job.company_name }}</a>
-            <span></span>
-            <div class="job-meta">
-              <img class="mr-2" src="/assets/school/icons/location.svg">
-              <div>{{ job.location }}</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 mb-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>
-            <span></span>
-            <div class="job-meta"> {{ frappe.utils.format_date(job.creation, "medium") }} </div>
           </div>
-          <div class="job-type"> {{ job.type }} </div>
-        </div>
 
         {% 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">
+        <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>
@@ -38,7 +45,7 @@
         </div>
     </div>
 
-    <div class="job-description job-meta">{{ _(job.description) }}</div>
+    <div class="course-meta mt-10">{{ _(job.description) }}</div>
 
   </div>
 </div>
@@ -84,6 +91,6 @@
 <div class="breadcrumb">
   <a class="dark-links" href="/jobs">{{ _("Job Openings") }}</a>
   <img class="ml-1 mr-1" src="/assets/school/icons/chevron-right.svg">
-  <span class="muted-text">{{ _(job.job_title) }}</span>
+  <span class="breadcrumb-destination">{{ job.job_title }}</span>
 </div>
 {% endmacro %}