Styled new vacancy page

jetthoughts · Nov 16, 2021 · fba3383 · fba3383
1 parent f87860a
commit fba3383
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 62 deletions.
diff --git a/_assets/css/layout/_header.scss b/_assets/css/layout/_header.scss
@@ -13,6 +13,11 @@
   .btn-primary {
     float: right;
   }
+
+  .-black {
+    background: #1b1b1f;
+    position: relative;
+  }
 }
 
 .menu-opener {

diff --git a/_assets/css/layout/_vacancies.scss b/_assets/css/layout/_vacancies.scss
@@ -48,6 +48,10 @@
     margin: 0;
   }
 
+  .link {
+    display: block;
+  }
+
   .remote {
     padding: 5px 15px;
     color: #fff;

diff --git a/_config.yml b/_config.yml
@@ -41,7 +41,7 @@ page_gen:
 - data: 'vacancies'
   template: 'vacancy'
   dir: 'careers'
-  name: name
+  name: id
 
 jekyll-minifier:
   uglifier_args:

diff --git a/_data/vacancies.yml b/_data/vacancies.yml
@@ -1,4 +1,5 @@
 - label: Software development
+  id: ruby_on_rails_developer
   name: Ruby on Rails developer
   location: Ukraine
   additional_location: Remote
@@ -38,6 +39,7 @@
     - "— Design and develop well-tested code"
     - "— Increase overall code quality across all our products"
 - label: Software development
+  id: middle_senior_ruby_software_engineer
   name: Middle/Senior Ruby Software Engineer
   location: Ukraine
   additional_location: Remote
@@ -74,6 +76,7 @@
     - Design and develop well-tested code
     - Increase overall code quality across all our products
 - label: Software development
+  id: intern_junior_ruby_on_rails_developer
   name: Intern/Junior Ruby on Rails Developer
   location: Ukraine
   additional_location: Remote

diff --git a/_includes/careers/vacancies.html b/_includes/careers/vacancies.html
@@ -9,31 +9,31 @@ <h2 class="title">{{ careers.title }}</h2>
     {% for vacancy in careers.vacancies %}
       {% assign delay = delay | plus: 1 %}
       <li class="vacancy fade-right delay-{{ delay }}">
-        <div class="head">
-          <h5 class="label">{{ vacancy.label }}</h5>
-          <div>
-            {% if vacancy.remote_allowed %}
-              <span class="remote">Remote Allowed</span>
-            {% endif %}
-            {% if vacancy.hot %}
-              <span class="hot">Hot</span>
-            {% endif %}
-          </div>
-        </div>
-         <h4 class="name">{{ vacancy.name }}</h4>
-         <div class="location">{{ vacancy.location }} | <strong class="sublocation">{{ vacancy.additional_location }}</strong></div>
-        <div class="details">
-          {% for item in vacancy.details %}
-            <div class="wrapper">
-              <strong class="heading">{{ item.heading }}</strong>
-              {% for field in item.fields %}
-                <p class="text">- {{ field }}</p>
-              {% endfor %}
+        <a class="link" href="/careers/{{ vacancy.id }}">
+          <div class="head">
+            <h5 class="label">{{ vacancy.label }}</h5>
+            <div>
+              {% if vacancy.remote_allowed %}
+                <span class="remote">Remote Allowed</span>
+              {% endif %}
+              {% if vacancy.hot %}
+                <span class="hot">Hot</span>
+              {% endif %}
             </div>
-          {% endfor %}
-        </div>
-        <a href="#careers-contact-form" class="btn btn-primary js-anchor">Apply</a>
-        <span class="arrow js-vacancy-opener"></span>
+          </div>
+           <h4 class="name">{{ vacancy.name }}</h4>
+           <div class="location">{{ vacancy.location }} | <strong class="sublocation">{{ vacancy.additional_location }}</strong></div>
+          <div class="details">
+            {% for item in vacancy.details %}
+              <div class="wrapper">
+                <strong class="heading">{{ item.heading }}</strong>
+                {% for field in item.fields %}
+                  <p class="text">- {{ field }}</p>
+                {% endfor %}
+              </div>
+            {% endfor %}
+          </div>
+        </a>
       </li>
     {% endfor %}
     </ul>

diff --git a/_includes/careers/vacancy.html b/_includes/careers/vacancy.html
@@ -0,0 +1,32 @@
+<section class="js-scroll vacancies section">
+  <div class="container">
+    <ul class="list">
+      <li class="vacancy">
+        <div class="head">
+          <h5 class="label">{{ page.label }}</h5>
+          <div>
+            {% if page.remote_allowed %}
+              <span class="remote">Remote Allowed</span>
+            {% endif %}
+            {% if page.hot %}
+              <span class="hot">Hot</span>
+            {% endif %}
+          </div>
+        </div>
+         <h4 class="name">{{ page.name }}</h4>
+         <div class="location">{{ page.location }} | <strong class="sublocation">{{ page.additional_location }}</strong></div>
+        <div class="details">
+          {% for item in page.details %}
+            <div class="wrapper">
+              <strong class="heading">{{ item.heading }}</strong>
+              {% for field in item.fields %}
+                <p class="text">- {{ field }}</p>
+              {% endfor %}
+            </div>
+          {% endfor %}
+        </div>
+        <a href="#careers-contact-form" class="btn btn-primary js-anchor">Apply</a>
+      </li>
+    </ul>
+  </div>
+</section>
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,4 +1,4 @@
-<header class="header">
+<header class="header {{ include.background }}">
   <div class="fade-up">
     <a href="/" class="logo hide-text" title="JetThoughts Logo">
       JetThoughts Logo

diff --git a/_layouts/vacancy.html b/_layouts/vacancy.html
@@ -1,43 +1,10 @@
 {% include head.html %}
 <div class="no-menu">
-  {% include header.html %}
+  {% include header.html background='-black' %}
 </div>
 <div class="main-wrapper">
-
-  <section class="js-scroll vacancies section">
-    <div class="container">
-      <ul class="list">
-        <li class="vacancy fade-right delay-{{ delay }}">
-          <div class="head">
-            <h5 class="label">{{ page.label }}</h5>
-            <div>
-              {% if page.remote_allowed %}
-                <span class="remote">Remote Allowed</span>
-              {% endif %}
-              {% if page.hot %}
-                <span class="hot">Hot</span>
-              {% endif %}
-            </div>
-          </div>
-           <h4 class="name">{{ page.name }}</h4>
-           <div class="location">{{ page.location }} | <strong class="sublocation">{{ page.additional_location }}</strong></div>
-          <div class="details">
-            {% for item in page.details %}
-              <div class="wrapper">
-                <strong class="heading">{{ item.heading }}</strong>
-                {% for field in item.fields %}
-                  <p class="text">- {{ field }}</p>
-                {% endfor %}
-              </div>
-            {% endfor %}
-          </div>
-          <a href="#careers-contact-form" class="btn btn-primary js-anchor">Apply</a>
-          <span class="arrow js-vacancy-opener"></span>
-        </li>
-      </ul>
-    </div>
-  </section>
-
+  {% include careers/vacancy.html %}
+  {% include careers/contact-form.html %}
 </div>
 {% include footer.html %}
 {% include scripts.html %}