feat(issue20): Updates mobile version for job page

Displays gallery slideshow for images

content/about-us/jobs.md

@@ -16,7 +16,30 @@ If you want to be at the intersection of physics and engineering, collaborate wi
 {% end %}
 
 
-{{ layout_photo_style_1(src1="images/IMG_20170818_175543_HDR@2x.png", src2="images/IMG_0027-side@2x.png") }}
+{{ layout_photo_style_1(src1="images/IMG_20170818_175543_HDR@2x.png", src2="images/IMG_0027-side@2x.png", onlydesktop=true) }}
+
+
+{% layout_gallery(slideName='mySlides1', dotName='dot1', onlymobile=true) %}
+<div class="mySlides1 fadeGallery">
+  <img class="img-fluid" src="/images/IMG_20170818_175543_HDR2@2x.jpg">
+</div>
+
+<div class="mySlides1 fadeGallery">
+  <img class="img-fluid" src="/images/IMG_0037@2x.jpg">
+</div>
+
+<div class="mySlides1 fadeGallery">
+  <img class="img-fluid" src="/images/IMG_0026@2x.jpg">
+</div>
+
+<div class="mySlides1 fadeGallery">
+  <img class="img-fluid" src="/images/IMG_0060@2x.jpg">
+</div>
+
+<div class="mySlides1 fadeGallery">
+  <img class="img-fluid" src="/images/IMG_0866@2x.jpg">
+</div>
+{% end %}
 
 
 {% layout_centered_content(min_width=true) %}
@@ -24,7 +47,30 @@ If you want to be at the intersection of physics and engineering, collaborate wi
 {% end %}
 
 
-{{ layout_photo_style_1(src1="images/IMG_0591-side@2x.png", src2="images/IMG_0591@2x.png") }}
+{{ layout_photo_style_1(src1="images/IMG_0591-side@2x.png", src2="images/IMG_0591@2x.png", onlydesktop=true) }}
+
+
+{% layout_gallery(slideName='mySlides2', dotName='dot2', onlymobile=true) %}
+<div class="mySlides2 fadeGallery">
+  <img class="img-fluid" src="/images/IMG_05912@2x.png">
+</div>
+
+<div class="mySlides2 fadeGallery">
+  <img class="img-fluid" src="/images/IMG_0890@2x.jpg">
+</div>
+
+<div class="mySlides2 fadeGallery">
+  <img class="img-fluid" src="/images/IMG_0869@2x.jpg">
+</div>
+
+<div class="mySlides2 fadeGallery">
+  <img class="img-fluid" src="/images/IMG_0865@2x.jpg">
+</div>
+
+<div class="mySlides2 fadeGallery">
+  <img class="img-fluid" src="/images/IMG_0895@2x.jpg">
+</div>
+{% end %}
 
 
 {% layout_centered_content(min_width=true) %}
@@ -39,5 +85,6 @@ We also accept remote positions, and you may also choose to work at our sister c
 
 
 {% layout_centered_content() %}
-##### Contact us at jobs@m-****.hk!
+##### Contact us at
+##### jobs@m-****.hk!
 {% end %}

sass/css/_layout.scss

@@ -29,6 +29,15 @@
   background-size: cover;
 }
 
+.hero3 {
+  height: 230px;
+  background: url("../images/hero3-phone@2x.png") repeat-x top center;
+  -webkit-background-size: contain;
+  -moz-background-size: contain;
+  -o-background-size: contain;
+  background-size: contain;
+}
+
 .hero5 {
   height: 230px;
   background: url("../images/hero3-phone@2x.png") no-repeat top center;

sass/css/_slideshow.scss

@@ -0,0 +1,72 @@
+.slideshow-container {
+  max-width: 100%;
+  position: relative;
+  margin: auto;
+  padding: 0 2em;
+}
+
+.mySlides {
+  display: none;
+}
+
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  margin-top: -22px;
+  padding: 3px 8px;
+  color: #715ec7 !important;
+  font-weight: bold;
+  transition: 0.6s ease;
+  user-select: none;
+  border: 1px solid #715ec7;
+  border-radius: 20px;
+  font-size: .7em;
+}
+
+.next {
+  right: 0;
+}
+.prev {
+  left: 0;
+}
+
+.dot {
+  cursor: pointer;
+  height: 10px;
+  width: 10px;
+  margin: 0 2px;
+  background-color: #fff;
+  border: 1px solid #715ec7;
+  border-radius: 50%;
+  display: inline-block;
+  transition: background-color 0.6s ease;
+}
+
+.dot.active, .dot:hover {
+  background-color: #715ec7;
+}
+
+.fadeGallery {
+  -webkit-animation-name: fadeGallery;
+  -webkit-animation-duration: 1.5s;
+  animation-name: fadeGallery;
+  animation-duration: 1.5s;
+  margin: 0 auto;
+  text-align: center;
+}
+
+@-webkit-keyframes fadeGallery {
+  from {opacity: .4}
+  to {opacity: 1}
+}
+
+@keyframes fadeGallery {
+  from {opacity: .4}
+  to {opacity: 1}
+}
+
+.slideshow-dots {
+  padding: .5em;
+}

