cosmetic fixes
This commit is contained in:
F4ilji
@@ -1,19 +1,25 @@
|
||||
<template>
|
||||
|
||||
<div class="col-start-2">
|
||||
<div class="hs-tooltip inline-block">
|
||||
<button type="button" class="hs-tooltip-toggle underline hover:text-blue-400 duration-300">
|
||||
Над статьей работали
|
||||
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute duration-300 invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-neutral-700" role="tooltip">
|
||||
<template v-for="author in authors">
|
||||
{{ author }} <br>
|
||||
</template>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- List -->
|
||||
<dl v-if="authors[0] === 'Без автора' && null" class="flex flex-col sm:flex-row gap-1 items-baseline">
|
||||
<!-- items-baseline выравнивает по базовой линии -->
|
||||
<dt class="min-w-40">
|
||||
<h3 class="block text-sm text-gray-500 m-0 underline">Над статьей работали:</h3>
|
||||
<!-- m-0 убирает margin -->
|
||||
</dt>
|
||||
<dd class="m-0">
|
||||
<!-- m-0 для dd на всякий случай -->
|
||||
<ul class="m-0 inline-flex flex-wrap items-center">
|
||||
<!-- flex-wrap и items-center для красивого списка -->
|
||||
<li
|
||||
v-for="(author, index) in authors"
|
||||
:key="index"
|
||||
class="me-1 after:content-[','] last:after:content-none inline-flex items-center text-sm text-gray-800 dark:text-neutral-200"
|
||||
>
|
||||
{{ author }}
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,13 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<img @click="toggler = !toggler" loading="lazy" class="mx-auto object-cover rounded-md hover:opacity-95 hover:duration-200 transition" :src="'/storage/' + block.data.url" alt="">
|
||||
<div v-if="block.data.alt" class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
|
||||
{{ block.data.alt }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative rounded-md overflow-hidden">
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center blur-md brightness-75"
|
||||
:style="`background-image: url('${'/storage/' + block.data.url}')`"
|
||||
></div>
|
||||
|
||||
<FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.url]"/>
|
||||
<div class="relative z-10 md:m-4"> <img
|
||||
@click="toggler = !toggler"
|
||||
loading="lazy"
|
||||
class="mx-auto h-96 rounded-md object-cover md:object-contain hover:opacity-95 hover:duration-200 transition"
|
||||
:src="'/storage/' + block.data.url"
|
||||
alt=""
|
||||
/>
|
||||
<div v-if="block.data.alt" class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
|
||||
{{ block.data.alt }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.url]"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<div class="text-normal leading-7 font-light text-gray-600 md:text-[16px] md:text-[#374151] md:leading-8 md:font-normal paragraph-container" v-html="wrapTables(block).data.content" />
|
||||
<div class="text-normal leading-7 md:leading-8 tracking-wide font-light text-gray-600 md:text-[15px] md:text-[#374151] md:font-normal paragraph-container" v-html="wrapTables(block).data.content" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,46 +1,43 @@
|
||||
<template>
|
||||
|
||||
<Link :href="route(link)" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500">
|
||||
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
||||
{{ title }}
|
||||
</Link>
|
||||
|
||||
<Link :href="resolvedLink" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500">
|
||||
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
||||
{{ title }}
|
||||
</Link>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "BackButton",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
link: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
name: "BackButton",
|
||||
components: { Link },
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true, // Сделаем title обязательным
|
||||
},
|
||||
link: {
|
||||
type: String,
|
||||
required: true, // Сделаем link обязательным
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
resolvedLink() {
|
||||
// Проверяем, является ли "link" полным URL
|
||||
try {
|
||||
new URL(this.link);
|
||||
return this.link; // Если это валидный URL, возвращаем его
|
||||
} catch (e) {
|
||||
// Если это не валидный URL, предполагаем, что это название роута Inertia
|
||||
// Убедитесь, что функция route() доступна глобально или импортирована
|
||||
// (обычно она доступна в Laravel-приложениях через Inertia)
|
||||
return route(this.link);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
/* Ваши стили */
|
||||
</style>
|
||||
Reference in New Issue
Block a user