this repo has no description
feat: add compact mode support for media embeds
Hide images, videos, galleries, and descriptions in compact
mode and show plain URL placeholders instead. Ensure OG site
info still displays for Reddit embeds in compact mode.
+33
-5
+26
-2
internal/assets/css/screen.css
+26
-2
internal/assets/css/screen.css
···
1461
1461
}
1462
1462
1463
1463
/* Compact Mode Styles */
1464
-
.compact-mode .og-preview,
1465
1464
.compact-mode .og-card .og-image,
1466
1465
.compact-mode .og-preview-card .og-preview-image,
1467
-
.compact-mode .youtube-embed-wrapper {
1466
+
.compact-mode .youtube-embed-wrapper,
1467
+
.compact-mode .og-description,
1468
+
.compact-mode .kitten-image,
1469
+
.compact-mode .embed-media,
1470
+
.compact-mode .imgur-media-link,
1471
+
.compact-mode .imgur-gallery-card,
1472
+
.compact-mode .flickr-media,
1473
+
.compact-mode .direct-image-wrapper {
1468
1474
display: none !important;
1475
+
}
1476
+
1477
+
/* Compact placeholders - shown only in compact mode */
1478
+
.compact-placeholder {
1479
+
display: none;
1480
+
}
1481
+
1482
+
.compact-mode .compact-placeholder {
1483
+
display: inline !important;
1484
+
}
1485
+
1486
+
/* In compact mode, show OG site info and content even for Reddit embeds */
1487
+
.compact-mode .link-card-wrapper .og-site-info {
1488
+
display: flex !important;
1489
+
}
1490
+
1491
+
.compact-mode .link-card-wrapper .og-content {
1492
+
display: block !important;
1469
1493
}
1470
1494
1471
1495
/* Navigation Links */
+7
-3
internal/templates/views/tumble_item_ircLink.html
+7
-3
internal/templates/views/tumble_item_ircLink.html
···
4
4
<span class="link">
5
5
{{if eq .EmbedType "twitter"}}
6
6
{{/* Twitter embed */}}
7
-
<blockquote class="twitter-tweet"><a href="{{.EmbedURL}}" target="_blank">{{.Title}}</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
7
+
<span class="embed-media"><blockquote class="twitter-tweet"><a href="{{.EmbedURL}}" target="_blank">{{.Title}}</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></span><span class="compact-placeholder">𝕏 <a href="{{linkURL .BaseURL .ID .ClickSig}}" target="_blank">{{.URL}}</a></span>
8
8
{{else if eq .EmbedType "imgur_gallery"}}
9
9
{{/* Imgur gallery card */}}
10
10
{{if .IsBroken}}
···
23
23
<span class="gallery-card-subtitle">{{.Title}}</span>
24
24
</span>
25
25
</a>
26
-
</span>
26
+
</span><span class="compact-placeholder"><a href="{{linkURL .BaseURL .ID .ClickSig}}" target="_blank">{{.URL}}</a></span>
27
27
{{end}}
28
28
{{else if eq .EmbedType "imgur_single"}}
29
29
{{/* Imgur single image/video */}}
···
41
41
<span class="missing-link">{{.URL}}</span>
42
42
</span>
43
43
{{end}}
44
-
</a>
44
+
</a><span class="compact-placeholder"><a href="{{linkURL .BaseURL .ID .ClickSig}}" target="_blank">{{.URL}}</a></span>
45
45
{{else if eq .EmbedType "flickr"}}
46
46
{{/* Flickr image */}}
47
+
<span class="flickr-media">
47
48
{{if .PhotoPageURL}}
48
49
<a href="{{.PhotoPageURL}}" target="_blank"><img src="{{.MediaURL}}" alt="{{.Title}}" class="flickr-image" /></a>
49
50
{{else}}
50
51
<a href="{{linkURL .BaseURL .ID .ClickSig}}" target="_blank"><img src="{{.MediaURL}}" alt="{{.Title}}" class="flickr-image" /></a>
51
52
{{end}}
53
+
</span><span class="compact-placeholder"><a href="{{linkURL .BaseURL .ID .ClickSig}}" target="_blank">{{.URL}}</a></span>
52
54
{{else if eq .EmbedType "image"}}
53
55
{{/* Direct image link */}}
56
+
<span class="direct-image-wrapper">
54
57
<a href="{{linkURL .BaseURL .ID .ClickSig}}" target="_blank">
55
58
<img src="{{.URL}}" class="direct-image"
56
59
onerror="this.parentNode.innerHTML='<span class=\'http-error-badge\'>404</span> <span class=\'missing-link\'>{{.URL}}</span>'; this.parentNode.classList.add('missing-link');" />
57
60
</a>
61
+
</span><span class="compact-placeholder"><a href="{{linkURL .BaseURL .ID .ClickSig}}" target="_blank">{{.URL}}</a></span>
58
62
{{else}}
59
63
{{/* Generic link */}}
60
64
<a href="{{linkURL .BaseURL .ID .ClickSig}}" target="_blank">{{if .DisplayTitle}}{{.DisplayTitle}}{{else}}{{.Title}}{{end}}</a>