Improve styling of actualités

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

@@ -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>

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

@@ -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>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue

@@ -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>