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) { ...@@ -162,10 +162,10 @@ function renderState(state) {
if (state.fixed_header === true) { if (state.fixed_header === true) {
$("#fixedHeaderCheckbox").prop("checked", true); $("#fixedHeaderCheckbox").prop("checked", true);
$("#gameContainer").addClass("vh-100"); $("#gameContainer").addClass("fixed-header");
} else { } else {
$("#fixedHeaderCheckbox").prop("checked", false); $("#fixedHeaderCheckbox").prop("checked", false);
$("#gameContainer").removeClass("vh-100"); $("#gameContainer").removeClass("fixed-header");
} }
if (state.plis != null) { if (state.plis != null) {
...@@ -275,6 +275,13 @@ function debugSkipTime(seconds) { ...@@ -275,6 +275,13 @@ function debugSkipTime(seconds) {
} }
$(function () { $(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 popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, { return new bootstrap.Popover(popoverTriggerEl, {
......
...@@ -14,6 +14,12 @@ ...@@ -14,6 +14,12 @@
crossorigin="anonymous" crossorigin="anonymous"
/> />
<style>
.fixed-header {
height: calc(var(--vh, 1vh) * 100);
}
</style>
<title>CyberLozhkin</title> <title>CyberLozhkin</title>
</head> </head>
<body style=" <body style="
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
{% load template_filters %} {% load template_filters %}
{% block content %} {% block content %}
<div class="container-md p-0" style="max-width: 800px;"> <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="d-flex justify-content-between">
<div class="m-2"> <div class="m-2">
<h5 class="m-0"> <h5 class="m-0">
...@@ -87,5 +87,5 @@ ...@@ -87,5 +87,5 @@
{% include 'modals/leaderboard.html' %} {% include 'modals/leaderboard.html' %}
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script src="{% static 'script.js' %}?v=3"></script> <script src="{% static 'script.js' %}?v=5"></script>
{% endblock %} {% 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