ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 20:05:05 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #179 from teaxyz/ux-comics-strip-mobile-view

Browse source 
#177 Nebraska-Man strip show scrollable view on mobile device
This commit is contained in:
Neil 2022-11-05 20:09:01 +08:00 committed by GitHub
commit 7d23dedca1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 103 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

172
src/layouts/page/nebraska-man.html
View file

@ -30,74 +30,88 @@
<style> <style>
.wrapper { .wrapper {
align-items: center; align-items: center;
display: flex; display: flex;
height: 90%; height: 90%;
justify-content: center; justify-content: center;
margin: 5%; margin: 5%;
width: 90%; width: 90%;
} }
.aspect { .aspect {
padding-bottom: 70%; padding-bottom: 70%;
position: relative; position: relative;
width: 100%; width: 100%;
} }
.aspect-inner { .aspect-inner {
bottom: 0; bottom: 0;
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
} }
.flipbook { .flipbook {
height: 100%; height: 100%;
transition: margin-left 0.25s ease-out; transition: margin-left 0.25s ease-out;
width: 100%; width: 100%;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.flipbook .page { .flipbook .page {
height: 100%; width: 100%;
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;
}
.flipbook .page img {
width: 100%;
height: 100%;
}
</style> </style>
<section class="nb-man-latest"> <section class="nb-man-latest">
<div class="container"> <div class="container" id="comicstrip">
<div class="row"> <div class="row" id="desktop_view">
<div class="col"> <div class="col">
<div class="wrapper"> <div class="wrapper">
<div class="aspect"> <div class="aspect">
<div class="aspect-inner"> <div class="aspect-inner">
<div class="flipbook" id="flipbook"> {{- partial "nebraska-man-001.html" "flipbook_desktop" -}}
<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>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{{- partial "nebraska-man-001.html" "flipbook_mobile" -}}
</div> </div>
</section> </section>
@ -187,45 +201,43 @@
<script type="text/javascript"> <script type="text/javascript">
function loadApp() { const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
// Create the flipbook
$('.flipbook').turn({
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
// Enable gradients // Enable gradients
gradients: true, gradients: true,
// Auto center this flipbook // Auto center this flipbook
autoCenter: true autoCenter: true
});
}
}); if (!isMobile) {
} const comicstripEl = document.getElementById('comicstrip');
comicstripEl.classList.add('desktop');
// Load the HTML4 version if there's not CSS transform const flipbookEL = document.getElementById('flipbook_desktop');
yepnope({ // Load the HTML4 version if there's not CSS transform
test : Modernizr.csstransforms, yepnope({
yep: ['/js/turn.js'], test : Modernizr.csstransforms,
nope: ['/js/turn.html4.min.js'], yep: ['/js/turn.js'],
both: ['/css/basic.css'], nope: ['/js/turn.html4.min.js'],
complete: loadApp both: ['/css/basic.css'],
}); complete: loadApp
});
var flipbookEL = document.getElementById('flipbook'); window.addEventListener('resize', function (e) {
flipbookEL.style.width = '';
window.addEventListener('resize', function (e) { flipbookEL.style.height = '';
flipbookEL.style.width = ''; $(flipbookEL).turn('size', flipbookEL.clientWidth, flipbookEL.clientHeight);
flipbookEL.style.height = ''; });
$(flipbookEL).turn('size', flipbookEL.clientWidth, flipbookEL.clientHeight);
});
$(flipbookEL).turn({
autoCenter: true
});
$(flipbookEL).turn({
autoCenter: true
});
}
</script> </script>

11
src/layouts/partials/nebraska-man-001.html Normal file
View 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>