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

Download icon on button and responsive width flipbook

Browse source
This commit is contained in:
Thomas Smith 2022-10-21 21:41:37 -04:00
parent 316cdfba21
commit ee4c04e4bd
2 changed files with 121 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,73 +25,131 @@
<hr> <hr>
<style>
.wrapper {
align-items: center;
display: flex;
height: 90%;
justify-content: center;
margin: 5%;
width: 90%;
}
.aspect {
padding-bottom: 70%;
position: relative;
width: 100%;
}
.aspect-inner {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.flipbook {
height: 100%;
transition: margin-left 0.25s ease-out;
width: 100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flipbook .page {
height: 100%;
width: 100%;
}
.flipbook .page img {
width: 100%;
height: 100%;
}
</style>
<section class="nb-man-latest"> <section class="nb-man-latest">
<div class="container">
<div class="row">
<div class="col latest-container"> <div class="col latest-container">
<div class="flipbook-viewport"> <div class="wrapper">
<div class="container"> <div class="aspect">
<div class="flipbook"> <div class="aspect-inner">
<div style="background-image:url(/Images/placeholder/batman-2016-120-1.jpeg)"></div> <div class="flipbook" id="flipbook">
<div style="background-image:url(/Images/placeholder/batman-2016-120-3.jpeg)"></div> <div class="page"><img src="/Images/placeholder/batman-2016-120-1.jpeg" draggable="false" alt="" /></div>
<div style="background-image:url(/Images/placeholder/batman-2016-120-4.jpeg)"></div> <div class="page"><img src="/Images/placeholder/batman-2016-120-3.jpeg" draggable="false" alt="" /></div>
<div style="background-image:url(/Images/placeholder/batman-2016-120-5.jpeg)"></div> <div class="page"><img src="/Images/placeholder/batman-2016-120-4.jpeg" draggable="false" alt="" /></div>
<div style="background-image:url(/Images/placeholder/batman-2016-120-7.jpeg)"></div> <div class="page"><img src="/Images/placeholder/batman-2016-120-5.jpeg" draggable="false" alt="" /></div>
<div style="background-image:url(pages/6.jpg)"></div> <div class="page"><img src="/Images/placeholder/batman-2016-120-6.jpeg" draggable="false" alt="" /></div>
<div style="background-image:url(pages/7.jpg)"></div> <div class="page"><img src="/Images/placeholder/batman-2016-120-7.jpeg" draggable="false" alt="" /></div>
<div style="background-image:url(pages/8.jpg)"></div> </div>
<div style="background-image:url(pages/9.jpg)"></div> </div>
<div style="background-image:url(pages/10.jpg)"></div> </div>
<div style="background-image:url(pages/11.jpg)"></div>
<div style="background-image:url(pages/12.jpg)"></div>
</div>
</div>
</div> </div>
<script type="text/javascript">
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
// Width
width:900,
// Height
height:700,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
// 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
});
</script>
</div> </div>
</div>
</div>
</section> </section>
<script type="text/javascript">
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
// Width
width:900,
// Height
height:700,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
// 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) {
flipbookEL.style.width = '';
flipbookEL.style.height = '';
$(flipbookEL).turn('size', flipbookEL.clientWidth, flipbookEL.clientHeight);
});
$(flipbookEL).turn({
autoCenter: true
});
</script>
<hr> <hr>
<div class="row button-container"> <div class="row button-container">
<a href="#" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-0 mt-0" id="nav-cta"><i class="icon-download-arrow"></i>DOWNLOAD ISSUE #1</a> <a href="#" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-0 mt-0" id="nav-cta"><i class="icon-download-arrow"></i>DOWNLOAD ISSUE #1</a>

3
src/static/css/buttons.css
View file

@ -38,7 +38,8 @@
/* Icon Styling */ /* Icon Styling */
.btn-primary .icon-enter-arrow{ .btn-primary .icon-enter-arrow,
.btn-primary .icon-download-arrow{
display: inline-block; display: inline-block;
position: relative; position: relative;
margin-right: 0.558vw; margin-right: 0.558vw;