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 container_name: infomate_migrate_and_init
restart: "no" restart: "no"
ports: [] 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 = { CACHES = {
"default": { "default": {
"BACKEND": "django.core.cache.backends.filebased.FileBasedCache", "BACKEND": "django.core.cache.backends.dummy.DummyCache",
"LOCATION": os.path.join(BASE_DIR, "../django_cache.tmp")
} }
} }
STATIC_PAGE_CACHE_SECONDS = 5 * 60 # 5 min STATIC_PAGE_CACHE_SECONDS = 5 * 60 # 5 min

7
static/css/components.css
View File

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

56
static/css/layout.css
View File

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

32
static/js/main.js
View File

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

86
templates/board.html
View File

@@ -49,53 +49,53 @@
<div class="block"> <div class="block">
{% if block.name %} {% if block.name %}
<div class="block-header">{{ block.name }}</div> <div class="block-header">{{ block.name }}</div>
{% else %}
<div class="block-header is-block-header-dummy"></div>
{% endif %} {% endif %}
{% for feed in feeds %} <div class="feeds">
{% if feed.block == block %} {% for feed in feeds %}
{% for column, articles in feed.articles_by_column %} {% if feed.block == block %}
<div class="feed {% if column > 1 %}hide-on-iphone{% endif %}"> {% for column, articles in feed.articles_by_column %}
{% if feed.name %} <div class="feed {% if column > 1 %}hide-on-iphone{% endif %}">
<div class="feed-title {% if column != 0 %}feed-title-hidden{% endif %}"> {% if feed.name %}
{% if feed.icon %} <div class="feed-title {% if column != 0 %}feed-title-hidden{% endif %}">
<img src="{{ feed.icon }}" alt="{{ feed.name }}"> {% if feed.icon %}
{% endif %} <img src="{{ feed.icon }}" alt="{{ feed.name }}">
<a href="{{ feed.url }}" target="_blank">{{ feed.name }}</a><br> {% endif %}
<small>последний пост {{ feed.natural_last_article_at }}</small> <a href="{{ feed.url }}" target="_blank">{{ feed.name }}</a><br>
</div> <small>последний пост {{ feed.natural_last_article_at }}</small>
{% 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> </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>
</div> {% endfor %}
{% endfor %} {% endif %}
{% endif %} {% endfor %}
{% endfor %} </div>
</div> </div>
{% endfor %} {% endfor %}
{% endblock %} {% endblock %}

390
templates/board_no_access.html
View File

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