new searchPublicApi.js, fix article card

The-3Labs-Team · Jun 28, 2024 · 43af9a1 · 43af9a1
1 parent df62ef0
commit 43af9a1
Showing 1 changed file with 64 additions and 22 deletions.
diff --git a/src/searchPublicApi.js b/src/searchPublicApi.js
@@ -37,13 +37,17 @@ tinymce.PluginManager.add('searchPublicApi', function (editor, url) {
     }
 
     .search-public-api-title{
-        text-align: center !important;
-        text-transform: uppercase !important;;
-        font-weight: bold !important;
+      font-size: 1.5rem !important;
+      font-weight: bold !important;
+      margin: 0 0 4px 0 !important;
+      color: rgb(14,165,233) !important;
+      transition: all 0.3s ease !important;
+      line-height: 1.5rem !important;
+      cursor: pointer !important;
     }
-    .search-public-api-article-card:hover{
-        background-color: #c7c7c7 !important;
-        transition: all 0.3s ease-in-out !important;
+    
+    .search-public-api-title:hover{
+        color: rgb(164 223 252) !important;
     }
     
     #select-type{
@@ -69,6 +73,22 @@ tinymce.PluginManager.add('searchPublicApi', function (editor, url) {
         font-weight: bold;
         border-radius: 10px 10px 0 0;
     }
+    
+    .article-preview{
+        background-color: rgb(14,165,233) !important;
+         padding: 10px !important;
+         border-radius: 5px !important; 
+         cursor: pointer !important; 
+         display: flex !important; 
+         justify-content: center !important;
+         align-items: center !important; 
+         margin-left: 10px !important; 
+         transition: all 0.3s ease !important;
+    }
+    
+    .article-preview:hover svg{
+        transform: scale(1.1) !important;
+    }
   </style>
 `
 
@@ -200,25 +220,47 @@ function printArticles (articles) {
 
 function generateArticlesCardHtml (article) {
   return `
-    <form method="GET" class="article-form-submit search-public-api-article-card" style="margin: 10px 0; border: 1px solid black; padding: 5px; text-decoration: none; color: black">
+    <form method="GET" class="article-form-submit search-public-api-article-card" style="margin: 10px 0; padding: 5px 15px; text-decoration: none; color: black; background-color: #fcfcfc; display: flex; justify-content: space-between; align-items: center; border-radius: 5px; border: 1px solid #eeeeee; width: 100%">
         <input type="hidden" name="title" value="${article.title}">
         <input type="hidden" name="url" value="${article.url}">
-        <button type="submit">
-            <span style="font-size: 1.2rem; font-weight: bold">${article.title}</span>
-            <span style="font-size: 1rem; font-weight: normal; color: rgba(54,54,54,0.75)">(${article.site})</span>
-            <p>
-                ${article.author}
-                <br>
+        
+        <div>
+          <div>
+              <span style="font-size: .8rem; font-weight: normal; color: rgba(54,54,54,0.75); text-transform: uppercase">${article.site}</span>
+          </div>
+          <button type="submit">
+              <h3 class="search-public-api-title">${article.title}</h3>
+          </button>
+          <p style="font-size: 0.75rem; font-weight: normal; color: rgba(54,54,54,0.75)">
+              di <span style="color: black; font-weight: bold">${article.author}</span>
+              il
+              <span style="color: black; font-weight: bold">
                 ${new Date(article.published_at).toLocaleString('it-IT', {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-        hour12: false
-    })}
-            </p>
-        </button>
+                  day: '2-digit',
+                  month: '2-digit',
+                  year: 'numeric',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  hour12: false
+                })}
+              </span>
+          </p>
+        </div>
+        
+        <div style="display: flex; justify-content: center; align-items: center; gap: 5px;">
+          <a title="preview" href="${article.url}" target="_blank" class="article-preview">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" style="width: 25px; height: 25px; fill: white; transition: all 0.3s ease;">
+                <path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/>
+            </svg>
+          </a>
+          <button class="article-preview">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="width: 25px; height: 25px; fill: white; transition: all 0.3s ease;">
+            <path d="M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z"/>
+          </svg>
+          </button>
+        </div>
+
+        
     </form>
     `
 }