neddit

commit

59d7a0d4ed8ca14a810d12e81cbda222e8191f58

parent

bd5e3101d053dc8d6ec36b560bfc65040e2d245c

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2023-06-09 08:59

truncate long posts in listing

Diffstat

3 files changed, 51 insertions, 31 deletions

diff --git a/neddit.py b/neddit.py

@@ -92,6 +92,7 @@ def generic(path):
   92    92 	else:
   93    93 		tpl = env.get_template('listing.html')
   94    94 		context.update(a)
   -1    95 		context['truncate'] = True
   95    96 
   96    97 	return tpl.render(**context)
   97    98 

diff --git a/static/style.css b/static/style.css

@@ -233,6 +233,20 @@ input:focus {
  233   233 	margin-right: 0.5em;
  234   234 }
  235   235 
   -1   236 .truncate {
   -1   237 	position: relative;
   -1   238 	max-block-size: 120vb;
   -1   239 	overflow-y: clip;
   -1   240 }
   -1   241 .truncated-link {
   -1   242 	position: absolute;
   -1   243 	top: 100vb;
   -1   244 	left: 0;
   -1   245 	right: 0;
   -1   246 	height: 20vb;
   -1   247 	background-image: linear-gradient(to bottom, transparent, var(--bg-color));
   -1   248 }
   -1   249 
  236   250 @media (prefers-color-scheme: dark) {
  237   251 	html {
  238   252 		--bg-color: #111;

diff --git a/templates/_post.html b/templates/_post.html

@@ -7,38 +7,43 @@
    7     7 		<a href="{{ post.data.url }}" target="_blank"><img class="thumbnail" src="{{ post.data.thumbnail }}" alt=""></a>
    8     8 	{% endif %}
    9     9 	<h2><a href="{{ post.data.permalink }}">{{ post.data.title }}</a></h2>
   10    -1 	{% if post.data.selftext %}
   11    -1 		<p>{{ post.data.selftext_html|safe }}</p>
   12    -1 	{% endif %}
   13    -1 	{% if post.data.post_hint == 'hosted:video' %}
   14    -1 		<video class="poster" controls muted loop preload="none" poster="{{ post.data.thumbnail }}">
   15    -1 			<source src="{{ post.data.media.reddit_video.dash_url }}">
   16    -1 			<source src="{{ post.data.media.reddit_video.hls_url }}">
   17    -1 			<source src="{{ post.data.media.reddit_video.fallback_url|dash_resize }}" type="video/mp4">
   18    -1 			<source src="{{ post.data.media.reddit_video.fallback_url }}" type="video/mp4">
   19    -1 			<source src="{{ post.data.media.reddit_video.scrubber_media_url }}" type="video/mp4">
   20    -1 		</video>
   21    -1 	{% elif post.data.is_gallery %}
   22    -1 		{% for gallery_item in post.data.gallery_data['items'] %}
   23    -1 			{% with img = post.data.media_metadata[gallery_item.media_id] %}
   24    -1 				<picture>
   25    -1 					<source srcset="{% for res in img.p %}{{ res.u }} {{ res.x }}w{% if not loop.last %}, {% endif %}{% endfor %}" sizes="40em">
   26    -1 					<img class="poster" src="{{ img.p|last|attr('u') }}">
   27    -1 				</picture>
   28    -1 			{% endwith %}
   29    -1 		{% endfor %}
   30    -1 	{% elif post.data.post_hint == 'image' %}
   31    -1 		<a href="{{ post.data.url }}" target="_blank">
   32    -1 			{% for img in post.data.preview.images %}
   33    -1 				<picture>
   34    -1 					<source srcset="{% for res in img.resolutions %}{{ res.url }} {{ res.width }}w{% if not loop.last %}, {% endif %}{% endfor %}" sizes="40em">
   35    -1 					<img class="poster" src="{{ img.source.url }}">
   36    -1 				</picture>
   -1    10 	<div {% if truncate %}class="truncate"{% endif %}>
   -1    11 		{% if post.data.selftext %}
   -1    12 			<p>{{ post.data.selftext_html|safe }}</p>
   -1    13 		{% endif %}
   -1    14 		{% if post.data.post_hint == 'hosted:video' %}
   -1    15 			<video class="poster" controls muted loop preload="none" poster="{{ post.data.thumbnail }}">
   -1    16 				<source src="{{ post.data.media.reddit_video.dash_url }}">
   -1    17 				<source src="{{ post.data.media.reddit_video.hls_url }}">
   -1    18 				<source src="{{ post.data.media.reddit_video.fallback_url|dash_resize }}" type="video/mp4">
   -1    19 				<source src="{{ post.data.media.reddit_video.fallback_url }}" type="video/mp4">
   -1    20 				<source src="{{ post.data.media.reddit_video.scrubber_media_url }}" type="video/mp4">
   -1    21 			</video>
   -1    22 		{% elif post.data.is_gallery %}
   -1    23 			{% for gallery_item in post.data.gallery_data['items'] %}
   -1    24 				{% with img = post.data.media_metadata[gallery_item.media_id] %}
   -1    25 					<picture>
   -1    26 						<source srcset="{% for res in img.p %}{{ res.u }} {{ res.x }}w{% if not loop.last %}, {% endif %}{% endfor %}" sizes="40em">
   -1    27 						<img class="poster" src="{{ img.p|last|attr('u') }}">
   -1    28 					</picture>
   -1    29 				{% endwith %}
   37    30 			{% endfor %}
   38    -1 		</a>
   39    -1 	{% elif post.data.url %}
   40    -1 		<a href="{{ post.data.url }}" target="_blank">{{ post.data.url }}</a>
   41    -1 	{% endif %}
   -1    31 		{% elif post.data.post_hint == 'image' %}
   -1    32 			<a href="{{ post.data.url }}" target="_blank">
   -1    33 				{% for img in post.data.preview.images %}
   -1    34 					<picture>
   -1    35 						<source srcset="{% for res in img.resolutions %}{{ res.url }} {{ res.width }}w{% if not loop.last %}, {% endif %}{% endfor %}" sizes="40em">
   -1    36 						<img class="poster" src="{{ img.source.url }}">
   -1    37 					</picture>
   -1    38 				{% endfor %}
   -1    39 			</a>
   -1    40 		{% elif post.data.url %}
   -1    41 			<a href="{{ post.data.url }}" target="_blank">{{ post.data.url }}</a>
   -1    42 		{% endif %}
   -1    43 		{% if truncate %}
   -1    44 			<a href="{{ post.data.permalink }}" tabindex="-1" aria-hidden="true" class="truncated-link"></a>
   -1    45 		{% endif %}
   -1    46 	</div>
   42    47 	<footer>
   43    48 		<span>{{ post.data.score|k }} Points</span>
   44    49 		<a href="{{ post.data.permalink }}" tabindex="-1">{{ post.data.num_comments }} Comments</a>