fix news + enhance style

*fetch news working + enhance light and darkmode *fix menu float btn position *enhance newsletter form darkmode *enhance banner style
bunkerity · Dec 13, 2023 · 549bbe1 · 549bbe1
1 parent ed06c51
commit 549bbe1
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 43 deletions.
diff --git a/src/ui/static/css/dashboard.css b/src/ui/static/css/dashboard.css
diff --git a/src/ui/static/js/global.js b/src/ui/static/js/global.js
@@ -40,15 +40,19 @@ class News {
   }
 
   init() {
-    window.addEventListener("load", async () => {
+    window.addEventListener("load", () => {
       try {
-        const res = await fetch("https://www.bunkerweb.io/api/posts/0/2", {
-          headers: {
-            method: "GET",
-          },
-        });
-        return await this.render(res);
-      } catch (err) {}
+        fetch("https://www.bunkerweb.io/api/posts/0/1")
+          .then((res) => {
+            return res.json();
+          })
+          .then((res) => {
+            console.log(res);
+            return this.render(res.data);
+          });
+      } catch (err) {
+        console.log(err);
+      }
     });
   }
 
@@ -58,21 +62,14 @@ class News {
     newsContainer.textContent = "";
     //render last news
     lastNews.forEach((news) => {
-      //get info
-      const slug = news.slug;
-      const img = news.photo.url;
-      const excerpt = news.excerpt;
-      const tags = news.tags;
-      const date = news.date;
-      const lastUpdate = news.lastUpdate;
       //create html card from  infos
       const cardHTML = this.template(
-        slug,
-        img,
-        excerpt,
-        tags,
-        date,
-        lastUpdate
+        news.title,
+        news.slug,
+        news.photo.url,
+        news.excerpt,
+        news.tags,
+        news.date
       );
       let cleanHTML = DOMPurify.sanitize(cardHTML);
       //add to DOM
@@ -82,7 +79,7 @@ class News {
     });
   }
 
-  template(slug, img, excerpt, tags, date, lastUpdate) {
+  template(title, slug, img, excerpt, tags, date) {
     //loop on tags to get list
     let tagList = "";
     tags.forEach((tag) => {
@@ -96,7 +93,7 @@ class News {
     //create card
     const card = `
       <div
-        class="min-h-[400px] w-full col-span-12 transition hover:-translate-y-2  bg-gray-100 dark:bg-slate-900 rounded px-6 py-4 m-2  flex flex-col justify-between"
+        class="min-h-[350px] w-full col-span-12 transition dark:bg-slate-700 dark:brightness-[0.885] bg-gray-100 rounded px-6 py-4 my-4 mx-0 flex flex-col justify-between"
       >
         <div>
             <img  role="link"
@@ -107,12 +104,12 @@ class News {
             />
             <h3 role="link"
             onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'"
-            class="cursor-pointer mt-3 mb-1  text-3xl dark:text-white tracking-wide">{{ post['title'] }}</h3>
+            class="cursor-pointer mt-3 mb-1  text-xl dark:text-white tracking-wide">${title}</h3>
         </div>
         <div>
             <div  role="link"
             onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'"
-            class="cursor-pointer min-h-[130px] mb-3 text-lg dark:text-gray-300 text-gray-600 pt-3">
+            class="cursor-pointer min-h-[100px] mb-3 dark:text-gray-300 text-gray-600 pt-3">
                 ${excerpt}
             </div>
             <div class="min-h-[75px] mt-2 flex flex-wrap justify-start items-end align-bottom">
@@ -121,13 +118,8 @@ class News {
 
             <div class="mt-2 flex flex-col justify-start items-start">
                 <span class="text-xs  dark:text-gray-300 text-gray-600"
-                >Posted on : ${date}</span
-                >
-                {% if post["updatedAt"] %}
-                <span class="text-xs  dark:text-gray-300 text-gray-600"
-                >Last update : ${lastUpdate}</span
-                >
-                {%endif%}
+                >Posted on : ${date}
+                </span>
             </div>
         </div>
       </div>  `;

diff --git a/src/ui/templates/banner.html b/src/ui/templates/banner.html
@@ -16,10 +16,12 @@
     data-id="0"
     class="h-[3.5rem] overflow-hidden flex justify-center items-center w-full left-0 transition-all duration-700 absolute px-1 md:px-4 py-1 bg-secondary dark:brightness-95"
   >
-    <p class="mb-0 text-center text-xs xs:text-sm text-white">
+    <p
+      class="dark:brightness-125 mb-0 text-center text-xs xs:text-sm text-white"
+    >
       Need premium support ?
       <a
-        class="font-medium underline text-primary text-center hover:no-underline"
+        class="dark:brightness-125 font-medium underline text-gray-100 hover:no-underline"
         href="https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui"
       >
         Check BunkerWeb Panel
@@ -32,10 +34,12 @@
     data-id="1"
     class="h-[3.5rem] overflow-hidden left-full flex justify-center items-center w-full transition-all duration-700 absolute px-1 md:px-4 py-1 bg-secondary dark:brightness-95"
   >
-    <p class="mb-0 text-center text-xs xs:text-sm text-white">
+    <p
+      class="dark:brightness-125 mb-0 text-center text-xs xs:text-sm text-white"
+    >
       Try BunkerWeb on our
       <a
-        class="font-medium underline text-primary text-center hover:no-underline"
+        class="dark:brightness-125 font-medium underline text-gray-100 hover:no-underline"
         href="https://demo.bunkerweb.io/link/?utm_campaign=self&utm_source=ui"
       >
         demo wep app !
@@ -48,10 +52,12 @@
     data-id="2"
     class="h-[3.5rem] overflow-hidden left-full flex justify-center items-center w-full transition-all duration-700 absolute px-1 md:px-4 py-1 bg-secondary dark:brightness-95"
   >
-    <p class="mb-0 text-center text-xs xs:text-sm text-white">
+    <p
+      class="dark:brightness-125 mb-0 text-center text-xs xs:text-sm text-white"
+    >
       All informations about BunkerWeb on our
       <a
-        class="font-medium underline text-primary text-center hover:no-underline"
+        class="dark:brightness-125 font-medium underline text-gray-100 hover:no-underline"
         href="https://www.bunkerweb.io/?utm_campaign=self&utm_source=ui"
       >
         website !

diff --git a/src/ui/templates/menu.html b/src/ui/templates/menu.html
@@ -5,7 +5,7 @@
 <button
   type="button"
   data-sidebar-menu-toggle
-  class="transition-all scale-90 sm:scale-100 dark:brightness-95 dark:hover:brightness-105 hover:brightness-75 xl:hidden fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-32 sm:top-[4.5rem] right-5 sm:right-6 z-990 rounded-circle text-slate-700"
+  class="transition-all scale-90 sm:scale-100 dark:brightness-95 dark:hover:brightness-105 hover:brightness-75 xl:hidden fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-16 sm:top-[4.5rem] right-5 sm:right-6 z-990 rounded-circle text-slate-700"
 >
   <svg
     fill="#0D6EFD"

diff --git a/src/ui/templates/news.html b/src/ui/templates/news.html
@@ -113,14 +113,14 @@ <h5 class="mb-4 dark:text-white font-bold">JOIN THE NEWSLETTER</h5>
           </svg>
         </div>
       </div>
-      <label class="text-sm" for="newsletter-check">
+      <label class="text-sm dark:text-gray-300" for="newsletter-check">
         I've read and agree to the
         <a
           class="italic"
           href="https://www.bunkerity.com/privacy-policy/?utm_campaign=self&utm_source=ui"
           target="_blank"
-          >privacy policy</a
-        >
+          >privacy policy
+        </a>
       </label>
     </div>
     <button