rationalize the newsitem widgets

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

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

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

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