sass/css/styles.scss

@@ -27,5 +27,6 @@ $color-hover:      #eae7f7 !default;
 @import
   "_base",
   "_layout",
-  "_shop"
+  "_shop",
+  "slideshow"
 ;

templates/page-custom-footer-design.html

@@ -7,3 +7,38 @@
 </div>
 
 {% endblock %}
+
+
+{% block js %}
+<script>
+  var slideIndex = 1;
+  showSlides(slideIndex, 'mySlides1', 'dot1');
+  showSlides(slideIndex, 'mySlides2', 'dot2');
+
+  // Next/previous controls
+  function plusSlides(n, slideName, dotName) {
+    showSlides(slideIndex += n, slideName, dotName);
+  }
+
+  // Thumbnail image controls
+  function currentSlide(n, slideName, dotName) {
+    showSlides(slideIndex = n, slideName, dotName);
+  }
+
+  function showSlides(n, slideName, dotName) {
+    var i;
+    var slides = document.getElementsByClassName(slideName);
+    var dots = document.getElementsByClassName(dotName);
+    if (n > slides.length) {slideIndex = 1}
+    if (n < 1) {slideIndex = slides.length}
+    for (i = 0; i < slides.length; i++) {
+        slides[i].style.display = "none";
+    }
+    for (i = 0; i < dots.length; i++) {
+        dots[i].className = dots[i].className.replace(" active", "");
+    }
+    slides[slideIndex-1].style.display = "block";
+    dots[slideIndex-1].className += " active";
+  }
+</script>
+{% endblock %}

templates/shortcodes/layout_gallery.html

@@ -0,0 +1,23 @@
+<div class="{% if css %}{{ css }}{% else %}row align-items-center mt-5 mb-5{% endif %}{% if onlymobile %} d-block d-md-none{% endif %}">
+
+  <div class="col-12">
+
+    <div class="slideshow-container">
+
+      {{ body | markdown | safe }}
+
+      <a class="prev" onclick="plusSlides(-1, '{{ slideName }}', '{{ dotName }}')">&#10094;</a>
+      <a class="next" onclick="plusSlides(1, '{{ slideName }}', '{{ dotName }}')">&#10095;</a>
+    </div>
+
+    <div class="slideshow-dots" style="text-align:center">
+      <span class="dot {{ dotName }}" onclick="currentSlide(1, '{{ slideName }}', '{{ dotName }}')"></span>
+      <span class="dot {{ dotName }}" onclick="currentSlide(2, '{{ slideName }}', '{{ dotName }}')"></span>
+      <span class="dot {{ dotName }}" onclick="currentSlide(3, '{{ slideName }}', '{{ dotName }}')"></span>
+      <span class="dot {{ dotName }}" onclick="currentSlide(4, '{{ slideName }}', '{{ dotName }}')"></span>
+      <span class="dot {{ dotName }}" onclick="currentSlide(5, '{{ slideName }}', '{{ dotName }}')"></span>
+    </div>
+
+  </div>
+
+</div>

templates/shortcodes/layout_photo_style_1.html

@@ -1,4 +1,4 @@
-<div class="{% if css %}{{ css }}{% else %}row d-flex align-items-center mt-5 mb-5{% endif %}">
+<div class="{% if css %}{{ css }}{% else %}row align-items-center mt-5 mb-5{% endif %}{% if onlydesktop %} d-none d-md-flex{% endif %}">
 
   <div class="col-12 col-md-6 mb-3 mb-md-0">