upagge/infomate.club
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dynamic tooltip positioning

Browse Source
This commit is contained in:
Vasily Zubarev
2020-02-24 11:29:38 +01:00
parent 61ebba9438
commit 9cd500da25
7 changed files with 301 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docker-compose.yml
View File

@@ -34,4 +34,4 @@ services:
container_name: infomate_migrate_and_init
restart: "no"
ports: []
command: make migrate feed_init
command: make migrate feed_init # feed_refresh # <-- uncomment to parse some data

3
infomate/settings.py
View File

@@ -90,8 +90,7 @@ CSS_HASH = str(random())
CACHES = {
"default": {
"BACKEND": "django.core.cache.backends.filebased.FileBasedCache",
"LOCATION": os.path.join(BASE_DIR, "../django_cache.tmp")
"BACKEND": "django.core.cache.backends.dummy.DummyCache",
}
}
STATIC_PAGE_CACHE_SECONDS = 5 * 60 # 5 min

7
static/css/components.css
View File

@@ -157,11 +157,6 @@
font-weight: bold;
}
.is-block-header-dummy {
border: none;
height: 0;
}
.is-block-blurred {
filter: blur(7px) contrast(175%);
user-select: none;
@@ -262,6 +257,7 @@
.article-tooltip {
display: none;
width: 100%;
position: absolute;
bottom: 25px;
left: 0;
@@ -272,7 +268,6 @@
color: var(--opposite-text-color) !important;
z-index: 999;
text-decoration: none;
max-width: 100%;
font-size: 17px;
}

56
static/css/layout.css
View File

@@ -53,36 +53,66 @@
}
.block {
display: block;
}
.feeds {
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: auto auto;
}
.block-header {
grid-column-start: 1;
grid-column-end: 4;
.feed .article-tooltip {
/* Shift tooltip to right */
left: 85%;
top: -100px;
right: auto;
bottom: auto;
}
.feed:nth-child(3n) .article-tooltip {
/* Shift tooltip to left */
left: -105%;
top: -100px;
right: auto;
bottom: auto;
}
@media only screen and (max-width : 1024px) {
.block {
/* Switch to 2-columns */
.feeds {
grid-template-columns: 50% 50%;
}
.block-header {
grid-column-start: 1;
grid-column-end: 3;
}
.feeds .feed .article-tooltip {
/* Shift tooltip to right */
left: 85%;
top: -200px;
right: auto;
bottom: auto;
}
.feeds .feed:nth-child(2n) .article-tooltip {
/* Shift tooltip to left */
left: -105%;
top: -100px;
right: auto;
bottom: auto;
}
}
@media only screen and (max-width : 750px) {
.block {
.feeds {
grid-template-columns: 100%;
}
.block-header {
grid-column-start: 1;
grid-column-end: 2;
}
.feeds .feed .article-tooltip {
/* Shift tooltip up */
bottom: 25px !important;
left: 0 !important;
right: auto !important;
top: auto !important;
}
}
@media only screen and (max-width : 570px) {

32
static/js/main.js
View File

@@ -32,27 +32,27 @@ function hideTooltipOnAnyClick() {
}, true);
}
function checkKeyPress(e) {
function addWeirdLogicThatSomeGeeksWillUseOnceAndForget() {
let body = document.querySelector('body');
body.addEventListener('keyup', function(e) {
let tooltip;
let tooltip;
if (e.keyCode == 81) {
tooltip = document.activeElement.parentNode.parentNode.querySelector('.article-tooltip');
if (tooltip.style.display == "block") {
tooltip.style.display = null;
} else {
tooltip.style.display = "block";
if (e.keyCode == 81) {
tooltip = document.activeElement.parentNode.parentNode.querySelector('.article-tooltip');
if (tooltip.style.display == "block") {
tooltip.style.display = null;
} else {
tooltip.style.display = "block";
}
}
}
if (e.keyCode == 9) {
hideTooltip();
}
if (e.keyCode == 9) {
hideTooltip();
}
});
}
let body = document.querySelector('body');
body.addEventListener('keyup', checkKeyPress);
initializeThemeSwitcher();
hideTooltipOnAnyClick();
addWeirdLogicThatSomeGeeksWillUseOnceAndForget();

86
templates/board.html
View File

@@ -49,53 +49,53 @@
<div class="block">
{% if block.name %}
<div class="block-header">{{ block.name }}</div>
{% else %}
<div class="block-header is-block-header-dummy"></div>
{% endif %}
{% for feed in feeds %}
{% if feed.block == block %}
{% for column, articles in feed.articles_by_column %}
<div class="feed {% if column > 1 %}hide-on-iphone{% endif %}">
{% if feed.name %}
<div class="feed-title {% if column != 0 %}feed-title-hidden{% endif %}">
{% if feed.icon %}
<img src="{{ feed.icon }}" alt="{{ feed.name }}">
{% endif %}
<a href="{{ feed.url }}" target="_blank">{{ feed.name }}</a><br>
<small>последний пост {{ feed.natural_last_article_at }}</small>
</div>
{% endif %}
<div class="articles feed-articles">
{% for article in articles %}
<div class="article {% if article.is_fresh %}is-article-fresh{% endif %}">
<div class="article-title">{{ article.icon|safe }}<a href="{{ article.url }}" target="_blank">{{ article.title|bleach }}</a></div>
<a href="{{ article.url }}" class="article-tooltip" target="_blank">
{% if article.image %}
<img src="{{ article.image }}" alt="{{ article.title|striptags }}" class="article-tooltip-image">
{% endif %}
<span class="article-tooltip-title">{{ article.title|striptags|truncatechars:300 }}</span>
{% if article.description or article.summary %}
<span class="article-tooltip-description">
{% if feed.is_parsable and article.summary %}
{{ article.summary|striptags|truncatechars:700|escape|nl2p|safe }}
{% else %}
{{ article.description|striptags|truncatechars:700|escape|nl2p|safe }}
{% endif %}
</span>
{% endif %}
<span class="article-tooltip-info">{{ article.natural_created_at }} @ {{ article.domain }}</span>
</a>
<div class="feeds">
{% for feed in feeds %}
{% if feed.block == block %}
{% for column, articles in feed.articles_by_column %}
<div class="feed {% if column > 1 %}hide-on-iphone{% endif %}">
{% if feed.name %}
<div class="feed-title {% if column != 0 %}feed-title-hidden{% endif %}">
{% if feed.icon %}
<img src="{{ feed.icon }}" alt="{{ feed.name }}">
{% endif %}
<a href="{{ feed.url }}" target="_blank">{{ feed.name }}</a><br>
<small>последний пост {{ feed.natural_last_article_at }}</small>
</div>
{% endfor %}
{% endif %}
<div class="articles feed-articles">
{% for article in articles %}
<div class="article {% if article.is_fresh %}is-article-fresh{% endif %}">
<div class="article-title">{{ article.icon|safe }}<a href="{{ article.url }}" target="_blank">{{ article.title|bleach }}</a></div>
<a href="{{ article.url }}" class="article-tooltip" target="_blank">
{% if article.image %}
<img src="{{ article.image }}" alt="{{ article.title|striptags }}" class="article-tooltip-image">
{% endif %}
<span class="article-tooltip-title">{{ article.title|striptags|truncatechars:300 }}</span>
{% if article.description or article.summary %}
<span class="article-tooltip-description">
{% if feed.is_parsable and article.summary %}
{{ article.summary|striptags|truncatechars:700|escape|nl2p|safe }}
{% else %}
{{ article.description|striptags|truncatechars:700|escape|nl2p|safe }}
{% endif %}
</span>
{% endif %}
<span class="article-tooltip-info">{{ article.natural_created_at }} @ {{ article.domain }}</span>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
{% endblock %}

390
templates/board_no_access.html
View File

@@ -4,213 +4,215 @@
<div class="block is-block-blurred">
<div class="blocker"></div>
<div class="block-header">Привет, друг! Тоже думал, что самый умный? Штош...</div>
<div class="feed">
<div class="feed-title">
<img src="https://i.vas3k.ru/fhm.png" alt="twitter">
<a href="#" target="_blank">Twitter</a><br>
<small>последний недушный пост: никогда</small>
</div>
<div class="articles feed-articles">
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
<div class="feeds">
<div class="feed">
<div class="feed-title">
<img src="https://i.vas3k.ru/fhm.png" alt="twitter">
<a href="#" target="_blank">Twitter</a><br>
<small>последний недушный пост: никогда</small>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
<div class="articles feed-articles">
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
</div>
</div>
</div>
<div class="feed">
<div class="feed-title">
<img src="https://i.vas3k.ru/fer.jpg" alt="twitter">
<a href="#" target="_blank">Facebook</a><br>
<small>верни мои данные!</small>
</div>
<div class="articles feed-articles">
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
<div class="feed">
<div class="feed-title">
<img src="https://i.vas3k.ru/fer.jpg" alt="twitter">
<a href="#" target="_blank">Facebook</a><br>
<small>верни мои данные!</small>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
<div class="articles feed-articles">
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
</div>
</div>
</div>
<div class="feed">
<div class="feed-title">
<img src="https://i.vas3k.ru/fhc.png" alt="twitter">
<a href="#" target="_blank">Одноклассники</a><br>
<small>все скорее туда</small>
</div>
<div class="articles feed-articles">
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
<div class="feed">
<div class="feed-title">
<img src="https://i.vas3k.ru/fhc.png" alt="twitter">
<a href="#" target="_blank">Одноклассники</a><br>
<small>все скорее туда</small>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
<div class="articles feed-articles">
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
</div>
</div>
</div>
<div class="feed">
<div class="feed-title">
<img src="https://i.vas3k.ru/fhf.png" alt="twitter">
<a href="#" target="_blank">Телеграм</a><br>
<small>чо, многому научились из каналов?</small>
</div>
<div class="articles feed-articles">
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
<div class="feed">
<div class="feed-title">
<img src="https://i.vas3k.ru/fhf.png" alt="twitter">
<a href="#" target="_blank">Телеграм</a><br>
<small>чо, многому научились из каналов?</small>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
<div class="articles feed-articles">
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
</div>
</div>
</div>
<div class="feed">
<div class="feed-title">
<img src="https://i.vas3k.ru/fhe.png" alt="twitter">
<a href="#" target="_blank">Вконтакте</a><br>
<small>верни стену</small>
</div>
<div class="articles feed-articles">
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
<div class="feed">
<div class="feed-title">
<img src="https://i.vas3k.ru/fhe.png" alt="twitter">
<a href="#" target="_blank">Вконтакте</a><br>
<small>верни стену</small>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
<div class="articles feed-articles">
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
<div class="article">
<div class="article-title">Возьми с полки пирожок, хакир. Ты заслужил!</div>
</div>
</div>
</div>
</div>