From af077c04e22a3e7e8b16dd65a44923a33d8efdf8 Mon Sep 17 00:00:00 2001
From: "jindra12.underdark" <jindra12.underdark@gmail.com>
Date: Fri, 5 May 2023 00:09:16 +0200
Subject: [PATCH] Design basic front-end with provided styles from package
#190
#184
---
district/templates/district/base.html | 1 +
.../templates/senat_campaign/base.html | 1 +
shared/models.py | 6 ++++
.../css/mastodon-timeline.min.css | 1 +
.../shared/mastodon_feed_toots_snippet.html | 28 +++++++++++++++++++
uniweb/templates/uniweb/base.html | 1 +
6 files changed, 38 insertions(+)
create mode 100644 shared/static/shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.min.css
diff --git a/district/templates/district/base.html b/district/templates/district/base.html
index 7fe52be3..ef15ca18 100644
--- a/district/templates/district/base.html
+++ b/district/templates/district/base.html
@@ -22,6 +22,7 @@
<link rel="stylesheet" href="https://styleguide.pirati.cz/2.10.x/css/styles.css">
<link href="{% static "shared/vendor/fancybox/jquery.fancybox.min.css" %}" rel="stylesheet">
<link rel="stylesheet" href="{% static "shared/css/helpers.css" %}">
+ <link rel="stylesheet" href="{% static "shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.min.css" %}">
{% block styles %}{% endblock %}
diff --git a/senat_campaign/templates/senat_campaign/base.html b/senat_campaign/templates/senat_campaign/base.html
index b1b40735..0b2ede2d 100644
--- a/senat_campaign/templates/senat_campaign/base.html
+++ b/senat_campaign/templates/senat_campaign/base.html
@@ -32,6 +32,7 @@
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static "shared/vendor/bootstrap-4.4.1/css/bootstrap.min.css" %}">
<link rel="stylesheet" href="{% static "shared/vendor/fancybox/jquery.fancybox.min.css" %}">
+ <link rel="stylesheet" href="{% static "shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.min.css" %}">
<!-- Styles -->
<link href="{% static "senat_campaign/assets/css/style.css" %}" rel="stylesheet">
diff --git a/shared/models.py b/shared/models.py
index 99fd4165..8d395e9f 100644
--- a/shared/models.py
+++ b/shared/models.py
@@ -7,6 +7,7 @@ from django.core.serializers.json import DjangoJSONEncoder
from django.db import models
from django.forms import ValidationError
from django.utils import timezone
+from django.utils.dateparse import parse_datetime
from requests import request
from wagtail.admin.panels import FieldPanel, MultiFieldPanel, PublishingPanel
from wagtail.fields import StreamField
@@ -81,6 +82,7 @@ class MastodonImageMixin(models.Model):
class Mastodon(MastodonImageMixin, models.Model):
url = models.URLField()
+ user = models.JSONField(encoder=DjangoJSONEncoder, null=True)
toots = models.JSONField(encoder=DjangoJSONEncoder, null=True)
summary = models.TextField(null=True, blank=True)
@@ -107,6 +109,9 @@ class Mastodon(MastodonImageMixin, models.Model):
self.download_image(f"{user.preferredUsername}.jpg", user["icon"]["url"])
for toot in toots["orderedItems"]:
+ toot["published"] = parse_datetime(toot["published"]).strftime(
+ "%d. %m. %Y G:i"
+ )
if toot["attachment"] != None:
for attachment in toot["attachment"]:
mastodon_attachment: MastodonAttachment = (
@@ -119,6 +124,7 @@ class Mastodon(MastodonImageMixin, models.Model):
attachment["url"] = mastodon_attachment.image.url
self.toots = toots.orderedItems
+ self.user = user
self.summary = user.summary
def refresh_toots(self):
diff --git a/shared/static/shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.min.css b/shared/static/shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.min.css
new file mode 100644
index 00000000..3f7f679f
--- /dev/null
+++ b/shared/static/shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.min.css
@@ -0,0 +1 @@
+:root{--text-max-lines:none}:root,html[data-theme=light]{--bg-color:#fff;--bg-hover-color:#d9e1e8;--line-gray-color:#c0cdd9;--content-text:#000;--link-color:#3a3bff;--error-text-color:#8b0000}html[data-theme=dark]{--bg-color:#282c37;--bg-hover-color:#313543;--line-gray-color:#393f4f;--content-text:#fff;--link-color:#8c8dff;--error-text-color:#fe6c6c}.mt-timeline{height:100%;overflow-y:auto;position:relative;background:var(--bg-color);scrollbar-color:var(--bg-hover-color) rgba(0,0,0,.1)}.mt-timeline a,.mt-timeline a:active,.mt-timeline a:link{text-decoration:none;color:var(--link-color)}.mt-timeline a:hover{text-decoration:underline}.mt-timeline::-webkit-scrollbar{width:.75rem;height:.75rem}.mt-timeline::-webkit-scrollbar-corner{background:0 0}.mt-timeline::-webkit-scrollbar-thumb{border:0 var(--content-text);border-radius:2rem;background:var(--bg-hover-color)}.mt-timeline::-webkit-scrollbar-track{border:0 var(--content-text);border-radius:0;background:rgba(0,0,0,.1)}.mt-body{padding:1rem 1.5rem;white-space:pre-wrap;word-wrap:break-word}.mt-body .invisible{font-size:0;line-height:0;display:inline-block;width:0;height:0;position:absolute}.mt-toot{margin:.25rem;padding:1rem .5rem 2rem 4rem;position:relative;min-height:3.75rem;background-color:transparent;border-bottom:1px solid var(--line-gray-color)}.mt-toot:focus,.mt-toot:hover{cursor:pointer;background-color:var(--bg-hover-color)}.mt-toot p:last-child{margin-bottom:0}.mt-avatar{position:absolute;top:1rem;left:5px;width:3rem;height:3rem;background-color:transparent;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:var(--bg-color);border-radius:5px}.mt-avatar-boosted{width:2.5rem;height:2.5rem}.mt-avatar-booster{width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem}.mt-user{display:table;font-weight:600}.mt-user>a{color:var(--content-text)!important}.toot-text{margin-bottom:.25rem;color:var(--content-text)}.toot-text .spoiler-link{display:inline-block;border-radius:2px;background-color:var(--bg-hover-color);border:0;color:var(--content-text);font-weight:700;font-size:.7rem;padding:0 .35rem;text-transform:uppercase;line-height:1.25rem;cursor:pointer;vertical-align:top}.toot-text .spoiler-text{display:none}.toot-text.truncate{display:-webkit-box;overflow:hidden;-webkit-line-clamp:var(--text-max-lines);-webkit-box-orient:vertical}.toot-text:not(.truncate) .ellipsis::after{content:"..."}.mt-error{position:absolute;display:flex;flex-direction:column;height:calc(100% - 3.5rem);width:calc(100% - 4.5rem);justify-content:center;align-items:center;color:var(--error-text-color);padding:.75rem;text-align:center}.toot-poll{margin-bottom:.25rem;color:var(--content-text)}.toot-poll ul{list-style:none;padding:0;margin:0}.toot-poll ul li{font-size:.9rem;margin-bottom:.5rem}.toot-poll ul li:not(:last-child){margin-bottom:.25rem}.toot-poll ul li:before{content:"◯";padding-right:.5rem}.toot-media{overflow:hidden;margin-bottom:.25rem}.toot-media-preview{position:relative;margin-top:.25rem;height:auto;text-align:center;width:100%}.toot-media-spoiler>img{filter:blur(2rem)}.toot-media-preview a{display:block;position:absolute;top:0;right:0;bottom:0;left:0}.img-ratio14_7{position:relative;padding-top:48.95%;width:100%}.img-ratio14_7>img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.toot-date{font-size:.75rem}.mt-body>.loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.loading-spinner{height:100%;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-color:transparent;background-size:min(2.5rem,calc(100% - .5rem))}.mt-footer{margin:1rem auto 2rem auto;padding:0 2rem;text-align:center}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
diff --git a/shared/templates/shared/mastodon_feed_toots_snippet.html b/shared/templates/shared/mastodon_feed_toots_snippet.html
index e69de29b..bacfab39 100644
--- a/shared/templates/shared/mastodon_feed_toots_snippet.html
+++ b/shared/templates/shared/mastodon_feed_toots_snippet.html
@@ -0,0 +1,28 @@
+<div class="mt-timeline">
+ <div class="mt-body">
+ {% for toot in mastodon_feed.mastodon.toots %}
+ <article class="mt-toot" aria-posinset="{{ forloop.counter }}" aria-setsize="{{ mastodon_feed.mastodon.toots|length }}">
+ <a href="{{ mastodon_feed.mastodon_feed }}" class="mt-avatar" style="background-image:url({{ mastodon_feed.image.url }});">
+ <span class="visually-hidden">Avatar</span>
+ </a>
+ <div class="mt-user">
+ <a href="https://mastodon.online/@Chestnots" rel="nofollow noopener noreferrer" target="_blank">{{ mastodon_feed.user.preferredUsername }}</a>
+ </div>
+ <div class="toot-text">
+ {{ toot.content|linebreaks }}
+ </div>
+ {% for attachment in toot.attachment %}
+ <div class="toot-media img-ratio14_7">
+ <img src="{{ attachment.image.url }}">
+ </div>
+ {% endfor %}
+ <div class="toot-date">
+ {{ toot.published }}
+ </div>
+ </article>
+ {% endfor %}
+ </div>
+ <div class="mt-footer">
+ <a href="{{ mastodon_feed.mastodon_feed }}" class="btn">Zobrazit další tooty</a>
+ </div>
+</div>
diff --git a/uniweb/templates/uniweb/base.html b/uniweb/templates/uniweb/base.html
index 94ad2b97..d7230186 100644
--- a/uniweb/templates/uniweb/base.html
+++ b/uniweb/templates/uniweb/base.html
@@ -20,6 +20,7 @@
<link href="https://styleguide.pirati.cz/2.11.x/css/styles.css" rel="stylesheet" media="all" />
<link href="https://styleguide.pirati.cz/2.11.x/css/pattern-scaffolding.css" rel="stylesheet" media="all" />
<link href="{% static "shared/vendor/fancybox/jquery.fancybox.min.css" %}" rel="stylesheet">
+ <link rel="stylesheet" href="{% static "shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.min.css" %}">
<style type="text/css">
.head-alt-md, .head-alt-lg {
--
GitLab