From 8524ea0f97b41ab9e5cc14f9917d013ae36d3f9c Mon Sep 17 00:00:00 2001
From: girst <tobi@isticktoit.net>
Date: Sun, 20 Sep 2020 01:15:18 +0200
Subject: [PATCH] change pinned style

fully css defined; no more html boilerplate. also, the <hr> breaking
the grid was ugly.
---
 app/reddit/templates/reddit.html.j2   |  5 -----
 app/static/style.css                  |  8 ++++++++
 app/templates/macros.imp.j2           | 10 ++++++----
 app/youtube/templates/index.html.j2   |  4 ----
 app/youtube/templates/xmlfeed.html.j2 |  4 ----
 5 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/app/reddit/templates/reddit.html.j2 b/app/reddit/templates/reddit.html.j2
index 55f5923..b926285 100644
--- a/app/reddit/templates/reddit.html.j2
+++ b/app/reddit/templates/reddit.html.j2
@@ -18,15 +18,10 @@
 	{% set alt = row.n_karma~' karma, '~row.n_comments~' comments' %}
 	{{ '<span class=bad>' if 1 >= row.n_karma|int(10) }}
 	{% call macros.card(row.video_id, row.title, karma, row.pinned, alt, row.url) %}
-
 	<a href="{{ url_for('reddit.reddit', subreddit=row.subreddit) }}">
 		/r/{{ row.subreddit | lower | e }}
 	</a>
 	{% endcall %}{{ '</span>' if 1>=row.n_karma|int(10) }}
-	{% if row.pinned and not rows[loop.index].pinned %}
-	{{ macros.dummycard() }}
-	<hr>
-	{% endif %}
 {% endfor %}
 {{ macros.dummycard() }}
 </div>
diff --git a/app/static/style.css b/app/static/style.css
index 444e9a1..704edad 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -153,6 +153,14 @@ article {
   left: 0; top: 0; right: 0; bottom: 0;
 }
 
+.card.pinned {
+  background: rgba(255,0,0,.1);
+}
+.card.pinned .infobar details.advanced>summary::after,
+.card.pinned .infobar :not(details).advanced::after {
+  content: ' \1f4cc\FE0F';
+}
+
 .card .infobar{
   display: flex;
 }
diff --git a/app/templates/macros.imp.j2 b/app/templates/macros.imp.j2
index 8ec3a95..4a559cb 100644
--- a/app/templates/macros.imp.j2
+++ b/app/templates/macros.imp.j2
@@ -1,7 +1,7 @@
 {% set fallback_img = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='%23fff'><circle r='30' cx='80' cy='150' fill='%23fff' stroke='%23000'/><circle r='30' cx='150' cy='150' fill='%23fff' stroke='%23000'/><circle r='30' cx='220' cy='150' fill='%23fff' stroke='%23000'/></svg>" %}
 
-{% macro card_generic(link, thumbnail, title='', badge=None) -%}
-	<div class="card">
+{% macro card_generic(link, thumbnail, title='', badge=None, pinned=False) -%}
+	<div class="card {{ "pinned" if pinned else "" }}">
 		<div class="card-main">
 			<div class="thumb">
 				<img src="{{ thumbnail or fallback_img}}">
@@ -20,7 +20,8 @@
 
 {% macro card(video_id, title='', advanced_text='', pinned="undefined", advanced_title='', post_url=None, badge=None) -%}
 	{% set caller_ = caller %}
-	{% call card_generic("/watch?v="~video_id, "https://i.ytimg.com/vi/"~video_id~"/mqdefault.jpg", title, badge) %}
+	{% set pinned_ = False if pinned == "undefined" else pinned %}
+	{% call card_generic("/watch?v="~video_id, "https://i.ytimg.com/vi/"~video_id~"/mqdefault.jpg", title, badge, pinned_) %}
 		{{ caller_() }}
 		<details class="advanced"><summary title="{{advanced_title}}">{{ advanced_text }}</summary>
 		<div class="details">
@@ -41,8 +42,9 @@
 {% macro typed_card(params) -%}
         {% set c = params.content %}
         {% if params.type == 'VIDEO' %}
+		{% set pinned = c.pinned if c.pinned is defined else "undefined" %}
 		{% set badge = 'LIVE' if c.live else c.length %}
-                {% call card(c.video_id, c.title, c.published, badge=badge) %}
+                {% call card(c.video_id, c.title, c.published, pinned=pinned, badge=badge) %}
                         {{ infobar_subscriptions(c.video_id, c.channel_id, c.author) }}
                 {% endcall %}
         {% elif params.type == 'CHANNEL' %}
diff --git a/app/youtube/templates/index.html.j2 b/app/youtube/templates/index.html.j2
index b3a14b3..3f90c0e 100644
--- a/app/youtube/templates/index.html.j2
+++ b/app/youtube/templates/index.html.j2
@@ -11,10 +11,6 @@
 	{% call macros.card(row.video_id, row.title, row.published|format_date, row.pinned, row.video_id, badge=badge) %}
 		{{ macros.infobar_subscriptions(row.video_id, row.channel_id, row.author) }}
 	{% endcall %}
-	{% if row.pinned and (rows|length>loop.index and not rows[loop.index].pinned) %}
-	{{ macros.dummycard() }}
-	<hr>
-	{% endif %}
 {% endfor %}
 {{ macros.dummycard() }}
 </div>
diff --git a/app/youtube/templates/xmlfeed.html.j2 b/app/youtube/templates/xmlfeed.html.j2
index 2c5e838..646382a 100644
--- a/app/youtube/templates/xmlfeed.html.j2
+++ b/app/youtube/templates/xmlfeed.html.j2
@@ -9,10 +9,6 @@
 	{% call macros.card(row.video_id, row.title, row.published|format_date) %}
 		{{ macros.infobar_subscriptions(row.video_id, row.channel_id, row.author) }}
 	{% endcall %}
-	{% if row.pinned and not rows[loop.index].pinned %}
-	{{ macros.dummycard() }}
-	<hr>
-	{% endif %}
 {% endfor %}
 {{ macros.dummycard() }}
 </div>
-- 
2.39.3