librewolf
/
bunkerized-nginx
mirror of https://github.com/bunkerity/bunkerized-nginx
4
0
Fork 1
Code Issues Projects Releases Wiki Activity

fix news + enhance style 

*fetch news working + enhance light and darkmode
*fix menu float btn position
*enhance newsletter form darkmode
*enhance banner style
This commit is contained in:
Jordan Blasenhauer 2023-12-13 17:45:15 +01:00
parent ed06c513c8
commit 549bbe170d
5 changed files with 41 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ui/static/css/dashboard.css
View File

File diff suppressed because one or more lines are too long

56
src/ui/static/js/global.js
View File

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

18
src/ui/templates/banner.html vendored
View File

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

2
src/ui/templates/menu.html vendored
View File

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

6
src/ui/templates/news.html vendored
View File

@ -113,14 +113,14 @@
</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