mirror of
https://github.com/ivabus/www
synced 2024-11-22 14:05:07 +03:00
Merge pull request #179 from teaxyz/ux-comics-strip-mobile-view
#177 Nebraska-Man strip show scrollable view on mobile device
This commit is contained in:
Neil
GitHub
commit
7d23dedca1
2 changed files with 103 additions and 80 deletions
|
|
@ -36,23 +36,23 @@
|
|||
justify-content: center;
|
||||
margin: 5%;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.aspect {
|
||||
.aspect {
|
||||
padding-bottom: 70%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.aspect-inner {
|
||||
.aspect-inner {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flipbook {
|
||||
.flipbook {
|
||||
height: 100%;
|
||||
transition: margin-left 0.25s ease-out;
|
||||
width: 100%;
|
||||
|
|
@ -62,42 +62,56 @@
|
|||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.flipbook .page {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flipbook .page img {
|
||||
.flipbook .page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.flipbook .page img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* .flipbook.desktop .page {
|
||||
height: 100%;
|
||||
}
|
||||
.flipbook.desktop .page img {
|
||||
height: 100%;
|
||||
} */
|
||||
|
||||
#comicstrip #desktop_view {
|
||||
display: none;
|
||||
}
|
||||
#comistrip #flipbook_mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#comicstrip.desktop #desktop_view {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#comicstrip.desktop #flipbook_mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<section class="nb-man-latest">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="container" id="comicstrip">
|
||||
<div class="row" id="desktop_view">
|
||||
<div class="col">
|
||||
<div class="wrapper">
|
||||
<div class="aspect">
|
||||
<div class="aspect-inner">
|
||||
<div class="flipbook" id="flipbook">
|
||||
<div class="page"><img src="/Images/nb-man-cover-one.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_01.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_02.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_03.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_04.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_05.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_06.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_07.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_08.jpg" draggable="false" alt="" /></div>
|
||||
</div>
|
||||
{{- partial "nebraska-man-001.html" "flipbook_desktop" -}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- partial "nebraska-man-001.html" "flipbook_mobile" -}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -187,45 +201,43 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
|
||||
function loadApp() {
|
||||
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
|
||||
function loadApp() {
|
||||
// Create the flipbook
|
||||
|
||||
$('.flipbook').turn({
|
||||
|
||||
// Enable gradients
|
||||
|
||||
gradients: true,
|
||||
|
||||
// Auto center this flipbook
|
||||
|
||||
autoCenter: true
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Load the HTML4 version if there's not CSS transform
|
||||
if (!isMobile) {
|
||||
const comicstripEl = document.getElementById('comicstrip');
|
||||
comicstripEl.classList.add('desktop');
|
||||
|
||||
yepnope({
|
||||
const flipbookEL = document.getElementById('flipbook_desktop');
|
||||
|
||||
// Load the HTML4 version if there's not CSS transform
|
||||
yepnope({
|
||||
test : Modernizr.csstransforms,
|
||||
yep: ['/js/turn.js'],
|
||||
nope: ['/js/turn.html4.min.js'],
|
||||
both: ['/css/basic.css'],
|
||||
complete: loadApp
|
||||
});
|
||||
});
|
||||
|
||||
var flipbookEL = document.getElementById('flipbook');
|
||||
|
||||
window.addEventListener('resize', function (e) {
|
||||
window.addEventListener('resize', function (e) {
|
||||
flipbookEL.style.width = '';
|
||||
flipbookEL.style.height = '';
|
||||
$(flipbookEL).turn('size', flipbookEL.clientWidth, flipbookEL.clientHeight);
|
||||
});
|
||||
});
|
||||
|
||||
$(flipbookEL).turn({
|
||||
$(flipbookEL).turn({
|
||||
autoCenter: true
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
11
src/layouts/partials/nebraska-man-001.html
Normal file
11
src/layouts/partials/nebraska-man-001.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<div class="flipbook" id="{{- . -}}">
|
||||
<div class="page"><img src="/Images/nb-man-cover-one.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_01.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_02.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_03.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_04.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_05.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_06.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_07.jpg" draggable="false" alt="" /></div>
|
||||
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_08.jpg" draggable="false" alt="" /></div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue