roundabout,
created on Saturday, 6 January 2024, 10:22:00 (1704536520),
received on Wednesday, 31 July 2024, 06:54:40 (1722408880)
Author identity: vlad <vlad.muntoiu@gmail.com>
8f7d1a442dbe8a47c05609ec7f80346b6617a85b
app.py
@@ -304,7 +304,7 @@ def userProfile(username):
repos = Repo.query.filter_by(ownerName=username, visibility=2)
return flask.render_template("user-profile-repositories.html", user=user, repos=repos, relationship=oldRelationship)
case "followers":
return flask.render_template("user-profile-followers.html", user=user, repos=repos, relationship=oldRelationship)
return flask.render_template("user-profile-followers.html", user=user, relationship=oldRelationship)
case _:
return flask.render_template("user-profile-overview.html", user=user, relationship=oldRelationship)
static/marquee.js
@@ -0,0 +1,14 @@
function isOverflown(e) {
return e.scrollWidth > e.clientWidth;
}
let marquees = document.querySelectorAll(".inner-thumbnail-marquee");
for(const e of marquees) {
if(isOverflown(e)) {
e.style.animationPlayState = "running";
e.style.transform = "translateX(100%)";
} else {
e.style.animation = "none";
};
};
static/style.css
@@ -163,4 +163,28 @@ dd {
.dialog-tools {
position: relative;
left: 8px;
}
.thumbnail-marquee {
height: 1.5em;
overflow: hidden;
position: relative;
}
.inner-thumbnail-marquee {
position: absolute;
width: 100%;
height: 100%;
overflow: visible;
text-align: center;
animation: marquee 3000ms linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(200%);
}
100% {
transform: translateX(-200%);
}
}
templates/default.html
@@ -115,4 +115,6 @@
<script src="/static/ripples.js"></script>
<script src="/static/efficient-ui/dialogs.js"></script>
<script src="/static/efficient-ui/toasts.js"></script>
{% block scripts %}
{% endblock %}
</html>
templates/user-profile-followers.html
@@ -0,0 +1,21 @@
{% extends "user-profile.html" %}
{% block content %}
<x-frame style="--width: 768px;">
<x-hbox class="wrap homogenous">
{% for follower in user.followers %}
<x-frame style="flex-basis: 96px; --width: 96px;">
<article class="card" style="flex: 0 1 auto;">
<section class="card-main">
<a href="/{{ follower.followed.username }}">
<img class="avatar" src="/info/{{ follower.followed.username }}/avatar" style="width: 100%;">
<div class="thumbnail-marquee">
<span class="inner-thumbnail-marquee" style="animation-play-state: paused;">{{ follower.followed.username }}</span>
</div>
</a>
</section>
</article>
</x-frame>
{% endfor %}
</x-hbox>
</x-frame>
{% endblock %}
templates/user-profile.html
@@ -9,7 +9,8 @@
<nav id="repo-nav" class="navbar">
<ul id="repo-tabs">
<li><a href="?">Overview</a></li>
<li><a href="?action=repositories">Repositories</a></li>
<li><a href="?action=repositories">Repositories ({{ user.repositories | length }})</a></li>
<li><a href="?action=followers">Followers ({{ user.followers | length }})</a></li>
</ul>
<x-buttonbox>
{% if loggedInUser != user.username and loggedInUser %}
@@ -24,3 +25,7 @@
</nav>
{% endblock %}