Skip to content

Instantly share code, notes, and snippets.

@koutoftimer
Created April 16, 2018 20:05
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save koutoftimer/fd12e7c6d39e4ebbde9a3e7db35ed779 to your computer and use it in GitHub Desktop.
Index template
{% extends 'base.html' %}
{% load static %}
{% block title %}{{ index.title }}{% endblock %}
{% block head %}
<style>
html {
background: {{ index.bg_color }} url("{{ index.image.url }}") no-repeat center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}
a {
position: relative !important;
left: 0px;
top: 0px;
}
.section {
position: absolute !important;
border-radius: 1000px;
}
.section .label {
position: relative;
left: -50%;
top: 80%;
background-color: white;
opacity: 0.5;
font-size: 2em;
text-align: center;
}
.section:hover .label {
opacity: 1;
}
</style>
{% endblock %}
{% block content %}
{% for index_ref in index.indexrefs_set.all %}
<a href="{{ index_ref.ref }}" class="menu">
<div class="section d-none" data-x="{{ index_ref.x }}" data-y="{{ index_ref.y }}" data-radius="{{ index_ref.radius }}">
<div class="label">{{ index_ref.title }}</div>
</div>
</a>
{% endfor %}
{% endblock %}
{% block scripts %}
<script>
window.addEventListener('load', function() {
var sections = document.querySelectorAll('.section'),
forEach = Array.prototype.forEach;
activate();
function activate() {
window.addEventListener('resize', resize_handler);
forEach.call(sections, function (section) {
section.classList.remove('d-none');
});
resize_handler();
}
function resize_handler(event) {
forEach.call(sections, function(section) {
var left = parseInt(section.dataset.x),
top = parseInt(section.dataset.y),
radius = parseInt(section.dataset.radius);
var width = parseInt("{{ index.image.width }}"),
height = parseInt("{{ index.image.height }}"),
img_proportions = width / height,
win_width = window.innerWidth,
win_height = window.innerHeight,
win_proportions = win_width / win_height;
var scale = img_proportions > win_proportions
? win_height / height
: win_width / width;
left *= scale;
top *= scale;
radius *= scale;
if (img_proportions > win_proportions) {
left -= (width * scale - win_width) / 2;
}
else {
top -= (height * scale - win_height) / 2;
}
top -= radius;
left -= radius;
section.style.width = section.style.height = 2 * radius + 'px';
section.style.left = left + 'px';
section.style.top = top + 'px';
});
}
});
</script>
{% endblock %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment