From 6f62b4f9e11be32735f437d95fe265e6b6c6293f Mon Sep 17 00:00:00 2001 From: samaradel Date: Mon, 1 Jan 2024 15:14:09 +0200 Subject: [PATCH 01/45] fix navbar and update footer --- .../header/{_index copy.md => _index_copy.md} | 0 static/js/custom.js | 221 ++++++++------- templates/header.html | 225 ---------------- templates/oldheader.html | 252 ++++++++++++++++++ templates/partials/footer.html | 59 ++-- templates/partials/header copy.html | 230 ---------------- templates/partials/header.html | 58 ++-- templates/partials/header_copy.html | 0 8 files changed, 437 insertions(+), 608 deletions(-) rename content/header/{_index copy.md => _index_copy.md} (100%) delete mode 100644 templates/header.html create mode 100644 templates/oldheader.html delete mode 100644 templates/partials/header copy.html create mode 100644 templates/partials/header_copy.html diff --git a/content/header/_index copy.md b/content/header/_index_copy.md similarity index 100% rename from content/header/_index copy.md rename to content/header/_index_copy.md diff --git a/static/js/custom.js b/static/js/custom.js index 4871c3333..00448786b 100644 --- a/static/js/custom.js +++ b/static/js/custom.js @@ -1,123 +1,164 @@ - var displayedMenu = ""; var hamburgerShown = false; let width = screen.width; var isMobile = width < 1024; -function readingTime() { - let articles = document.querySelectorAll(".article"); - let times = document.querySelectorAll(".time"); - const wpm = 225; - let words; - for (var i = 0; i < articles.length; i++) { - words = articles[i].innerText.trim().split(/\s+/).length; - let time = Math.ceil(words / wpm); - times[i].innerText = `${time} minute read` - } -} -readingTime() - function toggleMenu(button) { - if (displayedMenu === button.id.split("-")[0]) { - button.className = button.className.replace(" text-gray-800 bg-stone-200 sm:bg-transparent", " text-gray-900"); - hideMenu(button.id.split("-")[0]); - button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90") - displayedMenu = ""; - } else { - showMenu(button.id.split("-")[0]); - button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0") - button.className = button.className.replace(" text-gray-900", " text-gray-800 bg-stone-200 sm:bg-transparent"); - displayedMenu = button.id.split("-")[0] + if (displayedMenu === button.id.split("-")[0]) { + button.className = button.className.replace( + " text-gray-800 bg-stone-200 sm:bg-transparent", + " text-gray-900" + ); + hideMenu(button.id.split("-")[0]); + button.lastElementChild.className = button.lastElementChild.className.replace( + "rotate-0", + "-rotate-90" + ); + displayedMenu = ""; + } else { + showMenu(button.id.split("-")[0]); + button.lastElementChild.className = button.lastElementChild.className.replace( + "-rotate-90", + "rotate-0" + ); + button.className = button.className.replace( + " text-gray-900", + " text-gray-800 bg-stone-200 sm:bg-transparent" + ); + displayedMenu = button.id.split("-")[0]; + } + + document.addEventListener("click", function (e) { + if (!button.id == e.target.id) { + hideMenu(button.id.split("-")[0]); + button.lastElementChild.className = button.lastElementChild.className.replace( + "rotate-0", + "-rotate-90" + ); + displayedMenu = ""; } + }); } function handleClick(button) { - if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { - toggleHamburger() - } - if (button.id.indexOf("menu") !== -1) { - toggleMenu(button) - } + if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { + toggleHamburger(); + } + if (button.id.indexOf("menu") !== -1) { + toggleMenu(button); + } } function toggleHamburger() { - if (hamburgerShown) { - hideHamburger(); - hamburgerShown = false; - } else { - showHamburger(); - hamburgerShown = true; - } + if (hamburgerShown) { + hideHamburger(); + hamburgerShown = false; + } else { + showHamburger(); + hamburgerShown = true; + } } function showMenu(menuName) { - var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu'); - var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu'); - var menuElement = document.getElementById(menuId) - menuElement.className = menuElement.className.replace(" hidden", ""); - let children = document.querySelectorAll('.nav_menu') - for (let i = 0; i < children.length; i++) { - if (menuElement !== children[i]) { - let btnId = `${children[i].id}-btn`; - let btn = document.getElementById(btnId); - if (btn && !children[i].classList.contains('hidden')) { - children[i].classList.add('hidden') - btn.lastElementChild.classList.replace("rotate-0", "-rotate-90") - } - } + var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu"); + var menuBtnId = menuName + (isMobile ? "-mobile-menu" : "-menu"); + var menuElement = document.getElementById(menuId); + menuElement.className = menuElement.className.replace(" hidden", ""); + let children = document.querySelectorAll(".nav_menu"); + for (let i = 0; i < children.length; i++) { + if (menuElement !== children[i]) { + let btnId = `${children[i].id}-btn`; + let btn = document.getElementById(btnId); + if (btn && !children[i].classList.contains("hidden")) { + children[i].classList.add("hidden"); + btn.lastElementChild.classList.replace("rotate-0", "-rotate-90"); + } } - setTimeout(function () { - menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); - }, 10); + } + setTimeout(function () { + menuElement.className = menuElement.className.replace( + "duration-200 ease-in opacity-0 -translate-y-1", + "duration-150 ease-out opacity-1 -translate-y-0" + ); + }, 10); } function hideMenu(menuName) { - var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu'); - var menuElement = document.getElementById(menuId) - menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1"); - setTimeout(function () { - menuElement.className = menuElement.className + " hidden" - }, 300); + var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu"); + var menuElement = document.getElementById(menuId); + var btnId = `${menuElement.id}-btn`; + let btn = document.getElementById(btnId); + menuElement.className = menuElement.className.replace( + "duration-150 ease-out opacity-1 -translate-y-0", + "duration-200 ease-in opacity-0 -translate-y-1" + ); + btn.lastElementChild.className = btn.lastElementChild.className.replace( + "rotate-0", + "-rotate-90" + ); + setTimeout(function () { + if (!menuElement.classList.contains("hidden")) { + menuElement.classList.add("hidden"); + } + }, 300); } function showHamburger() { - document.getElementById('header-container').className = "overflow-hidden"; - document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right"; - document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"; - document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"; + document.getElementById("header-container").className = "overflow-hidden"; + document.getElementById("hamburger").className = + "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right"; + document.getElementById("hamburger-btn").className = + "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"; + document.getElementById("close-hamburger-btn").className = + "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"; } function hideHamburger() { - document.getElementById('header-container').className = ""; - document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden"; - document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"; - document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"; - if (displayedMenu !== "") { - hideMenu(displayedMenu); - } + document.getElementById("header-container").className = ""; + document.getElementById("hamburger").className = + "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden"; + document.getElementById("hamburger-btn").className = + "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"; + document.getElementById("close-hamburger-btn").className = + "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"; + if (displayedMenu !== "") { + hideMenu(displayedMenu); + } } + function toggleFilter() { - var filterMenu = document.getElementById("filter-menu") - if (filterMenu.className.includes("hidden")) { - filterMenu.className = filterMenu.className.replace("hidden", " ") - } else { - filterMenu.className = filterMenu.className + " hidden" - } + var filterMenu = document.getElementById("filter-menu"); + if (filterMenu.className.includes("hidden")) { + filterMenu.className = filterMenu.className.replace("hidden", " "); + } else { + filterMenu.className = filterMenu.className + " hidden"; + } } window.onload = function () { - let elements = document.getElementsByTagName("button"); - let buttons = [...elements] + let elements = document.getElementsByTagName("button"); + let buttons = [...elements]; - buttons.forEach((button) => { - button.addEventListener('click', function () { - handleClick(button) - }); - }) - - document.getElementById("filter-btn").addEventListener('click', toggleFilter); - document.getElementById("mobile-learn-btn").addEventListener('click', toggleMenu); -} + buttons.forEach((button) => { + button.addEventListener("click", function () { + handleClick(button); + }); + }); +}; function openInNewTab(url) { - window.open(url, '_blank').focus() -} \ No newline at end of file + window.open(url, "_blank").focus(); +} + +function readingTime() { + let articles = document.querySelectorAll(".article"); + let times = document.querySelectorAll(".time"); + const wpm = 225; + let words; + for (var i = 0; i < articles.length; i++) { + words = articles[i].innerText.trim().split(/\s+/).length; + let time = Math.ceil(words / wpm); + times[i].innerText = `${time} minute read`; + } +} +readingTime(); +document.getElementById("year").innerHTML = new Date().getFullYear(); diff --git a/templates/header.html b/templates/header.html deleted file mode 100644 index e8daba4e0..000000000 --- a/templates/header.html +++ /dev/null @@ -1,225 +0,0 @@ - - - - - - -{% set section = get_section(path="_index.md") %} -{% set subsections_str = section.subsections | join(sep=" ") %} -{% set logo_path = get_url(path=section.extra.logo_path | default(value='')) %} - -{% if "header/_index.md" in subsections_str %} - {% set section = get_section(path="header/_index.md") %} - {% set header_items = section.content | safe | split(pat="
  • ") %} - {% include "partials/header_custom.html" %} -{% else %} -
    - {% set header_class = config.extra.header_class | default(value='') %} -
    -
    -
    -
    - - FreeFlow Logo - -
    -
    - - -
    - -
    -
    - {% for subsection in section.subsections %} - {% if subsection == "footer/_index.md" %} {% continue %} {% endif %} - {% set submenu_id = subsection ~ "-menu" | slugify %} - - - - {% endfor %} - - - - - - -
    - -{% endif %} - - diff --git a/templates/oldheader.html b/templates/oldheader.html new file mode 100644 index 000000000..c62d9657f --- /dev/null +++ b/templates/oldheader.html @@ -0,0 +1,252 @@ + + + + +{% set section = get_section(path="_index.md") %} +{% set subsections_str = section.subsections | join(sep=" ") %} +{% set logo_path = get_url(path=section.extra.logo_path | default(value='')) %} + +{% if "header/_index.md" in subsections_str %} + {% set section = get_section(path="header/_index.md") %} + {% set header_items = section.content | safe | split(pat=" +
  • + ") %} + {% include "partials/header_custom.html" %} +{% else %} +
    + {% set header_class = config.extra.header_class | default(value='') %} +
    +
    +
    +
    + + FreeFlow Logo + +
    +
    + + +
    + +
    +
    + {% for subsection in section.subsections %} + {% if subsection == "footer/_index.md" %} {% continue %} {% endif %} + {% set submenu_id = subsection ~ "-menu" | slugify %} + + {% endfor %} + + +
    + {% endif %} diff --git a/templates/partials/footer.html b/templates/partials/footer.html index 9560dd4f0..344e1b6aa 100644 --- a/templates/partials/footer.html +++ b/templates/partials/footer.html @@ -2,43 +2,36 @@ Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin. Read the documentation to get started: https://tailwindui.com/documentation --> - {%- set section = get_section(path="footer/_index.md") %} {%- set logoPath = section.extra.logoPath %} - - + +
    -
    -
    -
    - ThreeFold Logo -

    - {{section.description}} -

    - {% include "partials/socialLinks.html" %} +
    +
    +
    + ThreeFold Logo +

    + {{section.description}} +

    + {% include "partials/socialLinks.html" %} +
    +
    + {{ section.content | safe }} +
    +
    +
    +

    + © + + ThreeFold, All rights reserved. + Terms & Conditions | + Privacy Policy +

    +
    - -
    - {{ section.content | safe }} -
    - -
    -
    -

    - © 2023 ThreeFold, All rights reserved. - Terms & Conditions | - Privacy Policy -

    - -
    - - - - -
    - - - \ No newline at end of file + + diff --git a/templates/partials/header copy.html b/templates/partials/header copy.html deleted file mode 100644 index dedbd6541..000000000 --- a/templates/partials/header copy.html +++ /dev/null @@ -1,230 +0,0 @@ - - - - -{%- set section = get_section(path="header/_index.md") %} -{% set header_items = section.content | safe | split(pat="
  • ") %} - -
    -
    -
    -
    -
    - - Ourworld Logo - -
    -
    - - -
    -
    • ") %} - {% set header_label = header_arr[0] %} - {% if ' - {{link_label}} - - {% else %} -
    - {% set button_id = header_label ~ "-menu-btn" | slugify %} - -
    - - {% endif %} -{% endif %} -{% endfor %} - - - - - - -{% for header_item in header_items %} -{% if not loop.first %} - {% set header_arr = header_item | split(pat="") %} - {% set header_label = header_arr[0] %} - {% set header_menu = header_arr[1] %} - {% set menu_id = header_label ~ "-menu" | slugify %} - - - - -{% endif %} -{% endfor %} - - - - - - - diff --git a/templates/partials/header.html b/templates/partials/header.html index 7d53c5bea..02a3a4e51 100644 --- a/templates/partials/header.html +++ b/templates/partials/header.html @@ -26,36 +26,34 @@