Improve styling of actualités

This commit is contained in:
Julie Lenaerts 2024-01-31 18:38:09 +01:00
parent 92aa9af052
commit fd48d45872
3 changed files with 96 additions and 56 deletions

View File

@ -35,15 +35,16 @@ onMounted(() => {
ul {
list-style: none;
padding: 0;
//columns: 2;
//-webkit-columns: 2;
//-moz-columns: 2;
}
/*
.scrollable {
overflow-y: auto;
max-height: 150px; !* Same as .content max-height *!
margin-bottom: 10px; !* To give space for the scrollbar *!
h1 {
font: 600 2rem/1 'Oswald', sans-serif;
text-transform: uppercase;
text-align: center;
}
*/
</style>

View File

@ -1,9 +1,10 @@
<template>
<li>
<h2>{{ props.item.title }}</h2>
<time datetime="{{item.startDate.datetime}}">{{ $d(newsItemStartDate(), 'text') }}</time>
<div class="content" v-if="shouldTruncate(item.content)">
<div v-html="prepareContent(item.content)"></div>
<span class="read-more" @click="() => openModal(item)">{{ $t('widget.news.readMore') }}</span>
<button class="btn btn-sm btn-show read-more" @click="() => openModal(item)">{{ $t('widget.news.readMore') }}</button>
</div>
<div class="content" v-else>
<div v-html="convertMarkdownToHtml(item.content)"></div>
@ -30,7 +31,8 @@ import DOMPurify from 'dompurify';
import { DateTime, NewsItemType } from "../../../types";
import type { PropType } from 'vue'
import { defineProps, ref } from "vue";
import {ISOToDatetime} from "../../../chill/js/date";
import {ISOToDatetime} from 'ChillMainAssets/chill/js/date';
const props = defineProps({
item: {
@ -40,7 +42,7 @@ const props = defineProps({
maxLength: {
type: Number,
required: false,
default: 200,
default: 350,
},
maxLines: {
type: Number,
@ -72,53 +74,54 @@ const shouldTruncate = (content: string): boolean => {
};
const truncateContent = (content: string): string => {
// if (shouldTruncate(content)) {
let truncatedContent = content.slice(0, props.maxLength);
let linkDepth = 0;
let linkStartIndex = -1;
const lines = content.split('\n');
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) {
const truncatedContent = lines.slice(0, props.maxLines).join('\n').trim();
return truncatedContent + '...';
}
// 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 + '...';
}
for (let i = 0; i < truncatedContent.length; i++) {
const char = truncatedContent[i];
for (let i = 0; i < truncatedContent.length; i++) {
const char = truncatedContent[i];
if (char === '[') {
linkDepth++;
if (linkDepth === 1) {
linkStartIndex = i;
}
} else if (char === ']') {
linkDepth = Math.max(0, linkDepth - 1);
} else if (char === '(' && linkDepth === 0) {
truncatedContent = truncatedContent.slice(0, i);
break;
if (char === '[') {
linkDepth++;
if (linkDepth === 1) {
linkStartIndex = i;
}
} else if (char === ']') {
linkDepth = Math.max(0, linkDepth - 1);
} else if (char === '(' && linkDepth === 0) {
truncatedContent = truncatedContent.slice(0, i);
break;
}
}
while (linkDepth > 0) {
truncatedContent += ']';
linkDepth--;
}
while (linkDepth > 0) {
truncatedContent += ']';
linkDepth--;
}
// If a link was found, append the URL inside the parentheses
if (linkStartIndex !== -1) {
const linkEndIndex = content.indexOf(')', linkStartIndex);
const url = content.slice(linkStartIndex + 1, linkEndIndex);
truncatedContent = truncatedContent.slice(0, linkStartIndex) + `(${url})`;
}
// If a link was found, append the URL inside the parentheses
if (linkStartIndex !== -1) {
const linkEndIndex = content.indexOf(')', linkStartIndex);
const url = content.slice(linkStartIndex + 1, linkEndIndex);
truncatedContent = truncatedContent.slice(0, linkStartIndex) + `(${url})`;
}
truncatedContent += '...';
console.log('truncated content later on', truncatedContent)
return truncatedContent;
// }
// else {
// return content;
// }
truncatedContent += '...';
return truncatedContent;
};
const convertMarkdownToHtml = (markdown: string): string => {
@ -135,6 +138,7 @@ const prepareContent = (content: string): string => {
const newsItemStartDate = (): null|Date => {
return ISOToDatetime(props.item?.startDate.datetime);
}
</script>
<style scoped>
@ -142,29 +146,36 @@ const newsItemStartDate = (): null|Date => {
li {
margin-bottom: 20px;
overflow: hidden;
padding: .8rem;
background-color: #fbfbfb;
border-radius: 4px;
}
h2 {
margin-bottom: 10px;
font-size: 1rem !important;
text-transform: uppercase;
margin-bottom: 16px;
}
.content {
max-height: 12em;
overflow: hidden;
font-size: .9rem;
position: relative;
}
button {
cursor: pointer;
background-color: #3498db;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 3px;
}
.read-more {
color: #3498db;
//color: #3498db;
cursor: pointer;
position: absolute;
bottom: -2px;
right: 10px;
}
.news-date {
@ -175,4 +186,24 @@ button {
font-weight: bold;
text-transform: uppercase;
}
time {
font: 400 .8rem 'Oswald', sans-serif;
text-align: center;
text-transform: uppercase;
border-top: 1.5px solid #333333;
border-bottom: 1.5px solid #333333;
padding: 12px 0;
margin-bottom: .5rem;
display: block;
}
blockquote {
font: 1.8rem/1.25 'Oswald', sans-serif;
margin: 1.5rem 2rem;
}
blockquote::before { content: open-quote; }
blockquote::after { content: close-quote; }
</style>

View File

@ -39,10 +39,12 @@
</div>
</div>
<div class="mbloc col col-lg-12 col-lg-4" v-if="this.dashboardItems">
<template v-for="dashboardItem in this.dashboardItems">
<News v-if="dashboardItem.type === 'news'"/>
</template>
<div class="mbloc col col-lg-8 col-lg-4 news" v-if="this.dashboardItems">
<div class="custom1">
<template v-for="dashboardItem in this.dashboardItems">
<News v-if="dashboardItem.type === 'news'"/>
</template>
</div>
</div>
</div>
@ -107,4 +109,10 @@ span.counter {
background-color: unset;
}
}
div.news {
max-height: 22rem;
overflow: hidden;
overflow-y: scroll;
}
</style>