Browse Source

feat(issue20): Updates mobile version for job page

Displays gallery slideshow for images
master
sovanna 5 months ago
parent
commit
a7f82f608e
17 changed files with 192 additions and 5 deletions
  1. +50
    -3
      content/about-us/jobs.md
  2. +9
    -0
      sass/css/_layout.scss
  3. +72
    -0
      sass/css/_slideshow.scss
  4. +2
    -1
      sass/css/styles.scss
  5. BIN
      static/images/IMG_0026@2x.jpg
  6. BIN
      static/images/IMG_0037@2x.jpg
  7. BIN
      static/images/IMG_0060@2x.jpg
  8. BIN
      static/images/IMG_05912@2x.png
  9. BIN
      static/images/IMG_0865@2x.jpg
  10. BIN
      static/images/IMG_0866@2x.jpg
  11. BIN
      static/images/IMG_0869@2x.jpg
  12. BIN
      static/images/IMG_0890@2x.jpg
  13. BIN
      static/images/IMG_0895@2x.jpg
  14. BIN
      static/images/IMG_20170818_175543_HDR2@2x.jpg
  15. +35
    -0
      templates/page-custom-footer-design.html
  16. +23
    -0
      templates/shortcodes/layout_gallery.html
  17. +1
    -1
      templates/shortcodes/layout_photo_style_1.html

+ 50
- 3
content/about-us/jobs.md View File

@@ -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 %}

+ 9
- 0
sass/css/_layout.scss View File

@@ -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;


+ 72
- 0
sass/css/_slideshow.scss View File

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

+ 2
- 1
sass/css/styles.scss View File

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

BIN
static/images/IMG_0026@2x.jpg View File

Before After
Width: 711  |  Height: 400  |  Size: 99KB

BIN
static/images/IMG_0037@2x.jpg View File

Before After
Width: 711  |  Height: 400  |  Size: 98KB

BIN
static/images/IMG_0060@2x.jpg View File

Before After
Width: 711  |  Height: 400  |  Size: 60KB

BIN
static/images/IMG_05912@2x.png View File

Before After
Width: 711  |  Height: 400  |  Size: 500KB

BIN
static/images/IMG_0865@2x.jpg View File

Before After
Width: 711  |  Height: 400  |  Size: 84KB

BIN
static/images/IMG_0866@2x.jpg View File

Before After
Width: 711  |  Height: 400  |  Size: 87KB

BIN
static/images/IMG_0869@2x.jpg View File

Before After
Width: 711  |  Height: 400  |  Size: 65KB

BIN
static/images/IMG_0890@2x.jpg View File

Before After
Width: 711  |  Height: 400  |  Size: 71KB

BIN
static/images/IMG_0895@2x.jpg View File

Before After
Width: 711  |  Height: 400  |  Size: 56KB

BIN
static/images/IMG_20170818_175543_HDR2@2x.jpg View File

Before After
Width: 711  |  Height: 400  |  Size: 85KB

+ 35
- 0
templates/page-custom-footer-design.html View File

@@ -6,4 +6,39 @@
<div class="container-fluid hero3 d-flex flex-column justify-content-center">
</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 %}

+ 23
- 0
templates/shortcodes/layout_gallery.html View File

@@ -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>

+ 1
- 1
templates/shortcodes/layout_photo_style_1.html View File

@@ -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">



Loading…
Cancel
Save