failj/ntspi-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rework frontend

Browse Source
This commit is contained in:
F4ilji
2025-03-23 00:38:16 +05:00
parent 17518ceed2
commit 49072e50c7
438 changed files with 14375 additions and 20015 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/componentss/features/posts/components/PostListItem.vue
+112
View File
@@ -0,0 +1,112 @@
<template>
<div class="group cursor-pointer">
<div
class="overflow-hidden rounded-md max-h-[250px] bg-gray-100 transition-all hover:scale-105 dark:bg-gray-800"
>
<a
class="relative block aspect-square"
:href="route('client.post.show', post.slug)"
><img
alt="Thumbnail"
loading="lazy"
decoding="async"
data-nimg="fill"
class="object-cover transition-all"
style="
position: absolute;
height: 100%;
width: 100%;
inset: 0px;
color: transparent;
"
sizes="(max-width: 768px) 30vw, 33vw"
:src="post.preview ? '/storage/' + post.preview : '/img/thumbnail-1.png'"
/></a>
</div>
<div class="">
<div>
<div v-if="post.category" class="flex gap-3">
<a :href="route('client.post.index', { 'category[]': post.category.slug })">
<span class="inline-block text-xs font-medium tracking-wider uppercase mt-5 text-blue-600">
{{ post.category ? post.category.title : "Новости" }}
</span>
</a>
</div>
<div v-else class="flex gap-3">
<span>
<span class="inline-block text-xs font-medium tracking-wider uppercase mt-5 text-blue-600">
Новости
</span>
</span>
</div>
<h2
class="text-lg font-semibold leading-snug tracking-tight mt-2 dark:text-white"
>
<a :href="route('client.post.show', post.slug)"
><span class="duration-200 group-hover:text-gray-500">{{
post.title
}}</span></a
>
</h2>
<div class="">
<p
class="mt-2 line-clamp-3 text-sm text-gray-500 dark:text-gray-400"
>
<a
:href="route('client.post.show', post.slug)"
>{{ post.preview_text }}
</a>
</p>
</div>
<div
class="mt-3 flex items-center space-x-3 text-gray-500 dark:text-gray-400"
>
<span>
<div class="flex items-center gap-3">
<span v-if="post && post.authors && post.authors.length > 0" class="truncate text-sm">
{{ textLimit(post.authors[0], 20) }}
</span>
</div>
</span>
<span class="text-xs text-gray-300 dark:text-gray-600"
>•</span
>
<span class="truncate text-sm">{{ post.created_post }}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "PostListItem",
data() {
return {
}
},
methods: {
textLimit(text, symbols) {
if (text.length > symbols) {
let LimitedText;
LimitedText = text.substring(0, symbols);
return LimitedText + "...";
}
return text;
},
},
props: {
post: {
type: Object,
},
},
}
</script>
<style scoped>
</style>