Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-02 22:17:45 +00:00
Code Issues Actions Projects Releases Wiki Activity

rationalize the newsitem widgets

Browse Source
This commit is contained in:
Julien Fastré 2024-02-19 13:07:45 +01:00
parent 85b91250fb
commit 95ee573dc5
Signed by: julienfastre
GPG Key ID: BDE2190974723FCB
2 changed files with 7 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue
View File

@ -38,8 +38,6 @@ ul {
}
h1 {
font: 600 2rem/1 'Oswald', sans-serif;
text-transform: uppercase;
text-align: center;
}

46
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue
View File

@ -1,10 +1,12 @@
<template>
<li>
<h2>{{ props.item.title }}</h2>
<time datetime="{{item.startDate.datetime}}">{{ $d(newsItemStartDate(), 'text') }}</time>
<time class="createdBy" datetime="{{item.startDate.datetime}}">{{ $d(newsItemStartDate(), 'text') }}</time>
<div class="content" v-if="shouldTruncate(item.content)">
<div v-html="prepareContent(item.content)"></div>
<button class="btn btn-sm btn-show read-more" @click="() => openModal(item)">{{ $t('widget.news.readMore') }}</button>
<div class="float-end">
<button class="btn btn-sm btn-show read-more" @click="() => openModal(item)">{{ $t('widget.news.readMore') }}</button>
</div>
</div>
<div class="content" v-else>
<div v-html="convertMarkdownToHtml(item.content)"></div>
@ -16,7 +18,7 @@
</template>
<template #body>
<p class="news-date">
<span>{{ $d(newsItemStartDate(), 'short') }}</span>
<time class="createdBy" datetime="{{item.startDate.datetime}}">{{ $d(newsItemStartDate(), 'text') }}</time>
</p>
<div v-html="convertMarkdownToHtml(item.content)"></div>
</template>
@ -30,8 +32,8 @@ import { marked } from 'marked';
import DOMPurify from 'dompurify';
import { DateTime, NewsItemType } from "../../../types";
import type { PropType } from 'vue'
import { defineProps, ref } from "vue";
import {ISOToDatetime} from 'ChillMainAssets/chill/js/date';
import { ref } from "vue";
import {ISOToDatetime} from '../../../chill/js/date';
const props = defineProps({
@ -74,17 +76,13 @@ const shouldTruncate = (content: string): boolean => {
};
const truncateContent = (content: string): string => {
console.log('max length', props.maxLength)
console.log('content', content)
let truncatedContent = content.slice(0, props.maxLength);
console.log('truncated content', truncatedContent)
let linkDepth = 0;
let linkStartIndex = -1;
const lines = content.split('\n');
// Truncate if amount of lines are too many
if (lines.length > props.maxLines && content.length < props.maxLength) {
console.log('how many lines', lines.length)
const truncatedContent = lines.slice(0, props.maxLines).join('\n').trim();
return truncatedContent + '...';
}
@ -117,8 +115,6 @@ const truncateContent = (content: string): string => {
truncatedContent = truncatedContent.slice(0, linkStartIndex) + `(${url})`;
}
console.log('truncated content later on', truncatedContent)
truncatedContent += '...';
return truncatedContent;
@ -162,36 +158,8 @@ h2 {
position: relative;
}
button {
cursor: pointer;
color: #fff;
border: none;
padding: 5px 10px;
}
.read-more {
cursor: pointer;
position: absolute;
bottom: -2px;
right: 10px;
}
.news-date {
font-style: italic;
}
.news-title {
font-weight: bold;
text-transform: uppercase;
}
time {
font-size: .8rem;
font-style: italic;
border-bottom: 1px dotted #333;
padding-bottom: .4rem;
margin-bottom: .5rem;
display: block;
}
</style>