forked from halo-dev/theme-earth
-
Notifications
You must be signed in to change notification settings - Fork 0
/
moments.html
180 lines (178 loc) · 9.55 KB
/
moments.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html
xmlns:th="https://www.thymeleaf.org"
th:replace="~{modules/layout :: html(title = '瞬间 - ' + ${site.title}, hero = null, content = ~{::content}, head = null, footer = null, sidebar = ~{::sidebar}, contentClass = '')}"
>
<th:block th:fragment="content">
<div class="rounded-xl bg-white p-4 dark:bg-slate-800">
<h1 class="mb-9 text-2xl font-medium dark:text-slate-50">瞬间</h1>
<div class="mb-8">
<nav class="flex flex-wrap gap-4" aria-label="Tabs">
<a
th:href="@{/moments}"
class="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-900 hover:bg-gray-200 dark:bg-slate-600 dark:text-slate-50 dark:hover:bg-slate-700 dark:hover:text-slate-100"
th:classappend="${#lists.isEmpty(param.tag) ? '!bg-gray-200 dark:!bg-slate-700 dark:!text-slate-100 ring-2 ring-gray-300 dark:ring-slate-600' : ''}"
>
<span>全部</span>
</a>
<a
th:each="tag : ${tags}"
th:href="@{|?tag=${tag.name}|}"
class="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-900 hover:bg-gray-200 dark:bg-slate-600 dark:text-slate-50 dark:hover:bg-slate-700 dark:hover:text-slate-100"
th:classappend="${#lists.contains(param.tag, tag.name) ? '!bg-gray-200 dark:!bg-slate-700 dark:!text-slate-100 ring-2 ring-gray-300 dark:ring-slate-600' : ''}"
>
<span th:text="|#${tag.name}|"></span>
<sup th:text="${tag.momentCount}"></sup>
</a>
</nav>
</div>
<div>
<ul
role="list"
class="divide-y divide-gray-100 dark:divide-slate-700"
x-data="upvote('moment','moment.halo.run','moments')"
>
<li
th:each="moment : ${moments.items}"
th:attr="x-data=|{name:'${moment.metadata.name}',showComment:false}|"
th:with="content=${moment.spec.content}"
class="animated fadeIn flex w-full items-start gap-2 py-5"
>
<img
th:src="${moment.owner.avatar ?: #theme.assets('/images/default-avatar.svg')}"
th:title="${moment.owner.displayName}"
th:alt="${moment.owner.displayName}"
class="h-12 w-12 rounded-full"
/>
<div class="ml-6" style="width: calc(100% - 4.75rem)">
<div
th:utext="${content.html}"
class="moment-content prose prose-base !max-w-none break-words dark:prose-invert prose-pre:p-0"
></div>
<div
th:unless="${#lists.isEmpty(moment.spec.content.medium)}"
class="moment-media mt-4 grid w-full grid-cols-3 gap-2 sm:w-1/2"
>
<div class="aspect-h-1 aspect-w-1" th:each="media : ${moment.spec.content.medium}">
<img
th:if="${#strings.equals(media.type,'PHOTO')}"
class="transform-gpu rounded-lg object-cover"
th:src="${media.url}"
/>
<div
th:if="${#strings.equals(media.type,'VIDEO')}"
x-data="{openVideoModal:false}"
class="aspect-h-1 aspect-w-1"
>
<video th:src="${media.url}" class="rounded-lg object-cover"></video>
<div
th:if="${#strings.equals(media.type,'VIDEO')}"
class="absolute flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-gray-50 opacity-50 transition-all hover:opacity-70"
@click="openVideoModal = true"
>
<i class="i-tabler-play !h-7 !w-7"></i>
</div>
<template x-teleport="body">
<div>
<div
class="fixed inset-0 z-50 bg-gray-800/40 opacity-100 backdrop-blur-sm"
aria-hidden="true"
x-show="openVideoModal"
x-transition:enter="ease-in-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in-out duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
></div>
<div
class="fixed inset-0 z-50 overflow-y-auto"
tabindex="-1"
x-show="openVideoModal"
x-transition:enter="ease-out duration-200"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div class="flex min-h-full flex-col items-center justify-center p-4 text-center sm:p-0">
<div
@click.outside="openVideoModal = false"
class="relative my-4 transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:w-full sm:max-w-xl"
>
<video th:src="${media.url}" class="w-full" controls></video>
</div>
<div>
<div
@click="openVideoModal = false"
class="group inline-flex items-center justify-center rounded-full bg-white p-1.5"
>
<i class="i-tabler-x block text-gray-600 group-hover:text-gray-900"></i>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
<div class="mt-3 flex items-center gap-4">
<div
class="inline-flex cursor-pointer items-center text-sm text-gray-400 transition-all hover:text-red-700 dark:text-slate-400 dark:hover:text-red-700"
x-bind:class="{'!text-red-700': upvoted(name)}"
@click="handleUpvote(name)"
>
<i x-show="upvoted(name)" class="i-tabler-heart-filled h-3 w-3"></i>
<i x-show="!upvoted(name)" class="i-tabler-heart h-3 w-3"></i>
<span
class="ml-1"
th:attr="data-upvote-moment-name=${moment.metadata.name}"
th:text="${moment.stats.upvote}"
>
</span>
</div>
<div
class="inline-flex cursor-pointer items-center text-sm text-gray-400 transition-all hover:text-black dark:text-slate-400 dark:hover:text-slate-300"
:class="{'!text-black dark:!text-slate-300':showComment}"
x-on:click="showComment = !showComment"
>
<i class="i-tabler-message-circle h-3 w-3"></i>
<span class="ml-1" th:text="${moment.stats.approvedComment}"> </span>
</div>
<div class="inline-flex items-center text-sm text-gray-400 transition-all dark:text-slate-400">
<i class="i-tabler-calendar h-3 w-3"></i>
<span class="ml-1" th:text="${#dates.format(moment.spec.releaseTime,'yyyy-MM-dd')}"> </span>
</div>
</div>
<div class="mt-2" x-show="showComment">
<halo:comment group="moment.halo.run" kind="Moment" th:attr="name=${moment.metadata.name}" />
</div>
</div>
</li>
</ul>
</div>
<div class="mt-6 flex items-center justify-between" th:if="${moments.hasPrevious() || moments.hasNext()}">
<a
th:href="@{${moments.prevUrl}}"
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
>
<span class="i-tabler-arrow-left text-lg transition-all group-hover:-translate-x-1"></span>
<span>上一页</span>
</a>
<span
class="text-sm text-gray-900 dark:text-slate-50"
th:text="|${moments.page} / ${moments.totalPages}|"
></span>
<a
th:href="@{${moments.nextUrl}}"
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
>
<span>下一页</span>
<span class="i-tabler-arrow-right text-lg transition-all group-hover:translate-x-1"></span>
</a>
</div>
</div>
</th:block>
</html>