Commit dabe1acb authored by Vladimir Zhukov's avatar Vladimir Zhukov
Browse files

make fixed header work better on android

parent 2afd3bbc
Pipeline #1489 passed with stage
in 2 seconds
......@@ -162,10 +162,10 @@ function renderState(state) {
if (state.fixed_header === true) {
$("#fixedHeaderCheckbox").prop("checked", true);
$("#gameContainer").addClass("vh-100");
$("#gameContainer").addClass("fixed-header");
} else {
$("#fixedHeaderCheckbox").prop("checked", false);
$("#gameContainer").removeClass("vh-100");
$("#gameContainer").removeClass("fixed-header");
}
if (state.plis != null) {
......@@ -275,6 +275,13 @@ function debugSkipTime(seconds) {
}
$(function () {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
......
......@@ -14,6 +14,12 @@
crossorigin="anonymous"
/>
<style>
.fixed-header {
height: calc(var(--vh, 1vh) * 100);
}
</style>
<title>CyberLozhkin</title>
</head>
<body style="
......
......@@ -3,7 +3,7 @@
{% load template_filters %}
{% block content %}
<div class="container-md p-0" style="max-width: 800px;">
<div id="gameContainer" class="d-flex flex-column {% if state.fixed_header %} vh-100 {% endif %}">
<div id="gameContainer" class="d-flex flex-column {% if state.fixed_header %} fixed-header {% endif %}">
<div class="d-flex justify-content-between">
<div class="m-2">
<h5 class="m-0">
......@@ -87,5 +87,5 @@
{% include 'modals/leaderboard.html' %}
{% endblock %}
{% block scripts %}
<script src="{% static 'script.js' %}?v=3"></script>
<script src="{% static 'script.js' %}?v=5"></script>
{% endblock %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment