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;
 }
 
-/*
+h1 {
-.scrollable {
+    font: 600 2rem/1 'Oswald', sans-serif;
-    overflow-y: auto;
+    text-transform: uppercase;
-    max-height: 150px; !* Same as .content max-height *!
+    text-align: center;
-    margin-bottom: 10px; !* To give space for the scrollbar *!
 }
-*/
 
 
 </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,14 +74,17 @@ const shouldTruncate = (content: string): boolean => {
 };
 
 const truncateContent = (content: string): string => {
-    // if (shouldTruncate(content)) {
+    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) {
+    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 + '...';
     }
@@ -112,13 +117,11 @@ const truncateContent = (content: string): string => {
         truncatedContent = truncatedContent.slice(0, linkStartIndex) + `(${url})`;
     }
 
+    console.log('truncated content later on', truncatedContent)
+
     truncatedContent += '...';
 
     return truncatedContent;
-    // }
-    // else {
-    //     return content;
-    // }
 };
 
 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,11 +39,13 @@
          </div>
       </div>
 
-       <div class="mbloc col col-lg-12 col-lg-4" v-if="this.dashboardItems">
+       <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>
 </template>
@@ -107,4 +109,10 @@ span.counter {
       background-color: unset;
    }
 }
+
+div.news {
+    max-height: 22rem;
+    overflow: hidden;
+    overflow-y: scroll;
+}
 </style>