- better handling of the latest nugets. severs sends first/lastPublished dates, frontend decides about status.

- css cosmetics

Author: antongit

community-app/frontend/src/components/overview/LatestNugets.vue

@@ -2,7 +2,7 @@
 
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { NEllipsis, NSkeleton, NAvatar, NTag } from 'naive-ui'
+import { NEllipsis, NSkeleton, NImage, NTag } from 'naive-ui'
 import { useLatestNugetsStore } from './LatestNugetsStore.js'
 import Constants from '../../constants.js'
 import SectionTitle from './SectionTitle.vue'
@@ -45,12 +45,12 @@ function showAll()
             </template>
             <template v-else>
                 <ul v-if="store.nugets.length > 0" class="list-group list-group-flush list">
-                    <li v-for="(nuget, index) in store.nugets" :key="index" class="list-group-item d-flex flex-nowrap link">
-                        <NAvatar v-if="nuget.icon" objectFit="contain" :src="nuget.icon" :size="25" class="mr-3" :class="{ 'noImageBack': nuget.icon !== null }"/>
-                        <NEllipsis :line-clamp="1" :tooltip=false>
+                    <li v-for="(nuget, index) in store.nugets" :key="index" class="list-group-item d-flex flex-nowrap link align-items-baseline">
+                        <NImage v-if="nuget.icon" objectFit="contain" :src="nuget.icon" :height="25" class="align-self-center" :class="{ 'noImageBack': nuget.icon !== null }"/>
+                        <NEllipsis :line-clamp="1" :tooltip=false class="ml-3">
                             <a :href="nuget.link" target="_blank">{{ nuget.id }}</a>
                         </NEllipsis>
-                        <span class="by">{{ nuget.by }}</span>
+                        <div class="by d-none d-sm-inline ml-3">{{ nuget.by }}</div>
                         <NTag v-if="nuget.status" size="small" round :bordered="false" class="px-2 ml-3 text-muted text-right" :class="{'new': nuget.status == 'new'}">{{ nuget.status }}</NTag>
                     </li>
                 </ul> 

community-app/frontend/src/components/overview/LatestNugetsStore.js

@@ -38,14 +38,26 @@ async function fetchLatestNugets(){
 
         const nugets = json.map((n)=>{
 
-            // const by=[... new Set([ ...n.owners, ...n.authors])];
+            let status="";
+
+            try{
+                if (new Date(n.firstPublished).getTime() + twoWeeks > Date.now()) {
+                    status = "new";
+                }
+                else if (n.firstPublished != n.lastPublished) {
+                    status = "updated";
+                }
+            }
+            catch{
+                // server still using an old API. Status will stay ""
+            }
 
             return {
                 id: n.id,
                 icon: n.icon || "",
                 by: n.owners.join(', '),
                 link: `${Constants.NUGET_PACK_LINK}${n.id}#readme-body-tab`,
-                status: n.status
+                status: status
             }
         })
 

community-app/frontend/src/styles/style.scss

@@ -13,7 +13,6 @@ $orange-hover: #ee4b28;
     .by{
       font-size: 0.8rem;
       color: #888;
-      padding: 0.2rem 1rem;
     }
 
     .new{