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() { init() {
window.addEventListener("load", async () => { window.addEventListener("load", () => {
try { try {
const res = await fetch("https://www.bunkerweb.io/api/posts/0/2", { fetch("https://www.bunkerweb.io/api/posts/0/1")
headers: { .then((res) => {
method: "GET", return res.json();
}, })
}); .then((res) => {
return await this.render(res); console.log(res);
} catch (err) {} return this.render(res.data);
});
} catch (err) {
console.log(err);
}
}); });
} }
@ -58,21 +62,14 @@ class News {
newsContainer.textContent = ""; newsContainer.textContent = "";
//render last news //render last news
lastNews.forEach((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 //create html card from infos
const cardHTML = this.template( const cardHTML = this.template(
slug, news.title,
img, news.slug,
excerpt, news.photo.url,
tags, news.excerpt,
date, news.tags,
lastUpdate news.date
); );
let cleanHTML = DOMPurify.sanitize(cardHTML); let cleanHTML = DOMPurify.sanitize(cardHTML);
//add to DOM //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 //loop on tags to get list
let tagList = ""; let tagList = "";
tags.forEach((tag) => { tags.forEach((tag) => {
@ -96,7 +93,7 @@ class News {
//create card //create card
const card = ` const card = `
<div <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> <div>
<img role="link" <img role="link"
@ -107,12 +104,12 @@ class News {
/> />
<h3 role="link" <h3 role="link"
onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'" 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> <div>
<div role="link" <div role="link"
onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'" 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} ${excerpt}
</div> </div>
<div class="min-h-[75px] mt-2 flex flex-wrap justify-start items-end align-bottom"> <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"> <div class="mt-2 flex flex-col justify-start items-start">
<span class="text-xs dark:text-gray-300 text-gray-600" <span class="text-xs dark:text-gray-300 text-gray-600"
>Posted on : ${date}</span >Posted on : ${date}
> </span>
{% if post["updatedAt"] %}
<span class="text-xs dark:text-gray-300 text-gray-600"
>Last update : ${lastUpdate}</span
>
{%endif%}
</div> </div>
</div> </div>
</div> `; </div> `;

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

@ -16,10 +16,12 @@
data-id="0" 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" 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 ? Need premium support ?
<a <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" href="https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui"
> >
Check BunkerWeb Panel Check BunkerWeb Panel
@ -32,10 +34,12 @@
data-id="1" 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" 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 Try BunkerWeb on our
<a <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" href="https://demo.bunkerweb.io/link/?utm_campaign=self&utm_source=ui"
> >
demo wep app ! demo wep app !
@ -48,10 +52,12 @@
data-id="2" 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" 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 All informations about BunkerWeb on our
<a <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" href="https://www.bunkerweb.io/?utm_campaign=self&utm_source=ui"
> >
website ! website !

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

@ -5,7 +5,7 @@
<button <button
type="button" type="button"
data-sidebar-menu-toggle 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 <svg
fill="#0D6EFD" fill="#0D6EFD"

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

@ -113,14 +113,14 @@
</svg> </svg>
</div> </div>
</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 I've read and agree to the
<a <a
class="italic" class="italic"
href="https://www.bunkerity.com/privacy-policy/?utm_campaign=self&utm_source=ui" href="https://www.bunkerity.com/privacy-policy/?utm_campaign=self&utm_source=ui"
target="_blank" target="_blank"
>privacy policy</a >privacy policy
> </a>
</label> </label>
</div> </div>
<button <button