Fix responsive home page, close #80

This commit is contained in:
printempw 2017-08-04 10:21:03 +08:00
parent d5f7c704dd
commit 904ab9f05b
2 changed files with 27 additions and 12 deletions

@ -1 +1 @@
Subproject commit 83407fbda6010091e10d27d6ddafbec5d761a5ec
Subproject commit 75ad204aa2165b1ea1d5da955fa31015e74ed9eb

View File

@ -9,18 +9,11 @@
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- App Styles -->
@include('common.dependencies.style', ['module' => 'index'])
<script type="text/javascript">
var changeWrapperHeight = function () {
document.getElementsByClassName('wrapper')[0].style.height = window.innerHeight + 'px';
};
</script>
</head>
<body class="hold-transition {{ option('color_scheme') }} layout-top-nav">
<div class="wrapper" style="background-image: url('{{ option('home_pic_url') }}');">
<script>changeWrapperHeight();</script>
<!-- Navigation -->
<header class="main-header transparent">
<nav class="navbar navbar-fixed-top">
@ -133,15 +126,37 @@
<!-- App Scripts -->
@include('common.dependencies.script')
<script>
$(window).scroll(function(event) {
// change color of the navigation bar when scrolling
<script type="text/javascript">
var cachedWindowWidth = $(window).width();
function changeWrapperHeight() {
var btn = $('p a.button');
var bottom = btn.offset().top + btn.height() + 80;
if (bottom > $(window).height()) {
$('.wrapper').height(bottom + 'px');
} else {
$('.wrapper').height($(window).height() + 'px');
}
}
function changeHeaderTransparency() {
if (document.body.scrollTop >= ($(window).height() * 2 / 3)) {
$('.main-header').removeClass('transparent');
} else {
$('.main-header').addClass('transparent');
}
});
}
$(window)
.scroll(changeHeaderTransparency)
.ready(changeWrapperHeight)
.resize(function () {
if ($(window).width() !== cachedWindowWidth) {
changeWrapperHeight();
}
});
</script>
</body>
</html>