feat(issue20): Updates mobile version for job page

Displays gallery slideshow for images
pull/49/head
sovanna 2020-02-01 10:56:22 +01:00
rodič 946597d7eb
revize a7f82f608e
17 změnil soubory, kde provedl 192 přidání a 5 odebrání

Zobrazit soubor

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

Zobrazit soubor

@ -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
sass/css/_slideshow.scss Normal file
Zobrazit soubor

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

Zobrazit soubor

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

binární
static/images/IMG_0026@2x.jpg Normal file

Binární soubor nebyl zobrazen.

Za

Šířka:  |  Výška:  |  Velikost: 99 KiB

binární
static/images/IMG_0037@2x.jpg Normal file

Binární soubor nebyl zobrazen.

Za

Šířka:  |  Výška:  |  Velikost: 98 KiB

binární
static/images/IMG_0060@2x.jpg Normal file

Binární soubor nebyl zobrazen.

Za

Šířka:  |  Výška:  |  Velikost: 60 KiB

binární
static/images/IMG_05912@2x.png Normal file

Binární soubor nebyl zobrazen.

Za

Šířka:  |  Výška:  |  Velikost: 500 KiB

binární
static/images/IMG_0865@2x.jpg Normal file

Binární soubor nebyl zobrazen.

Za

Šířka:  |  Výška:  |  Velikost: 84 KiB

binární
static/images/IMG_0866@2x.jpg Normal file

Binární soubor nebyl zobrazen.

Za

Šířka:  |  Výška:  |  Velikost: 87 KiB

binární
static/images/IMG_0869@2x.jpg Normal file

Binární soubor nebyl zobrazen.

Za

Šířka:  |  Výška:  |  Velikost: 65 KiB

binární
static/images/IMG_0890@2x.jpg Normal file

Binární soubor nebyl zobrazen.

Za

Šířka:  |  Výška:  |  Velikost: 71 KiB

binární
static/images/IMG_0895@2x.jpg Normal file

Binární soubor nebyl zobrazen.

Za

Šířka:  |  Výška:  |  Velikost: 56 KiB

Binární soubor nebyl zobrazen.

Za

Šířka:  |  Výška:  |  Velikost: 86 KiB

Zobrazit soubor

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

Zobrazit soubor

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

Zobrazit soubor

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