A social pastebin built on atproto.
adjust bite displays for mobile
+27
-23
+10
-8
templates/_recent_bites.html
+10
-8
templates/_recent_bites.html
···
3
3
{% for bite in recent %}
4
4
<a href="{{ url_for('view_bite', identifier=bite.did, rkey=bite.rkey) }}"
5
5
class="block border border-gray-200 rounded-md overflow-hidden hover:border-gray-300 transition-colors">
6
-
<div class="relative flex items-center justify-between px-4 py-2.5">
7
-
<span class="flex items-center gap-1.5 hover:underline cursor-pointer js-profile-link"
8
-
data-href="{{ url_for('list_bites', identifier=bite.did) }}">
9
-
<img src="/avatar/{{ bite.did }}" alt="" class="w-4 h-4 rounded-full bg-gray-100">
10
-
<span class="text-xs text-amber-600">{{ bite.handle or bite.did }}</span>
11
-
</span>
12
-
<span class="absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-900 pointer-events-none">{{ bite.title }}</span>
13
-
<span class="text-xs text-gray-400">{{ bite.created_at | humandate }}</span>
6
+
<div class="px-4 py-2.5">
7
+
<div class="flex items-center justify-between mb-1">
8
+
<span class="flex items-center gap-1.5 hover:underline cursor-pointer js-profile-link"
9
+
data-href="{{ url_for('list_bites', identifier=bite.did) }}">
10
+
<img src="/avatar/{{ bite.did }}" alt="" class="w-4 h-4 rounded-full bg-gray-100">
11
+
<span class="text-xs text-amber-600">{{ bite.handle or bite.did }}</span>
12
+
</span>
13
+
<span class="text-xs text-gray-400">{{ bite.created_at | humandate }}</span>
14
+
</div>
15
+
<p class="text-sm font-medium text-gray-900 truncate">{{ bite.title }}</p>
14
16
</div>
15
17
<!-- prettier-ignore -->
16
18
<div class="bg-gray-50 border-t border-gray-100 px-4 py-2">
+17
-15
templates/view.html
+17
-15
templates/view.html
···
4
4
5
5
{% block content %}
6
6
<div class="border border-gray-200 rounded-md overflow-hidden shadow-sm">
7
-
<div class="relative flex items-center justify-between px-4 py-2.5 border-b border-gray-100">
8
-
<div class="flex items-center gap-1.5">
9
-
<a href="{{ url_for('list_bites', identifier=did) }}">
10
-
{% if profile.avatar_url %}
11
-
<img src="{{ profile.avatar_url }}" alt="" class="w-4 h-4 rounded-full">
12
-
{% else %}
13
-
<div class="w-4 h-4 rounded-full bg-gray-100"></div>
14
-
{% endif %}
15
-
</a>
16
-
<a href="{{ url_for('list_bites', identifier=did) }}"
17
-
class="text-xs text-amber-600 hover:text-amber-700 transition-colors">{{ handle or did }}</a>
18
-
</div>
19
-
<span class="absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-900 pointer-events-none">{{ title }}</span>
20
-
<div class="flex items-baseline gap-2">
21
-
<span class="text-xs text-gray-400">{{ created_at | humandate }}</span>
7
+
<div class="px-4 py-2.5 border-b border-gray-100">
8
+
<div class="flex items-center justify-between mb-1">
9
+
<div class="flex items-center gap-1.5">
10
+
<a href="{{ url_for('list_bites', identifier=did) }}">
11
+
{% if profile.avatar_url %}
12
+
<img src="{{ profile.avatar_url }}" alt="" class="w-4 h-4 rounded-full">
13
+
{% else %}
14
+
<div class="w-4 h-4 rounded-full bg-gray-100"></div>
15
+
{% endif %}
16
+
</a>
17
+
<a href="{{ url_for('list_bites', identifier=did) }}"
18
+
class="text-xs text-amber-600 hover:text-amber-700 transition-colors">{{ handle or did }}</a>
19
+
</div>
20
+
<div class="flex items-baseline gap-2">
21
+
<span class="text-xs text-gray-400">{{ created_at | humandate }}</span>
22
22
{% if g.user and g.user.did == did %}
23
23
<form method="post" action="{{ url_for('delete_bite', identifier=did, rkey=at_uri.split('/')[-1]) }}" class="inline leading-none">
24
24
<input type="hidden" name="csrf_token" value="{{ session.csrf_token }}">
25
25
<button type="submit" class="text-xs text-gray-400 hover:text-red-500 transition-colors leading-none p-0">delete</button>
26
26
</form>
27
27
{% endif %}
28
+
</div>
28
29
</div>
30
+
<p class="text-sm font-medium text-gray-900">{{ title }}</p>
29
31
</div>
30
32
<!-- prettier-ignore -->
31
33
<div class="highlight bg-gray-50 overflow-x-auto">