halo/theme-earth
1
0
Fork 0
mirror of https://github.com/halo-dev/theme-earth.git synced 2025-10-15 07:15:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add image support for social media (#96)

Browse Source 
页脚社交媒体支持图片类型。

/kind feature

<img width="592" alt="image" src="https://github.com/halo-dev/theme-earth/assets/21301288/7bf77f2c-125d-4243-b38c-0e340b82df64">
<img width="1403" alt="image" src="https://github.com/halo-dev/theme-earth/assets/21301288/67c2c232-1130-4d4f-ae13-7b3f39af8c79">

Fixes #92 

```release-note
页脚社交媒体支持图片类型。
```
This commit is contained in:
Ryan Wang
2023-07-24 16:28:19 +08:00
committed by GitHub
parent 2c51b701ae
commit bc9dd092a6
3 changed files with 64 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/assets/dist/style.css vendored
View File

File diff suppressed because one or more lines are too long

60
templates/modules/footer-social.html Normal file
View File

@@ -0,0 +1,60 @@
<div th:with="social_medias = ${theme.config.footer.social_media}" class="mt-4 flex justify-center space-x-6 sm:mt-0">
<th:block th:each="social_media : ${social_medias}">
<a
th:if="${social_media.url_type == 'normal'}"
th:href="${social_media.url}"
class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
th:title="${social_media.name}"
>
<div th:classappend="${social_media.icon}" class="h-5 w-5"></div>
</a>
<span
th:if="${social_media.url_type == 'image'}"
x-data="{openImageModal:false}"
class="cursor-pointer text-gray-500 hover:text-gray-900 dark:hover:text-white"
>
<div th:classappend="${social_media.icon}" class="h-5 w-5" @click="openImageModal = true"></div>
<div>
<div
class="fixed inset-0 z-50 bg-gray-800/40 opacity-100 backdrop-blur-sm dark:bg-black/80"
aria-hidden="true"
x-show="openImageModal"
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="openImageModal"
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="openImageModal = false"
class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
>
<img th:src="${social_media.url}" />
</div>
<div>
<div
@click="openImageModal = 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>
</span>
</th:block>
</div>

28
templates/modules/footer.html
View File

@@ -28,18 +28,7 @@
</ul>
</th:block>
<th:block th:with="social_medias = ${theme.config.footer.social_media}">
<div th:unless="${#lists.isEmpty(social_medias)}" class="mt-4 flex space-x-6 sm:mt-0 sm:justify-center">
<a
th:each="social_media : ${social_medias}"
th:href="${social_media.url}"
class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
th:title="${social_media.name}"
>
<div th:classappend="${social_media.icon}" class="h-5 w-5"></div>
</a>
</div>
</th:block>
<th:block th:replace="~{modules/footer-social}" />
</div>
<hr class="my-6 border-gray-100 dark:border-slate-700 sm:mx-auto lg:my-8" />
<div class="space-y-1">
@@ -163,18 +152,7 @@
<halo:footer />
</p>
</div>
<div
th:with="social_medias = ${theme.config.footer.social_media}"
class="mt-4 flex justify-center space-x-6 sm:mt-0"
>
<a
th:each="social_media : ${social_medias}"
th:href="${social_media.url}"
class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
th:title="${social_media.name}"
>
<div th:classappend="${social_media.icon}" class="h-5 w-5"></div>
</a>
</div>
<th:block th:replace="~{modules/footer-social}" />
</div>
</footer>